javascript - Shopify Buy Button 最小数量

Question

我目前正在使用 Shopify Buy Button .

在大多数情况下，我只是复制并粘贴了嵌入代码，并没有做太多更改。

我有一些产品需要购买 5 件或更多的所述商品。

典型的添加到购物袋按钮只添加一个，在购物车内，按下时，添加/减去一个。

---

我的问题

• 有没有办法在点击添加到购物车时设置默认数量？
• 有没有办法在所述项目上添加默认的减法/减法

注意:我不想对所有商品都使用此方法，只希望嵌入购买代码的特定商品。

---

我搜索了 default compenents和 developer section并发现以下内容:

var events = {
  addVariantToCart: function (product) {},
  updateQuantity: function (product) {},
 ...
}

我想这可能是我要找的东西，但我找不到关于如何更新所述产品的任何具体细节。

如果有人能在正确的方向上帮助或指导我，我将不胜感激。

---

我的嵌入代码

<div id='product-component-ITEM-ID'></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: 'DOMAIN.myshopify.com',apiKey: 'API-KEY',appId: '6'});
    ShopifyBuy.UI.onReady(client).then(function(ui){ui.createComponent('product',{id:["ITEM-ID"],node:document.getElementById('product-component-{{page.item_id}}'),moneyFormat:'%24%7B%7Bamount%7D%7D',

    options:{
      "product":{
        "variantId":"all",
        "width":"240px",
        "contents":{
          "img":false,
          "imgWithCarousel":false,
          "title":false,
          "variantTitle":false,
          "price":false,
          "description":false,
          "buttonWithQuantity":false,
          "quantity":false
        },
        "text":{
          "button":"ADD TO BAG"
        },
        "styles":{
          "product":{
            "text-align":"left",
            "@media(min-width:601px)":{
              "max-width":"100%",
              "margin-left":"0",
              "margin-bottom":"50px"
            }
          },
          "button":{
            "background-color":"#393a39",
            "font-family":"Lato,sans-serif",
            "font-size":"13px",
            "padding-top":"14.5px",
            "padding-bottom":"14.5px",
            "padding-left":"35px",
            "padding-right":"35px",
            ":hover":{
              "background-color":"#333433"
            },
            "border-radius":"0px",
            ":focus":{
              "background-color":"#333433"
            },
            "font-weight":"normal"
          },
          "title":{
            "font-size":"26px"
          },
          "price":{
            "font-size":"18px"
          },
          "quantityInput":{
            "font-size":"13px",
            "padding-top":"14.5px",
            "padding-bottom":"14.5px"
          },
          "compareAt":{
            "font-size":"15px"
          }
        },
        "googleFonts":[
          "Lato"
        ]
      },
      "cart":{
        "contents":{
          "button":true
        },
        "styles":{
          "button":{
            "background-color":"#393a39",
            "font-family":"Lato,sans-serif",
            "font-size":"13px",
            "padding-top":"14.5px",
            "padding-bottom":"14.5px",
            ":hover":{
              "background-color":"#333433"
            },
            "border-radius":"0px",
            ":focus":{
              "background-color":"#333433"
            },
            "font-weight":"normal"
          },
          "footer":{
            "background-color":"#ffffff"
          }
        },
        "googleFonts":[
          "Lato"
        ]
      },
      "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":"#393a39",
            "font-family":"Lato,sans-serif",
            "font-size":"13px",
            "padding-top":"14.5px",
            "padding-bottom":"14.5px",
            "padding-left":"35px",
            "padding-right":"35px",
            ":hover":{
              "background-color":"#333433"
            },
            "border-radius":"0px",
            ":focus":{
              "background-color":"#333433"
            },
            "font-weight":"normal"
          },
          "quantityInput":{
            "font-size":"13px",
            "padding-top":"14.5px",
            "padding-bottom":"14.5px"
          }
        },
        "googleFonts":[
          "Lato"
        ]
      },
      "toggle":{
        "iframe":false,
        "sticky":false,
        "templates":{
          "icon":'<i class="fa fa-shopping-bag fa-lg darkgrey" aria-hidden="true"></i>'
        },
        "contents":{
          "icon":true,
          "title":false
        },
        "events":{
          afterInit:function (component)      {
            document.getElementById('cart-toggle').appendChild(component.node);
          },

        },
        "order":[
          'count',
          'icon'
        ],
        "styles":{
          "toggle":{
            "font-family":"Lato,sans-serif",
            "background-color":"#393a39",
            ":hover":{
              "background-color":"#333433"
            },
            ":focus":{
              "background-color":"#333433"
            },
            "font-weight":"normal"
          },
          "count":{
            "font-size":"13px"
          }
        },
        "googleFonts":[
          "Lato"
        ]
      },
      "productSet":{
        "styles":{
          "products":{
            "@media(min-width:601px)":{
              "margin-left":"-20px"
            }
          }
        }
      }
    }
    }

    );});}})();
