Dans ce tutoriel nous allons voir comment créer un système de direct checkout en ajoutant un bouton Acheter maintenant en plus du ajouter au panier.

Comme vous le savez Shopify permet depuis peu de rajouter ce type de bouton mais ils sont dynamiques ! Ce qui veut dire que le bouton s’adapte aux moyens de paiements connectés de l’utilisateur. En effet ce bouton va se transformer et pouvoir proposer le paiement par Paypal, Google pay etc…

C’est bien mais beaucoup de personnes ne souhaitent qu’un bouton acheter maintenant simple et efficace ! eh ça tombe bien on va apprendre à en créer un 😀

Installation du système

Création du snippet

Rendez vous sur votre administration et cliquez sur « Boutique en ligne ».

Cliquez sur le bouton Action puis « Modifier le code ».

Trouvez le dossier Snippets et cliquez sur Ajouter un nouveau snipppet et nommez le « direct-checkout ».

Ouvrez le et mettez l’intégralité du code ci-dessous:

<style>
  #dg-go-checkout {
    margin:15px 0; 
    width:100%;  
    color: #111 !important;
    background: #f0c14b !important;
    background: linear-gradient(#ffe6a8, #e2b43f) !important;
    border-color: #a88734 #9c7e31 #846a29 !important;
    border-radius: 4px !important;
  }
  #dg-go-checkout:hover { opacity:0.9;  }
</style>

<button class="btn btn-primary" id="dg-go-checkout">Acheter maintenant</button>

<script>
/**
 * Module to ajaxify all add to cart forms on the page.
 *
 * Copyright (c) 2015 Caroline Schnapp (11heavens.com)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */
$( "#dg-go-checkout" ).click(function() {   

Shopify.AjaxifyCart = (function($) {
  
  // Some configuration options.
  // I have separated what you will never need to change from what
  // you might change.
  
  var _config = {
    
    // What you might want to change    
    addingToCartBtnLabel:          'Commande en cours...',
    soldOutBtnLabel:               'Sold Out',
    howLongTillBtnReturnsToNormal: 1000, // in milliseconds.
    cartCountSelector:             '.cart-count, #cart-count a:first, #gocart p a, #cart .checkout em, .item-count',
    cartTotalSelector:             '#cart-price',
    // 'aboveForm' for top of add to cart form, 
    // 'belowForm' for below the add to cart form, and 
    // 'nextButton' for next to add to cart button.
    feedbackPosition:              'nextButton',
    
    // What you will never need to change
    addToCartBtnSelector:          '#dg-go-checkout',
    addToCartFormSelector:         'form',
    shopifyAjaxAddURL:             '/cart/add.js',
    shopifyAjaxCartURL:            '/cart.js'
  };
  
  // We need some feedback when adding an item to the cart.
  // Here it is.  
  var _showFeedback = function(success, html, $addToCartForm) {
    $('.ajaxified-cart-feedback').remove();
    var feedback = '<p class="ajaxified-cart-feedback ' + success + '">' + html + '</p>';
    switch (_config.feedbackPosition) {
      case 'aboveForm':
        $addToCartForm.before(feedback);
        break;
      case 'belowForm':
        $addToCartForm.after(feedback);
        break;
      case 'nextButton':
      default:
        $addToCartForm.find(_config.addToCartBtnSelector).after(feedback);
        break;   
    }
    // If you use animate.css
    // $('.ajaxified-cart-feedback').addClass('animated bounceInDown');
    $('.ajaxified-cart-feedback').slideDown();
  };
  var _setText = function($button, label) {
    if ($button.children().length) {
      $button.children().each(function() {
        if ($.trim($(this).text()) !== '') {
          $(this).text(label);
        }
      });
    }
    else {
      $button.val(label).text(label);
    }
  };
  var _init = function() {   
    $(document).ready(function() { 
      
      $(_config.addToCartFormSelector).submit(function(e) {
        e.preventDefault();
        var $addToCartForm = $(this);
        var $addToCartBtn = $addToCartForm.find(_config.addToCartBtnSelector);
        _setText($addToCartBtn, _config.addingToCartBtnLabel);
        $addToCartBtn.addClass('disabled').prop('disabled', true);
        // Add to cart.
        $.ajax({
          url: _config.shopifyAjaxAddURL,
          dataType: 'json',
          type: 'post',
          data: $addToCartForm.serialize(),
          success: function(itemData) {
            // Re-enable add to cart button.
            $addToCartBtn.addClass('inverted');
            window.location.href = "/checkout";
           window.setTimeout(function(){
              $addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted');
              
            }, _config.howLongTillBtnReturnsToNormal);
            // Update cart count and show cart link.
            $.getJSON(_config.shopifyAjaxCartURL, function(cart) {
              if (_config.cartCountSelector && $(_config.cartCountSelector).size()) {
                var value = $(_config.cartCountSelector).html() || '0';
                $(_config.cartCountSelector).html(value.replace(/[0-9]+/,cart.item_count)).removeClass('hidden-count');
              }
              if (_config.cartTotalSelector && $(_config.cartTotalSelector).size()) {
                if (typeof Currency !== 'undefined' && typeof Currency.moneyFormats !== 'undefined') {
                  var newCurrency = '';
                  if ($('[name="currencies"]').size()) {
                    newCurrency = $('[name="currencies"]').val();
                  }
                  else if ($('#currencies span.selected').size()) {
                    newCurrency = $('#currencies span.selected').attr('data-currency');
                  }
                  if (newCurrency) {
                    $(_config.cartTotalSelector).html('<span class=money>' + Shopify.formatMoney(Currency.convert(cart.total_price, "{{ shop.currency }}", newCurrency), Currency.money_format[newCurrency]) + '</span>');
                  } 
                  else {
                    $(_config.cartTotalSelector).html(Shopify.formatMoney(cart.total_price, "{{ shop.money_format | remove: "'" | remove: '"' }}"));
                  }
                }
                else {
                  $(_config.cartTotalSelector).html(Shopify.formatMoney(cart.total_price, "{{ shop.money_format | remove: "'" | remove: '"' }}"));
                }
              };
            });        
          }, 
          error: function(XMLHttpRequest) {
            var response = eval('(' + XMLHttpRequest.responseText + ')');
            response = response.description;
            if (response.slice(0,4) === 'All ') {
              _showFeedback('error', response.replace('All 1 ', 'All '), $addToCartForm);
              $addToCartBtn.prop('disabled', false);
              _setText($addToCartBtn, _config.soldOutBtnLabel);
              $addToCartBtn.prop('disabled',true);
            }
            else {
              _showFeedback('error', '<i class="fa fa-warning"></i> ' + response, $addToCartForm);
              $addToCartBtn.prop('disabled', false).removeClass('disabled');
              _setText($addToCartBtn, _config.addToCartBtnLabel);
            }
          }
        });   
        return false;    
      });
    });
  };
  return {
    init: function(params) {
        // Configuration
        params = params || {};
        // Merging with defaults.
        $.extend(_config, params);
        // Action
        $(function() {
          _init();
        });
    },    
    getConfig: function() {
      return _config;
    }
  }  
})(jQuery);

Shopify.AjaxifyCart.init();
    
});

