Select product color option using swatch images

[markosolo]

Not sure if this is an add on or if possible doing some hacking... instead of choosing a product color option using radio, select or checkbox I would like to use small 30px X 30px images of red, blue, black etc.that customers could click on to select a color. I've experimented converting a radio list using some CSS but things got messy. If anyone has any ideas that would be great!

[bsmither]

There is a new HTML5 input type="color" that, depending on browser support, will show an entire color wheel -- no means have been found to limit the colors available.

So, in a drop-down selector, one can add style="background-color: {$value.value_name};", for example red, to the <option> tag. But you would need some javascript to copy the selected color into the <select> tag.

Of course, this would only work on drop-down selectors that offer choices of named colors, and any other drop-down selector that offers non-color-based choices might produce strange effects.

[markosolo]

Thanks bsmither. The image below will make more sense on what I am would like to achieve.  Probably requires major surgery but might be a good idea for a plugin.

[bsmither]

The trick with this is to identify somehow that this option choice type should be shown as a collection of colored squares.

We currently have nine option choice types, and are listed in /classes/catalogue.class.php, lines 36-44.

I agree that a collection of radio buttons can be CSS reconfigured to show as a set of colored boxes.

This one can be simplified:
https://codepen.io/nikkipantony/pen/wpPGZp

Or this one:
https://codepen.io/rauldronca/pen/EWLeMz

 

[markosolo]

Thanks for pointing me in the right direction! By the way, over the past year I have tried just about ALL of the carts out there and I am back to cubecart.

[markz]

Hi (CubeCart newbie here), I'm just wondering if you managed to find a decent mod for this? I've found a simple way to turn radio buttons into squares with text and coloured backgrounds, but only with one colour for BG and another for hover, clicked etc. It would be great to have colour options as boxes.

Thanks.

[bsmither]

Can you elaborate on what difficulty you are experiencing, and what you eventually want to see?

Are the CodePen examples mentioned above not suitable?

[markz]

Hi, thanks for responding.

I'm trying achieve two things with this on a clothing site:

1. On a product page, being able to choose a colour option with a coloured box, using the radio button method.

2. When searching, being able to choose colours to filter a product search, would require a checkbox method for multiple options.

I have already managed to get the product page size option set up with radio buttons that appear as boxes using CSS.

It's not too difficult to change the appearance of all the radio button options together, but to get each option to look different (background-color) is the issue. I'm guessing I need to alter the code within {foreach... } ... {/foreach} section of the element.product.options.php file with a "style" attribute variable, but I am not so experienced in this area so am fishing in the dark a bit here. Any pointers in the right direction would be much appreciated, or if there is an extra/plugin that already exists for this that would be very useful.

I have seen this achieved on one of the "Live sites" here:

https://www.thepantoffelshop.be/3-dames-pantoffels

Thanks again - Mark.

[bsmither]

Please take a look at this plugin:
https://www.cubecart.com/extensions/plugins/product-option-images

While it seems to suggest one can only apply it to one option group per product (occasionally, the description says option type, but it is group), the plugin may be a suitable substitute for point number one. In the meantime, let me work on implementing the second CodePen link above to the Foundation skin.

As for point number two, searching on option attributes (green, large, sandlewood) would be a complex, but interesting, capability.

[markz]

Thanks again for looking into this.

I'll have a look into that plugin, and would be interested in anything you come up with in your CodePen link.

I have also been looking at adapting the "Advanced Search" template and may have some milage in that, although oddly, when I put it into the the main.php template the "Manufacturer" search option disappears.

Will post any valuable progress I make here.

[havenswift-hosting]

21 hours ago, markz said:

2. When searching, being able to choose colours to filter a product search, would require a checkbox method for multiple options.

This can be very easily achieved using a plugin from @Noodleman https://www.cubecart.com/extensions/plugins/product-filters-filter-categories-and-build-menus-dynamically-using-product-metadata - we use this on a number of client sites and also on a couple of sites we run ourselves and it works extremely well

 

21 hours ago, bsmither said:

Please take a look at this plugin:  https://www.cubecart.com/extensions/plugins/product-option-images

This is our own plugin and would work well for you

Ian

[markz]

Hi Ian,

Thanks for your input.

Funnily enough, I was looking at those two plugins today, just had a look at @Noodleman's video.These plugins look both interesting and useful. However, it raises a bit of a dilemma for me in that I normally build sites with the MODX cms with either Foundation (my preference) or Bootstrap, and I can get an extension for that called Commerce that does everything I need for €299. So, along with the other few CubeCart plugins I would need, it brings me close to a similar price point, at which point I could go the MODX+Commerce route as I can work quickly and intuitively with that and could rebuild the skin that took me several days for CubeCart (due to the learning curve of understanding the logic and finding where everything is etc.) in a couple of hours in MODX.

The time I have spent with CubeCart wouldn't have been wasted though, as I have learnt a lot about it and quite possibly still have a use for it on another site. I marked up everything I did in the skin I've built, so have a good map for skin building now, and have a much better idea of its capabilities and feature-set.

Wiil have to weigh things up.

Thanks again - Mark.