Shopify Buy Button JS display collection in product slider

问题

<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>

Hello guys, I've been searching though how to put the Shopify buy button js collection into a slider like the 2nd picture below. Anybody can enlighten me on how to do it? So far I've found code to make the products horizontally scrollable - but it isn't exactly what I want.

Currently looks like this:

Ideally what it should look like:

I had to use buy button js to get the desired modal pop up showing the product page and add to cart option everytime the user selects a product. Could someone guide me on how I can modify the code to achieved the desired result?

回答1:

You need do custom like this one

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
          });
      });
    });
  }
}

来源：https://stackoverflow.com/questions/65317769/shopify-buy-button-js-display-collection-in-product-slider