AbanteCart Community

Shopping Cart Operations => Support => General Support => Topic started by: Gpoint on January 13, 2016, 05:44:00 AM

Title: Swatches Options (Color/Colour) Chart
Post by: Gpoint on January 13, 2016, 05:44:00 AM

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

Title: Re: Swatches Options (Color/Colour) Chart
Post by: eCommerce Core on January 13, 2016, 07:58:27 AM

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

Title: Re: Swatches Options (Color/Colour) Chart
Post by: Gpoint on January 13, 2016, 07:59:53 AM

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

Title: Re: Swatches Options (Color/Colour) Chart
Post by: Gpoint on January 13, 2016, 08:14:31 AM

So what do I need to change in the code.

Title: Re: Swatches Options (Color/Colour) Chart
Post by: eCommerce Core on January 13, 2016, 09:53:09 AM

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]

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.