Why can't I click the 'Buy Now' button on my store's product page?

[MaxCosta]

Hello everyone,

I have a major problem on this store: https://ta-sellerie.myshopify.com/ (access code: Tasellerie2023) which uses the "Shopify Marketplaces" application.

If you go to a product, you can't click on the "Buy Now" button, as if it were blocked.

However, when I'm in my theme editor, I can click and I get to the checkout.

Has anyone encountered this problem before?

Thanks in advance,

Best regards,

Max COSTA

[g33kgirl · Accepted solution]

The button is fixed now. It was missing the name property and classes which the javascript "add to cart" function needs to execute the click event on the add-to-cart button. 

Did you want it go to the cart or directly to the checkout?

[rossvor]

Theme code hides the original shopify's buy buttons section. And the payment button you are seeing is the element with a "onclick="document.querySelector('[data-testid]').click();" event listener defined.

The intent of the listener function seems to be redirect the "click" event to one of the elements in the shopify's original buy buttons section and let it handle it, but in this case '[data-testid]' selector is not narrow enough -- there's three elements matching that selector, so the result is that this code redirects the event to the first one it finds and that element happens to not have any event listeners doing anything useful. In the theme editor elements are probably loaded in a slightly different order and the first one happens to be the one you want, so it works there.

A solution would be narrow it down to match the relevant element (probably [data-testid="sheet-open-button"] is the one you want). But I do have to caution that in my opinion this could be a brittle solution -- Shopify could deploy a change at any moment and rename data-testid attribute which would break it again. I don't think hiding Shopify's buy buttons section is a great idea basically.

[MaxCosta]

Thank you very much, but I'm not sure I understood everything. I haven't made any specific changes, and what surprises me is that the button works in my theme editor.

What easy manipulation can I do to make my button active again in the front office?

Thanks in advance

[rossvor]

Try changing

onclick="document.querySelector('[data-testid]').click();

to 

onclick="document.querySelector('[data-testid=sheet-open-button]').click();"

But like I said before, I would try to figure out who is responsible in hiding the shopify buy buttons (is it a setting of some kind in your theme) and why. Because it seems a bit strange to purposefully use shopify dynamic buy buttons but then hide them and only use a single non dynamic button from it (why not just set up your own button to call the appropriate thing?)

[g33kgirl]

What are you trying to do with this click event: 

onclick="document.querySelector('[data-testid]').click();"

Are you trying to delegate the click event to Shopify dynamic buttons? What is the reason for that?

[g33kgirl]

Remove this line from your Add to Cart button and it should work:

onclick="document.querySelector('[data-testid]').click();"

[MaxCosta]

 I did remove the line of code in my button file but it still doesn't work on the front office :'(

[g33kgirl]

There seems to be a JS error on the product page:

On the product page, you have this code which is blocking the JS:

<script>
  document.getElementById("wk-close-contact").addEventListener('click', () => {
    document.getElementById('myModal').style.display: "none";
  })
</script>

It should be an equal sign, not a colon:

document.getElementById('myModal').style.display="none";

[MaxCosta]

Thank you very much for your help, but after rectifying the colon with the "=" sign, it doesn't change anything... I still can't click on my "buy now" button.

What seems strange is that in the theme editor I can click on it

Thanks in advance for your help,

[g33kgirl]

I'm assuming the button has been tampered with. Unfortunately, without looking at the code, it'd not be possible to tell you what's the issue.

It could be possible that one of the apps is conflicting with the button which is why it runs in the theme editor and not on the live website.

[MaxCosta]

I've checked but I can't find any application that conflicts with this button... Would it be possible for you to look in the code if you think you have an idea? The collaborator code is 3134

Thank you in advance...

[g33kgirl]

I have sent you a collaborator request.

[MaxCosta]

ok it's done!

thanks in advance 🙌

[g33kgirl · Accepted solution]

The button is fixed now. It was missing the name property and classes which the javascript "add to cart" function needs to execute the click event on the add-to-cart button. 

Did you want it go to the cart or directly to the checkout?

[MaxCosta]

Thank you very much! I'd like the "Buy Now" to go directly to checkout.
And I'd like the "Add to cart" to open the shopping cart, is that possible in your opinion?

Thanks again for your help.

[g33kgirl]

Your theme 'Flex' does support the cart drawer feature but there seems to be patches of missing code in your Shopify files. 

I can add the redirect to checkout for the Buy Now button, but for the Add to Cart to open the cart drawer it will be better if you get hold of the original theme files to make it work.

[MaxCosta]

Ah I understand thank you very much so only buy now that redirects to payment.

Thank you very much for your help!

[MaxCosta]

To payment, but as account creation is mandatory to place an order, the link should redirect to login. You got me ?

[g33kgirl · Accepted solution]

I have redirected it to checkout. Please check.

[MaxCosta]

That's perfect!! thanks so much for your help

[DM91]

Can you help with my store as well? My store is b36a24-2.myshopify.com

[B33kayT]

Hi im facing the same thing

[JaipurCrafts]

Hello just looking for the same issue the button design is but not clickable in product page

[Gooshop]

This same problem occur in my store

So how tell how to set this problem