Mise à jour de vos modèles Liquid pour les scripts

Après avoir testé la logique de vos scripts dans l'Éditeur de scripts, vous devez vérifier leur effet sur les pages de votre vitrine. De nombreux thèmes contiennent du code pour prendre en charge vos scripts, mais il y a des exceptions. Si votre thème ne contient pas le code requis, vous pouvez néanmoins l'ajouter.

La dernière version de l'infrastructure Timber et les thèmes Shopify officiels suivants prennent en charge les scripts :

La plupart des problèmes survenant entre les scripts et les thèmes sont dus à des scripts de rubrique qui proposent des réductions. Par exemple, le prix total de la commande est correct, mais les prix de rubrique n'affichent pas les réductions. Les clients ont besoin de comprendre comment sont calculées leurs réductions. Ils veulent donc voir le prix d'origine et le prix réduit, de même qu'une courte description de la réduction. Si l'un de ces détails ne s'affiche pas dans votre panier, vous devez ajouter le code Liquid nécessaire pour le faire apparaître.

Une bonne façon de vérifier l'effet de votre script sur votre boutique consiste à vous y rendre en tant que client et à réaliser les actions qui déclenchent le script.

Attributs d'objet Liquid

Les listes suivantes regroupent les attributs d'objet Liquid souvent nécessaires à la prise en charge des scripts dans le panier de votre boutique en ligne :

Attributs d'objet de panier :

Attributs de rubrique :

Objet des scripts :

  • L'objet des scripts peut être utilisé pour renvoyer des informations sur les scripts actifs d'une boutique. Cet objet peut être utile lors du débogage de scripts.

Exemple

L'exemple suivant décrit les modifications que vous pouvez apporter à votre modèle cart.liquid pour prendre en charge un script de rubrique.

Exemple de panier

Par exemple, vous avez un panier contenant trois rubriques :

  • Ballon de football - Quantité : 1

    • Prix unitaire : 15,00 $
  • Balle de tennis - Quantité : 5

    • Prix unitaire : 5,00 $
  • Chaussures de course - Quantité : 1

    • Prix unitaire : 30,00 $

Par ailleurs, vous avez publié un script qui applique les réductions suivantes :

  • 10 % de réduction pour l'achat de deux balles de tennis ou plus
  • 5 $ de réduction sur toutes les chaussures

Votre modèle cart.liquid peut alors consister en un simple tableau reprenant les rubriques et donnant un résumé de leur montant total :

<table class="cart">
  <thead class="heading">
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>

  <tbody class="line-items">
    {% for item in cart.items %}
    <tr>
      <td>{{ item.product.title }}</td>
      <td>{{ item.quantity }}</td>
      <td>{{ item.line_price | money }}</td>
    </tr>
    {% endfor %}
  </tbody>

  <tfoot class="summary">
    <tr>
      <td colspan="2">Total</td>
      <td>{{ cart.total_price | money }}</td>
    </tr>
  </tfoot>
</table>

En tenant compte des réductions appliquées par le script, ce modèle crée le tableau suivant pour votre panier :

Produit Quantité Total
Ballon de football 1 15 $
Balle de tennis 5 22,50 $
Chaussures de course 1 25 $
Total 62,50 $

Mettre à jour les rubriques

Pour afficher les réductions appliquées par le script, il est nécessaire de mettre à jour les rubriques pour afficher trois informations essentielles :

  • le prix de la rubrique avant les réductions ;
  • le prix de la rubrique après les réductions ;
  • un message décrivant les réductions appliquées.

Pour cela, vous devez utiliser les attributs d'objet Liquid suivants :

  • line_item.total_discount renvoie le montant de la réduction appliquée à la rubrique ;
  • line_item.original_line_price renvoie le prix de la rubrique avant la réduction ;
  • line_item.message renvoie un message décrivant les réductions appliquées à la rubrique.

Il peut être utile de différencier le prix d'origine de la rubrique du prix réduit, à l'aide d'un effet de biffure :

<tbody class="line-items">
  {% for item in cart.items %}
  <tr>
    <td>{{ item.product.title }}</td>
    <td>{{ item.quantity }}</td>
    <td>
      {{ item.line_price }}
      {% if item.total_discount > 0 %}
        <s>{{ item.original_line_price }}</s>
        ( {{ item.message }} )
      {% endif %}
    </td>
  </tr>
  {% endfor %}
</tbody>

Votre panier doit maintenant afficher ceci :

Produit Quantité Total
Ballon de football 1 15 $
Balle de tennis 5 22,50 $ 25 $ (10 % de réduction à l'achat de deux balles de tennis ou plus)
Chaussures de course 1 25,00 $ 30,00 $ (5 $ de réduction sur toutes les chaussures)
Total 62,50 $

Mettre à jour le résumé du panier

Afin d'aider le client à comprendre le prix de sa commande, il est également nécessaire d'afficher ce qui suit :

  • le sous-total initial du panier, qui permet aux clients de comparer les totaux avant et après réduction
  • le total des économies réalisées par le client sur son panier.

Là encore, pour ajouter ces informations, vous devez utiliser les attributs d'objet Liquid suivants :

  • cart.total_discount renvoie le montant de la réduction appliquée aux articles du panier ;
  • cart.original_total_price renvoie le sous-total du panier avant l'application des réductions.

À l'aide de ces informations, votre bloc .summary mis à jour pourrait ressemble à ça :

<tfoot class="summary">
  <tr>
    <td colspan="2">Subtotal</td>
    <td>{{ cart.original_total_price | money }}</td>
  </tr>
  <tr>
    <td colspan="2">Discount Savings</td>
    <td>{{ cart.total_discount | money }}</td>
  </tr>
  <tr>
    <td colspan="2">Total</td>
    <td>{{ cart.total_price | money }}</td>
  </tr>
</tfoot>

Le tableau de votre panier doit maintenant afficher ceci :

Produit Quantité Total
Ballon de football 1 15 $
Balle de tennis 5 22,50 $ 25 $ (10 % de réduction à l'achat de deux balles de tennis ou plus)
Chaussures de course 1 25,00 $ 30,00 $ (5 $ de réduction sur toutes les chaussures)
Sous-total 70 $
Économies réalisées 7,50 $
Total 62,50 $

En ajoutant quelques objets Liquid supplémentaires à vos modèles, vous pouvez aider vos clients à comprendre comment sont calculées leurs réductions.

Autres exemples

L'exemple de code Liquid suivant affiche les réductions pour chaque rubrique :

  {% if item.original_line_price != item.line_price %}
  <small class="original-price"><s>{{ item.original_line_price | money }}</s></small>
  {% endif %}
  {{ item.line_price | money }}
  {% for discount in item.discounts %}
  <small class="discount">{{ discount.title }}</small>
  {% endfor %}

Vous pouvez consulter un autre exemple de réduction qui inclut les modifications du code Liquid.

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement