Color Swatches - very simple case
Thu Nov 18 2021 07:16:09 GMT+0000 (UTC)
Saved by
@PIzmAR
#html
#javascript
#liquid
<div class="swatches-wrapper">
{% assign colors = "Navy, Grey, Pink" %}
{% for option in product.options_with_values %}
{% for variant in product.variants %}
{% assign name = variant.title %}
{% assign stringSplit = name | remove: ' ' | split: '-' %}
{% for stringPart in stringSplit %}
{% if forloop.index == 1 %}
{% if colors contains stringPart %}
<div class="swatch-option {{stringPart}}" data-color="{{ variant.title }}" data-id="{{variant.id}}">
<span class="tooltip">{{ variant.title }}</span>
</div>
{%else%}
--2--
{%endif%}
{%endif%}
{% endfor %}
{% endfor %}
{% endfor %}
</div>
<script>
$('.swatch-option').click(function(){
$('.swatch-option').removeClass('active')
$(this).addClass('active');
});
</script>
content_copyCOPY
Pupnaps- for now it just shows swatches
Comments