Swatches Options (Color/Colour) Chart

[Gpoint]

Hi All,

So I have a site that im building that has many products with many different colours.
I want to have an options menu that shows off the colours in a grid like way where all the colours (Swatches) as images are the options.

So when the user clicks the coloured image they then select the option that goes with that product.

I have taken a photo of what i would like to achieve from a website.... that i cant post a link to.

How would I achieve this?

If you could get back to me as soon as possible, that would be great.

thanks in advance

[eCommerce Core]

This is possible, however will require custom work on controller and template. Are you a developer?

[Gpoint]

I am, but only to a more moderate level of knowledge. But im sure ill be ok.

[Gpoint]

So what do I need to change in the code.

[eCommerce Core]

This is a controller for the product page:
https://github.com/abantecart/abantecart-src/blob/master/public_html/storefront/controller/pages/product/product.php

You can locate code on line 380:

Code Select Expand

foreach($product_options as $option){ ...

You need to identify option and option value ids and add some identify for each color to be shown on the template.

Template is here:
https://github.com/abantecart/abantecart-src/blob/master/public_html/storefront/view/default/template/pages/product/product.tpl

In the template, you can show your images based on option value id combination and on click set hidden input value for that option.

Note: there is already event in the template that will change main images on option value change. You can set up different product images to each option value and on color select images will change.

I think that is it.