如何在不刷新页面的情况下从 shopify 购物车中删除行项目?

Question

我正在尝试在不刷新页面的情况下删除 Shopify 行购物车行项目。我对此没有成功。

<a href="/cart/change?line={{ forloop.index }}&amp;quantity=0">remove</a>它将适用于购物车页面加载。我想要没有页面重新加载。

评论后添加完整的购物车弹出代码。

购物车网页弹出窗口

<div class="cart-popup" id="cartPopup">
<form action="/cart" method="post" novalidate>
<div class="cartpopup-header d-flex flex-row align-items-center justify-content-between">
<h4>Your Cart</h4>
<button class="hide-popup" role="button" type="button">
<i class="fal fa-times"></i>
</button>
</div>
<div class="cartpopup-body d-flex flex-column">
{% for item in cart.items %}
<div class="cartpopup-item d-flex flex-row">
<div class="cartpopup-item-image">
<a href="{{ item.url | within: collections.all }}">
<img class="img-fluid d-block" src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
</a>
</div>
<div class="cartpopup-item-content d-flex flex-column">
<h5><a href="{{ item.url }}">{{ item.product.title }}</a></h5>
<span class="variant">{{ item.variant.title }}</span>
<span class="price">{{ item.price | money }}</span>
<div class="quantity-box d-flex flex-row">
<button class="quantity-button qminus" role="button" type="button" data-variant="{{ item.variant.id }}"><i class="fal fa-minus"></i></button>
<input class="quantity-input" type="number" disabled name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="1" />
<button class="quantity-button qplus" role="button" type="button" data-variant="{{ item.variant.id }}"><i class="fal fa-plus"></i></button>
</div>
<div class="d-flex flex-row">
<a class="remove" data-variant="{{ item.variant.id }}" href="/cart/change?line={{ forloop.index }}&amp;quantity=0">Remove</a>
</div>
</div>
</div>
<!-- Each item -->
{% endfor %}
</div>
<div class="cartpopup-footer d-flex flex-column">
<div class="cartpopup-total d-flex flex-row align-items-center justify-content-between">
<span>Total</span>
<span class="price">{{ cart.total_price | money }}</span>
</div>
<div class="cartpopup-buttons d-flex flex-row justify-content-between">
<button class="cartpopup-button" type="submit" name="checkout">Checkout</button>
<a class="cartpopup-button-alter" href="{{ routes.cart_url }}">Your Cart</a>
</div>
</div>
</form>
</div>

购物车追加脚本

$('.varients-item').on('click', function(){
var obj = $(this);
var variants_id = $(this).attr("data-variant");
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: {
quantity: 1,
id: variants_id
},
dataType: 'json',
success: function (data) {
$.ajax({
type: 'GET',
dataType: 'jsonp',
url: '/cart.json',
success: function(cart){
var item_count = cart['item_count'];
var total_price = cart['total_price']/100;
//If there are items in cart
if ( item_count > 0 ) {
// cart count
$('.cart-item-count span').text(item_count);
// mini cart data
$('.cart-popup').attr('id','cartPopup');
$('.cartpopup-total .price').text( '£' + total_price.toFixed(2) );

var cart_list = [];
for( var i = 0; i < item_count; i++ ){
if ( cart['items'][i]['id'] != null ) {
var item_id = cart['items'][i]['id'];
var product_title = cart['items'][i]['product_title'];
// var product_title = data['items'][i]['title'];
var product_handle = cart['items'][i]['handle'];
var quantity = cart['items'][i]['quantity'];
var line_price = cart['items'][i]['price']/100;
var url = cart['items'][i]['url'];
var image_url = cart['items'][i]['image'];
var variants = cart['items'][i]['variant_options'];
if ( product_title == 'Gift Wrap' ) {
var product_url = product_title;
} else {
var product_url = '<a href="' + url + '">' + product_title + '</a>';
}
var options = [];
for ( var o = 0; o < variants.length; o++ ) {
var selected = cart['items'][i]['variant_options'][o];
if ( selected !== 'Default Title' ) {
options.push( selected + '<br>' );
}
};
var selected_options = options.join('');
cart_list.push(
'<div class="cartpopup-item d-flex flex-row">'+
'<div class="cartpopup-item-image">'+
'<a href="' + url + '">'+
'<img class="img-fluid d-block" src="' + image_url + '"  alt="' + product_title + '" />'+
'</a>'+
'</div>'+
'<div class="cartpopup-item-content d-flex flex-column">'+
'<h5>' + product_url + '</h5>'+
'<span class="variant">' + selected_options + '</span>'+
'<span class="price">£' + total_price.toFixed(2) + '</span>'+
'<div class="quantity-box d-flex flex-row">'+
'<button class="quantity-button qminus" role="button" type="button" data-variant="' + item_id + '"><i class="fal fa-minus"></i></button>'+
'<input class="quantity-input" type="number" disabled name="updates[]" id="updates_' + item_id + '" value="' + quantity + '" min="1" />'+
'<button class="quantity-button qplus" role="button" type="button" data-variant="' + item_id + '"><i class="fal fa-plus"></i></button>'+
'</div>'+
'<div class="d-flex flex-row">'+
'<a class="remove" data-cart-remove-id="' + item_id + '" href="/cart/change?line=' + item_count + '&amp;quantity=0">Remove</a>'+
'</div>'+
'</div>'+
'</div>'
);
} //endif
}; // endfor
$('.cartpopup-body').html( cart_list.join('') );
}
}
});
}
});
});

更新弹出窗口数量减去

$('.cart-popup .cartpopup-body ').on('click', '.quantity-button.qminus', function(){
if ($(this).next().val() > 1) {
var quantityItem = $(this).next().val(+$(this).next().val() - 1);
}
var vId = $(this).attr("data-variant");
var quantityVal = $(this).next().val();
$.ajax({
type: 'POST',
url: '/cart/change.js',
dataType: 'json',
data: {
quantity: quantityVal,
id: vId
},
success: function (data){
$.ajax({
type: 'GET',
dataType: 'jsonp',
url: '/cart.json',
success: function(cart){
var item_count = cart['item_count'];
var total_price = cart['total_price']/100;
if ( item_count > 0 ) {
$('.cart-item-count span').text(item_count);
// mini cart data
$('.cart-popup').attr('id','cartPopup');
$('.cartpopup-total .price').text( '£' + total_price.toFixed(2) );
}
}
});
}
});
});

更新弹出数量加

$('.cart-popup .cartpopup-body').on('click', '.quantity-button.qplus', function(){
$(this).prev().val(+$(this).prev().val() + 1);
var vId = $(this).attr("data-variant");
var quantityVal = $(this).prev().val();
$.ajax({
type: 'POST',
url: '/cart/add.js',
dataType: 'json',
data: {
quantity: 1,
id: vId
},
success: function (data){
$.ajax({
type: 'GET',
dataType: 'jsonp',
url: '/cart.json',
success: function(cart){
var item_count = cart['item_count'];
var total_price = cart['total_price']/100;
if ( item_count > 0 ) {
$('.cart-item-count span').text(item_count);
// mini cart data
$('.cart-popup').attr('id','cartPopup');
$('.cartpopup-total .price').text( '£' + total_price.toFixed(2) );
}
}
});
}
});
});

移除购物车订单项脚本

$('.cart-popup .cartpopup-body').on('click', '.cartpopup-item .remove', function(e){
var obj = $(this);
e.preventDefault();
e.stopPropagation();
var productId = $(this).attr('data-variant');
$.ajax({
type: 'POST',
url: '/cart/update.js',
dataType: 'json',
data: {
quantity: 0,
id: productId
},
success: function (data){
$.ajax({
type: 'GET',
dataType: 'jsonp',
url: '/cart.json',
success: function(cart){
var item_count = cart['item_count'];
var total_price = cart['total_price']/100;
if ( item_count > 0 ) {
$('.cart-item-count span').text(item_count);
// mini cart data
$('.cart-popup').attr('id','cartPopup');
$('.cartpopup-total .price').text( '£' + total_price.toFixed(2) );
// Remove item
$(this).parents('.cartpopup-item').remove();
}
}
});
}
});
});

