Автоматическое обновление количества корзины при изменении количества

12

В корзине Magento по умолчанию, когда клиент редактирует количество, ему нужно нажать кнопку, чтобы обновить количество.

Есть ли способ, чтобы корзина автоматически обновляла количество, когда пользователь вводит другой номер в поле количества?

JGeer
источник

Ответы:

14

Сначала отредактируйте шаблон корзины /app/design/frontend/{package}/{theme}/template/checkout/cart.phtmlи добавьте идентификатор в элемент формы для более удобного доступа. Допустим, вы добавили 'id = "cart-form"';

Теперь отредактируйте шаблоны, которые отображают элементы корзины:

  • приложение / дизайн / интерфейс / {пакет} / {тема} /template/checkout/cart/item/default.phtml
  • приложение / дизайн / интерфейс / {пакет} / {тема} /template/downloadable/checkout/cart/item/default.phtml

и на <input>элемент с именем cart[<?php echo $_item->getId() ?>][qty]добавить это:

onchange="$('cart-form').submit()"

Но я не рекомендую делать это. Это действительно раздражает пользователей. (по крайней мере для меня).

Мариус
источник
6
Раздражает пользователя ?! Нет проблем, мы делаем это все же: D
Фабиан Блехшмидт
5
@FabianBlechschmidt. Почему нет? Мы раздражены при его разработке, пользователь раздражен при его использовании. Вот что значит компромисс. Каждый проигрывает. :)
Мариус
Вы потрясающий Мариус. Как я могу сделать это с помощью Ajax?
Навинбос
6

Предполагая, что на вашем сайте jQuery включен в режиме без конфликтов, вот способ сделать это асинхронно (гораздо менее раздражающим!).

jQuery(document).ready(function(){
jQuery('#shopping-cart-table')
    .on(
        'change',
        'input[name$="[qty]"]',
        function(){
            var form = jQuery(jQuery(this).closest('form'));

            // we'll extract the action and method attributes out of the form

            // kick off an ajax request using the form's action and method,
            // with the form data as payload
            jQuery.ajax({
                url: form.attr('action'),
                method: form.attr('method'),
                data: form.serializeArray()
            });
        }
    );
});

Я должен отметить, что это делает следующие предположения:

  • Ваша корзина живет в элементе с идентификатором shopping-cart-table
  • Ваши поля ввода для количества имеют атрибут name, который заканчивается на [qty]

Должно быть легко настроить селекторы в коде в строках 2 и 5 соответственно, чтобы они соответствовали вашим обстоятельствам.

Джетха Чан
источник
Привет Джетха Я попробовал это, но он показывает checkout / cart / updatePost / 302 Найдено 1.71s есть идеи, почему он показывает, как это?
Навинбос
Параметры этой корзины [137] [кол-во] 1 корзина [139] [кол-во] 2 form_key zA1lLphVHPsEu4ux Используя это, как я могу опубликовать это, чтобы обновить действие после
публикации
Ваша корзина показывает обновленные количества?
Джета Чан
На самом деле это не значит что-либо возвращать; Более того, вы не должны заботиться о возвращаемом значении, когда делаете это таким образом. Что нужно проверить: - Ваша форма работает, когда отправлено нормально, то есть без AJAX? - когда значения изменяются с помощью AJAX, меняются ли значения в корзине (т.е. открываются в другом окне браузера)?
Джета Чан
1
Давайте продолжим эту дискуссию в чате .
Джета Чан
0

Отредактируйте эти два файла

app/design/frontend/{package}/{theme}/template/checkout/cart/item/default.phtml

app/design/frontend/{package}/{theme}/template/downloadable/checkout/cart/item/default.phtml

и на элемент с именем cart[<?php echo $_item->getId() ?>][qty]добавить это:

onchange="this.form.submit()"
snh_nl
источник
0

Если ваша версия jQuery старая, у вас ничего не получится. Я нашел способ, который заключается в следующем, следуйте инструкциям нашего друга Мариуса, чтобы вставить

/app/design/frontend/{package}/{theme}/template/checkout/cart.phtmlи добавьте идентификатор в элемент формы для облегчения доступа. Допустим, вы добавляетеid="cart-form"

Теперь откройте файл

app/design/frontend/{package}/{theme}/template/downloadable/checkout/cart/item/default.phtml

И прокрутите до конца файла, и вы найдете javascript, который увеличивает и уменьшает количество. Функция будет выглядеть так:

function plusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    qty++;
    $('qty'+itemId).value = qty;
}

function minusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    if(qty>0){
        qty--;
        $('qty'+itemId).value = qty;
    }
}

Изменить на это:

function plusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    qty++;
    $('qty'+itemId).value = qty;
    document.getElementById("cart-form").submit();  
}

function minusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);

    if(qty>0){
        qty--;
        $('qty'+itemId).value = qty;
         document.getElementById("cart-form").submit();   
    }
}
Лукас Хулио Сильвейра
источник
0

В случае, если у вас не загружен jQuery (пока), вы также можете найти <input> элемент (или в моем случае <select>элемент, так как я создал выпадающее поле для выбора суммы) с именем name="cart[<?php echo $_item->getId() ?>][qty]"и добавить это:

onchange="this.form.submit()"

Файл phtml, который вы должны отредактировать, находится здесь:

app/design/frontend/{package}/{theme}/template/checkout/cart/item/default.phtml
TheFrakes
источник