Como criar um botão 'Adicionar ao carrinho Ajax' em um tema Shopify

Como criar um botão Adicionar ao carrinho Ajax em um tema Shopify

Introdução: Neste artigo, mostraremos como criar um botão Adicionar ao Carrinho com Ajax para sua loja Shopify. Este botão permitirá que seus clientes adicionem produtos ao carrinho sem precisar sair da página em que estão. Explicaremos as etapas para implementar este botão tanto nas páginas de produtos quanto nas páginas de coleção (product_Card).

Pré-requisitos:

• Tenha um tema Shopify instalado e ativo
• Tenha acesso ao código fonte do tema

Etapa 1: edite o arquivo theme.js

1. Acesse o editor de código do seu tema Shopify acessando "Loja virtual" > "Temas" > "Ações" > "Editar código".
2. Encontre o arquivo "theme.js" (ou "theme.min.js"), que geralmente está localizado na pasta "assets". Abra-o.
3. Adicione o seguinte código ao final do arquivo "theme.js":

javascriptCopy codefunction ajaxAddToCart(variantId, quantity) {
  $.ajax({
    type: 'POST',
    url: '/cart/add.js',
    data: {
      'id': variantId,
      'quantity': quantity
    },
    dataType: 'json',
    beforeSend: function() {
      // Désactiver le bouton "Ajouter au panier"
      $('[data-variant-id="' + variantId + '"]').prop('disabled', true).text('Ajout en cours...');
    },
    success: function() {
      // Réactiver le bouton "Ajouter au panier" et changer le texte
      $('[data-variant-id="' + variantId + '"]').prop('disabled', false).text('Ajouté au panier');
      // Mettre à jour le compteur du panier
      updateCartCount();
    },
    error: function() {
      // Réactiver le bouton "Ajouter au panier" et afficher un message d'erreur 
$('[data-variant-id="' + variantId + '"]').prop('disabled', false).text('Erro, tente novamente');
 }
 });
 }

 função updateCartCount() {
 $.getJSON('/cart.js', função(carrinho) {
 // Atualiza o contador do carrinho com a nova quantidade
 $('.cart_count').text(cart.item_count);
 });
 }

1. Clique em "Salvar" para salvar suas alterações.

Etapa 2: Editando os arquivos de modelo

1. Para a página do produto, encontre o arquivo "product.liquid" ou "product-template.liquid" na pasta "sections" ou "templates". Abra-o.
2. Localize o botão "Adicionar ao carrinho" e adicione o atributo data-variant-id com o valor {{ variant.id }} da seguinte maneira:

 htmlCopy code<button type="submit" data-variant-id=" {{ variant.id }} " class="add_to_cart_button">Ajouter au panier</button>

1. Para a página de coleção, encontre o arquivo "collection.liquid" ou "collection-template.liquid" na pasta "sections" ou "templates". Abra-o.
2. Localize o botão "Adicionar ao carrinho" dentro do for product in collection.products e adicione o atributo data-variant-id com o valor {{ product.selected_or_first_available_variant.id }} da seguinte maneira:

 htmlCopy code<button type="submit" data-variant-id=" {{ product.selected_or_first_available_variant.id }} " class="add_to_cart_button">Ajouter au panier</button>

Etapa 3: Adicionando o gatilho do evento

1. Para adicionar o gatilho de evento, volte ao arquivo "theme.js" e adicione o seguinte código ao final do arquivo:

 javascriptCopy code$(document).ready(function() { 
$('corpo').on('clique', '.add_to_cart_button', função(evento) {
 evento.preventDefault();
 var variantId = $(this).data('variant-id');
 var quantidade = 1;
 ajaxAddToCart(variantId, quantidade);
 });
 });

1. Clique em "Salvar" para salvar suas alterações.

O botão "Adicionar ao Carrinho com Ajax" agora deve estar funcional nas páginas de produtos e coleções do seu tema Shopify. Quando um cliente clica no botão "Adicionar ao Carrinho", o produto é adicionado ao carrinho sem precisar recarregar a página, e a etiqueta "Adicionado ao Carrinho" é exibida temporariamente. O botão é desabilitado durante a chamada AJAX e reabilitado após a conclusão da chamada. O contador do carrinho também é atualizado.

Lembre-se de testar o botão Adicionar ao Carrinho Ajax em diferentes navegadores e dispositivos para garantir que funcione corretamente. Se encontrar algum problema, verifique se seguiu todos os passos corretamente e se o código está nos arquivos corretos.