需要在shopify中展示有限的产品

时间:2019-07-16 12:59:00

标签: shopify

我们在shopify上有一个在线商店,包括博客,我们正在尝试在单个博客文章的底部添加相关产品,但是我们正在使用的脚本显示了太多产品,但我们只想显示三个产品。需要有人帮助我们修复JavaScript。

下面的代码 谢谢

<div id='collection-component-ee723761b01'></div>
<script type="text/javascript">
  /*<![CDATA[*/

  (function() {
    var scriptURL='https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.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({
        domain: 'vapingpro.myshopify.com',
        storefrontAccessToken: 'dd8c1267801b6c54e993ce458ab0fd1f',
      });

      ShopifyBuy.UI.onReady(client).then(function(ui) {
        ui.createComponent('collection', {
          id: 86800564295,
          node: document.getElementById('collection-component-ee723761b01'),
          moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
          options: {
            "product": {
              "buttonDestination": "modal",
              "variantId": "all",
              "contents": {
                "imgWithCarousel": false,
                "variantTitle": false,
                "options": false,
                "description": false,
                "buttonWithQuantity": false,
                "quantity": false
              },
              "text": {
                "button": "VIEW PRODUCT"
              },
              "styles": {
                "product": {
                  "@media (min-width: 601px)": {
                    "max-width": "calc(25% - 20px)",
                    "margin-left": "20px",
                    "margin-bottom": "50px",
                    "width": "calc(25% - 20px)"
                  },
                  "imgWrapper": {
                    "position": "relative",
                    "height": "0",
                    "padding-top": "calc(75% + 15px)"
                  },
                  "img": {
                    "height": "calc(100% - 15px)",
                    "position": "absolute",
                    "left": "0",
                    "right": "0",
                    "top": "0"
                  }
                },
                "button": {
                  "background-color": "#63C0AF",
                  ":hover": {
                    "background-color": "#59AD9E"
                  },
                  ":focus": {
                    "background-color": "#59AD9E"
                  }
                }
              }
            },
            "cart": {
              "contents": {
                "button": true
              },
              "styles": {
                "button": {
                  "background-color": "#63C0AF",
                  ":hover": {
                    "background-color": "#59AD9E"
                  },
                  ":focus": {
                    "background-color": "#59AD9E"
                  }
                },
                "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": "#63C0AF",
                  ":hover": {
                    "background-color": "#59AD9E"
                  },
                  ":focus": {
                    "background-color": "#59AD9E"
                  }
                }
              }
            },
            "toggle": {
              "styles": {
                "toggle": {
                  "background-color": "#63C0AF",
                  ":hover": {
                    "background-color": "#59AD9E"
                  },
                  ":focus": {
                    "background-color": "#59AD9E"
                  }
                }
              }
            },
            "productSet": {
              "styles": {
                "products": {
                  "@media (min-width: 601px)": {
                    "margin-left": "-20px"
                  }
                }
              }
            }
          }
        });
      });
    }
  })();
  /*]]>*/
</script>

0 个答案:

没有答案