Shopify Buy Button JS 在产品滑块中显示集合

Question

<div class="wrap"><div id="collection-component-1608088773387"></div></div>
<script type="text/javascript">
  /*<![CDATA[*/
  (function () {
    var scriptURL = "http://sdks.shopifycdn.com/buy-button/2.1.7/buybutton.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({
        storefrontAccessToken: "ACCESS TOKEN",
        domain: "xxx.myshopify.com",
        appId: "6",
      });

      var ui = ShopifyBuy.UI.init(client);

      ui.createComponent("collection", {
        id: 231614611608,
        node: document.getElementById("collection-component-1608088773387"),
        moneyFormat: "%24%7B%7Bamount%7D%7D",
        options: {
          product: {
            variantId: "all",
            buttonDestination: "modal",
            contents: {
              options: false,
            },
            styles: {
              product: {
                "max-width": "none",
                "margin-right": "10px",
                width: "60%",
              },
              button: {
                "background-color": "#252525",
                "font-family": "Karla",
                ":hover": {
                  "background-color": "#222222",
                },
                ":focus": {
                  "background-color": "#222222",
                },
                "font-weight": "normal",
              },
              variantTitle: {
                "font-family": "Karla",
                "font-weight": "normal",
              },
              title: {
                "font-family": "Karla",
              },
              description: {
                "font-family": "Karla",
                "font-weight": "normal",
              },
              price: {
                "font-family": "Karla",
                "font-weight": "normal",
              },
              compareAt: {
                "font-family": "Karla",
                "font-weight": "normal",
              },
            },
            googleFonts: [
              "Open Sans",
              "PT Serif",
              "PT Serif",
              "PT Serif",
              "PT Serif",
              "PT Serif",
            ],
          },
          cart: {
            contents: {
              button: true,
            },
            styles: {
              button: {
                "background-color": "#252525",
                "font-family": "Karla",
                ":hover": {
                  "background-color": "#222222",
                },
                ":focus": {
                  "background-color": "#222222",
                },
                "font-weight": "normal",
              },
              footer: {
                "background-color": "#ffffff",
              },
            },
            googleFonts: ["Open Sans"],
          },
          modalProduct: {
            styles: {
              button: {
                "background-color": "#252525",
                "font-family": "Karla",
                ":hover": {
                  "background-color": "#222222",
                },
                ":focus": {
                  "background-color": "#222222",
                },
                "font-weight": "normal",
              },
              variantTitle: {
                "font-family": "Karla",
                "font-weight": "normal",
              },
              title: {
                "font-family": "Karla",
              },
              description: {
                "font-family": "Karla",
                "font-weight": "normal",
              },
              price: {
                "font-family": "Karla",
                "font-weight": "normal",
              },
              compareAt: {
                "font-family": "Karla",
                "font-weight": "normal",
              },
            },
            googleFonts: [
              "Open Sans",
              "PT Serif",
              "PT Serif",
              "PT Serif",
              "PT Serif",
              "PT Serif",
            ],
          },
          toggle: {
            styles: {
              toggle: {
                "font-family": "Karla",
                "background-color": "#252525",
                ":hover": {
                  "background-color": "#222222",
                },
                ":focus": {
                  "background-color": "#222222",
                },
                "font-weight": "normal",
              },
            },
            googleFonts: ["Open Sans"],
          },
          option: {
            styles: {
              label: {
                "font-family": "Karla",
              },
              select: {
                "font-family": "Karla",
              },
            },
            googleFonts: ["PT Serif", "PT Serif"],
          },
          productSet: {
            classes: {
              products: "shopify-buy__collection-products-foo",
            },
            styles: {
              products: {
                display: "flex",
                //"display": "-webkit-flex",
                //"display": "-ms-flexbox",

                "flex-wrap": "nowrap",
                "-webkit-flex-wrap": "nowrap",
                "overflow-x": "auto",
                "-webkit-overflow-scrolling": "touch",
                "justify-content": "initial",
                "-webkit-justify-content": "initial",
                "margin-left": "0",
                "@media (min-width: 601px)": {
                  "margin-left": "-20px",
                },
                "::-webkit-scrollbar": {
                  "-webkit-appearance": "none",
                  height: "8px",
                },
                "::-webkit-scrollbar-thumb": {
                  "border-radius": "8px",
                  border: "1px solid #222222",
                  "background-color": "#222222",
                },
              },
            },
          },
        },
      });
    }
  })();
  /*]]>*/
</script>

大家好，我一直在寻找如何将 Shopify 购买按钮 js 集合放入如下图 2 所示的滑块中。任何人都可以启发我如何去做？到目前为止，我已经找到了使产品可以水平滚动的代码 - 但这并不是我想要的。

目前看起来是这样的：

理想情况下它应该是这样的：

每次用户选择产品时，我必须使用购买按钮 js 来获得显示产品页面的所需模式弹出窗口并添加到购物车选项。有人可以指导我如何修改代码以获得预期的结果吗？

Answer 1

你需要像这样定制

window.onload = () => {
  if (window.__shgProductInits.length) {
    window.__shgProductInits.forEach((ele) => {
      let proId = document.getElementById(ele.uuid);
      proId.setAttribute('url', ele.productHandle);
      proId.style.cursor='pointer';
      proId.addEventListener('click', (e) => {
        let productHanlde = e.target.parentElement.parentElement.parentElement.getAttribute('url');
        fetch('/products/'+productHanlde+'.js')
          .then((Response) =>{return Response.json()})
          .then((productData) => { 
            console.log(productData);
            // now from here new logic and JS code for popup starts
          });
      });
    });
  }
}

Shopify Buy Button JS 在产品滑块中显示集合

Shopify Buy Button JS display collection in product slider

javascript

slider

shopify