d
Topic
Posts:
2
11 months ago

Color Swatches - 1 variant

I hope someone can help!!!  I have added in the code to make the variants show up as swatches (boxes) for the customer to select.  The problem is I have some items that only have one option (ex. necklace that is color gunmetal) and for these items the drop-down list shows, not a swatch button.  Here is what I added to product.liquid:


{% if product.available and product.variants.size > 1 %} <div id="swatches">{% include 'swatches' %}</div> {% endif %}

And this was added for what I thought would fix my problem:

// BEGIN SWATCHES
jQuery('.swatch li').click(function() {
  var optionValue = jQuery(this).attr('data-option-title'); // what have I just clicked on?
  jQuery(this).parents('.swatch').find('li').removeClass('selected'); // un-select all the buttons
  jQuery(this).addClass('selected'); // select the current one
  jQuery('.single-option-selector:contains(' + optionValue + ')').val(optionValue).trigger('change');
  return false;
});
// END SWATCHES
          
// BEGIN SWATCHES
jQuery('.swatch li').filter(function() { return jQuery(this).attr('data-option-title') === {{ variant.options[forloop.index0] | json }} }).addClass('selected');
// END SWATCHES

        });
    {% endif %}
    

 

Log in or sign up for an account to reply.

This thread has been closed! You will not be able to reply.