Ouça para comprar a quantidade de atualização do carrinho

Aug 17 2020

Estou escrevendo um aplicativo do Shopify e gostaria de ouvir o evento de atualização do carrinho do shopify. Eu sei que quando o usuário clica em remover ou aumentar a quantidade do item. O Shopify envia uma solicitação POST ao back-end para atualizar o cartão. Meu aplicativo calcula o valor do frete com base na quantidade de itens do carrinho do shopify. Eu adiciono meu script de aplicativo ao shopify via script-tag.

Tentei ouvir a entrada de quantidade, mas este evento só dispara um. Acho que o shopify atualiza o DOM de entrada após cada atualização do carrinho, então ele pode remover meu ouvinte.

 $('body').on('change', '.input[name="updates[]"]', function() { console.log('HELLO')});

Como posso ouvir o evento de atualização do carrinho? Parece ser uma pergunta simples, mas realmente não consigo encontrar uma resposta em relação ao Shopify!

Respostas

6 BilalAkbar Aug 20 2020 at 13:00

Portanto, há duas maneiras de atualizar um carrinho do Shopify. Por meio de envio de formulário ou usando Ajax API. Supondo que você já tenha resolvido o caso de envio do formulário, chamando a função de cálculo de envio no carregamento da página. Para atualizações de carrinho baseadas em Ajax, não há evento padrão. Alguns temas podem disparar um evento na atualização do carrinho, mas no caso de um aplicativo genérico, não é possível confiar neles devido a nenhum comportamento padrão definido.

Portanto, o que você pode fazer é ouvir as chamadas AJAX e chamar sua função se ela corresponder às suas condições. O Shopify Docs for Ajax API lista os 4 tipos de solicitação POST que podem atualizar o carrinho. Portanto, corrigindo a função aberta de XMLHttpRequest , adicionamos um ouvinte de evento para carga que dispara quando a solicitação é concluída com êxito. No caso de retorno de chamada, verificamos se a URL foi usada para atualizar o carrinho e, em seguida, chamamos a função de atualização de envio.

const open = window.XMLHttpRequest.prototype.open;

function openReplacement() {
  this.addEventListener("load", function () {
    if (
      [
        "/cart/add.js",
        "/cart/update.js",
        "/cart/change.js",
        "/cart/clear.js",
      ].includes(this._url)
    ) {
      calculateShipping(this.response);
    }
  });
  return open.apply(this, arguments);
}

window.XMLHttpRequest.prototype.open = openReplacement;

function calculateShipping(cartJson) {
  console.log("calculate new shipping");
  console.log(JSON.parse(cartJson));
}

Ideia retirada da resposta de Nicolas

ajaxComplete não foi usado porque só escuta as solicitações feitas usando jQuery.

Passar a resposta para sua função de remessa salva a chamada adicional Get Cart Ajax.

Atualizar

Se o código acima não funcionar para você ou não capturar todas as chamadas, veja minha outra resposta que também escuta todas as chamadas da API Fetch, se estiver sendo usada para atualizar o carrinho.

Ouça as alterações no carrinho usando a API Fetch

Yashchitroda Aug 20 2020 at 13:03

Para atualizar os campos de quantidade de itens no carrinho no tema seccionado

Etapa 1: você acessa o administrador do Shopify, clique em Loja online e vá para Temas.

Etapa 2: encontre os temas que deseja editar, pressione Ações e, em seguida, Editar código.

Etapa 3: Olhe para as Seções, clique em cart-template.liquid. Caso você não esteja utilizando o tema que não possua o endereço, pode acessar o diretório Template e clicar em cart.liquid.

Etapa 4: Encontre a frase escrita como update [item.id] na tag de entrada.

Etapa 5: Mude o nome para o valor de name = “updates []”.

Etapa 6: Reitere essas etapas mencionadas acima sempre que você vir um valor de nome de updates [] na tag de entrada.

Etapa 7: clique em Salvar e atualize os campos de quantidade de itens com sucesso.