Announcement

**garyhay** · 31-Dec-2002, 05:54 PM

You can use a image at the top of a page then have the product templates show the price and buy button.

I have something similar here but without the grid

http://www.concept-worldwide.com/aca...Rings_193.html

**da_mechanic** · 01-Jan-2003, 05:31 PM

thanks mate, I see what you're saying, but it's not quite what I wanted to acheive.

any more ideas?

one that I thought of was to have two separate drop down menus with three options for colour on each, but each drop down menu relates to a different size. I thought a checkbox that only allows one of the drop down menus to be used.

I have a feeling that this would be a bit too complicated for my site visitors and would probably end up with people ordering the wrong size by mistake.

any other ideas?

thanks

**NormanRouxel** · 02-Jan-2003, 04:18 AM

You can do exactly what you want but it's a little tricky and you have to be careful that the colours, sizes and prices match exactly as they are entered in two places. I've also attached the howto as it may get munged by the forum.

Here's a howto############################################################################################

How to make an Actinic V6 selection button matrix for a list of colours and sizes, all with
different prices, display the appropriate price on each button.

############################################################################################

Make a copy of Act_ProductLine.html and call it (say) Table_ProductLine.html

Edit Table_ProductLine.html and replace the line:-

<Actinic:ACTIONS>NETQUOTEVAR:ADDTOCARTBUTTON</Actinic:ACTIONS>

with the following code:-

<Actinic:ACTIONS>

<script language=JavaScript>
var ref = 'NETQUOTEVAR:PRODUCTREFERENCE';
var cols = colours.length;
var rows = sizes.length;
document.write('<input type=hidden name="v_' + ref + '_3" value="on"><table><tr align=center><td></td>');
for ( var i = 0; i < cols; i++ )
{
document.write('<td>' + colours[i] + '</td>');
}
for ( var j = 0; j < rows; j++ )
{
document.write('<tr><td>' + sizes[j] + '</td>');
for ( i = 0; i < cols; i++ )
{
document.write('<td><input type=submit name="vb_' + ref + '_1_' + (i + 1) + '_2_' + (j + 1) +
'" value="�' + prices[(i * rows) + j] + ' - Add to Cart"></td>');
}
document.write('</tr>');
}
document.write('</table>');
</script>
</Actinic:ACTIONS>

############################################################################################

Now create your product with zero price.
Select Table_ProductLine.html as the Product Layout.
Give it a single component called (say) Info.
Give this component an Attribute called Colour.
Give that Attribute choices for each colour (say; Red, Blue).
Give this component another Attribute called Size.
Give that Attribute choices for each size (say; Small, Medium, Large).

Now double click the component, choose Permutations, Fill List, and fill in the corresponding prices for each combination.
OK out, double click the product and you'll now have a Components tab.
Under Components, select Sum of Component Prices.

Finally put the following code into the Full Description box (under all your own text):-

!!<<script language=JavaScript>
var colours = ['Red','Blue'];
var sizes = ['Small','Medium','Large'];
var prices = ['1.00','2.00','3.00','4.00','5.00','6.00'];
</script>>!!

You have to alter the colour, size and price descriptions to match your product.
Only change the bits within the square brackets. All entries need 'quotes' as shown.
The prices list is in pounds and should follow the sequence Colour1-Size1, Size2, Size3; Colour2-Size1, Size2, Size3.
You can have any number of colours and sizes and the button matrix will be automatically built to suit.

Norman

Attached Files

selectionbuttonmatrixwithprices.txt (2.7 KB, 368 views)

**da_mechanic** · 02-Jan-2003, 04:10 PM

Thanks Norman, that sounds great I will give it a try now and let you how how I got on.

looks pretty sweet though!

thanks

**NormanRouxel** · 03-Jan-2003, 02:21 AM

I tinkered with the patch and have altered it to use a more intuitive method of following the colour name with it's corresponding prices:-