/*]]>*/
</script>

Answer 1

经过几个小时的实验，这是我想出的解决方案。到目前为止，我的测试表明它稳健可靠，但如果您发现任何问题，请告诉我，我会尽力而为。

以下是代码，使用来自 Shopify Buy Button homepage 的示例代码.不幸的是，这不会在代码片段中运行，但如果您将其放入 HTML 文件并运行它，您就可以对其进行测试。

---

完整示例代码

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id='product-component-05cfb487fb6' data-minqty='5'></div>

Javascript:

function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
        domain: 'embeds.myshopify.com',
        apiKey: '952162710f94aa7b7644b14b2a94f4a3',
        appId: '6',
    });

    ShopifyBuy.UI.onReady(client).then(function(ui) {
        ui.createComponent('product', {
            id: [3030475907],
            node: document.getElementById('product-component-05cfb487fb6'),
            moneyFormat: '%24%7B%7Bamount%7D%7D',
            options: {
                "product": {
                    "styles": {
                        "button": {
                            "background-color": "#292929",
                            ":hover": {
                                "background-color": "#464646"
                            },
                            ":focus": {
                                "background-color": "#464646"
                            }
                        },
                    },
                    "events": {
                        "addVariantToCart": function(product) {
                            product.model.selectedQuantity = 1;
                            var minQty = $(product.node).data('minqty');
                            if (product.cart.model.lineItemCount < minQty) {
                                product.updateQuantity(function() {
                                    return minQty - (product.cart.model.lineItemCount);
                                });
                            }
                        }
                    }
                },
                "cart": {
                    "events": {
                        "updateItemQuantity": function(cart) {
                            for (let i = 0; i < ui.components.product.length; i++) {
                                var product = ui.components.product[i];
                                var node = product.node;
                                if ($(node).data('minqty')) {
                                    var minQty = $(node).data('minqty');
                                    setTimeout(function() {
                                        setProductQuantity(node, product, minQty, ui);
                                    }, 1);
                                }
                            }
                        }
                    }
                }
            }
        });
    });
}

function setProductQuantity(node, product, minQty, ui) {
    if (product.cart.model.lineItemCount < minQty && product.cart.model.lineItemCount > 0) {
        $('.shopify-buy-cart-wrapper').find('iframe').contents().find("div[id='" + product.cart.model.lineItems[0].id + "']").find('.shopify-buy__quantity-decrement').click();
    }
}

(function() {
    var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
    window.ShopifyBuy && window.ShopifyBuy.UI ? ShopifyBuyInit() : 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;
    }
})();

---

深度讲解

这通过监听来自 Shopify Buy Button 的两个事件来实现:addVariantToCart 和 updateItemQuantity。您要做的第一件事是向产品 div 添加一个 data-minqty 属性。稍后我们将使用该数据属性。

<div id='product-component-05cfb487fb6' data-minqty='5'></div>

