Shopify

Question

目前，我正在将 Shopify Buy Buttons 嵌入到我的网站中，仅提供几种产品。

提取我的 Buy Button 嵌入式代码的任何产品模板都会显示我选择的样式。并在添加产品后显示购物车。

为了让购物车出现在每个页面上，我在基本模板中添加了一个片段。

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createCart({
    options: {
      "styles": {
        "button": {
          "background-color": "#1a1a1a",
          ":hover": {
            "background-color": "#2c2c2c"
          },
          ":focus": {
            "background-color": "#2c2c2c"
          }
        },
        "footer": {
          "background-color": "#ffffff"
        }
      }
    }
  });
});

我无法理解正确设置购物车样式的语法！ Shopify 文档没有帮助。

Answer 1

通过在基本模板上将 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();
  }
})();

Shopify - 自定义 createCart() 并在页面 w/o 上使用购买按钮

Shopify - customize createCart() and use on the pages w/o a Buy Button

javascript

shopify-javascript-buy-sdk