购物车弹出 SCSS 代码

.cart-popup{
background-color: white;
//display: none;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
padding: 30px;
position: fixed;
right: 0;
top: 0;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
width: 380px;
z-index: 1060;
&.active{
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
display: block;
}
.cartpopup-header{
border-bottom: 1px solid rgba(#cbcbcb, 0.5);
margin-bottom: 30px;
padding-bottom: 30px;
h4{
color: #212121;
font-size: 35px;
font-weight: 700;
line-height: .9;
margin-bottom: 0;
}
.hide-popup{
background-color: transparent;
border: none;
border-radius: 0;
color: #212121;
font-size: 20px;
line-height: 1;
padding: 0;
}
}
.cartpopup-body{
.cartpopup-item{
border-bottom: 1px solid rgba(#cbcbcb, 0.5);
padding-bottom: 30px;
&:not(:last-child){
margin-bottom: 30px;
}
.cartpopup-item-image{
flex-basis: 115px;
flex-grow: 0;
flex-shrink: 0;
max-width: 115px;
a{
display: block;
}
}
.cartpopup-item-content{
flex-basis: calc(100% - 115px);
flex-grow: 0;
flex-shrink: 0;
max-width: calc(100% - 115px);
padding-left: 15px;
h5{
margin-bottom: 0;
a{
color: #212121;
font-size: 1rem;
font-weight: 300;
line-height: 1.25;
transition: all 0.3s ease-in-out 0s;
&:hover{
color: #00cece;
text-decoration: none;
}
}
}
.variant,
.price{
color: #a0a0a0;
font-size: 14px;
font-weight: 300;
line-height: 1.5;
}
.remove{
color: #c64141;
font-size: 14px;
font-weight: 300;
line-height: 1.25;
}
.quantity-box{
border: 1px solid rgba(#cbcbcb, 0.5);
margin-bottom: 15px;
margin-top: 10px;
max-width: 100px;
.quantity-button{
background-color: transparent;
border: none;
color: #a0a0a0;
font-size: 14px;
min-width: 25px;
padding: 0;
width: 25px;
}
.quantity-input{
-moz-appearance: textfield;
-webkit-appearance: none;
appearance: none;
-appearance: none;
background-color: transparent;
border-color: rgba(#cbcbcb, 0.5);
border-width: 0 1px;
border-style: solid;
box-shadow: none;
color: #a0a0a0;
font-size: 14px;
font-weight: 300;
height: 25px;
padding: 0 5px;
text-align: center;
white-space: nowrap;
width: 100%;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
&:hover{
box-shadow: none;
}
}
}
}
}
}
.cartpopup-footer{
.cartpopup-total{
border-bottom: 1px solid rgba(#cbcbcb, 0.5);
height: 65px;
margin-bottom: 30px;
span{
color: #212121;
font-size: 1rem;
font-weight: 700;
line-height: 1.5;
}
}
.cartpopup-buttons{
.cartpopup-button{
background-color: $button-bg;
border: 1px solid $button-border;
border-radius: 0;
color: $button-text;
height: 50px;
margin-right: 20px;
padding: 5px;
transition: all 0.3s ease-in-out 0s;
width: 140px;
&:hover,
&:focus{
background-color: $button-bg-hover;
color: $button-text-hover;
text-decoration: none;
}
}
.cartpopup-button-alter{
align-items: center;
background-color: $button-bg-hover;
border: 1px solid $button-border;
border-radius: 0;
color: $button-text-hover;
display: flex;
flex-direction: row;
height: 50px;
justify-content: center;
padding: 5px;
transition: all 0.3s ease-in-out 0s;
width: 140px;
&:hover,
&:focus{
background-color: $button-bg;
color: $button-text;
text-decoration: none;
}
}
}
}
}

• Q 1：为什么我的Ajax脚本无法移除购物车订单项 从购物车弹出窗口？我做错了什么？如何解决？

• Q 2：此小型购物车脚本是否适用于删除行项目并更新页面/cart数量on clickevent？

Answer 1

将 Ajax 请求 URL 从/cart/update.js更改为/cart/change.js