Remove variables from single variant selector on product pages that are sold out
{% comment %}Place this at the bottom of the section/product.template.liquid file{% endcomment %}
{% if product.options.size == 1 %}
<script>
var product_variants_removed = [
{%- for variant in product.variants -%}
{%- unless variant.available -%}
'{{ variant.title }}',
{%- endunless -%}
{%- endfor -%}
];
</script>
{% endif %}
/* ALL OTHER THEMES - Place this at the bottom of assets/theme.js */
$( document ).ready(function() {
if( typeof product_variants_removed != undefined ) { // was there items to be removed?
var $addToCartForm = $('form[action="/cart/add"]');
if (window.MutationObserver && $addToCartForm.length) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
product_variants_removed.forEach(function(item){
$('.single-option-selector option').filter(function() { return $(this).text() === item; }).remove();
});
observer.disconnect();
});
observer.observe($addToCartForm[0], config);
$('.single-option-selector').trigger('change');
}
}
});
/* BROOKLYN THEME ONLY - Place this at the bottom of assets/theme.js */
$( document ).ready(function() {
$('single-option-selector__radio').trigger('change');
if( typeof product_variants_removed != undefined ) { // was there items to be removed?
var $addToCartForm = $('form[action="/cart/add"]');
if (window.MutationObserver && $addToCartForm.length) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
product_variants_removed.forEach(function(item){
$('#ProductSelect-option-size-'+item).remove();
$('label[for=ProductSelect-option-size-'+item+']').remove();
});
observer.disconnect();
});
observer.observe($addToCartForm[0], config);
$('.single-option-selector__radio').trigger('change');
}
}
});
/* NARRATIVE THEME ONLY - Place this at the bottom of custom.js */
$( document ).ready(function() {
if( typeof product_variants_removed != undefined ) { // was there items to be removed?
var $addToCartForm = $('form[action="/cart/add"]');
if (window.MutationObserver && $addToCartForm.length) {
var config = { childList: true, subtree: true };
product_variants_removed.forEach(function(item){
$('.single-option-selector option').filter(function() { return $(this).text() === item; }).remove();
});
}
}
});