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

Posted (edited)

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 post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

You can buy this plugin & use/research ☠️

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

3 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 post

Create an account or sign in to comment

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


×
×
  • Create New...