Как удалить позицию из корзины Shopify без обновления страницы? ⇐ Jquery

[Anonymous]

Я пытаюсь удалить позицию корзины Shopify по клику без обновления страницы. У меня в этом нет успеха.

Код: Выделить всё

[url=/cart/change?line={{ forloop.index }}&quantity=0]remove[/url]

он будет работать с загрузкой страницы корзины. Я хочу без перезагрузки страницы.


После комментария добавлен код всплывающего окна с полной корзиной.


Всплывающее HTML-всплывающее окно корзины

Код: Выделить всё

[h4]Your Cart[/h4]

[i][/i]


{% for item in cart.items %}


[url={{ item.url | within: collections.all }}]
[i]
[/url]

[url={{ item.url }}]{{ item.product.title }}[/url]
{{ item.variant.title }}
{{ item.price | money }}

[/i]
[i]
[/i]

[url=/cart/change?line={{ forloop.index }}&quantity=0]Remove[/url]




{% endfor %}



Total
{{ cart.total_price | money }}

Checkout
[url={{ routes.cart_url }}]Your Cart[/url]

Скрипт добавления в корзину

Код: Выделить всё

$('.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 = '[url=/cart/change?line=]Remove[/url]'+
''+
''+
''
);
} //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;
}
}
}
}
}

• Вопрос 1. Почему мой скрипт Ajax не может удалить позицию корзины
  из всплывающего окна корзины? Что я сделал не так? Как это решить?
• Вопрос 2. Будет ли этот скрипт minicart работать с удалением позиции и обновлением количества при событии клика на странице /cart?

Подробнее здесь: https://stackoverflow.com/questions/618 ... ge-refresh