Créer votre thèmes Shopify avec le langage Liquid

Liquid Shopify est un modèle de langage écrit en Ruby. Il est créé par Shopify et disponible sur Github comme projet open-source. Ce langage va vous permettre de créer ou modifier des thèmes Shopify. Prenez dès aujourd’hui le contrôle des thèmes shopify et créer des boutique selon le design de votre choix.

Le Liquid: C’est quoi exactement?

Pour certains, Liquid est un langage de modèle et pour d’autres un moteur pour les thèmes Shopify. Mais cela n’a pas vraiment une grande importance car cela est correct pour les deux termes.

Ce langage a une syntaxe comme les autres langages de programmation tels que PHP, HTML et jQuery et a aussi des concepts tels que: la sortie, la logique (if, else), la boucle et les variables. On peut interagir avec les variables comme ça se passe avec le PHP centré sur le web.

Malgré toutes ces similitudes avec les autres langages, c’est seulement à ce niveau que s’arrêtent les facteurs communs.

Liquid Shopify : Fonction

Comme ce que font les autres langages de template, Liquid crée une relation entre un fichier Html et un groupe de données. Dans notre cas précis, il s’agit d’un site e-Commerce shopify. Grâce à un fichier Liquid généralement avec une syntaxe simple à lire et utiliser on accède à toutes les variables d’un template.

Dans Shopify on accède facilement à des variables grâce au fichier Liquid Shopify. On a par exemple le modèle product.liquid qui nous facilite la tâche d’avoir accès à toutes les informations relatives à un produit sélectionné.

Par exemple, le modèle product.liquid donne un accès à tous les détails relatifs à un produit sélectionné.

Toutes ces informations sont affichées par Liquid a son tour sans en avoir eu préalablement connaissance de toutes ces données. On parle de variable de Template.

Les données inaccessibles par Shopify peuvent aussi être appelées par Liquid. Un exemple, Shopify peut répondre à votre demande en remplissant une variable que vous créez avec tous les produits d’une collection particulière.

Avec le Liquid vous pouvez récupérer des données qui ne sont pas à votre disposition.Un exemple vous pouvez créer une variable puis affecter un ensemble de produit dans cette variable pour l’afficher.

Après avoir pris connaissance des noms de variables auxquels vous voulez accéder ou que vous avez créé, libre à vous d’utiliser des constructions Liquid tels que “output” et “loops” pour afficher les données dans vos fichiers Liquid.

En fonction des codes Liquid se trouvant dans votre thème, la back office Shopify comprend et sait quelle données récupérées et comment l’afficher. Alors l’affichage peut être tout simplement le nom d’un produit ou pour un cas compliqué serait l’affichage d’une série d’images de produit.

En fonction des codes Liquid qui se trouvent dans votre thème, la plateforme Shopify identifie les données à chercher et le format dans lequel elle doit les afficher. Alors l’affichage peut être tout simplement le nom d’un produit ou pour un cas compliqué serait l’affichage d’une série d’images associées a un de produit.

Avec langage Liquid l’avantage est que le concepteur n’est pas obligé de connaître quoi que ce quoi sur les données de la boutique shopify. Grâce à cela les thèmes sont 100% adaptable à d’autre boutique sans aucune connaissance préalable nécessaire concernant le contenu.

Liquid: Extension et délimiteur

L’extension des fichiers Liquid Shopify est .liquid. Le mélange de code HTML standard et de construction Liquid donne un fichier Liquid.

Les délimiteurs se comportent comme des paramètres fictifs. Un paramètre fictif est ce bout de code qui est remplacé par des données après l’envoi du thèmes sur le navigateur. Et c’est le concepteur du thème qui définit ces données dans le fichier Liquid Shopify.

Liquid: syntaxe

Le code Liquid Shopify est intuitif et simple à maîtriser, présente de nombreux avantages par rapport aux pratiques de codage conventionnelles. On peut facilement le distinguer du code Html par des accolades {{ }} et des signes de pourcentage {% %} présent dans le code Liquid.

La logique est introduite par l’association de l’accolade et le pourcentage {% %} et maintenant la double accolade introduit la sortie. On distingue trois caractéristiques principales du code Liquid

