Share
Dans la première partie de cette série (Introduction d'un concepteur Web à Shopify), je vous ai présenté la plate-forme de commerce Shopify, expliqué un certain nombre de ses concepts clés et illustré la structure d'un thème Shopify..
À l’avenir, ce didacticiel se concentrera sur Liquid, le langage de modèle Shopify. Nous examinerons les avantages de Liquid, expliquerons comment cela nous permet d'extraire et de manipuler les données de nos magasins et enfin de présenter certaines de ses fonctionnalités clés que vous pourrez utiliser quotidiennement dans le développement de votre thème Shopify..
Si vous avez besoin d'aide pour résoudre votre problème avec votre magasin Shopify ou même pour le configurer à partir de zéro, vous pouvez trouver un expert Shopify sur Envato Studio, prêt à vous aider. Voici quelques exemples:
C'est un excellent service de base pour vous aider à vous installer rapidement et facilement sur Shopify. Voici ce qu'il comprend:
Si vous avez besoin d’aide pour installer un thème correctement, cet expert Shopify peut vous aider. Ils vont:
Le service de base ne coûte que 50 $, et plus d’extras sont disponibles si vous le souhaitez..
Que faire si vous avez besoin d'un thème personnalisé? Ce fournisseur propose la personnalisation de votre thème Shopify existant pour répondre à tous vos besoins..
Les personnalisations comprennent:
Vous recherchez un package complet? Ce fournisseur installera et configurera votre thème. ajoutez votre logo et votre image de marque; personnaliser les couleurs et les polices; personnaliser les modèles liquides; ajouter des scripts et installer des applications pour la fonctionnalité; mettre en place des étiquettes de produits, des variantes et des catégories; ajoutez ou importez vos produits, le temps le permet; et faire tous les tests nécessaires.
Cela comprend jusqu'à 20 heures de temps d'installation et de développement.
De nombreux autres experts Shopify sont disponibles pour vous aider sur Envato Studio. Alors parcourez les services disponibles - ou lisez la suite pour en savoir plus sur l’utilisation de Liquid.
Si vous n'êtes pas familier avec le concept de langage de modèle, je le décris souvent comme un pont entre les données de votre magasin et les modèles HTML envoyés au navigateur..
En utilisant des constructions simples à lire (et faciles à retenir), nous pouvons accéder aux données de notre magasin (par exemple, un titre, une description de collection, un ensemble d’images de produits ou un article de blog) et les exporter directement dans nos modèles. . L'un des principaux avantages est que nous n'avons pas besoin de savoir en quoi consistent ces données. Nous devons simplement savoir à quelles variables nous avons accès dans chaque modèle..
Exemple de modèle product.liquid typique dans SublimeText2 avec mise en évidence de la syntaxe LiquidComme indiqué dans la première partie de cette série, Shopify choisit le modèle à envoyer au navigateur en fonction de l'URL demandée. Par exemple, si l'URL est http://shopify-for-designers.myshopify.com/collections/cups, Shopify affichera le collections.liquid modèle.
Une fois que Shopify a défini le modèle à rendre, il analyse le modèle (et son fichier de présentation externe) à la recherche d'espaces réservés Liquid. Lorsque cela se produit, Shopify remplace le code Liquid par les données pertinentes de votre magasin..
Une autre façon de penser aux modèles de langage est comme "trouver et remplacer" dans un éditeur de texte. La plate-forme, dans ce cas Shopify, recherche tous les espaces réservés Liquid et les remplace ensuite par les données de votre magasin. Le document final construit est ensuite envoyé au navigateur au format HTML.
Cela peut sembler un peu étrange au premier abord si ceci est votre première incursion dans le templating, mais vous comprendrez vite.
UNE espace réservé est un morceau de code qui sera finalement remplacé lorsque le modèle est envoyé au navigateur.
Il existe deux types d’espaces réservés dans Liquid. Le premier est les doubles parenthèses dénoter sortie et le second est le pourcentage de parenthèses %% dénoter logique.
Voici un exemple rapide d'un sortie espace réservé que vous trouverez généralement dans le produit.liquide micro modèle:
product.title
Une fois rendu, le nom du produit actuellement affiché sera affiché à la place du , par exemple:
Keir's Coffee Cup
La sortie, à moins d'être manipulée avec un filtre (que nous verrons plus loin), consiste simplement à remplacer le paramètre fictif par le texte de votre magasin..
En plus de nous permettre d’obtenir des données de notre magasin et de les afficher dans nos modèles, comme indiqué ci-dessus, Liquid est également capable de contrôler quoi est affiché dans nos modèles à l'aide de constructions et de boucles logiques.
Par exemple, nous pouvons choisir d'afficher un extrait de code HTML différent selon que le produit actuellement visualisé est en stock ou non..
Nous pouvons également utiliser Liquid pour générer le même morceau de code plusieurs fois, par exemple une série d'images de produits. En utilisant boucles nous permet d'afficher tous les produits associés à un produit dans quelques lignes de code Liquid.
Liquid est vraiment puissant et, même si vous pensez peut-être que nous entrons dans le domaine de la programmation, je suis convaincu que vous le détecterez assez rapidement..
Maintenant que vous avez compris le fonctionnement de Liquid, voyons quatre caractéristiques clés et leur fonctionnement en rapport avec le développement de thèmes..
Comme mentionné précédemment, les doubles parenthèses dans un .liquide dossier dénoter un sortie espace réservé. Voici deux exemples que vous rencontrerez fréquemment:
shop.name product.description
La sortie nous permet d'extraire une donnée spécifique de notre magasin dans notre modèle et, comme son nom l'indique, de la produire à la place du paramètre fictif Liquid.
Disons que mon magasin s'appelait "Keir's Coffee Emporium". Si je devais utiliser le Nom de la boutique étiquette liquide Shopify prendrait le nom de mon magasin et remplacerait l'espace réservé liquide par le nom de mon magasin directement dans mon modèle au format HTML.
De même, si nous utilisions Description du produit dans notre produit.liquide le modèle, tout texte saisi dans l'éditeur WYSIWYG pour ce produit particulier serait édité à la place du Description du produit espace réservé.
Remarque: L’éditeur WYSIWYG générera le format HTML afin que vous n’ayez pas besoin d’envelopper votre Description du produit avec n'importe quel élément HTML, par exemple. une .
Toute variable, qu'il s'agisse d'une variable globale (disponible dans chaque modèle de votre thème) ou d'une variable de niveau de modèle (disponible uniquement pour un modèle spécifique), peut être générée de cette manière. D'autres exemples incluent:
shop.description product.title collection.title collection.description
Pour une liste complète des variables que vous pouvez générer dans vos thèmes, je vous recommande vivement de mettre en favori le aide-mémoire de Mark Dunkley. Je me trouve à utiliser ce quotidien.
Pour résumer, la sortie de liquide ressemble beaucoup à "trouver et remplacer". Lors du rendu du modèle, Shopify recherchera toutes les occurrences d’étiquettes de sortie Liquid et les remplacera par les données pertinentes de votre magasin..
Vous remarquerez également à partir de ces exemples que Liquid utilise le syntaxe à points pour accéder aux données. L'élément précédant le point est la variable, tandis que l'élément le suivant est un attribut de cette variable. Par exemple, notre variable de magasin ci-dessus possède à la fois un nom et un attribut de description.
Le site de documentation Shopify propose des exemples de code et des screencasts Passons à la logique Liquid. Bien que légèrement plus compliqué pour les nouveaux utilisateurs, les tags logiques ne sont pas si difficiles à comprendre une fois que vous les avez essayés vous-même.
Considérant que liquide sortie les espaces réservés nous permettent de récupérer des données et de les afficher dans nos modèles Logique liquide les balises nous permettent de contrôler le flux d'un modèle. Contrairement aux balises de sortie, l’inclusion de balises logiques dans vos modèles ne permet pas de restituer directement quoi que ce soit, mais nous permet de contrôler quoi est rendu.
Un exemple typique que j'utilise pour illustrer la façon dont la logique Liquid est utilisée consiste à mettre en évidence la vente d'un produit. L’exemple suivant se trouve généralement dans le produit.liquide micro modèle:
% if product.available% Ce produit est disponible % else% Désolé, ce produit est épuisé % endif%
Comme vous le verrez, la syntaxe de Liquid logic diffère légèrement de celle de la sortie. À la place du les délimiteurs que nous utilisons %%.
Dans l’exemple ci-dessus, nous contrôlons le contenu de notre modèle en utilisant un simple si, autre, fin si déclaration. De plusieurs façons si les déclarations sont comme des questions.
Dans l'exemple ci-dessus, si la réponse à notre si question de déclaration est vrai nous rendons les mots "Ce produit est disponible", si c'est faux notre modèle continue et affiche le texte suivant notre % autre % clause - dans ce cas "Désolé, ce produit est épuisé".
Vous vous retrouverez en utilisant si beaucoup de déclarations dans le développement de thèmes Shopify. Voici un autre exemple pour vous aider à comprendre:
% si cart.item_count> 0%Vous avez cart.item_count article (s) dans votre panier
% autre %Il n'y a rien dans votre panier :( Pourquoi ne pas jeter un coup d'œil à notre gamme de produits
% fin si %
Cet exemple montre comment vous pouvez afficher le nombre d'éléments dans un panier de visiteurs ou générer un lien vers vos produits..
Vous remarquerez dans cet exemple que nous utilisons le plus grand > opérateur. Comme le cart.item_count variable renvoie le nombre d'éléments dans le panier des utilisateurs actuels, nous pouvons vérifier s'il est supérieur à zéro, c'est-à-dire qu'il contient des éléments.
Si cela revient Il n'y a rien dans votre panier :( Pourquoi ne pas jeter un coup d'œil à notre gamme de produitsvrai nous pouvons afficher le message avec le nombre d'éléments actuel, sinon nous pouvons afficher
Vous avez accès à un large éventail d’opérateurs dans Liquid, que vous utiliserez régulièrement:
Accentsconagua
== égal!= inégal> plus grand que< moins que> = plus grand ou égal<= inférieur ou égalou Ceci ou celaet doit être ceci et celacontient inclut la sous-chaîne si elle est utilisée dans une chaîne ou l'élément si elle est utilisée dans un tableauPassons maintenant à notre concept de boucles à liquide.
Si vous avez utilisé une forme quelconque de programmation de base, le concept de bouclage de données vous sera très familier. En utilisant une boucle, souvent connue sous le nom de pour la boucle, nous permet de sortir le même morceau de code un nombre connu de fois dans notre modèle.
Regardons un exemple tiré d'un thème Shopify pour aider à solidifier le concept:
% pour l'image dans product.images%% endfor%
Dans cet exemple, généralement trouvé dans le produit.liquide micro modèle, nous utilisons une boucle pour produire chaque image associée au produit actuellement visualisé. Divisons-le en étapes pour bien le comprendre..
Notre ligne d'ouverture nous introduit à l'idée de collections en liquide. contrairement à collections de produits que nous avons examiné dans la première partie des collections dans Liquid sont différents. C’est une convention de nommage malheureuse à cet égard, aussi j’aime parler de collections dans Liquid. Collections liquides pour éviter la confusion.
Une collection Liquid dans les thèmes Shopify peut prendre de nombreuses formes, mais un bon exemple est product.images comme utilisé ci-dessus. Une collection Liquid est facile à repérer car elle prend normalement la forme de pluriel - comme dans images au dessus de. Dans notre exemple, nous traitons d’une collection Liquid de toutes les images associées à un produit..
Un autre exemple est product.variants. Cela renverrait un objet contenant les détails de toutes les variantes du produit, prêt à être utilisé dans notre modèle. Si vous avez besoin d’un apprêt sur les variantes de produit, nous en avons discuté dans la première partie..
Vous remarquerez également que nous utilisons le mot image pour indiquer l'élément en cours dans la boucle. Chaque fois que nous faisons le tour de notre boucle image nous donnera accès aux données associées à chaque image à tour de rôle. Naturellement ce sera différent sur chaque boucle.
Il convient également de noter que nous n'avons pas besoin de savoir combien de boucles se produiront. Quand il n'y aura plus d'images à boucler, Shopify poursuivra et affichera la partie suivante du modèle..
La deuxième ligne de notre code est composée à la fois de HTML et de Liquid. Vous remarquerez que le src attribut est rempli avec une balise de sortie Liquid. Nous allons regarder les filtres, notés par le | character, next mais cette courte construction va renseigner l'attribut src avec l'URL complète de la "petite" version de l'image courante dans notre boucle.
La dernière ligne de notre exemple est notre fermeture fin déclaration. Ceci ferme efficacement tout code qui sera rendu dans la boucle.
Si nous avions trois images dans notre product.images object la sortie finale ressemblerait à ceci:
Les cycles Pure Fix utilisent des boucles pour sortir les nombreuses variantes de produits de leur roue AerospokeLes boucles sont vraiment utiles et vous les rencontrerez quotidiennement dans le développement de votre thème. La sortie d'images et de variantes de produits sont deux exemples courants.
J'ai déjà mentionné les filtres par rapport à notre exemple de boucle, alors allons dans les détails et regardons comment ils fonctionnent..
Les filtres sont utilisés conjointement avec une balise de sortie. Leur but est de manipuler les données d'une manière ou d'une autre afin que leur format change. Un bon exemple est le filtre de date:
article.published_at | date: '% d% B% Y'
Sans le filtre, Shopify afficherait simplement la date à laquelle l'article de blog a été publié dans le format dans lequel il est stocké dans la base de données - ce qui peut ne pas être lisible par l'homme. Cependant en ajoutant dans le | et y compris le filtre de date, nous pouvons manipuler le format nous-mêmes.
Nous commençons à gauche avec une donnée, dans ce cas une date, et en utilisant le filtre il ressort que l’autre côté a changé. Ceci, en substance, est le seul but d'un filtre. Il prend une donnée et la manipule pour que sa forme change.
La feuille de triche de Mark Dunkley décrit tous les filtres de liquide disponiblesVoici un autre exemple:
'style.css' | asset_url | stylesheet_tag
Ici, nous utilisons deux filtres dans le but ultime de créer un élément de style entièrement formé dans notre fichier de présentation..
Nous commençons à gauche avec le nom du fichier CSS et appliquons d’abord le asset_url filtre. Ceci est un filtre incroyablement utile. Comme nous n'avons aucune idée de l'emplacement de notre fichier style.css sur le réseau Shopify (autre que dans notre dossier Actifs dans notre thème), nous avons besoin d'un moyen permettant à Shopify de remplir le chemin d'accès au fichier..
C'est le but de la asset_url filtre. Il prendra le nom de notre fichier, style.css Dans cet exemple, indiquez le chemin d'accès complet au dossier des actifs de votre magasin. Il est intéressant de noter qu'il ne vérifie pas que le fichier existe.
Voici à quoi cela pourrait ressembler lorsque la sortie:
//cdn.shopify.com/s/files/1/0222/9076/assets/style.css
Le dernier filtre de la chaîne, stylesheet_tag, prend cette URL et l'enveloppe dans un élément de style qui est ensuite affiché dans notre fichier de présentation. Voici le résultat final:
Chaque filtre prend la sortie du filtre précédent et le modifie à son tour. Lorsqu'il n'y a plus de filtres pour transmettre des données, le résultat est généré au format HTML dans le modèle..
Il existe de nombreux filtres vraiment utiles, en voici quelques-uns que vous utiliserez:
Dans ce tutoriel, nous avons parcouru pas mal de terrain. Nous avons examiné Liquid et ses relations avec nos micro-modèles HTML et fichiers de mise en page HTML, ainsi que quatre concepts clés: sortie, logique, boucles et filtres..
La prochaine étape intéressante consisterait à ouvrir un compte partenaire Shopify gratuit et à commencer à disséquer un thème pour vous-même. Beaucoup d'exemples utilisés dans ce tutoriel sont tirés de mon thème de démarrage extrêmement nu qui est disponible sur GitHub..
En préparation de la troisième partie, je vous recommande de télécharger une copie et de l’appliquer à un magasin de développement. Tous les détails sur le téléchargement d'un thème sont disponibles dans la documentation Shopify. C'est littéralement aussi simple que de télécharger un fichier ZIP. Jouez avec l'éditeur de modèles dans l'administrateur de votre boutique de développement, modifiez quelques balises, appliquez un filtre ou deux et ajoutez des éléments dans le fichier de présentation pour voir comment les choses changent..
Dans la dernière partie de cette courte série, je vous présenterai quelques idées plus avancées qui montreront à quel point Liquid et Shopify peuvent être flexibles. Nous verrons comment ils vous permettent de faire vraiment chanter vos thèmes à l'aide d'exemples tirés de mes propres projets et d'autres magasins Shopify bien connus..
% endfor% 
