Мобильная версияКак удалить позицию из корзины Shopify без обновления страницы? ⇐ Jquery
-
Гость
Как удалить позицию из корзины Shopify без обновления страницы?
Я пытаюсь удалить позицию корзины Shopify по клику без обновления страницы. Мне это не удалось.
удалить это будет работать с загрузкой страницы корзины. Хочу без перезагрузки страницы.
После комментария добавлен код всплывающего окна полной корзины.
Всплывающее HTML-окно корзины
Ваша корзина {% для товара в корзине.items %} {{ item.product.title }} {{ item.variant.title }} {{ item.price | деньги }} Удалить {% конец для %} Итого {{cart.total_price | деньги }} Оформить заказ Ваша корзина Скрипт добавления в корзину
$('.varients-item').on('click', function(){ вар объект = $(это); varvariant_id = $(this).attr("вариант данных"); $.ajax({ тип: «ПОСТ», URL: '/cart/add.js', данные: { количество: 1, идентификатор: options_id }, Тип данных: 'JSON', успех: функция (данные) { $.ajax({ введите: «ПОЛУЧИТЬ», Тип данных: 'jsonp', URL: '/cart.json', успех: функция(корзина){ вар item_count = корзина['item_count']; вар total_price = корзина['total_price']/100; //Если в корзине есть товары если (количество_элементов > 0) { // количество корзин $('.cart-item-count span').text(item_count); // данные мини-корзины $('.cart-popup').attr('id','cartPopup'); $('.cartpopup-total .price').text( '£' + total_price.toFixed(2) ); вар cart_list = []; for( var я = 0; я < item_count; я++ ){ if (cart['items']['id'] != null ) { var item_id = корзина['items']['id']; var product_title = корзина['items']['product_title']; // var product_title = data['items']['title']; var product_handle = корзина['items']['handle']; var количество = корзина['предметы']['количество']; var line_price = корзина['items']['price']/100; var url = корзина['items']['url']; var image_url = корзина['items']['image']; var варианты = корзина['items'][i]['variant_options']; if (product_title == 'Подарочная упаковка') { вар Product_url = Product_title; } еще { var product_url = 'Удалить '+ ''+ ''+ '' ); } //конец, если }; // конец для $('.cartpopup-body').html(cart_list.join('') ); } } }); } }); }); Обновить количество всплывающих окон минус
$('.cart-popup .cartpopup-body ').on('click', '.quantity-button.qminus', function(){ если ($(this).next().val() > 1) { var QuantityItem = $(this).next().val(+$(this).next().val() - 1); } var vId = $(this).attr("вариант данных"); вар количествоVal = $(this).next().val(); $.ajax({ тип: «ПОСТ», URL: '/cart/change.js', Тип данных: 'JSON', данные: { количество: количествоВал, идентификатор: видео }, успех: функция (данные) { $.ajax({ введите: «ПОЛУЧИТЬ», Тип данных: 'jsonp', URL: '/cart.json', успех: функция(корзина){ вар item_count = корзина['item_count']; вар total_price = корзина['total_price']/100; если ( item_count > 0 ) { $('.cart-item-count span').text(item_count); // данные мини-корзины $('.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("вариант данных"); вар количествоVal = $(this).prev().val(); $.ajax({ тип: «ПОСТ», URL: '/cart/add.js', Тип данных: 'JSON', данные: { количество: 1, идентификатор: видео }, успех: функция (данные) { $.ajax({ введите: «ПОЛУЧИТЬ», Тип данных: 'jsonp', URL: '/cart.json', успех: функция(корзина){ вар item_count = корзина['item_count']; вар total_price = корзина['total_price']/100; если (количество_элементов > 0) { $('.cart-item-count span').text(item_count); // данные мини-корзины $('.cart-popup').attr('id','cartPopup'); $('.cartpopup-total .price').text( '£' + total_price.toFixed(2) ); } } }); } }); }); Удалить скрипт позиции корзины
$('.cart-popup .cartpopup-body').on('click', '.cartpopup-item .remove', function(e){ вар объект = $(это); е.preventDefault(); е.stopPropagation(); var productId = $(this).attr('вариант данных'); $.ajax({ тип: «ПОСТ», URL: '/cart/update.js', Тип данных: 'JSON', данные: { количество: 0, идентификатор: идентификатор продукта }, успех: функция (данные) { $.ajax({ введите: «ПОЛУЧИТЬ», Тип данных: 'jsonp', URL: '/cart.json', успех: функция(корзина){ вар item_count = корзина['item_count']; вар total_price = корзина['total_price']/100; если ( item_count > 0 ) { $('.cart-item-count span').text(item_count); // данные мини-корзины $('.cart-popup').attr('id','cartPopup'); $('.cartpopup-total .price').text( '£' + total_price.toFixed(2) ); // Убрать предмет $(this).parents('.cartpopup-item').remove(); } } }); } }); }); Код SCSS всплывающего окна корзины
.cart-popup{ цвет фона: белый; // отображение: нет; высота: 100%; переполнение-х: скрыто; переполнение-у: авто; отступ: 30 пикселей; положение: фиксированное; правильно: 0; верх: 0; -webkit-transform: TranslateX(100%); -ms-transform: TranslateX(100%); преобразование: TranslateX (100%); -webkit-transition: все 0,3 с линейны; -o-переход: все 0,3 с линейны; переход: все 0,3 с линейные; ширина: 380 пикселей; z-индекс: 1060; &.активный{ -webkit-transform: TranslateX (0); -ms-преобразование: TranslateX (0); преобразование: TranslateX (0); дисплей: блок; } .cartpopup-header{ border-bottom: 1px сплошной rgba(#cbcbcb, 0.5); поле внизу: 30 пикселей; отступ снизу: 30 пикселей; ч4{ цвет: #212121; размер шрифта: 35 пикселей; вес шрифта: 700; высота строки: .9; поле-дно: 0; } .hide-popup{ цвет фона: прозрачный; граница: нет; граница-радиус: 0; цвет: #212121; размер шрифта: 20 пикселей; высота строки: 1; заполнение: 0; } } .cartpopup-body{ .cartpopup-item{ border-bottom: 1px сплошной rgba(#cbcbcb, 0.5); отступ снизу: 30 пикселей; &:not(:последний ребенок){ поле внизу: 30 пикселей; } .cartpopup-item-image{ гибкая основа: 115 пикселей; гибкий рост: 0; гибкое сжатие: 0; максимальная ширина: 115 пикселей; а { дисплей: блок; } } .cartpopup-item-content{ flex-basis: Calc(100% - 115px); гибкий рост: 0; гибкое сжатие: 0; максимальная ширина: Calc(100% - 115px); отступ слева: 15 пикселей; h5{ поле-дно: 0; а { цвет: #212121; размер шрифта: 1rem; вес шрифта: 300; высота строки: 1,25; переход: все 0,3 с, плавность входа-выхода 0 с; &:наведите{ цвет: #00cece; текстовое оформление: нет; } } } .вариант, .цена{ цвет: #a0a0a0; размер шрифта: 14 пикселей; вес шрифта: 300; высота строки: 1,5; } .удалять{ цвет: #c64141; размер шрифта: 14 пикселей; вес шрифта: 300; высота строки: 1,25; } .количество-коробка{ граница: 1 пиксель сплошной rgba(#cbcbcb, 0.5); поле внизу: 15 пикселей; маржа сверху: 10 пикселей; максимальная ширина: 100 пикселей; .количество-кнопка{ цвет фона: прозрачный; граница: нет; цвет: #a0a0a0; размер шрифта: 14 пикселей; минимальная ширина: 25 пикселей; заполнение: 0; ширина: 25 пикселей; } .количество-вход{ -moz-внешний вид: текстовое поле; -webkit-внешний вид: нет; внешний вид: нет; -внешний вид: нет; цвет фона: прозрачный; цвет границы: rgba(#cbcbcb, 0,5); ширина границы: 0 1px; стиль границы: сплошной; коробка-тень: нет; цвет: #a0a0a0; размер шрифта: 14 пикселей; вес шрифта: 300; высота: 25 пикселей; отступ: 0 5 пикселей; выравнивание текста: по центру; пробел: nowrap; ширина: 100%; &::-webkit-outer-spin-button, &::-webkit-внутренняя-кнопка вращения { -webkit-внешний вид: нет; допуск: 0; } &:наведите{ коробка-тень: нет; } } } } } } .cartpopup-footer{ .cartpopup-total{ border-bottom: 1px сплошной rgba(#cbcbcb, 0.5); высота: 65 пикселей; поле внизу: 30 пикселей; охватывать{ цвет: #212121; размер шрифта: 1rem; вес шрифта: 700; высота строки: 1,5; } } .cartpopup-кнопки{ .cartpopup-кнопка{ цвет фона: $button-bg; граница: 1 пиксель, сплошная $button-border; граница-радиус: 0; цвет: $button-text; высота: 50 пикселей; поле справа: 20 пикселей; отступ: 5 пикселей; переход: все 0,3 с, плавность входа-выхода 0 с; ширина: 140 пикселей; &: наведите курсор, &:фокус{ цвет фона: $button-bg-hover; цвет: $button-text-hover; текстовое оформление: нет; } } .cartpopup-button-alter{ выровнять-элементы: по центру; цвет фона: $button-bg-hover; граница: 1 пиксель, сплошная $button-border; граница-радиус: 0; цвет: $button-text-hover; дисплей: гибкий; гибкое направление: строка; высота: 50 пикселей; оправдание-содержание: центр; отступ: 5 пикселей; переход: все 0,3 с, плавность входа-выхода 0 с; ширина: 140 пикселей; &: наведите курсор, &:фокус{ цвет фона: $button-bg; цвет: $button-text; текстовое оформление: нет; } } } } } [*]Вопрос 1. Почему мой скрипт Ajax не может удалить позицию корзины из всплывающего окна корзины? Что я сделал не так? Как это решить?
[*]
Вопрос 2. Будет ли этот скрипт minicart работать с удалением позиции и обновлением количества при клике событии в /cart страница?
Я пытаюсь удалить позицию корзины Shopify по клику без обновления страницы. Мне это не удалось.
удалить это будет работать с загрузкой страницы корзины. Хочу без перезагрузки страницы.
После комментария добавлен код всплывающего окна полной корзины.
Всплывающее HTML-окно корзины
Ваша корзина {% для товара в корзине.items %} {{ item.product.title }} {{ item.variant.title }} {{ item.price | деньги }} Удалить {% конец для %} Итого {{cart.total_price | деньги }} Оформить заказ Ваша корзина Скрипт добавления в корзину
$('.varients-item').on('click', function(){ вар объект = $(это); varvariant_id = $(this).attr("вариант данных"); $.ajax({ тип: «ПОСТ», URL: '/cart/add.js', данные: { количество: 1, идентификатор: options_id }, Тип данных: 'JSON', успех: функция (данные) { $.ajax({ введите: «ПОЛУЧИТЬ», Тип данных: 'jsonp', URL: '/cart.json', успех: функция(корзина){ вар item_count = корзина['item_count']; вар total_price = корзина['total_price']/100; //Если в корзине есть товары если (количество_элементов > 0) { // количество корзин $('.cart-item-count span').text(item_count); // данные мини-корзины $('.cart-popup').attr('id','cartPopup'); $('.cartpopup-total .price').text( '£' + total_price.toFixed(2) ); вар cart_list = []; for( var я = 0; я < item_count; я++ ){ if (cart['items']['id'] != null ) { var item_id = корзина['items']['id']; var product_title = корзина['items']['product_title']; // var product_title = data['items']['title']; var product_handle = корзина['items']['handle']; var количество = корзина['предметы']['количество']; var line_price = корзина['items']['price']/100; var url = корзина['items']['url']; var image_url = корзина['items']['image']; var варианты = корзина['items'][i]['variant_options']; if (product_title == 'Подарочная упаковка') { вар Product_url = Product_title; } еще { var product_url = 'Удалить '+ ''+ ''+ '' ); } //конец, если }; // конец для $('.cartpopup-body').html(cart_list.join('') ); } } }); } }); }); Обновить количество всплывающих окон минус
$('.cart-popup .cartpopup-body ').on('click', '.quantity-button.qminus', function(){ если ($(this).next().val() > 1) { var QuantityItem = $(this).next().val(+$(this).next().val() - 1); } var vId = $(this).attr("вариант данных"); вар количествоVal = $(this).next().val(); $.ajax({ тип: «ПОСТ», URL: '/cart/change.js', Тип данных: 'JSON', данные: { количество: количествоВал, идентификатор: видео }, успех: функция (данные) { $.ajax({ введите: «ПОЛУЧИТЬ», Тип данных: 'jsonp', URL: '/cart.json', успех: функция(корзина){ вар item_count = корзина['item_count']; вар total_price = корзина['total_price']/100; если ( item_count > 0 ) { $('.cart-item-count span').text(item_count); // данные мини-корзины $('.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("вариант данных"); вар количествоVal = $(this).prev().val(); $.ajax({ тип: «ПОСТ», URL: '/cart/add.js', Тип данных: 'JSON', данные: { количество: 1, идентификатор: видео }, успех: функция (данные) { $.ajax({ введите: «ПОЛУЧИТЬ», Тип данных: 'jsonp', URL: '/cart.json', успех: функция(корзина){ вар item_count = корзина['item_count']; вар total_price = корзина['total_price']/100; если (количество_элементов > 0) { $('.cart-item-count span').text(item_count); // данные мини-корзины $('.cart-popup').attr('id','cartPopup'); $('.cartpopup-total .price').text( '£' + total_price.toFixed(2) ); } } }); } }); }); Удалить скрипт позиции корзины
$('.cart-popup .cartpopup-body').on('click', '.cartpopup-item .remove', function(e){ вар объект = $(это); е.preventDefault(); е.stopPropagation(); var productId = $(this).attr('вариант данных'); $.ajax({ тип: «ПОСТ», URL: '/cart/update.js', Тип данных: 'JSON', данные: { количество: 0, идентификатор: идентификатор продукта }, успех: функция (данные) { $.ajax({ введите: «ПОЛУЧИТЬ», Тип данных: 'jsonp', URL: '/cart.json', успех: функция(корзина){ вар item_count = корзина['item_count']; вар total_price = корзина['total_price']/100; если ( item_count > 0 ) { $('.cart-item-count span').text(item_count); // данные мини-корзины $('.cart-popup').attr('id','cartPopup'); $('.cartpopup-total .price').text( '£' + total_price.toFixed(2) ); // Убрать предмет $(this).parents('.cartpopup-item').remove(); } } }); } }); }); Код SCSS всплывающего окна корзины
.cart-popup{ цвет фона: белый; // отображение: нет; высота: 100%; переполнение-х: скрыто; переполнение-у: авто; отступ: 30 пикселей; положение: фиксированное; правильно: 0; верх: 0; -webkit-transform: TranslateX(100%); -ms-transform: TranslateX(100%); преобразование: TranslateX (100%); -webkit-transition: все 0,3 с линейны; -o-переход: все 0,3 с линейны; переход: все 0,3 с линейные; ширина: 380 пикселей; z-индекс: 1060; &.активный{ -webkit-transform: TranslateX (0); -ms-преобразование: TranslateX (0); преобразование: TranslateX (0); дисплей: блок; } .cartpopup-header{ border-bottom: 1px сплошной rgba(#cbcbcb, 0.5); поле внизу: 30 пикселей; отступ снизу: 30 пикселей; ч4{ цвет: #212121; размер шрифта: 35 пикселей; вес шрифта: 700; высота строки: .9; поле-дно: 0; } .hide-popup{ цвет фона: прозрачный; граница: нет; граница-радиус: 0; цвет: #212121; размер шрифта: 20 пикселей; высота строки: 1; заполнение: 0; } } .cartpopup-body{ .cartpopup-item{ border-bottom: 1px сплошной rgba(#cbcbcb, 0.5); отступ снизу: 30 пикселей; &:not(:последний ребенок){ поле внизу: 30 пикселей; } .cartpopup-item-image{ гибкая основа: 115 пикселей; гибкий рост: 0; гибкое сжатие: 0; максимальная ширина: 115 пикселей; а { дисплей: блок; } } .cartpopup-item-content{ flex-basis: Calc(100% - 115px); гибкий рост: 0; гибкое сжатие: 0; максимальная ширина: Calc(100% - 115px); отступ слева: 15 пикселей; h5{ поле-дно: 0; а { цвет: #212121; размер шрифта: 1rem; вес шрифта: 300; высота строки: 1,25; переход: все 0,3 с, плавность входа-выхода 0 с; &:наведите{ цвет: #00cece; текстовое оформление: нет; } } } .вариант, .цена{ цвет: #a0a0a0; размер шрифта: 14 пикселей; вес шрифта: 300; высота строки: 1,5; } .удалять{ цвет: #c64141; размер шрифта: 14 пикселей; вес шрифта: 300; высота строки: 1,25; } .количество-коробка{ граница: 1 пиксель сплошной rgba(#cbcbcb, 0.5); поле внизу: 15 пикселей; маржа сверху: 10 пикселей; максимальная ширина: 100 пикселей; .количество-кнопка{ цвет фона: прозрачный; граница: нет; цвет: #a0a0a0; размер шрифта: 14 пикселей; минимальная ширина: 25 пикселей; заполнение: 0; ширина: 25 пикселей; } .количество-вход{ -moz-внешний вид: текстовое поле; -webkit-внешний вид: нет; внешний вид: нет; -внешний вид: нет; цвет фона: прозрачный; цвет границы: rgba(#cbcbcb, 0,5); ширина границы: 0 1px; стиль границы: сплошной; коробка-тень: нет; цвет: #a0a0a0; размер шрифта: 14 пикселей; вес шрифта: 300; высота: 25 пикселей; отступ: 0 5 пикселей; выравнивание текста: по центру; пробел: nowrap; ширина: 100%; &::-webkit-outer-spin-button, &::-webkit-внутренняя-кнопка вращения { -webkit-внешний вид: нет; допуск: 0; } &:наведите{ коробка-тень: нет; } } } } } } .cartpopup-footer{ .cartpopup-total{ border-bottom: 1px сплошной rgba(#cbcbcb, 0.5); высота: 65 пикселей; поле внизу: 30 пикселей; охватывать{ цвет: #212121; размер шрифта: 1rem; вес шрифта: 700; высота строки: 1,5; } } .cartpopup-кнопки{ .cartpopup-кнопка{ цвет фона: $button-bg; граница: 1 пиксель, сплошная $button-border; граница-радиус: 0; цвет: $button-text; высота: 50 пикселей; поле справа: 20 пикселей; отступ: 5 пикселей; переход: все 0,3 с, плавность входа-выхода 0 с; ширина: 140 пикселей; &: наведите курсор, &:фокус{ цвет фона: $button-bg-hover; цвет: $button-text-hover; текстовое оформление: нет; } } .cartpopup-button-alter{ выровнять-элементы: по центру; цвет фона: $button-bg-hover; граница: 1 пиксель, сплошная $button-border; граница-радиус: 0; цвет: $button-text-hover; дисплей: гибкий; гибкое направление: строка; высота: 50 пикселей; оправдание-содержание: центр; отступ: 5 пикселей; переход: все 0,3 с, плавность входа-выхода 0 с; ширина: 140 пикселей; &: наведите курсор, &:фокус{ цвет фона: $button-bg; цвет: $button-text; текстовое оформление: нет; } } } } } [*]Вопрос 1. Почему мой скрипт Ajax не может удалить позицию корзины из всплывающего окна корзины? Что я сделал не так? Как это решить?
[*]
Вопрос 2. Будет ли этот скрипт minicart работать с удалением позиции и обновлением количества при клике событии в /cart страница?