• Objets
• Mots clés (Tag)
• Filtres

Liquid: Objets

Dans le langage shopify liquid les objets génèrent des données depuis un administrateur Shopify. Dans un modèle de thème les objets sont délimités par de double accolade et ressemble à ceci. Dans ce code ci dessus product est l’objet et title est une propriété de cet objet. Il faut retenir que chaque objet a une propriété qui lui est associée.

Le thème shopify comporte le modèle de produit ou se trouve l’objet {{ product.title}}. Après l’exécution du code, la sortie de l’objet sur une page de boutique shopify sera le titre du produit. Exemple, le résultat pourrait donner ce qui suit: Même si le seul modèle est utilisé pour plusieurs boutiques différentes, les données générées seront toutes différentes et seront en fonction de la page produit que vous consultez.

Pour récupérer et afficher un seul article on utilise son handle voir code ci-dessous.

Explication de assign(‘var’, ‘valeur’)

var est un paramètre permettant à indiquer la variable à associer et valeur permet d’indiquer la valeur associée

Le code l’exemple suivant permet d’afficher le contenu de la variable «machaine» :

{assign var=”machine” value=”Gladir.com”}

Liquid: Mots clés

Les balises Liquid sont la logique de programmation qui montre au modèle quoi faire. Le texte qui se trouve entre les caractères {% %} ne produit aucun effet lorsque la page Web est rendue. Il nous permet simplement de créer des variables, des conditions ou des boucles sans afficher la logique Liquid sur la page.

Balise de flux de contrôle

Ce sont les balises de flux de contrôle qui conditionnent si un bloc de code Liquid Shopify doit être exécuté ou pas. En exemple, voici l’utilisation des balises Liquid qui renvoie une réponse selon que le produit est disponible ou non.

Si le produit est disponible c’est if est VRAI, la sortie sera : “Prix: 99.99$”

Si le produit n’est pas disponible si if est FAUX, la sortie sera : “Désolé, ce produit est épuisé.”

Donc grâce au if, else et endif nous contrôlons la sortie de notre fichier Liquid. Les if sont comme des questions et le résultat affiché est la réponse en fonction de la question posée.

Avec cette logique on peut prendre le contrôle de flux d’une page et de pouvoir décider quelles données afficher.

Liquid: Les boucles

Les boucles sont faciles à comprendre et très utilisées dans les thèmes Shopify. Il vous sera très familier ce concept si vous avez déjà une petite notion sur la boucle en programmation de base.

Souvent appelées for loop, les boucles permettent de faire sortir un nombre précis le même morceau de code.

Un exemple explicite serait de sortir toute les images associées à un produit

Voyons un peu plus en détails ces trois lignes de code ci dessus

Première ligne : {% for image in product.images %}

Les boucles for travaillent avec les collections Liquid et parcourent l’ensemble des éléments d’une liste à tour de rôle. Dans l’exemple précédent, si le produit comporte 6 images alors la boucle tournerait 6 fois. Après l’examen de chaque élément de la liste, la partie suivante de la page sera prise en compte.

Il faut comprendre que la taille de la boucle n’est généralement pas spécifiée donc aucune idée sur le nombre de fois ou la boucle va tourner mais ce qui est évident elle parcourra chaque élément de la liste du début jusqu’à la fin.

Afin de pouvoir accéder aux propriétés de chaque élément, la variable “image” est utilisée pour représenter l’élément actuel dans la boucle. Il n’est pas obligé de définir la variable avec le mot “image” on peut toutefois utiliser n’importe quoi pour définir cela mais c’est juste pour que d’autre concepteur puisse vite comprendre votre logique.

Deuxième ligne : <img src=”{{ image | img_url: ‘300×300’ }}” />

Cette ligne est composée de code HTML et Liquid. L’attribut src est renseigné avec une balise de sortie Liquid.

Le caractère tuyau | prend le contenu de la variable image et spécifie les dimensions, en pixels, que l’image doit être affichée.

Troisième ligne : {% endfor %}

C’est la fin de la boucle, le modèle peut continuer après que toutes les boucles ont été exécutées.

La boucle case/when Pour comparer une variable avec différente valeur on utilise généralement case/when. On initialise la variable avec case puis on la compare avec when.

Exemple de code

{% assign handle = ‘cake’ %} {% case choix %}

{% when ‘cake’ %}

This is a cake

{% when ‘cookie’ %}

This is a cookie

{% else %}

Ce n’est ni un gâteau ni un cookie

{% endcase %}

On a sorti une sortie que lorsque la variable choix est égale à “cake” ou “cookie”. Si aucune des deux condition n’est vérifiée on aura comme sortie: “Ce n’est ni un gâteau ni un cookie”

Les filtres Liquid

L’une des fonctionnalités de Liquid sont les filtres de sortie. Ils ont trois objectifs principaux:

• La manipulation des données d’une certaine manière
• Fait gagner du temps aux concepteurs de thèmes en réduisant la longueur de code que nous devons écrire.

Les filtres sont généralement utilisés en conjonction avec une sortie Liquid. Voyons quelque filtre en commençant par le date

Comme précédemment vous constatez le caractère | appelé généralement pipe au milieu de la balise de sortie. De son côté gauche se trouve l’objet article avec sa propriété associée le published et sur la droite se trouve le filtre date avec pour instruction le format de la date qui est ‘%d %B %Y’.

Grâce à ce filtre shopify va afficher la date au format qu’un homme peut lire sinon sans cela la date serait affichée comme c’était stockée dans la base de données et c’est pas lisible par un homme.

Pour faire court il faut retenir que les filtres ont pour rôle de prendre une donnée dans la boutique et de la modifier.

Voici un autre exemple de filtre

Ici ces deux filtres sont utilisés pour créer un élément de style entièrement formé dans un fichier de mise en page.

Il existe de nombreux filtres vraiment utiles, en voici quelques-uns que vous utiliserez :

• asset_url
• stylesheet_tag
• script_tag
• date
• pluralize
• replace
• handle
• money
• money_with_currency
• img_url
• link_to

Les opérateurs

Pour cet exemple, on va s’intéresser à l’opérateur “supérieur à” >. La variable cart.item_count renvoie un nombre entier qui représente le nombre d’article que l’internaute a ajouté dans son panier, grâce à cela on peut connaître si le nombre est supérieur à zéro et donc le panier n’est pas vide.

En fonction de la valeur logique retourner on peut afficher un message en indiquant le nombre de produit présent dans le panier.

Le code ci-dessus peut être refactorisé à l’aide d’un filtre pluralize nous pouvons afficher « article » ou « articles » cela dépend du nombre d’articles présent dans le panier. L’avantage à ce niveau est que nous n’avons pas besoin de connaître le nombre exact d’articles pour afficher le bon message mais la back office shopify le fera.

En plus de l’opérateur > il y’a une grande variété d’opérateurs de comparaison dans Liquid, parmi lesquels :

• == égal à
• != différent de
• > supérieur à
• < inférieur à
• >= supérieur ou égal à
• <= inférieur ou égal à
• or condition A ou condition B
• and condition A et condition B
• contains : contient un fragment dans une chaine, ou une chaine dans un groupe de chaînes

Liquid: Pourquoi l’apprendre ?

La seule et bonne raison pour laquelle il est important d’apprendre le langage Liquid Shopify c’est qu’il vous permet de prendre le contrôle de votre thème et de construire la boutique comme ça vous convient.

Pour mieux comprendre ce qui se passe, prenez un thème shopify au hasard et commencez à disséquer ses nombreuses parties tout en prévisualisation pour voir l’effet que cela a sur le thème.

Comment créer un thème Shopify?

Avant de commencer par le développement d’un thème, faire ce qui suit:

• Si vous optez pour l’utilisation d’une boutique de développement pour créer un thème alors créer ou connectez vous à un compte partenaire Shopify et ensuite créer une boutique de développement.
• Noter l’URL de la boutique sur laquelle vous souhaitez travailler, par exemple shoe-apparel.myshopify.com.
• Noter le compte Github que vous voulez connecter à votre boutique
• Assurez-vous d’avoir un compte collaborateur ou compte personnel avec le permis de Gérer les thèmes ou l’ autorisation Thèmes pour la boutique sur laquelle vous souhaitez travailler.

Etape 1: Installer le CLI

La ligne de commande Shopify CLI vous permet de créer des thèmes shopify. Il vous permet de faire des tests, de prévisualiser ainsi que de partager des modifications en local sur votre système.

macOS (Homebrew): exécuter les ligne suivantes

$ brew tap shopify/shopify

  $ brew install shopify-cli

macOS (Homebrew): exécuter la ligne suivante

$ gem install shopify-cli

Étape 2 : Initialiser un nouveau thème à l’aide de Dawn

Dawn est un thème de référence shopify. Vous avez le choix d’utiliser Dawn comme point de départ pour créer un thème.

1. Depuis le terminal, accédez au répertoire de travail dans lequel vous voulez cloner Dawn puis saisissez la commande suivante

$ shopify theme init

2. Vous êtes invité a donné un nom à votre thème. Par exemple “nouveau-thème-project”
3. Une fois cloner accédez au dossier en tapant: cd nouveau-thème-project

Étape 3 : Authentification avec Shopify CLI

Tapez dans votre terminal: shopify login –store <DOMAIN>, <DOMAIN> représente le nom de domaine de votre boutique comme par exemple shoe-apparel.myshopify.com. Sur votre navigateur, connectez-vous au compte associé à la boutique que vous souhaitez utiliser pour le développement.

Étape 4 : prévisualisez votre thème

Pour interagir avec le thème dans un navigateur saisissez shopify theme serve

sur votre terminal. Après cela, le thème est téléchargé automatiquement par Shopify CLI sur votre boutique sur laquelle vous êtes connectés.

Une URL est renvoyée et recharge toutes les modifications locales apportées au CSS et aux sections. Vous pouvez prévisualiser les modification que sur Google chrome

1. Pour la diffusion de votre thème, exécutez la commande suivante $ shopify theme serve

2. Dans Google Chrome, accédez à http://127.0.0.1:9292 pour ouvrir l’aperçu du thème.

Étape 5 : Transférez votre thème vers un nouveau dépôt GitHub

Vous pouvez créer un référentiel GitHub vide, puis y ajouter votre code de thème.

Étape 6 : Installez l’intégration Shopify GitHub et connectez votre succursale à votre boutique

1. Depuis l’administrateur Shopify, aller sur Boutique en ligne > Thèmes .
2. Au niveau de la section Bibliothèque de thèmes , cliquez sur Ajouter un thème > Se connecter depuis GitHub .
3. Connectez-vous à GitHub.
4. Vous êtes invité à autoriser et à installer l’ application GitHub de la boutique Shopify en ligne .
5. Si vous connectez un référentiel qui appartient à une organisation, choisissez l’organisation du référentiel.
6. Choisissez le référentiel auquel vous souhaitez vous connecter, puis choisissez la branche à laquelle vous souhaitez vous connecter.

Le thème apparaît dans votre bibliothèque de thèmes. Les thèmes connectés à GitHub répertorient le référentiel, le nom de la branche et l’heure du dernier commit sur la carte de thème.

Étape 7 : Testez votre connexion

1. Ouvrez votre référentiel dans un éditeur. Assurez-vous que vous êtes sur la branche qui est connectée à votre thème dans l’administrateur Shopify.
2. Allez sur le configdossier et ouvrez settings_schema.json.
3. Au niveau de theme_infonœud, mettez à jour le nom du thème pour qu’il corresponde au nom que vous avez donné à votre thème à l’aide de Shopify CLI.
4. Enregistrez et validez vos modifications, puis faites le transfert vers GitHub.
5. Depuis votre interface administrateur Shopify, ouvrez la page Thèmes .
6. Dans la bibliothèque de thèmes, recherchez le thème connecté à votre branche. La dernière date enregistrée doit correspondre à l’heure à laquelle vous avez poussé votre commit vers la branche.
7. Cliquez sur Personnaliser pour ouvrir l’éditeur de thème. À côté du référentiel et du nom de la branche, cliquez sur le bouton de menu ⋯. Dans le menu, le nom du thème doit correspondre à la valeur que vous avez saisie dans settings_schema.json.