Atualizar automaticamente a quantidade do carrinho quando alterar a quantidade

Question

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

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

Answer 1

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

Agora edite os modelos que renderizam 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 isso:

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

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

Answer 2

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 reside em um elemento com o id de mesa de carrinho de compras
• Seus campos de entrada para quantidade tem um atributo de nome que termina com [quantidade]

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

Answer 3

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 isso:

onchange="this.form.submit()"

Answer 4

Se a sua versão do jQuery for antiga, você não terá sucesso.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.phtml e adicione um id no elemento do formulário para facilitar o acesso.Digamos que você adicione id="cart-form"

Agora abra o arquivo

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

E vá até o final do arquivo e você encontrará o javascript que faz o incremento e decremento da quantidade.A função ficará assim:

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

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

Answer 5

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

onchange="this.form.submit()"

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

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