Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Convert variant dropdown into swatches, multiple-option-sollution
/**************************************************************| CONVERT VARIANT TO SWATCHES |*/
$(function() {
if($(".single-option-selector").length) {
$(".single-option-selector").each(function(i) {
var $thisSelect = $(this);
var $newClass = "js-option-selector-" + i;
var $newOptions = '<ul class="new-variant-swatchs">';
var $currentOption = $thisSelect.val();
$thisSelect.find("option").each(function() {
var $this = $(this);
var $optionText = $this.text();
var $optionVal = $this.val();
var $soldOut = $this.hasClass("is-soldout");
$newOptions += '<li class="new-variant-swatch js-new-variant-swatch' +
($currentOption == $optionVal ? ' is-active' : '') +
($soldOut ? ' is-soldout' : '') + '" data-val="' + $optionVal + '" data-select="' + $newClass + '">' +
$optionText +
'</li>';
});
$thisSelect.addClass("is-hidden").addClass($newClass).after($newOptions + '</ul>');
});
$(document).on("click", ".js-new-variant-swatch", function() {
if(!$(this).hasClass("is-soldout")) {
var $this = $(this);
var $select = $this.attr("data-select");
var $val = $this.attr("data-val");
var $parent = $this.parent("ul");
$('.' + $select).val($val).trigger("change");
$parent.children("li").removeClass("is-active");
$(this).addClass("is-active");
}
});
}
});
// VARIANT STUFF
.selector-wrapper {
vertical-align: middle;
overflow: hidden;
label {
text-transform: uppercase;
vertical-align: middle;
display: inline-block;
margin-top: 21px;
}
.new-variant-swatchs {
list-style: none;
padding: 0;
margin: 10px 0;
overflow: hidden;
display: inline-block;
vertical-align: middle;
float: right;
.new-variant-swatch {
display: inline-block;
vertical-align: middle;
height: 35px;
padding: 6px;
text-transform: uppercase;
margin: 3px;
text-align: center;
border: 2px solid #aaa;
min-width: 35px;
color: #aaa;
cursor: pointer;
&:hover { cursor: pointer; }
&.is-soldout:hover { cursor: default; }
&.is-soldout {
color: #eee;
border: 2px solid #eee;
background-color: #fff;
}
&.is-active {
color: #fff;
border: 2px solid #000;
background-color: #000;
}
}
}
}
{% comment %}
This snippet displays sizes
Usage:
{% include 'show-sizes' with product %}
Return:
no return
Required:
Must be called within product loop
{% endcomment %}
{% assign itemType = show-sizes %}
{% comment %}
CREATE A VARIANTS DROPDOWN IF THE PRODUCT HAS MORE THAN ONE VARIANT. THIS WILL BE HIDDEN BY CSS AND MANIPULATED BY JS
{% endcomment %}
{% if itemType.variants.size > 1 %}
<select name="id" id="variant-select-{{ itemType.id }}" class="is-hidden js-variant-select">
{% for variant in itemType.variants %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
<script>
$(function() {
new Shopify.OptionSelectors("variant-select-{{ itemType.id }}", { product: {{ product | json }} });
{% if itemType.available %}
{% assign found_one_in_stock = false %}
{% assign all_in_stock = true %}
{% for variant in itemType.variants %}
{% if variant.available %}
{% else %}
{% assign all_in_stock = false %}
$('#variant-select-{{ itemType.id }}-option-{{ forloop.index0 }}[value="{{ variant.options }}"]').addClass('is-soldout');
{% endif %}
{% if variant.available and found_one_in_stock == false %}
{% assign found_one_in_stock = true %}
{% for option in itemType.options %}
$('#variant-select-{{ itemType.id }}-option-{{ forloop.index0 }}').val({{ variant.options[forloop.index0] | json }}).trigger('change');
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}
});
</script>
{% comment %}
IF THE PRODUCT ONLY HAS ONE VARIANT, CREATE A HIDDEN INPUT WITH THE VARIANT ID. NOTE: NECESSARY FOR "ADD TO CART" TO WORK
{% endcomment %}
{% else %}
{% for variant in itemType.variants %}
<input type="hidden" name="id" class="is-hidden js-variant-select" value="{{ variant.id }}" data-variant-title="{{ variant.title }}" />
{% endfor %}
{% endif %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.