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

dannnn77
New Member
10 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.

0 Likes
dannnn77
New Member
10 0 0

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

0 Likes

Hello,

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

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
dannnn77
New Member
10 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

0 Likes
dannnn77
New Member
10 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  

0 Likes

@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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes

@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

 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
dannnn77
New Member
10 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

0 Likes

@dannnn77 

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes