Automatyczna aktualizacja ilości koszyka przy zmianie ilości

W domyślnym koszyku Magento, gdy klient edytuje ilość, musi nacisnąć przycisk, aby zaktualizować ilość.

Czy istnieje sposób, aby koszyk automatycznie aktualizował ilość, gdy użytkownik wprowadzi inny numer w polu ilości?

Najpierw edytuj szablon koszyka /app/design/frontend/{package}/{theme}/template/checkout/cart.phtmli dodaj identyfikator w elemencie formularza, aby ułatwić dostęp. Powiedzmy, że dodajesz „id =" cart-form "';

Teraz edytuj szablony renderujące elementy koszyka:

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

i na <input>elemencie o nazwie cart[<?php echo $_item->getId() ?>][qty]dodaj to:

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

Ale nie polecam tego robić. To naprawdę denerwujące dla użytkowników. (przynajmniej dla mnie).

Zakładając, że twoja strona ma jQuery w trybie bez konfliktów, oto sposób na zrobienie tego asynchronicznie (znacznie mniej irytująco!).

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()
            });
        }
    );
});

Powinienem zaznaczyć, że przyjmuje to następujące założenia:

• Twój koszyk żyje w elemencie o identyfikatorze tabela zakupów
• Twoje pola wejściowe dla ilości mają atrybut nazwy, który kończy się na [ilość]

Należy łatwo ustawić selektory w kodzie odpowiednio w wierszach 2 i 5, aby dopasować je do okoliczności.

Edytuj te dwa pliki

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

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

i na elemencie o nazwie cart[<?php echo $_item->getId() ?>][qty]dodaj to:

onchange="this.form.submit()"

Jeśli twoja wersja jQuery jest stara, nie odniesiesz sukcesu. Znalazłem sposób, który jest następujący: postępuj zgodnie z instrukcjami naszego przyjaciela Mariusa, aby wstawić

/app/design/frontend/{package}/{theme}/template/checkout/cart.phtmli dodaj identyfikator do elementu formularza, aby ułatwić dostęp. Powiedzmy, że dodajeszid="cart-form"

Teraz otwórz plik

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

I przewiń do końca pliku, a znajdziesz javascript, który zwiększa i zmniejsza ilość. Funkcja będzie wyglądać następująco:

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;
    }
}

Zmień na to:

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();   
    }
}

W przypadku, gdy nie masz jeszcze załadowanego jQuery, możesz również znaleźć <input> element (lub w moim przypadku <select>element, ponieważ zbudowałem pole rozwijane, aby wybrać kwotę) z nazwą name="cart[<?php echo $_item->getId() ?>][qty]"i dodać to:

onchange="this.form.submit()"

Plik phtml, który musisz edytować, znajduje się tutaj:

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