Atualizar automaticamente a quantidade do carrinho ao alterar a quantidade

12

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?

— JGeer
fonte

14

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

— Marius
fonte

6

Irrita o usuário ?! Não tem problema, nós fazemos isso de qualquer maneira: D

— Fabian Blechschmidt

5

@FabianBlechschmidt. Por que não? Ficamos aborrecidos ao desenvolvê-lo, o usuário fica aborrecido ao usá-lo. É isso que compromisso significa. Todo mundo perde. :)

— Marius

Você é incrível, Marius. como posso fazer isso usando o Ajax?

— Naveenbos

6

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.

— Jetha Chan
fonte

Oi Jetha Eu tentei isso, mas ele está mostrando o checkout / cart / updatePost / 302 Encontrado 1.71s alguma idéia por que ele está mostrando assim?

— Naveenbos

Os parâmetros são este carrinho [137] [qtd] 1 carrinho [139] [qtd] 2 form_key zA1lLphVHPsEu4ux Usando isso, como posso postar isso para atualizar a ação pós

— Naveenbos

Seu carrinho mostra as quantidades atualizadas?

— precisa

Na verdade, não é para devolver nada; mais precisamente, você não deve se preocupar com o valor de retorno ao fazê-lo dessa maneira. Pontos a serem verificados: - seu formulário funciona quando enviado normalmente, ou seja, sem o AJAX? - quando os valores são alterados usando o AJAX, os valores no carrinho (por exemplo, abrir outra janela do navegador) mudam?

— precisa

1

Vamos continuar esta discussão no chat .

— precisa

0

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()"

— snh_nl
fonte

0

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

— Lucas Julio Silveira
fonte

0

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

— TheFrakes
fonte