Solved

Unable to click on the "Buy Now" button

MaxCosta
Shopify Partner
245 2 59

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

Accepted Solutions (2)
g33kgirl
Shopify Partner
390 109 142

This is an 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?

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.

View solution in original post

g33kgirl
Shopify Partner
390 109 142

This is an accepted solution.

I have redirected it to checkout. Please check.

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.

View solution in original post

Replies 20 (20)

rossvor
Excursionist
14 0 7

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
Shopify Partner
245 2 59

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
Excursionist
14 0 7

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
Shopify Partner
390 109 142

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?

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.

g33kgirl
Shopify Partner
390 109 142

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

 

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

  

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
MaxCosta
Shopify Partner
245 2 59

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

g33kgirl
Shopify Partner
390 109 142

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

 

Screenshot 2023-12-14 at 1.40.40 pm.png

 

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";

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
MaxCosta
Shopify Partner
245 2 59

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
Shopify Partner
390 109 142

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.

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
MaxCosta
Shopify Partner
245 2 59

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
Shopify Partner
390 109 142

I have sent you a collaborator request.

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
MaxCosta
Shopify Partner
245 2 59

ok it's done!

thanks in advance 🙌

g33kgirl
Shopify Partner
390 109 142

This is an 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?

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
MaxCosta
Shopify Partner
245 2 59

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
Shopify Partner
390 109 142

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.

 

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
MaxCosta
Shopify Partner
245 2 59

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

Thank you very much for your help!

MaxCosta
Shopify Partner
245 2 59

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

g33kgirl
Shopify Partner
390 109 142

This is an accepted solution.

I have redirected it to checkout. Please check.

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
MaxCosta
Shopify Partner
245 2 59

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

DM91
New Member
4 0 0

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