############################################################################################

How to make an Actinic V6 selection button matrix for a list of colours and sizes, all with
different prices, display the appropriate price on each button.

############################################################################################

Make a copy of Act_ProductLine.html and call it (say) Table_ProductLine.html

Edit Table_ProductLine.html and replace the line:-

<Actinic:ACTIONS>NETQUOTEVAR:ADDTOCARTBUTTON</Actinic:ACTIONS>

with the following code:-

<Actinic:ACTIONS>
<script language=JavaScript>
var ref = 'NETQUOTEVAR:PRODUCTREFERENCE';
var addtocart = ' - Add';
var rows = sizes.length;
var cols = colours.length / (rows + 1);
document.write('<input type=hidden name="v_' + ref + '_3" value="on"><table><tr align=center><td></td>');
for ( var i = 0; i < cols; i++ )
{
document.write('<td>' + colours[(rows + 1) * i] + '</td>');
}
for ( var j = 0; j < rows; j++ )
{
document.write('<tr><td>' + sizes[j] + '</td>');
for ( i = 0; i < cols; i++ )
{
document.write('<td><input type=submit name="vb_' + ref + '_1_' + (i + 1) + '_2_' + (j + 1) +
'" value="�' + colours[(i * (rows + 1)) + j + 1] + addtocart + '"></td>');
}
document.write('</tr>');
}
document.write('</table>');
</script></Actinic:ACTIONS>

############################################################################################

You may want to change the line "var addtocart = ' - Add';" above to suit your needs.

Now create your product with zero price.
Select Table_ProductLine.html as the Product Layout.
Give it a single component called (say) Info.
Give this component an Attribute called Colour.
Give that Attribute choices for each colour (say; Red, Green, Blue).
Give this component another Attribute called Size.
Give that Attribute choices for each size (say; Small, Large).

Now double click the component, choose Permutations, Fill List, and fill in the corresponding prices for each combination.
OK out, double click the product and you'll now have a Components tab.
Under Components, select Sum of Component Prices.

Finally put the following code into the Full Description box (under all your own text):-

!!<<script language=JavaScript>
var sizes = ['Small','Large'];
var colours = ['Red','1.00','2.00','Green','3.00','4.00','Blue','5.00','6.00'];
</script>>!!

You have to alter the colour, size and price descriptions to match your product.
Only change the bits within the square brackets. All entries need 'quotes' as shown.
The prices are pounds and should follow the sequence:-
Colour1, Price for Size1, Price for Size2, Colour2, Price for Size1, Price for Size2, etc.
You can have any number of colours and sizes and the button matrix will be automatically built to suit.

Norman

Attached Files

selectionbuttonmatrixwithprices.txt (2.9 KB, 341 views)

**da_mechanic** · 03-Jan-2003, 02:42 PM

Hi Norman,
you are a star, thanks alot! You're scripting is exactly what I was trying to acheive!

I haven't tried the updated version yet, so I will let you know how I get on with it.

The only thing I am having a little trouble with is tweaking the spacing between the add buttons and the headings. I gues this is in the CSS file and I will have a fiddle.

Superb though!

thanks

**NormanRouxel** · 03-Jan-2003, 05:26 PM

If you look at the chunk of JavaScript that goes into the .html template you'll see the bits of HTML that generates the table that contains all the buttons and captions. You can tweak that to adjust spacing, padding, or whatever.

Another thought. If you wanted to do this visually it would also be easy to have a big image with a matrix of smaller images showing every size, colour and price (you'd add the price text to the image). You could also then set parts of this big picture to be the buy buttons, and have image map code kick of the appropriate Add to Cart selection. Have a look at

http://www.snowlines.co.uk/acatalog/...RS_NYMPHS.html

where you'll see something similar.

Norman.

Announcement

multiple attributes grid

multiple attributes grid

Comment

Comment

Comment

Comment

Comment

Comment

Comment