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

12

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?

JGeer
fuente

Respuestas:

14

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).

Marius
fuente
66
¿Molesta al usuario? No hay problema, lo hacemos sin embargo: D
Fabian Blechschmidt
55
@FabianBlechschmidt. Por qué no? Estamos molestos cuando lo desarrollamos, el usuario está molesto cuando lo usa. Eso es lo que significa compromiso. Todos pierden. :)
Marius
Eres genial Marius. ¿Cómo puedo hacer esto usando Ajax?
Naveenbos
6

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.

Jetha Chan
fuente
Hola Jetha. He intentado esto, pero muestra el pago / carrito / updatePost / 302 Encontrado 1.71 ¿Alguna idea de por qué se muestra así?
Naveenbos
Los parámetros son el carrito [137] [Qty] 1 carrito [139] [Qty] 2 form_key zA1lLphVHPsEu4ux El uso de este ¿Cómo puedo publicar esto para actualizar acción post
Naveenbos
¿Su carrito muestra las cantidades actualizadas?
Jetha Chan
En realidad no está destinado a devolver nada; más al punto que realmente no debes preocuparte por el valor de retorno cuando lo haces de esta manera. Cosas para verificar: ¿funciona su formulario cuando se envía normalmente, es decir, sin AJAX? - cuando los valores se cambian usando AJAX, ¿cambian los valores en el carrito (es decir, abrir otra ventana del navegador)?
Jetha Chan
1
Continuemos esta discusión en el chat .
Jetha Chan
0

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()"
snh_nl
fuente
0

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();   
    }
}
Lucas Julio Silveira
fuente
0

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
TheFrakes
fuente