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

meghamix
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
hassain
Shopify Staff (Retired)
Shopify Staff (Retired)
623 102 138

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
nzdods
New Member
1 0 0

Hi @hassain ,

I have a similar issue. I have embedded a collection in an external site using Buy Button JS, and I can add products to the cart side-bar on that site.

I have added the code that you suggested to the Check Out button and it does redirect me to the cart page on my online store, but when I get there the cart is empty.
So the Buy Button cart appears to be separate from the store cart.

Is it possible for both channels to share one cart?

I would like customers to be able to browse one collection on an external website then have the opportunity to add products from the store before they checkout.

Many thanks!

 

0 Likes
yeet-bix
New Member
3 0 0

Hi Everyone!

I never found a robust way to have the buy button cart and the online store cart share the same instance. However, I wrote some JavaScript that will redirect the user from the Buy Button checkout to the online store cart with a dynamic URL. It will add all the items from the buy button cart to the online store cart.

 

options: {
     "cart": {
          "DOMEvents": {
               'click .shopify-buy__btn--cart-checkout': function (evt, target) {
                    let cart = this.component,
                          items = cart.lineItems.map(x => {
                                             let id = atob(x.variant.id);

                                             return {
                                                  id: id.split('/').pop(),
                                                  quantity: x.quantity
                                              }
                                          }),
                           url = '';

                    for (let [i, item] of items.entries()) {
                          url += `${i === 0 ? '?' : '&'}items[${i}][id]=${item.id}&items[${i}][quantity]=${item.quantity}`;
                    }
                    window.location = '/*YOUR-SHOP*/.myshopify.com/cart/add' + url;
              }
          },
     }
}

 

0 Likes
Anthony_K
New Member
2 0 0

Where did you add this snippet in your buy button code? 

 

I've tried adding but it doesn't seem to work

0 Likes
yeet-bix
New Member
3 0 0

Hi @Anthony_K 

I ended up changing the code just a bit, and for some reason I can't edit my original answer anymore.

Paste the following code under the cart options when the component is created. If you're still having trouble, you could somehow send me your buy button code and I could do it for you if you like.

"DOMEvents": {
      'click .shopify-buy__btn': function (event) {
        let cart = this.component,
            items = cart.lineItems.map(x => {
                      let id = atob(x.variant.id);

                      return {
                        id: id.split('/').pop(),
                        quantity: x.quantity
                      }
                    }),
            url = '';

        for (let [i, item] of items.entries()) {
          url += `${i === 0 ? '?' : '&'}updates[${item.id}]=${item.quantity}`;
        }

        window.stop();
        window.open('YOUR-STORE-NAME.myshopify.com/cart/update' + url, '_blank');
      }
    },
0 Likes
Anthony_K
New Member
2 0 0

Thanks! 

I tried testing but it doesn't seem to work. perhaps I appended it to the wrong line? 

Here's the buy button code:

 

<div id='product-component-1597113189119'></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: 'nanorcandles.myshopify.com',
      storefrontAccessToken: '9119059e59e02ede864b0f5984018888',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '5343055151260',
        node: document.getElementById('product-component-1597113189119'),
        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"
        }
      },
      "button": {
        "font-family": "Lato, sans-serif",
        "color": "#050505",
        ":hover": {
          "color": "#050505",
          "background-color": "#ca826c"
        },
        "background-color": "#e09078",
        ":focus": {
          "background-color": "#ca826c"
        },
        "border-radius": "0px",
        "padding-left": "65px",
        "padding-right": "65px"
      }
    },
    "contents": {
      "img": false,
      "title": false,
      "price": false
    },
    "googleFonts": [
      "Lato"
    ]
  },
  "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"
        }
      },
      "button": {
        "font-family": "Lato, sans-serif",
        "color": "#050505",
        ":hover": {
          "color": "#050505",
          "background-color": "#ca826c"
        },
        "background-color": "#e09078",
        ":focus": {
          "background-color": "#ca826c"
        },
        "border-radius": "0px",
        "padding-left": "65px",
        "padding-right": "65px"
      }
    },
    "googleFonts": [
      "Lato"
    ],
    "text": {
      "button": "Add to cart"
    }
  },
  "cart": {
    "styles": {
      "button": {
        "font-family": "Lato, sans-serif",
        "color": "#050505",
        ":hover": {
          "color": "#050505",
          "background-color": "#ca826c"
        },
        "background-color": "#e09078",
        ":focus": {
          "background-color": "#ca826c"
        },
        "border-radius": "0px"
      }
    },
    "text": {
      "total": "Subtotal",
      "button": "Checkout"
    },
    "popup": false,
    "googleFonts": [
      "Lato"
    ]
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-family": "Lato, sans-serif",
        "background-color": "#e09078",
        ":hover": {
          "background-color": "#ca826c"
        },
        ":focus": {
          "background-color": "#ca826c"
        }
      },
      "count": {
        "color": "#050505",
        ":hover": {
          "color": "#050505"
        }
      },
      "iconPath": {
        "fill": "#050505"
      }
    },
    "googleFonts": [
      "Lato"
    ]
  }
},
      });
    });
  }
})();
/*]]>*/
</script>

 

0 Likes
yeet-bix
New Member
3 0 0

It looks like you put the DOMEvents object too deep. It goes cart->DOMEvents. You had yours setup like this cart->styles->button->DOMEvents

0 Likes