第一个事件在点击添加到购物车时触发。我们将听取它，以便我们可以将 minQty 项添加到购物车(在我们的示例中，这是 5)。

"addVariantToCart": function(product) {
    product.model.selectedQuantity = 1;
    var minQty = $(product.node).data('minqty');
    if (product.cart.model.lineItemCount < minQty) {
        product.updateQuantity(function() {
            return minQty - product.cart.model.lineItemCount;
        });
    }
}

首先将商品的选定数量设置为 1。这是因为选定数量会自动设置为上次添加的数量，如果我们是第一次将商品添加到购物车，它将 == minQty(即 5)。然后我们从我们之前添加的数据属性中找到最小数量(product.node 是产品的 div 元素)。我们检查数量是否小于 minQty，如果是，我们对产品运行 updateQuantity。出于某种原因，它是相对的，所以我们使用 minQty 和 product.cart.model.lineItemCount 之间的差来运行它，这是当前数量。

第二个事件在更改购物车本身的数量时触发。我们听取它，以确保客户不会将数量减少到 minQty 以下。

"updateItemQuantity": function(cart) {
    for (let i = 0; i < ui.components.product.length; i++) {
        var product = ui.components.product[i];
        var node = product.node;
        if ($(node).data('minqty')) {
            var minQty = $(node).data('minqty');
            setTimeout(function() {
                setProductQuantity(node, product, minQty, ui);
            }, 1);
        }
    }
}

由于我们不确切知道购物车中的哪件商品的数量发生了变化，我们会检查所有商品并检查它们是否有 minQty，如果有，是否有他们在下面。然后我们使用 setTimeout，因为这个事件在 数量更新之前触发，所以如果我们在这里更改它，它只会被重置。我们称这个函数为:

function setProductQuantity(node, product, minQty, ui) {
    if (product.cart.model.lineItemCount < minQty && product.cart.model.lineItemCount > 0) {
        $('.shopify-buy-cart-wrapper').find('iframe').contents().find("div[id='" + product.cart.model.lineItems[0].id + "']").find('.shopify-buy__quantity-decrement').click();
    }
}

此函数检查新数量是否小于 minQty。如果不是，我们什么都不做(让数量正常更新)。如果是，我们想从购物车中移除该商品。没有“删除”按钮(它通常依赖于将数量降低到 0 才能从购物车中删除)，并且由于我们有最小数量，所以这不可能发生，因此我们需要检查并手动删除它。我们只是模拟点击“数量减少”按钮。我们只需要这样做一次，因为每次我们这样做都会触发 updateItemQuantity，因此它会自循环直到项目被删除。

---

与您的代码集成

我无法直接测试您的代码，但我已将我的更改添加到您的代码中，希望您能够弄明白。它确实需要 jQuery，因为我对 native Javascript 的了解不足以完成我需要做的事情。

