Atualizar automaticamente a quantidade do carrinho ao alterar a quantidade

No carrinho padrão do Magento, quando o cliente edita a quantidade, ele precisa pressionar o botão para atualizar a quantidade.

Existe uma maneira de o carrinho atualizar a quantidade automaticamente quando o usuário digitar outro número no campo quantidade?

Primeiro edite o modelo do carrinho /app/design/frontend/{package}/{theme}/template/checkout/cart.phtmle adicione um ID no elemento do formulário para facilitar o acesso. Digamos que você adicione 'id = "cart-form"';

Agora edite os modelos que processam os itens do carrinho:

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

e no <input>elemento com o nome cart[<?php echo $_item->getId() ?>][qty]adicione isto:

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

Mas eu não recomendo fazer isso. É realmente irritante para os usuários. (pelo menos para mim).

Supondo que seu site tenha o jQuery incluído no modo sem conflito, aqui está uma maneira de fazer isso de forma assíncrona (muito menos irritante!).

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

Devo salientar que isso faz as seguintes suposições:

• Seu carrinho de compras vive dentro de um elemento com o ID de tabela de carrinho de compras
• Seus campos de entrada para quantidade têm um atributo de nome que termina com [qty]

Deve ser fácil ajustar os seletores no código nas linhas 2 e 5, respectivamente, para corresponder às suas circunstâncias.

Edite esses dois arquivos

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

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

e no elemento com o nome cart[<?php echo $_item->getId() ?>][qty]adicione isto:

onchange="this.form.submit()"

Se a sua versão do jQuery for antiga, você não terá êxito. Eu encontrei uma maneira que é a seguinte, siga as instruções do nosso amigo Marius para inserir

/app/design/frontend/{package}/{theme}/template/checkout/cart.phtmle adicione um ID no elemento do formulário para facilitar o acesso. Digamos que você adicioneid="cart-form"

Agora abra o arquivo

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

E role até o final do arquivo e você encontrará o javascript que aumenta e diminui a quantidade. A função terá esta aparência:

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

Altere para isso:

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

Caso você ainda não tenha o jQuery carregado, também é possível encontrar o <input> elemento (ou, no meu caso, um <select>elemento desde que criei um campo suspenso para selecionar a quantidade) com o nome name="cart[<?php echo $_item->getId() ?>][qty]"e adicione:

onchange="this.form.submit()"

O arquivo phtml que você precisa editar está localizado aqui:

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