Javascript Shopify-定制createCart（），在页面上使用，不带“购买”按钮

目前，我正在将Shopify Buy按钮嵌入我的网站，只提供一些产品

我的Buy按钮嵌入代码所在的任何产品模板都会显示我选择的样式。并在添加产品时显示购物车

为了使购物车保持在每个页面上，我在基本模板中添加了一个片段

shoppifybuy.UI.onReady（客户端）。然后（功能（UI）{
ui.createCart({
选项：{
“风格”：{
“按钮”：{
“背景色”：“#1A1A”，
“：悬停”：{
“背景色”：“#2C2C”
},
“：焦点”：{
“背景色”：“#2C2C”
}
},
“页脚”：{
“背景色”：“#ffffff”
}
}
}
});
});通过将createCart（）和createComponent（）移动到1个包含的基础模板中来解决。并将选项作为全局变量传递给每个选项，请参见以下内容：

(function () {
  var shopifyOptions = {
    "product": {
      ... normal product options go here ...
    },
    "cart": {
      "contents": {
        "button": true
      },
      "styles": {
        "button": {
          "background-color": "#1a1a1a",
          ":hover": {
            "background-color": "#2c2c2c"
          },
          ":focus": {
            "background-color": "#2c2c2c"
          }
        },
        "footer": {
          "background-color": "#ffffff"
        }
      }
    },
    "modalProduct": {
      "contents": {
        "img": false,
        "imgWithCarousel": true,
        "variantTitle": false,
        "buttonWithQuantity": true,
        "button": false,
        "quantity": false
      },
      "styles": {
        "product": {
          "@media (min-width: 601px)": {
            "max-width": "100%",
            "margin-left": "0px",
            "margin-bottom": "0px"
          }
        },
        "button": {
          "background-color": "#1a1a1a",
          ":hover": {
            "background-color": "#2c2c2c"
          },
          ":focus": {
            "background-color": "#2c2c2c"
          }
        },
        "variantTitle": {
          "font-family": "Montserrat, sans-serif",
          "font-weight": "normal"
        },
        "title": {
          "font-family": "Montserrat, sans-serif",
          "font-weight": "normal"
        },
        "description": {
          "font-family": "Montserrat, sans-serif",
          "font-weight": "normal"
        },
        "price": {
          "font-family": "Montserrat, sans-serif",
          "font-weight": "normal"
        },
        "compareAt": {
          "font-family": "Montserrat, sans-serif",
          "font-weight": "normal"
        }
      },
      "googleFonts": [
        "Montserrat",
        "Montserrat",
        "Montserrat",
        "Montserrat",
        "Montserrat"
      ]
    },
    "toggle": {
      "styles": {
        "toggle": {
          "background-color": "#1a1a1a",
          ":hover": {
            "background-color": "#2c2c2c"
          },
          ":focus": {
            "background-color": "#2c2c2c"
          }
        }
      }
    },
    "option": {
      "styles": {
        "label": {
          "font-family": "Montserrat, sans-serif"
        },
        "select": {
          "font-family": "Montserrat, sans-serif"
        }
      },
      "googleFonts": [
        "Montserrat",
        "Montserrat"
      ]
    },
    "productSet": {
      "styles": {
        "products": {
          "@media (min-width: 601px)": {
            "margin-left": "-20px"
          }
        }
      }
    }
  };

  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';

  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: 'STORE.myshopify.com',
      storefrontAccessToken: 'ACCESSTOKEN',
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      if ($('#buy-online-component').length) {
        ui.createComponent('product', {
          id: appSettings.shopifyProductEmbedCode,
          node: document.getElementById('buy-online-component'),
          moneyFormat: '%24%7B%7Bamount%7D%7D',
          options: shopifyOptions
        });
      } else {
        ui.createComponent('cart', {
          node: document.getElementById('cart-component'),
          options: shopifyOptions
        });
      }
    });
  }

  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }
})();