Comment Afficher les Informations de Commande du Client sur Shopify

Dans ce tutoriel nous allons créer une barre d’informations de commande de vos clients. Bien entendu vous devez activer l’option dans shopify permettant aux clients de créer un compte.

Cette barre afficher le nom et prénom du client aussi que les informations essentielles ainsi qu’un lien menant au compte afin d’avoir plus de précisions !

La barre ne s’affichera que si le client possède déjà un compte. Si vous souhaitez la tester vous allez devoir vous créer un compte client en parallèle de votre compte principal. Utilisez donc une autre adresse mail et simulez un achat avec un code promo Gratos :p

Mise en place du système

Pour le coup ca va être assez rapide ! Rendez-vous dans boutique en ligne – Actions – Modifier le code – Dossier Extraits (Snippets) – Créer un extrait et nommez-le « dg-extrainfos-bar ». Il ne nous reste plus qu’à copier/coller le code suivant:

{% if customer and customer.orders_count >= 1 %}
  
  <div class="dg-customer-box">   
   
    <p>
      Bonjour <span>{{ customer.first_name }} {{ customer.last_name }}</span> - 
      
      Dernière commande le: <span>{{ customer.last_order.created_at | date: "%d/%m/%Y à %H:%m" }}</span> - 
      
      Statut de la commande: <span>{{ customer.last_order.fulfillment_status_label }}</span> - 
      
      Total de commandes: <span>{{ customer.orders_count }}</span> - 
      
      <a href="{{ routes.account_url }}">Mon compte</a> 
    </p>
   
  </div> 
  
  {% style %}
  .dg-customer-box {   
    padding:5px 10px;   
    box-shadow:0 3px 5px rgba(0,0,0,0.1);  
  	display:flex; 
    justify-content:center;
  }  
  .dg-customer-box p {
  	margin:0 5px;   
  }
  .dg-customer-box span {
  	font-weight:bold;  
  }
  .dg-customer-box a {
    text-decoration:underline;
  }
  {% endstyle %}
  
  {% endif %}

  {% comment %}
  https://shopify.dev/api/liquid/objects/customer
  {% endcomment %}

Maintenant rendez-vous dans le dossier Mise en page (Layout) et ouvrez le fichier theme.liquid – Trouvez une zone idéale…

Astuce: Moi j’écris des toto1, toto2, toto3 etc un peu partout dans le code afin de trouver l’endroit idéal 😉

Et copiez/collez le code suivant:

{% render 'dg-extrainfos-bar' %}

Comment administrer tout ça ?

Vous avez toutes les informations nécessaires. Le reste pour moi n’est pas utiles mais je vous laisse tout de même la documentation officielle de shopify pour le langage liquid du customer (client). Vous pourrez tester 2 ou 3 trucs 😉

Comment modifier le design ?

C’est compliqué par écrit 🙂 je vous invite donc à attendre la version vidéo 😉