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

Si vous exécutez des scripts dans votre boutique en ligne, vous devez vérifier leur impact sur les pages de votre boutique en ligne. 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.

Shopify Plus

Les scripts Shopify et l’application Script Editor sont disponibles uniquement pour les marchands Shopify Plus. L’application Script Editor n’est plus disponible pour le téléchargement depuis notre Shopify App Store.

Le 28 août 2025, Scripts Shopify sera supprimé et ne fonctionnera plus. Migrez vos scripts existants vers Shopify Functions avant cette date.

Résoudre les problèmes

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 normal 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 :

Attributs d'objet de panier :

• cart.total_discount
• cart.original_total_price

Attributs de rubrique :

• line_item.discounts
• line_item.message
• line_item.original_price
• line_item.original_line_price
• line_item.total_discount

Objet des scripts :

• Vous pouvez utiliser l'objet script 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 normal 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.