Jump to content
markosolo

Select product color option using swatch images

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

color-swatch-screen.jpg.3340187b71f11034ad354914bcb1142f.jpg

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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. 👍

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Are the CodePen examples mentioned above not suitable?

Share this post


Link to post
Share on other sites
Posted (edited)

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.

Edited by markz
typo

Share this post


Link to post
Share on other sites
Posted (edited)

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.

Edited by bsmither

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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:

This is our own plugin and would work well for you

Ian

Share this post


Link to post
Share on other sites
Posted (edited)

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.

 

Edited by markz

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...