[EXTERNAL WEBSITE]Buy Button SDK - Create Custom Product Add To Cart Functionality

Highlighted
New Member
2 0 0

Hi all,

I feel like this should be quite straightforward but I unfortunately can't seem to find a particular example for what I am trying to achieve.

tldr; How can i use the given cart structure from the Buy Button SDK but add products(with differing variants) to it using a custom button i've created in HTML and which is controlled by jQuery click handlers on an external domain.

Firstly I have created an external website on a different domain using HTML, CSS and jQuery.

Here is my current code example to begin with.

JavaScript:

(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: 'my_shopify_name.myshopify.com',
      apiKey: 'my_API_key',
      appId: '6',
    });

ShopifyBuy.UI.onReady(client).then(function (ui) {
            ui.createComponent('cart', {
              'cart': {
                startOpen: true
              }
            });
    });
  }
})();

I then want to skip create a UI for a product component and simply have some html like this:

<button data-prod-id="8365899088" id="8365899088"></button>

and using jQuery once that button is clicked it uses the Buy Button SDK to then add the product that corresponds to the data-prod-id attribute to the cart just as if it would if there was a component that had been created such as with what the Buy Button generator would create.

Another way that I have tried is to literally generate multiple buy buttons and then using jQuery simulate clicking those buttons. The only problem with that is that as select boxes are used even if i use jQuery to modify those before I simulate the buy button click it will only add the default variant selected version of the product to the cart. 

Also as a sidenote i can't seem to get the cart to "startOpen" either.

Thanks in advance for all of your help.

 

0 Likes
Highlighted
New Member
2 0 0

Anyone?

0 Likes
Highlighted
New Member
2 0 0
ui.createComponent('cart', {
  node: document.getElementById("js_cart"),
});

worked for me to get a cart, use `ui.openCart()` to open it.

0 Likes