Javascript 使用我自己的按钮和变体选择器重新创建购买按钮和购物车功能

众所周知，Shopify的Buy按钮很难定制。他们的脚本（如下）创建了一个变体下拉菜单和一个购买按钮。我试图编辑嵌入，这样我就可以使用我自己的变量选择器和按钮，而不是他们的。理想情况下，经过编辑的嵌入将捕获选定的变体，并在客户单击“我自己的购买”按钮后打开Shopify侧购物车（切换元素）

<div id='product-component-PRODUCTCOMPONENTNUMBER'></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: 'STORENAME.myshopify.com',
      storefrontAccessToken: 'NUMBER',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: 'PRODUCTIDNUMBER',
        node: document.getElementById('product-component-PRODUCTCOMPONENTNUMBER'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
...
...
...

</script>

/*