我目前正在使用 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>
最佳答案
经过几个小时的实验,这是我想出的解决方案。到目前为止,我的测试表明它稳健可靠,但如果您发现任何问题,请告诉我,我会尽力而为。
以下是代码,使用来自 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>
关于javascript - Shopify Buy Button 最小数量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44683058/