How to create an “Ajax Add to Cart” button on a Shopify theme

How to create an “Ajax Add to Cart” button on a Shopify theme

Introduction: In this article, we will walk you through how to create an “Ajax Add to Cart” button for your Shopify store. This button will allow your customers to add products to their cart without having to leave the page they are on. We will guide you through the steps to implement this button on product pages and collections pages (product_Card).

Prerequisites:

• Have a Shopify theme installed and active
• Have access to the theme source code

Step 1: Editing the theme.js file

1. Access your Shopify theme's code editor by going to "Online Store" > "Themes" > "Actions" > "Edit Code".
2. Find the “theme.js” (or “theme.min.js”) file which is usually located in the “assets” folder. Open it.
3. Add the following code to the end of the "theme.js" file:

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('Error, try again');
 }
 });
 }

 function updateCartCount() {
 $.getJSON('/cart.js', function(cart) {
 // Update the cart counter with the new quantity
 $('.cart_count').text(cart.item_count);
 });
 }

1. Click "Save" to save your changes.

Step 2: Editing template files

1. For the product page, find the “product.liquid” or “product-template.liquid” file in the “sections” or “templates” folder. Open it.
2. Locate the "Add to Cart" button and add the data-variant-id attribute with the value {{ variant.id }} as follows:

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

1. For the collection page, find the "collection.liquid" or "collection-template.liquid" file in the "sections" or "templates" folder. Open it.
2. Locate the "Add to Cart" button inside the for product in collection.products loop and add the data-variant-id attribute with the value {{ product.selected_or_first_available_variant.id }} as follows:

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

Step 3: Adding the Event Trigger

1. To add the event trigger, go back to the "theme.js" file and add the following code at the end of the file:

 javascriptCopy code$(document).ready(function() { 
$('body').on('click', '.add_to_cart_button', function(event) {
 event.preventDefault();
 var variantId = $(this).data('variant-id');
 var quantity = 1;
 ajaxAddToCart(variantId, quantity);
 });
 });

1. Click "Save" to save your changes.

Now the “Ajax Add to Cart” button should be functional on the product pages and collections pages of your Shopify theme. When a customer clicks the "Add to cart" button, the product is added to the cart without reloading the page, and an "Added to cart" label is temporarily displayed. The button is disabled during the AJAX call, then re-enabled after the call is completed. The cart counter is also updated.

Don't forget to test your "Ajax Add to Cart" button on different browsers and devices to make sure it works correctly. If you encounter problems, verify that you have followed all the steps correctly and that the code is correctly placed in the affected files.