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 Snippets – Créer un snippet 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 Layout et ouvrez le fichier theme.liquid – Trouvez une zone idéal…

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 administer 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 😉

 

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

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème 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