CODEWITHSUNDEEP
javascriptshopifyshopify-app
Cengiz
Cengiz

Reputation: 302

How can I prevent 'Buy it now' button to redirect to the checkout page?

In my Shopify app I want to perform a couple of tasks before the "Buy It Now" button redirects to the checkout page in Shopify's default theme Dawn. In my theme app extension, I selected the button as a dom element and tried the preventDefault function, but it's still redirecting. How can I stop redirecting?

var paymentButton = document.querySelector('.shopify-payment-button');

  if (paymentButton) {
   
    paymentButton.addEventListener('click', function(event) {
      event.preventDefault();
      event.stopPropagation();


      // things I want to do
    });
  }

Upvotes: 1

Views: 431

Answers (1)

Guilherme Sella Fernandes
Guilherme Sella Fernandes

Reputation: 1

Create a clone of the button component to remove the functions:

  const clone = paymentButton.cloneNode(true); 
  paymentButton.parentNode.replaceChild(clone, paymentButton)

Pass the eventListener to the cloned HTML node.

     clone.addEventListener('click', function(event) {
      // do stuff
      console.log(event);
      event.preventDefault();
      event.stopPropagation();
    });

Upvotes: 0

Related Questions