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

Question

众所周知，Shopify的“购买按钮”很难自定义。他们的脚本（如下）创建了一个变体下拉菜单和一个“购买”按钮。我正在尝试编辑嵌入内容，以便可以使用自己的变体选择器和按钮代替它们。理想情况下，在客户单击我自己的“购买”按钮之后，编辑后的嵌入将捕获选定的变体并打开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>