Actualización automática de la cantidad del carro cuando se cambia la cantidad

En el carrito predeterminado de Magento, cuando el cliente edita la cantidad, debe presionar el botón para actualizar la cantidad.

¿Hay alguna manera de que el carrito actualice la cantidad automáticamente cuando el usuario ingresa otro número en el campo de cantidad?

Primero edite la plantilla del carrito /app/design/frontend/{package}/{theme}/template/checkout/cart.phtmly agregue una identificación en el elemento del formulario para un acceso más fácil. Supongamos que agrega 'id = "cart-form"';

Ahora edite las plantillas que representan los artículos del carrito:

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

y en el <input>elemento con el nombre cart[<?php echo $_item->getId() ?>][qty]agregue esto:

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

Pero no recomiendo hacer esto. Es realmente molesto para los usuarios. (al menos para mi).

Suponiendo que su sitio tiene jQuery incluido en modo sin conflicto, aquí hay una forma de hacerlo de forma asincrónica (¡mucho menos molesto!).

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

Debo señalar que esto hace las siguientes suposiciones:

• Su carrito de compras vive dentro de un elemento con el ID de shopping-cart-table
• Sus campos de entrada para cantidad tienen un atributo de nombre que termina con [qty]

Debería ser fácil ajustar los selectores en el código en las líneas 2 y 5 respectivamente para que coincidan con sus circunstancias.

Edite estos dos archivos

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

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

y en el elemento con el nombre cart[<?php echo $_item->getId() ?>][qty]agregue esto:

onchange="this.form.submit()"

Si su versión de jQuery es antigua, no tendrá éxito. He encontrado una manera que es la siguiente, siga las instrucciones de nuestro amigo Marius para insertar

/app/design/frontend/{package}/{theme}/template/checkout/cart.phtmly agregue una identificación en el elemento del formulario para facilitar el acceso. Digamos que agregasid="cart-form"

Ahora abra el archivo

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

Y desplácese hasta el final del archivo y encontrará el javascript que incrementa y disminuye la cantidad. La función se verá así:

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

Cambiar por esto:

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

En caso de que no tenga jQuery cargado (todavía), también puede encontrar el <input> elemento (o en mi caso un <select>elemento ya que construí un campo desplegable para seleccionar la cantidad) con el nombre name="cart[<?php echo $_item->getId() ?>][qty]"y agregar esto:

onchange="this.form.submit()"

El archivo phtml que debe editar se encuentra aquí:

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