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.
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.
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?
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
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?)
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
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?
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?
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.