Shopify “Buy Button” Example

<center><div id='product-component-1707500918753'></div></center>
<br>
<center><a href="javascript:handle_shopify_add_to_cart_click()">ANCHOR TAG</a><center>

<script type="text/javascript">
function handle_shopify_add_to_cart_click() {
  document.getElementsByClassName('shopify-buy__btn')[0].click();
}
/*<![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: 'seatdeposit.winnipegjets.com',
      storefrontAccessToken: 'b084a3178c668ee8d2912b2c8c247421',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '8246412083424',
        node: document.getElementById('product-component-1707500918753'),
        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": "Arial, sans-serif",
                ":hover": {
                  "background-color": "#2563b4"
                },
                "background-color": "#296ec8",
                ":focus": {
                  "background-color": "#2563b4"
                }
              }
            },
            "contents": {
              "img": false,
              "title": false,
              "price": false
            },
            "iframe": false, 
            "width": "480px",
            "text": {
              "button": "ADD TO CART BUTTON"
            }
          },
          "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": "Arial, sans-serif",
                ":hover": {
                  "background-color": "#2563b4"
                },
                "background-color": "#296ec8",
                ":focus": {
                  "background-color": "#2563b4"
                }
              }
            },
            "text": {
              "button": "Add to cart"
            }
          },
          "option": {},
          "cart": {
            "styles": {
              "button": {
                "font-family": "Arial, sans-serif",
                ":hover": {
                  "background-color": "#2563b4"
                },
                "background-color": "#296ec8",
                ":focus": {
                  "background-color": "#2563b4"
                }
              }
            },
            "text": {
              "total": "Subtotal",
              "button": "Checkout"
            },
            "popup": false
          },
          "toggle": {
            "styles": {
              "toggle": {
                "font-family": "Arial, sans-serif",
                "background-color": "#296ec8",
                ":hover": {
                  "background-color": "#2563b4"
                },
                ":focus": {
                  "background-color": "#2563b4"
                }
              }
            }
          }
        },
      });
    });
  }
})();
/*]]>*/
</script>