Question

目前，我正在将Shopify购买按钮嵌入到我的网站中，仅提供几种产品。

在其中插入“购买按钮”嵌入式代码的所有产品模板中，都会显示我选择的样式。并在添加产品后显示购物车。

为了使购物车在每个页面上都显示，我在基本模板中添加了一个代码段。

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个include来解决。并将选项作为全局变量传递给每个选项，如下所示：

(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（）并在没有购买按钮的页面上使用

1 个答案: