Ajouter des données d'expiration à votre site

Il est possible d'accéder aux données d'expiration de votre site et/ou de les afficher. Cela comprend les dates d'expiration, leurs quantités et les données de délai d'utilisation. La façon la plus simple d'afficher ces informations est d'utiliser notre intégration avec l'éditeur de thème Shopify, qui permet d'ajouter les données d'expiration sous forme de section ou de bloc.

1. Allez dans vos thèmes dans l'admin Shopify

2. Trouvez le thème que vous souhaitez mettre à jour et cliquez sur "Edit theme"

3. Dans l'éditeur de thème, sélectionnez le modèle auquel vous souhaitez ajouter les données d'expiration :

   

4. Sélectionnez l'emplacement souhaité dans le modèle. Cela peut se faire en plaçant le curseur sur la zone d'insertion souhaitée :

   

5. Cliquez sur le bouton d'ajout de bloc et sélectionnez Expiration Data dans la section Apps :

   

6. Cela ajoutera un bloc Expiration Data au modèle sélectionné :

   

7. Cliquez sur le bloc Expiration Data pour accéder à des options de configuration supplémentaires. Pour les produits avec plusieurs variantes, les données d'expiration de la variante sélectionnée seront affichées. Plusieurs blocs peuvent être ajoutés pour répondre à différents cas d'usage. Par exemple, vous pouvez ajouter 1 bloc pour afficher les dates d'expiration, et un autre pour afficher les données de délai d'utilisation.

8. Cliquez sur Save

Ajouter notre snippet à votre thème

L'ajout des données d'expiration doit se faire via notre intégration de thème Shopify. Ajouter le snippet explicitement n'est nécessaire que dans des cas particuliers.

1. Allez dans l'admin Shopify
2. Ouvrez l'éditeur de code de votre thème
3. Ajoutez un nouveau fichier de thème
   • Cliquez sur le répertoire "snippets"
   • Cliquez sur "Add new snippet"
   • Comme nom de fichier, utilisez ss-product-expiration-dates
   • Cliquez sur "Done"
4. Cela ouvrira un nouvel onglet vide dans l'éditeur nommé snippets/ss-product-expiration-dates.liquid
5. Copiez le code de notre snippet Liquid et collez-le dans l'onglet
6. Cliquez sur Save

Afficher les données d'expiration

Une fois que vous avez ajouté notre snippet à votre thème, l'étape suivante consiste à le rendre à l'endroit où vous voulez que les données d'expiration soient affichées. Cela peut se faire depuis l'admin Shopify, via la page de personnalisation du thème.

1. Allez dans vos thèmes dans l'admin Shopify
2. Trouvez le thème que vous souhaitez mettre à jour et cliquez sur "Edit theme"
3. Dans l'éditeur de thème, sélectionnez "Products" puis "Default product" (ou le modèle souhaité)
4. Dans la section Template, cliquez sur "Add block"
5. Sélectionnez "Custom liquid" ou, s'il n'est pas disponible, "HTML" (notez que le bloc "HTML" doit prendre en charge Liquid)

• Si votre thème n'a ni l'option "Custom liquid" ni l'option "HTML", vous devez rendre le snippet dans votre thème manuellement
• Cela peut se faire via l'éditeur de code du thème
• Si vous avez besoin d'aide, veuillez contacter le support

7. Une fois sélectionné, vous pouvez déplacer le bloc Custom Liquid à l'endroit où vous voulez que les données d'expiration soient affichées
8. Cliquez sur le bloc Custom Liquid que vous venez d'ajouter
9. Dans le champ "Custom liquid" (ou similaire), collez le code de rendu souhaité, voir Expiration Data Display Options pour des exemples
10. Cliquez sur Save

Afficher les dates d'expiration selon la langue/région de l'utilisateur

Si vous affichez votre site en plusieurs langues, vous pouvez modifier le format et le texte de la date d'expiration selon la langue et/ou la région sélectionnée. Au lieu de rendre la date d'expiration avec le code par défaut :

{% render "ss-product-expiration-dates", product: product, prefix: "Best by:", format: "%B %d, %Y" %}

Vous pouvez utiliser le code suivant pour vérifier la langue et/ou la région sélectionnée et afficher la date d'expiration et le texte dans un format spécifique :

{% assign locale = request.locale.iso_code %}
{% assign lang = locale | split: "-" | first %}
{% if lang == "es" %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Consúmase antes de:", format: "%d/%m/%Y" %}
{% elsif lang == "de" %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Mindestens haltbar bis:", format: "%d.%m.%Y" %}
{% else %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Best by:", format: "%B %d, %Y" %}
{% endif %}

Ici, si la langue est l'espagnol ("es"), le texte "Consúmase antes de:" est affiché et la date est présentée au format DD/MM/YYYY. Si la langue est l'allemand ("de"), le texte et la date sont affichés dans un format adapté aux germanophones. Et si la langue n'est ni l'une ni l'autre, nous affichons la date dans un format adapté aux anglophones.

Si vous voulez afficher du texte en fonction de la langue et du pays de l'utilisateur, vous pouvez ajouter un cas qui vérifie la variable locale. Dans cet exemple, nous affichons la date au format YYYY/MM/DD si l'utilisateur se trouve en Espagne, et au format DD/MM/YYYY s'il se trouve dans un autre pays hispanophone :

{% assign locale = request.locale.iso_code %}
{% assign lang = locale | split: "-" | first %}
{% if locale == "es-ES" %}
 {% render "ss-product-expiration-dates", product: product, prefix: "Consúmase antes de:", format: "%Y/%m/%d" %}
{% elsif lang == "es" %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Consúmase antes de:", format: "%d/%m/%Y" %}
{% elsif lang == "de" %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Mindestens haltbar bis:", format: "%d.%m.%Y" %}
{% else %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Best by:", format: "%B %d, %Y" %}
{% endif %}