Atualizar automaticamente a quantidade do carrinho quando alterar a quantidade
-
12-12-2019 - |
Pergunta
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?
Solução
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).
Outras dicas
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.
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()"
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();
}
}
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