</script>

Par défaut j’ai mis le style d’un bouton Amazon mais vous pouvez reprendre la main sur les couleurs. Pour ce faire regardez la vidéo tout en bas 😉

Placement du bouton

Trouvez le dossier Sections et cliquez sur fichier « product-template.liquid », si vous ne l’avez pas allez dans Templates – « product.liquid ».

A ce stade vous allez devoir trouver votre formulaire et plus précisément la balise button.

Faites un ctrl + F et recherchez l’occurrence « {% endform %} » ou « </form> ». une fois trouvé vous allez copier/coller le code ci-dessous juste au dessus de cette balise.

{% include "direct-checkout" %}

Il ne vous reste plus qu’a cliquer sur le bouton « Enregistrer » en haut à droite pour valider vos modifications !

Vous avez maintenant un nouveau bouton pour permettre de raccourcir votre tunnel de vente au maximum 😉

Si vous souhaitez remplacer votre bouton ajouter au panier par un bouton acheter maintenant c’est ce tutoriel qu’il vous faut: Remplacer mon bouton existant

Ce tutoriel existe aussi en vidéo

Bon tuto à tous !

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 3 votes]

Cet article a 22 commentaires

  1. Hey merci pour ce nouveau tuto 🙂 on en avait parlé en plus 🙂 je l’ai bien installé mais il y a pas moyen de le rendre vibrant comme le ajouter au panier?

    1. Hello, répondu en MP 😉

  2. Salut, j’ai bien le bouton mais quand on clique dessus c’est le bouton « ajouter au panier qui s’anime (chargement en cours avec le cercle de chargement) et ça ne me fait pas passer à la caisse. Ça fait un ajout au panier.

    1. Hello, étrange surement un conflit avec ton thème. Faudrait voir ça plus en détail en MP 🙂

      1. Pareil aussi pour mon cas, j’ai bien suivi le tuto mais quand on clique sur le bouton que je viens d’ajouter c’est le bouton « ajouter au panier qui s’anime. Ça fait un ajout au panier et non acheter maintenant

        1. MP au besoin 😉

  3. Merci pour ce tuto en revanche ça ne fonctionne pas pour moi ça me met la phrase suivante : Liquid error (sections/product-template.liquid line 241): Could not find asset snippets/direct-checkout.liquid

    1. Hello, il manque une étape 😉 reprends le tuto depuis le début

  4. Bonjour,

    j’ai le thème debutify 2.02 je vois le bouton, mais il ne lance rien lorsque je clique dessus…

    merci

    1. Hello, désolé je ne connais pas ce thème 🙁 peut être voir avec leur support 🙂

  5. Merci de votre réponse, je viens de tester avec Brooklyn, c’est pareil 🙁

    1. Essayer de passer en mode de panier de type page si c’est possible, ca pourrait résoudre le problème 😉

  6. merci, ça marche 🙂

  7. Bonjour,

    Ca ne fonctionne pas pour moi, j’ai le theme Debut et le bouton acheter maintenant ajoute au panier uniquement.
    merci

    1. hello, essaie de passer en type de page panier 🙂

  8. Merci pour ce tuto mais ça ne fonctionne pas pour moi ça me met la phrase suivante : Liquid error (sections/product-template.liquid line 201): Could not find asset snippets/direct-checkout.liquid
    J’ai déja réessaye plusieurs fois ..

    1. C’est qu’il ne trouve pas le snippet 🙂 le nom ou l’appel doit être mal noté

  9. une petite question, pour center ou corriger la largeur que je dois faire??

    1. Hello, modifier la valeur width:100%; selon la largeur voulue

  10. Bonjour, j’ai le même problème que certain. Quand je clik sur acheter maintenant sa ajoute au panier. J’ai lue les réponses donner et le truc c’est que comment faire pour passer en « type de page panier ». Je cherche mais je voie pas comment faire cela. Merci beaucoup pour t’est multiple tuto, c’est le seul ou j’ai eu un probléme.

  11. Bonjours, comment passer en type de page panier ? merci

    1. Hello, logiquement c’est dans options du thèmes – Type de panier

Laisser un commentaire

Fermer le menu

meilleure chaine youtube dropshipping shopify

Envie de tout savoir sur le Dropshipping & Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine