Comment créer un bouton "Ajax Add to Cart" sur un thème Shopify

Comment créer un bouton "Ajax Add to Cart" sur un thème Shopify

Show full description.

Comment créer un bouton "Ajax Add to Cart" sur un thème Shopify

Introduction: Dans cet article, nous allons vous expliquer comment créer un bouton "Ajax Add to Cart" pour votre boutique Shopify. Ce bouton permettra à vos clients d'ajouter des produits à leur panier sans avoir à quitter la page sur laquelle ils se trouvent. Nous vous guiderons à travers les étapes pour mettre en place ce bouton sur les pages produits et les pages collections (product_Card).

Prérequis:

  • Avoir un thème Shopify installé et actif
  • Avoir accès au code source du thème

Étape 1: Modification du fichier theme.js

  1. Accédez à l'éditeur de code de votre thème Shopify en allant dans "Boutique en ligne" > "Thèmes" > "Actions" > "Modifier le code".
  2. Trouvez le fichier "theme.js" (ou "theme.min.js") qui se trouve généralement dans le dossier "assets". Ouvrez-le.
  3. Ajoutez le code suivant à la fin du fichier "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('Erreur, réessayez');
    }
  });
}

function updateCartCount() {
  $.getJSON('/cart.js', function(cart) {
    // Mettre à jour le compteur du panier avec la nouvelle quantité
    $('.cart_count').text(cart.item_count);
  });
}
  1. Cliquez sur "Enregistrer" pour sauvegarder vos modifications.

Étape 2: Modification des fichiers de template

  1. Pour la page produit, trouvez le fichier "product.liquid" ou "product-template.liquid" dans le dossier "sections" ou "templates". Ouvrez-le.
  2. Repérez le bouton "Ajouter au panier" et ajoutez l'attribut data-variant-id avec la valeur {{ variant.id }} comme suit :
htmlCopy code<button type="submit" data-variant-id="{{ variant.id }}" class="add_to_cart_button">Ajouter au panier</button>
  1. Pour la page collection, trouvez le fichier "collection.liquid" ou "collection-template.liquid" dans le dossier "sections" ou "templates". Ouvrez-le.
  2. Repérez le bouton "Ajouter au panier" à l'intérieur de la boucle for product in collection.products et ajoutez l'attribut data-variant-id avec la valeur {{ product.selected_or_first_available_variant.id }} comme suit :
htmlCopy code<button type="submit" data-variant-id="{{ product.selected_or_first_available_variant.id }}" class="add_to_cart_button">Ajouter au panier</button>

Étape 3: Ajout du déclencheur d'événement

  1. Pour ajouter le déclencheur d'événement, retournez au fichier "theme.js" et ajoutez le code suivant à la fin du fichier :
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. Cliquez sur "Enregistrer" pour sauvegarder vos modifications.

Maintenant, le bouton "Ajax Add to Cart" devrait être fonctionnel sur les pages produits et les pages collections de votre thème Shopify. Lorsqu'un client clique sur le bouton "Ajouter au panier", le produit est ajouté au panier sans rechargement de la page, et un label "Ajouté au panier" s'affiche temporairement. Le bouton est désactivé pendant l'appel AJAX, puis réactivé une fois l'appel terminé. Le compteur de panier est également mis à jour.

N'oubliez pas de tester votre bouton "Ajax Add to Cart" sur différents navigateurs et appareils pour vous assurer qu'il fonctionne correctement. Si vous rencontrez des problèmes, vérifiez que vous avez correctement suivi toutes les étapes et que le code est bien placé dans les fichiers concernés.

Add a more detailed description…

Comment créer un bouton "Ajax Add to Cart" sur un thème Shopify

Introduction: Dans cet article, nous allons vous expliquer comment créer un bouton "Ajax Add to Cart" pour votre boutique Shopify. Ce bouton permettra à vos clients d'ajouter des produits à leur panier sans avoir à quitter la page sur laquelle ils se trouvent. Nous vous guiderons à travers les étapes pour mettre en place ce bouton sur les pages produits et les pages collections (product_Card).

Prérequis:

  • Avoir un thème Shopify installé et actif

  • Avoir accès au code source du thème

Étape 1: Modification du fichier theme.js

  1. Accédez à l'éditeur de code de votre thème Shopify en allant dans "Boutique en ligne" > "Thèmes" > "Actions" > "Modifier le code".

  2. Trouvez le fichier "theme.js" (ou "theme.min.js") qui se trouve généralement dans le dossier "assets". Ouvrez-le.

  3. Ajoutez le code suivant à la fin du fichier "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('Erreur, réessayez'); } }); } function updateCartCount() { $.getJSON('/cart.js', function(cart) { // Mettre à jour le compteur du panier avec la nouvelle quantité $('.cart_count').text(cart.item_count); }); }
  1. Cliquez sur "Enregistrer" pour sauvegarder vos modifications.

Étape 2: Modification des fichiers de template

  1. Pour la page produit, trouvez le fichier "product.liquid" ou "product-template.liquid" dans le dossier "sections" ou "templates". Ouvrez-le.

  2. Repérez le bouton "Ajouter au panier" et ajoutez l'attribut data-variant-id avec la valeur {{ variant.id }} comme suit :

htmlCopy code<button type="submit" data-variant-id="{{ variant.id }}" class="add_to_cart_button">Ajouter au panier</button>
  1. Pour la page collection, trouvez le fichier "collection.liquid" ou "collection-template.liquid" dans le dossier "sections" ou "templates". Ouvrez-le.

  2. Repérez le bouton "Ajouter au panier" à l'intérieur de la boucle for product in collection.products et ajoutez l'attribut data-variant-id avec la valeur {{ product.selected_or_first_available_variant.id }} comme suit :

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

Étape 3: Ajout du déclencheur d'événement

  1. Pour ajouter le déclencheur d'événement, retournez au fichier "theme.js" et ajoutez le code suivant à la fin du fichier :

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. Cliquez sur "Enregistrer" pour sauvegarder vos modifications.

Maintenant, le bouton "Ajax Add to Cart" devrait être fonctionnel sur les pages produits et les pages collections de votre thème Shopify. Lorsqu'un client clique sur le bouton "Ajouter au panier", le produit est ajouté au panier sans rechargement de la page, et un label "Ajouté au panier" s'affiche temporairement. Le bouton est désactivé pendant l'appel AJAX, puis réactivé une fois l'appel terminé. Le compteur de panier est également mis à jour.

N'oubliez pas de tester votre bouton "Ajax Add to Cart" sur différents navigateurs et appareils pour vous assurer qu'il fonctionne correctement. Si vous rencontrez des problèmes, vérifiez que vous avez correctement suivi toutes les étapes et que le code est bien placé dans les fichiers concernés.

You have unsaved edits on this field. View editsDiscard

Edit not saved.

Retour au blog