Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: How to get BUY NOW button to redirect from my website to the cart (full screen)?

How to get BUY NOW button to redirect from my website to the cart (full screen)?

JenHansard
Visitor
1 0 0

Hi there. I've searched the forum and can't find anyone experiencing this issue. 

 

1. I've embedded a BUY NOW button on my website: https://simplegreensmoothies.com/21-day-cleanse-autumn-sas

2. When you click on desktop, it opens a teeny tiny pop up window on top of the sales page (which looks lame).

Screen Shot 2019-11-14 at 11.08.08 AM.png

 

How do I make it so when you click on the BUY NOW button, it redirects the page to the cart in the same window (not a new window) like this: 

 

Screen Shot 2019-11-14 at 11.09.54 AM.png

 

 

The code I have embedded for the buy now button is this: 

 

 

<div id="product-component-1573661308184"></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src=scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'rawkstar-marketplace.myshopify.com',
storefrontAccessToken: '4851502cce571be0cc9c74d61694d51e',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '4364694978644',
node: document.getElementById('product-component-1573661308184'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
}
},
"buttonDestination": "checkout",
"contents": {
"img": false,
"title": false,
"price": false
},
"text": {
"button": "Buy now"
}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
}
},
"text": {
"button": "Add to cart"
}
},
"cart": {
"text": {
"total": "Subtotal",
"button": "Checkout"
}
}
},
});
});
}
})();
/*]]>*/
</script>

 

Appreciate any help you can share on this!

Replies 2 (2)

James-G
Excursionist
25 2 9

I have not tested, but this reply to a similar post from 2017 offers an answer:

https://community.shopify.com/c/Shopify-APIs-SDKs/Using-buy-button-checkout-to-redirect-not-pop-up/m...

 

Hope that helps

iBeFound
Tourist
9 0 1

To get the Shopify checkout page to open in the same tab / window when you click the Buy Now or Checkout button, you need to add the following code to your website in the header (or footer) scripts section.

<script data-shopify-buy-ui="">
window.open = function (open) {
return function (url, name, features) {
// Pass through non-shopify URLS
if (url.indexOf("myshopify") < 0) {
return open.call(window, url, name, features);
}
// Use current window
console.log("Redirecting to:", url);
window.location.href = url;
return null;
};
}(window.open);
</script>