Aggiorna automaticamente la quantità del carrello quando si cambia quantità

Nel carrello predefinito di Magento, quando il cliente modifica la quantità, deve premere il pulsante per aggiornare la quantità.

C'è un modo in cui il carrello aggiorna automaticamente la quantità quando l'utente inserisce un altro numero nel campo quantità?

In primo luogo modificare il modello di spesa /app/design/frontend/{package}/{theme}/template/checkout/cart.phtmle aggiungere un id sull'elemento modulo per facilitare l'accesso. Diciamo che aggiungi 'id = "cart-form"';

Ora modifica i modelli che rendono gli articoli del carrello:

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

e <input>sull'elemento con il nome cart[<?php echo $_item->getId() ?>][qty]aggiungi questo:

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

Ma non consiglio di farlo. È davvero fastidioso per gli utenti. (almeno per me).

Supponendo che il tuo sito abbia jQuery incluso in modalità senza conflitti, ecco un modo per farlo in modo asincrono (molto meno fastidioso!).

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

Vorrei sottolineare che ciò fa le seguenti ipotesi:

• Il tuo carrello della spesa vive all'interno di un elemento con l'id del carrello della spesa
• I campi di input per la quantità hanno un attributo name che termina con [qty]

Dovrebbe essere facile regolare i selettori nel codice rispettivamente nelle righe 2 e 5 in base alle circostanze.

Modifica questi due file

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

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

e sull'elemento con il nome cart[<?php echo $_item->getId() ?>][qty]aggiungi questo:

onchange="this.form.submit()"

Se la tua versione di jQuery è vecchia, non ci riuscirai. Ho trovato un modo che è il seguente, segui le istruzioni del nostro amico Marius da inserire

/app/design/frontend/{package}/{theme}/template/checkout/cart.phtmle aggiungi un ID sull'elemento del modulo per un accesso più semplice. Diciamo che aggiungiid="cart-form"

Ora apri il file

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

E scorri fino alla fine del file e troverai il javascript che esegue l'incremento e il decremento della quantità. La funzione sarà simile a questa:

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

Cambia per questo:

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

Se non hai caricato (ancora) jQuery, puoi anche trovare l' <input> elemento (o nel mio caso un <select>elemento da quando ho creato un campo a discesa per selezionare l'importo) con il nome name="cart[<?php echo $_item->getId() ?>][qty]"e aggiungere questo:

onchange="this.form.submit()"

Il file phtml che devi modificare si trova qui:

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