如何一键添加多个产品到Shopify购物车
How to Add Multiple Products to Shopify Cart with One Button Click
这是按钮的代码:
{% assign p_annual = all_products[section.settings.paid_product_annual] %}
{% assign p_free = all_products[section.settings.free_product] %}
{% if section.settings.productlink1label != blank %}
<button class="btn"
type="submit"
name="paid-plan"
id="paid-plan-option-annual"
data-variant-id="{{ p_annual.selected_or_first_available_variant.metafields.subscriptions.discount_variant_id }}"
data-variant-interval-value="{{ p_annual.metafields.subscriptions.shipping_interval_frequency }}"
data-variant-interval-unit="{{ p_annual.metafields.subscriptions.shipping_interval_unit_type }}"
data-quickadd-id="{{ p_annual.selected_or_first_available_variant.id }}"
data-quickadd-properties
>
{{ p_annual.selected_or_first_available_variant.price | money_without_trailing_zeros }}{{ section.settings.productlink1label }}
</button>
{% endif %}
代码通过 ID 获取项目并发出 AJAX 请求。
// quick add
_document.on('click', '[data-quickadd-id]', function() {
let _this = $(this);
loadingBarTrigger('start');
itemAdd(
_this.attr('data-quickadd-id'),
_this.attr('data-quickadd-properties'),
(_this.attr('data-quickadd-quantity'))
? _this.attr('data-quickadd-quantity')
: 1,
(!html.is('#cart')) ? true : false,
(html.is('#cart')) ? true : false
);
});
购物车功能内部:
onst itemAdd = (variantId, properties, qty, openCart, reloadPage) => {
$.ajax({
type: 'POST',
dataType: 'html',
url: `/cart/add.js`,
data:
{
id: variantId,
quantity: qty,
properties: (properties)
? JSON.parse(properties) : null
},
error: function(data) {
console.error(data);
loadingBarTrigger('done');
},
success: function() {
loadingBarTrigger('move');
$.ajax({
url: '/cart',
dataType: 'html',
error: function(data) {
console.error(data);
loadingBarTrigger('done');
},
success: function(data) {
let minicartContent = $('#minicart-content');
let cartItemsHtml = $(data).find('#cart-content #cart-items').html();
// insert or prepend cart HTML
(minicartContent.find('#cart-items').length)
? minicartContent.find('#cart-items').html(cartItemsHtml)
: minicartContent.prepend(cartItemsHtml);
// remove giftbox content if exists
(minicartContent.find('#cart-giftbox .item-info').length)
? minicartContent.find('#cart-giftbox .item-info').remove()
: '';
loadingBarTrigger('done');
cartTotalUpdate();
// open cart
(openCart && !html.is('#cart'))
? minicartTrigger.trigger('click') : '';
(reloadPage)
? location.reload() : '';
}
});
}
});
}
我知道这可以通过去年的 AJAX API 更新实现。但我不确定如何在我的商店中实施它。如果我没记错的话,data-variant-id 只接受一个值。什么是 data-variant-id 先到先得。我想最主要的是我不确定如何使用提交按钮发送 json。
有什么想法吗?
我认为您需要查看并默认Shopify文档,并根据文档修改代码。
在文档中,他们清楚地提到了如何使用 AJAX API.
添加多个产品
https://shopify.dev/docs/themes/ajax-api/reference/cart
因此您可以检查和更新代码并将多个变体传递到项目数组,就像这个演示代码一样。
jQuery.post('/cart/add.js', {
items: [
{
quantity: quantity,
id: 1st ID
},
{
quantity: quantity,
id: 2nd ID
},
{
quantity: quantity,
id: 3rd ID
}
]
});
这是按钮的代码:
{% assign p_annual = all_products[section.settings.paid_product_annual] %}
{% assign p_free = all_products[section.settings.free_product] %}
{% if section.settings.productlink1label != blank %}
<button class="btn"
type="submit"
name="paid-plan"
id="paid-plan-option-annual"
data-variant-id="{{ p_annual.selected_or_first_available_variant.metafields.subscriptions.discount_variant_id }}"
data-variant-interval-value="{{ p_annual.metafields.subscriptions.shipping_interval_frequency }}"
data-variant-interval-unit="{{ p_annual.metafields.subscriptions.shipping_interval_unit_type }}"
data-quickadd-id="{{ p_annual.selected_or_first_available_variant.id }}"
data-quickadd-properties
>
{{ p_annual.selected_or_first_available_variant.price | money_without_trailing_zeros }}{{ section.settings.productlink1label }}
</button>
{% endif %}
代码通过 ID 获取项目并发出 AJAX 请求。
// quick add
_document.on('click', '[data-quickadd-id]', function() {
let _this = $(this);
loadingBarTrigger('start');
itemAdd(
_this.attr('data-quickadd-id'),
_this.attr('data-quickadd-properties'),
(_this.attr('data-quickadd-quantity'))
? _this.attr('data-quickadd-quantity')
: 1,
(!html.is('#cart')) ? true : false,
(html.is('#cart')) ? true : false
);
});
购物车功能内部:
onst itemAdd = (variantId, properties, qty, openCart, reloadPage) => {
$.ajax({
type: 'POST',
dataType: 'html',
url: `/cart/add.js`,
data:
{
id: variantId,
quantity: qty,
properties: (properties)
? JSON.parse(properties) : null
},
error: function(data) {
console.error(data);
loadingBarTrigger('done');
},
success: function() {
loadingBarTrigger('move');
$.ajax({
url: '/cart',
dataType: 'html',
error: function(data) {
console.error(data);
loadingBarTrigger('done');
},
success: function(data) {
let minicartContent = $('#minicart-content');
let cartItemsHtml = $(data).find('#cart-content #cart-items').html();
// insert or prepend cart HTML
(minicartContent.find('#cart-items').length)
? minicartContent.find('#cart-items').html(cartItemsHtml)
: minicartContent.prepend(cartItemsHtml);
// remove giftbox content if exists
(minicartContent.find('#cart-giftbox .item-info').length)
? minicartContent.find('#cart-giftbox .item-info').remove()
: '';
loadingBarTrigger('done');
cartTotalUpdate();
// open cart
(openCart && !html.is('#cart'))
? minicartTrigger.trigger('click') : '';
(reloadPage)
? location.reload() : '';
}
});
}
});
}
我知道这可以通过去年的 AJAX API 更新实现。但我不确定如何在我的商店中实施它。如果我没记错的话,data-variant-id 只接受一个值。什么是 data-variant-id 先到先得。我想最主要的是我不确定如何使用提交按钮发送 json。
有什么想法吗?
我认为您需要查看并默认Shopify文档,并根据文档修改代码。 在文档中,他们清楚地提到了如何使用 AJAX API.
添加多个产品https://shopify.dev/docs/themes/ajax-api/reference/cart
因此您可以检查和更新代码并将多个变体传递到项目数组,就像这个演示代码一样。
jQuery.post('/cart/add.js', {
items: [
{
quantity: quantity,
id: 1st ID
},
{
quantity: quantity,
id: 2nd ID
},
{
quantity: quantity,
id: 3rd ID
}
]
});