Page 1 of 1

Variant Product with swatches and 2+ options

Posted: Fri May 11, 2012 11:31 am
by jdarby
I'm wondering if anyone has ever setup a product page that is similar to this one in AbleCommerce?
http://store.hermanmiller.com/Products/ ... nd-Ottoman

Theirs has two options (Veneer, Material) and when the user selects each option, they change the image independently. It appears they use javascript on the page to accomplish this. I've tried setting something like this up as a test in AbleCommerce and haven't been able to. The problem being that you can only setup one image per swatch and you can't setup an image for your swatch combinations.

Let's take the following example:
Veneers: Oak, Maple
Materials: Leather, Cloth

I can only setup a main product image for each of those 4 options independently. What I would need would be an image for when a user chose the combo of Oak/Leather, Oak/Cloth, Maple/Leather, Maple/Cloth, etc.

Has anyone customized AbleCommerce to do this?

Re: Variant Product with swatches and 2+ options

Posted: Mon May 14, 2012 7:31 am
by jmestep
You could use some kind of pattern to name your swatches for each image, then use an adaptation of Able's ProductVariant.LoadForOptionList(int productId, int[] optionChoiceIds); to find the variant, then load the image based on the pattern you have set up.

Re: Variant Product with swatches and 2+ options

Posted: Mon May 14, 2012 8:07 am
by jdarby
jmestep wrote:You could use some kind of pattern to name your swatches for each image, then use an adaptation of Able's ProductVariant.LoadForOptionList(int productId, int[] optionChoiceIds); to find the variant, then load the image based on the pattern you have set up.
Something along these lines is what I sort of had in mind. Either way, the Able code has to be modified for this to work. Right now, I have something set up but each time a swatch is chosen, the main product image HAS to change because each swatch has its own image attached to it but that's exactly what it is coded to do, so I can't blame it for doing that.