PDA

View Full Version : multiple attributes grid


da_mechanic
30-Dec-2002, 07:09 PM
Can anyone help me? I am creating a site using v6 of Catalogue. Most of my products are available in two sizes, and in three different colours. All of the options have different prices.

I like the idea of creating a grid similar to the one on page 45 of the user guide. But I need to be able to show the visitors how much each option costs. Having the same add to basket button for each combination, is not good enough. I would ideally like to be able to have 6 buttons each with different prices on or something similar that lets people know exactly how much my things cost before the add to basket. Any other solutions would be greatly appreciated.

Anyone got any ideas?

thanks

garyhay
31-Dec-2002, 04: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/acatalog/Concept_Jewellery_Silver_Russian_Wedding_and_Puzzle_Rings_193.html

da_mechanic
01-Jan-2003, 04: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, 03: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>
<!-- NETQUOTEVAR:ADDTOCARTBUTTON -->
<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

da_mechanic
02-Jan-2003, 03: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, 01: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><!-- NETQUOTEVAR:ADDTOCARTBUTTON -->
<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

da_mechanic
03-Jan-2003, 01: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, 04: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/Snowlines_Online-FISHING-FLY_SALMON-FLIES-BUZZERS_NYMPHS.html

where you'll see something similar.

Norman.