"Unavailable" won't switch to "add to cart"

MotherByNature
Tourist
4 0 9

I followed this tutorial:

https://shopify.dev/tutorials/customize-theme-how-to-add-a-pick-an-option-to-drop-downs

This allowed me to have a default photo appear when customers land on a product page, rather than the first available variant. 

Part of the tutorial had me change the "Unavailable" button text to "Make a selection". That makes sense.

But now, even after a variant is fully selected, the button still just says "make a selection". It never changes to "add to cart". It appears greyed out. 

You actually can click on it, and it adds the item to the cart. But most customers wouldn't try that... 

I've also discovered that if you refresh the page after selecting a variant, THEN the add to cart button appears. 

This isn't happening for all my products. Some of them still have the "add to cart" button by default when you first land on the product page. I'm not sure yet what differentiates those products from the ones with "make a selection," something to do with the available variants I'm sure.

What do I need to do to fix this?

Edited to add: On further experimentation, this appears to be the problematic code:

$(document).ready(function() {
if( typeof(productOptions ) != "undefined" ){
for(i=0;i<productOptions.length;i++) {
$('.single-option-selector:eq('+ i +')')
.filter(function() {
return $(this).find('option').length > 1
})
.prepend('<option value="">Pick a ' + productOptions[i][i] + '</option>')
.val('')
.trigger('change');
}
}
});

I added that to the bottom of theme.js in Assets as instructed by the tutorial. When that code is there, no variant is pre-selected (yay!) but the add to cart button does not appear after a selection is made (boo). When I *delete* that code, the add to cart button shows up (yay) but it's because the first variant is automatically selected (boo). 

0 Likes