Skip to content

Instantly share code, notes, and snippets.

@stephsharp
Last active December 25, 2015 09:59
Show Gist options
  • Save stephsharp/6958391 to your computer and use it in GitHub Desktop.
Save stephsharp/6958391 to your computer and use it in GitHub Desktop.
Sample code for Stack Overflow question about using colour swatches in a Shopify theme (http://stackoverflow.com/questions/19227823/how-can-i-create-smarter-swatches-for-a-shopify-theme)
...
var selectCallback = function(variant, selector) {
...
var selectedSize = jQuery('.size.options li.selected span').text();
if (selectedSize.length > 0) {
var variants = selector.product.variants;
var variantTitles = [];
var i;
for (i = 0; i < variants.length; i++) {
variantTitles.push(variants[i].title);
}
jQuery('.color.options li').each( function() {
var variantTitle = selectedSize + " / " + jQuery('div', this).text();
// if variantTitle is a valid variant & not sold out, remove unavailable class
var variantIndex = jQuery.inArray(variantTitle, variantTitles);
if (variantIndex != -1 && variants[variantIndex].available == true) {
jQuery('span', this).removeClass('unavailable');
}
// if not a valid variant or sold out, add unavailable class
else {
jQuery('span', this).addClass('unavailable');
}
});
}
};
...
<style>
...
.unavailable { opacity: 0.2; }
</style>
...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment