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

dannnn77
Excursionist
17 1 1

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.

Replies 15 (15)

dannnn77
Excursionist
17 1 1

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

diego_ezfy
Shopify Partner
2934 562 883

Hello,

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

Kind regards,
Diego

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

dannnn77
Excursionist
17 1 1

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
Excursionist
17 1 1

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
Shopify Partner
2934 562 883

@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. 

diego_ezfy_1-1612033679130.png

 

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

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

dannnn77
Excursionist
17 1 1
diego_ezfy
Shopify Partner
2934 562 883

@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

 

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

dannnn77
Excursionist
17 1 1

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
Shopify Partner
2934 562 883

@dannnn77 

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

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

dannnn77
Excursionist
17 1 1

no joy

diego_ezfy
Shopify Partner
2934 562 883

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

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

dannnn77
Excursionist
17 1 1

dannnn77_0-1612039759056.png

 

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
Excursionist
17 1 1

anyone have any further thoughts on this?

dannnn77
Excursionist
17 1 1

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

dannnn77
Excursionist
17 1 1

Ok, let me rephrase that:

 

Anybody willing to help... for money?