FROM CACHE - en_header

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

dannnn77
New Member
12 0 0

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
New Member
12 0 0

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

diego_ezfy
Shopify Partner
2791 526 714

Hello,

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

Kind regards,
Diego

dannnn77
New Member
12 0 0

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
New Member
12 0 0

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
2791 526 714

@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

diego_ezfy
Shopify Partner
2791 526 714

@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
New Member
12 0 0

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

dannnn77
New Member
12 0 0
diego_ezfy
Shopify Partner
2791 526 714

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

dannnn77
New Member
12 0 0

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
New Member
12 0 0

anyone have any further thoughts on this?

dannnn77
New Member
12 0 0

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

dannnn77
New Member
12 0 0

Ok, let me rephrase that:

 

Anybody willing to help... for money?