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 incidence sur les pages de celle-ci. De nombreux thèmes incluent du code pour prendre en charge vos scripts, mais certains n’en ont pas. Si votre thème n’a pas le code, vous pouvez l’ajouter.

Forfait requis

Depuis le 30 juin 2026, les scripts Shopify sont obsolètes. Tous les scripts qui étaient encore publiés sur votre boutique ont été désactivés et ne fonctionnent plus. Pour recréer ces personnalisations, passez à Shopify Functions. En savoir plus sur la transition des scripts Shopify vers Shopify Functions.

Résolution de problèmes

La plupart des problèmes liés aux scripts et aux thèmes concernent les scripts d’article du panier qui offrent des réductions. Par exemple, le prix total de la commande est correct, mais les prix des articles du panier n’affichent pas les réductions. Les clients doivent comprendre comment leurs réductions sont calculées. Ils veulent voir le prix d’origine et le prix réduit, ainsi qu’une brève description de la réduction. S’il manque l’un de ces détails dans votre panier, vous devez ajouter le code Liquid pour qu’ils apparaissent.

Une bonne façon de vérifier l’incidence de votre script sur votre boutique en ligne est d’y accéder en tant que client et d’effectuer les actions qui déclenchent le script.

Attributs d’objet Liquid

Les listes suivantes contiennent les attributs d’objet Liquid qui sont généralement nécessaires pour prendre en charge les scripts dans le panier de votre boutique :

Attributs de l’objet Panier :

• cart.total_discount
• cart.original_total_price

Attributs de l’article du panier :

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

Objet script :

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

Exemple

L’exemple suivant décrit les modifications que vous pouvez apporter à votre modèle cart.liquid pour prendre en charge un script d’article du panier.

Exemple de panier

Par exemple, si votre panier contient trois articles :

• Ballon de soccer
  • Quantité : 1
  • Prix unitaire : 15,00 $
• Balle de tennis
  • Quantité : 5
  • Prix unitaire : 5,00 $
• Chaussure de course
  • Quantité : 1
  • Prix unitaire : 30,00 $

Et que vous avez publié un script qui applique les réductions suivantes :

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

Dans ce cas, votre modèle cart.liquid peut être un simple tableau répertoriant les articles du panier et un résumé de leurs montants totaux :

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

Avec les réductions appliquées par le script, ce modèle crée le tableau suivant pour votre panier :

Produit	Quantité	Total
Ballon de soccer	1	15,00 $
Balle de tennis	5	22,50 $
Chaussure de course	1	25,00 $
Total		62,50 $

Mettre à jour les articles du panier

Pour afficher les réductions appliquées par le script, nous devons mettre à jour les articles du panier pour afficher trois informations clés :

• le prix de l’article avant les réductions
• le prix de l’article après les réductions
• un message décrivant les réductions qui ont été appliquées.

Pour ce faire, utilisez les attributs d’objet Liquid suivants :

• line_item.total_discount renvoie le montant de la réduction qui a été appliquée à l’article du panier
• line_item.original_line_price renvoie le prix de l’article avant les réductions
• line_item.message renvoie un message décrivant les réductions qui ont été appliquées à l’article du panier.

Il peut être utile de différencier le prix d’origine de l’article de son prix réduit en utilisant un effet barré :

<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 devrait maintenant ressembler à ceci :

Produit	Quantité	Total
Ballon de soccer	1	15,00 $
Balle de tennis	5	22,50 $ 25,00 $ (10 % de réduction sur deux balles de tennis ou plus)
Chaussure 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

Pour aider le client à suivre le prix de sa commande, vous devez également afficher :

• le sous-total d’origine du panier, pour permettre aux clients de comparer les totaux avant et après la réduction
• le montant total des économies que le client a réalisées sur son panier.

Là encore, pour ajouter ces informations, utilisez 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 les réductions.

Avec ces informations, votre bloc .summary mis à jour pourrait ressembler à ceci :

<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 devrait maintenant ressembler à ceci :

Produit	Quantité	Total
Ballon de soccer	1	15,00 $
Balle de tennis	5	22,50 $ 25,00 $ (10 % de réduction sur deux balles de tennis ou plus)
Chaussure de course	1	25,00 $ 30,00 $ (5 $ de réduction sur toutes les chaussures)
Sous-total		70,00 $
Réductions		7,50 $
Total		62,50 $

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

Autres exemples

L’exemple Liquid suivant montre les réductions pour chaque article du panier :

{% 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 %}

Consultez un autre exemple de réduction qui inclut les modifications de code Liquid.