<div id='product-component-ITEM-ID' data-minqty='5'></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: 'DOMAIN.myshopify.com',apiKey: 'API-KEY',appId: '6'});
    ShopifyBuy.UI.onReady(client).then(function(ui){ui.createComponent('product',{id:["ITEM-ID"],node:document.getElementById('product-component-{{page.item_id}}'),moneyFormat:'%24%7B%7Bamount%7D%7D',

    options:{
      "product":{
        "variantId":"all",
        "width":"240px",
        "contents":{
          "img":false,
          "imgWithCarousel":false,
          "title":false,
          "variantTitle":false,
          "price":false,
          "description":false,
          "buttonWithQuantity":false,
          "quantity":false
        },
        "events": {
          "addVariantToCart": function(product) {
            product.model.selectedQuantity = 1;
            var minQty = $(product.node).data('minqty');
            if (product.cart.model.lineItemCount < minQty) {
              product.updateQuantity(function() {
                return minQty - (product.cart.model.lineItemCount);
              });
            }
          }
        }
        "text":{
          "button":"ADD TO BAG"
        },
        "styles":{
          "product":{
            "text-align":"left",
            "@media(min-width:601px)":{
              "max-width":"100%",
              "margin-left":"0",
              "margin-bottom":"50px"
            }
          },
          "button":{
            "background-color":"#393a39",
            "font-family":"Lato,sans-serif",
            "font-size":"13px",
            "padding-top":"14.5px",
            "padding-bottom":"14.5px",
            "padding-left":"35px",
            "padding-right":"35px",
            ":hover":{
              "background-color":"#333433"
            },
            "border-radius":"0px",
            ":focus":{
              "background-color":"#333433"
            },
            "font-weight":"normal"
          },
          "title":{
            "font-size":"26px"
          },
          "price":{
            "font-size":"18px"
          },
          "quantityInput":{
            "font-size":"13px",
            "padding-top":"14.5px",
            "padding-bottom":"14.5px"
          },
          "compareAt":{
            "font-size":"15px"
          }
        },
        "googleFonts":[
          "Lato"
        ]
      },
      "cart":{
        "contents":{
          "button":true
        },
        "events": {
          "updateItemQuantity": function(cart) {
            for (let i = 0; i < ui.components.product.length; i++) {
              var product = ui.components.product[i];
              var node = product.node;
              if ($(node).data('minqty')) {
                var minQty = $(node).data('minqty');
                setTimeout(function() {
                  setProductQuantity(node, product, minQty, ui);
                }, 1);
              }
            }
          }
        }
        "styles":{
          "button":{
            "background-color":"#393a39",
            "font-family":"Lato,sans-serif",
            "font-size":"13px",
            "padding-top":"14.5px",
            "padding-bottom":"14.5px",
            ":hover":{
              "background-color":"#333433"
            },
            "border-radius":"0px",
            ":focus":{
              "background-color":"#333433"
            },
            "font-weight":"normal"
          },
          "footer":{
            "background-color":"#ffffff"
          }
        },
        "googleFonts":[
          "Lato"
        ]
      },
      "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":"#393a39",
            "font-family":"Lato,sans-serif",
            "font-size":"13px",
            "padding-top":"14.5px",
            "padding-bottom":"14.5px",
            "padding-left":"35px",
            "padding-right":"35px",
            ":hover":{
              "background-color":"#333433"
            },
            "border-radius":"0px",
            ":focus":{
              "background-color":"#333433"
            },
            "font-weight":"normal"
          },
          "quantityInput":{
            "font-size":"13px",
            "padding-top":"14.5px",
            "padding-bottom":"14.5px"
          }
        },
        "googleFonts":[
          "Lato"
        ]
      },
      "toggle":{
        "iframe":false,
        "sticky":false,
        "templates":{
          "icon":'<i class="fa fa-shopping-bag fa-lg darkgrey" aria-hidden="true"></i>'
        },
        "contents":{
          "icon":true,
          "title":false
        },
        "events":{
          afterInit:function (component)      {
            document.getElementById('cart-toggle').appendChild(component.node);
          },

        },
        "order":[
          'count',
          'icon'
        ],
        "styles":{
          "toggle":{
            "font-family":"Lato,sans-serif",
            "background-color":"#393a39",
            ":hover":{
              "background-color":"#333433"
            },
            ":focus":{
              "background-color":"#333433"
            },
            "font-weight":"normal"
          },
          "count":{
            "font-size":"13px"
          }
        },
        "googleFonts":[
          "Lato"
        ]
      },
      "productSet":{
        "styles":{
          "products":{
            "@media(min-width:601px)":{
              "margin-left":"-20px"
            }
          }
        }
      }
    }
    }

    );});}})();

    function setProductQuantity(node, product, minQty, ui) {
      if (product.cart.model.lineItemCount < minQty && product.cart.model.lineItemCount > 0) {
        $('.shopify-buy-cart-wrapper').find('iframe').contents().find("div[id='" + product.cart.model.lineItems[0].id + "']").find('.shopify-buy__quantity-decrement').click();
      }
    }
/*]]>*/
</script>