"Get customers to choose an option" - successfully followed tutorial, now all products unavailable

[dannnn77]

I followed the tutorial "Get customers to choose an option"  and was successful in getting the "Pick a ..." option to show up in the dropdown menu by default, while displaying the featured product image, and changing to the variant photo when a variant was selected. But now all variant combinations show the product as "unavailable". If the page is refreshed the button changes to add to cart, but obviously this is less than ideal.

How can I force a refresh when a customer selects their variant to enable the add to cart button?

Support won't help since the code has been changed from the default due to adding a couple of apps, google tag, etc.

[dannnn77]

bump. any kind souls out there wanna help this old man figure this out?

[diego_ezfy]

Hello,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

Kind regards,
Diego

[dannnn77]

Hey Diego,

Thank you so much for responding! The problem is, if I enact the code changes then every single product in my store shows as unavailable, even after a customer chooses their variant, so I am essentially closing up shop every time I try to work on this. I'm willing to do that for a brief period, if you need to play around with it live, but I'd rather do it just for a few seconds and take some screenshots for you if there's something that you wanted to get a peek at.

Sorry for being so difficult, please let me know what I can do to help you help me.

Dan

[dannnn77]

Of course, Diego, if you're available now, I realize that the easiest course of action would be to make the code changes for you to play with, but I understand that you're likely as busy as the rest of us 🙂 

[diego_ezfy]

@dannnn77 

Make sure you work on an offline/unpublished theme. Just click on "actions" > "duplicate". The only theme that is public (by "public" I mean "visible to your customers") is the one at the top, with the "customize" button in green. 

Once you have your "offline/unpublished" theme available to play around with, please read this blog post to learn how you can share it with us so we can help you. 

Kind regards,
Diego

[dannnn77]

https://yz297gmz0ugvto2g-22096359.shopifypreview.com

[diego_ezfy]

@dannnn77 



1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<script>
function fixAtc(){

function _isProductPage() {
return /product/.test(window.location.href);
}

if (!_isProductPage()){return}





var $options = document.querySelectorAll(`.single-option-selector`);

if (!$options){return}

for (var each of $options){

console.log(each.value);

each.addEventListener('change', function(){
var $atc = document.querySelector(`#AddToCart.bold_clone`);
if ([...$options].filter(e => e.value.trim() !== '').length === $options.length){
$atc.removeAttribute('disabled');
$atc.classList.remove('disabled');
$atc.textContent = 'Add to Cart';
} else{

$atc.setAttribute('disabled');
$atc.classList.add('disabled');
$atc.textContent = 'Unavailable';

}


});


}

}

fixAtc()
</script>

Keep in mind that when you add to cart it will redirect you to the original URL and won't show the original items you've added to cart. This is not a bug, it's simply because you're on an offline theme.

Please let me know whether it works.

Kind regards,
Diego

[dannnn77]

Pasted the code above the /body tag and saved the changes, but no change i'm afraid. Even tried publishing it, just in case, but add to cart button will not replace unavailable button unless the page is refreshed

[diego_ezfy]

@dannnn77 

There was a typo in my code, please try again.

[dannnn77]

no joy

[diego_ezfy]

Can you send a screenshot of where you pasted the code, please? And also the URL you're trying it from.

[dannnn77]

Here you go. I've tried a few different products to be sure, and they all seem to act the same way, but here's one for example:

https://www.gotithere.com/collections/americana/products/american-flag-5-panel-canvas-print-wall-art... 

would you like me to post my theme.liquid file?

[dannnn77]

anyone have any further thoughts on this?

[dannnn77]

bumping this post because this is still a major issue for us. Anybody willing to help?

[dannnn77]

Ok, let me rephrase that:

Anybody willing to help... for money?