Buy Button - Make Checkout Button Redirect to Online Store Cart First

Highlighted
New Member
1 0 0

Some background - I'm using the Buy Button in Wordpress. I've added the script to a Wordpress widget and have managed to customize some of the components. There's one thing I'd like to change, but I can't quite figure it out. The Checkout button currently opens the Online Store's Checkout, but is there a way to get that button to open the cart page in the Online Store instead?

I've seen others use .click functions for buttons, something like this:

$('.btn--cart-checkout').on('click', function() {
window.location = 'https://' + config.domain + '/cart';
});


I'm definitely a beginner with javascript, so I'm not sure where to place that code or if the window.location url would take the items added to the Buy Button cart to the Shopify cart. I know about cart permalinks, but that doesn't work here. I want to be able to have the products added to the cart in the Buy Button get carried over to the cart in the Online Store.

I appreciate any help or direction to go in! Thanks!

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
624 102 118

Hey @meghamix ,

 

If you want to be able to customize your Buy Button experience some more, I would suggest you utilize the Buy Button JS library: https://shopify.github.io/buy-button-js/ and https://www.shopify.com/partners/blog/introducing-buybutton-js-shopifys-new-javascript-library

 

The BuyButton JS library has built in functionality to open the Shopify store cart upon the customer hitting the button. Here is the code to do this:

 

var client = ShopifyBuy.buildClient({
  apiKey: '{Your Storefront API Key}',
  domain: '{your-shop-name}.myshopify.com',
  appId: '6'
});

var ui = ShopifyBuy.UI.init(client);

ui.createComponent('product', {
  id: {Your Product ID},
  node: document.getElementById('product'),
  options: {
    product: {
      buttonDestination: 'cart',
      text: {
        button: 'Buy Now' 
      }
        }
      }
});

With this library you can also customize the onClick functionality of the button and change it to behave however you would like. So you can use this code to also redirect to your store's cart page:

 

var client = ShopifyBuy.buildClient({
  apiKey: 'bf081e860bc9dc1ce0654fdfbc20892d',
  domain: 'embeds.myshopify.com',
  appId: '6'
});

var ui = ShopifyBuy.UI.init(client);

ui.createComponent('product', {
  id: 3615122115,
  node: document.getElementById('product'),
  options: {
    product: {
      DOMEvents: {
      	'btn--cart-checkout': function (evt, target) {
            window.location = 'https//' + config.domain + '/cart';
      },
      text: {
        button: 'Buy Now' 
      }
        }
      }
});

Hassain | Developer Support Specialist @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes