Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding color boxes to choose product variants


seanhoyt

Question

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

Edited by seanhoyt
Link to comment

5 answers to this question

Recommended Posts

  • 0

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. 

Link to comment
  • 0
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 :)  

Link to comment
  • 0
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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...