Custom JavaScript. Chrome is OK. But in other browsers, the code was suppressed.

wisitsaks
New Member
1 0 0

Here is my custom script, to hide the sold-out variants of the selected product.

// custom js
function hideSoldOut()
{
// product sold-out
const productJson = document.querySelectorAll('.product-is-unavailable');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
var current = productJson[i];
for (let n=0; n < 5; n++) current = current.parentNode;
//current.style.display = "none";
current.remove();
}
}

// variants sold-out
var p = $('div[id^="product-form-"]');
if (p) {
var data = jQuery.parseJSON($(p[0]).attr('data-product'));
if (data.variants) {
var sel = $('select.single-option-selector option');
$.each(data.variants, function( k, v ) {
if (v.available === false)
{
$('.single-option-selector').find('option').each(function() {
if (this.value==v.title)
{
$(this).hide();
console.log('sold-out title '+this.value);
}
});
$('#product-select-'+data.id+'product-template').find('option').each(function() {
if (this.value==v.id)
{
$(this).hide();
console.log('sold-out id '+this.value);
}
});
}
});
}
}
}

$( document ).ready(function() {
hideSoldOut();
});

 

I created and added it to theme.liquid.
In Chrome, it is working properly. But in other browsers, the script was suppressed. There is no script shown in other browser. This is my test link. The sold-out variants (the 107g) should be hidden.
https://jetitaliandeli.com/products/bottarga-di-muggine-in-baffe-170-180g

Could you please give me some advise?

0 Likes
David_Weru
Trailblazer
129 9 21

Hello, @wisitsaks 

This can also done in liquid.  If you'd like me to fix it in both js or liquid, please message me.

0 Likes