Adding color boxes to choose product variants

Site URL: https://www.seanhoyt.com/giftshop/magnolia-pillows

Hello programmers,

In the commerce settings, I can add variant columns for things like shirt colors, shirt size, etc. I'm attempting to make "color" easier to choose for the visitor by reading the colors and representing them as colored, selectable boxes below the drop-down selector. I have most of it working except for the trigger to change the variant image. 

Using jQuery to: 

• read the Select options (done)
• make squares, style them with the color (done)
• add links to the color squares that change the select option and select text (done)
• change the color square focus based on the normal option selections (done)
• trigger the variant image change (I'M STUCK HERE)

What triggers the listener that fades in the correct variant image? I can confirm that the 'data-text' are changing to the correct color names. 

https://www.seanhoyt.com/giftshop/magnolia-pillows

Thanks all! 

Sean

Screen Recording 2020-05-04 at 1.53.08 PM.mov

You can buy this plugin & use/research ☠️

23 minutes ago, tuanphan said:

You can buy this plugin & use/research ☠️

That seems to have the very same issue with updating/changing the variant image. 

Ok, got it. I was firing the jquery change() and didn't realize it was looking for me to make my own change code instead of triggering the listeners for the select created by squarespace. 

    document.querySelector("select[data-variant-option-name='Color']").dispatchEvent(new Event("change")); 

Works now. 

On 5/4/2020 at 10:02 PM, seanhoyt said:

Site URL: https://www.seanhoyt.com/giftshop/magnolia-pillows

Hello programmers,

In the commerce settings, I can add variant columns for things like shirt colors, shirt size, etc. I'm attempting to make "color" easier to choose for the visitor by reading the colors and representing them as colored, selectable boxes below the drop-down selector. I have most of it working except for the trigger to change the variant image. 

Using jQuery to: 

• read the Select options (done)
• make squares, style them with the color (done)
• add links to the color squares that change the select option and select text (done)
• change the color square focus based on the normal option selections (done)
• trigger the variant image change (I'M STUCK HERE)

What triggers the listener that fades in the correct variant image? I can confirm that the 'data-text' are changing to the correct color names. 

https://www.seanhoyt.com/giftshop/magnolia-pillows

Thanks all! 

Sean

Screen Recording 2020-05-04 at 1.53.08 PM.mov 16.24 MB · 51 downloads

I am looking to do the same on a website that i'll be building soon. I am not huge on coding but can manage a little. How do I get the jQuery / guide for this? Would really appreciate any help :)  

On 12/22/2020 at 6:34 PM, TSW said:

I am looking to do the same on a website that i'll be building soon. I am not huge on coding but can manage a little. How do I get the jQuery / guide for this? Would really appreciate any help :)  

You need to know JS code to do this. Or use plugin I suggested above.

If you haven't received an answer yet, you can post on some FB groups
+ Squarespace Customization Resource Groups
+ Squarespace Community
+ Squarespace Entrepreneur
+ Squarespace Rockstars

Hey @tuanphan! Does this mean there is no code available to add this feature?

Ultimately I would like to color product variants to look like this: 

Check Hood Cotton Blend Hoodie in Black - Men | Burberry® Official

@seanhoyt If you can help me with the code that can be added to Code Injection/CSS would be soo helpful!

Thanks man

On 1/29/2022 at 4:26 PM, ArtSpeaks said:

Hey @tuanphan! Does this mean there is no code available to add this feature?

Ultimately I would like to color product variants to look like this: 

Check Hood Cotton Blend Hoodie in Black - Men | Burberry® Official

 

@seanhoyt If you can help me with the code that can be added to Code Injection/CSS would be soo helpful!

Thanks man

Did you ever find a way to do this?

I believe I did get it working with that code above but I have abandoned Squarespace ecommerce and now use Webflow. It should be something native to Squarespace by now but it's not which is always surprising to me because it's obvious that Squarespace has talented programmers and managers.