Approfondissement du développement de thèmes Shopify

Dans les deux premières parties de cette série, je vous ai présenté la plate-forme de commerce électronique Shopify, expliqué ses concepts clés, expliqué comment les thèmes sont construits, puis abordé en détail Liquid - le langage de gabarit Shopify..

Dans cette dernière partie, nous verrons comment une connaissance un peu plus approfondie de Liquid vous permettra de rendre vos thèmes encore plus flexibles, vous permettant ainsi de proposer des conceptions de magasins riches et imaginatives..

Commençons par regarder comment nous pouvons utiliser les "dispositions alternatives" avec un grand effet.

Autres mises en page

L'une des fonctionnalités les plus puissantes de Liquid est le fichier de disposition que nous avons examiné dans la première partie. Je décris souvent un fichier de mise en page comme un "modèle maître". En règle générale, ce fichier comprend nos déclarations HTML, notre stratégie de marque, notre navigation et notre pied de page - essentiellement tous les éléments communs de notre site que nous souhaitons voir apparaître sur chaque page..

Toutes les pages rendues dans un thème Shopify, sauf indication contraire, seront basées sur ce modèle principal. Par défaut c'est le thème.liquide fichier qui réside dans le mises en page dossier. Nos micro modèles, situés dans le des modèles dossier, sera rendu au point où Shopify rencontre le content_for_layout Espace réservé liquide dans notre fichier de mise en page.

Pour rafraîchir votre mémoire, voici un exemple de fichier de mise en page très basique:

  content_for_header   "screen.css" | asset_url | stylesheet_tag   content_for_layout   

Comme indiqué dans la première partie, un fichier de présentation dans un thème Shopify doit inclure deux balises de sortie Liquid., content_for_header et content_for_layout. Le premier est utilisé par Shopify pour ajouter du code à des fins d'analyse et pour fournir un accès rapide à la zone d'administration de votre boutique. La deuxième, content_for_layout, sera remplacé par le modèle correspondant de notre dossier de modèles, par exemple. la produit.liquide le modèle sera injecté lorsque nous afficherons une page de détail de produit.

Les mises en page sont une fonctionnalité intéressante et nous aident à garder les thèmes agréables et secs. Cependant, il y aura des moments où les éléments de votre fichier de disposition par défaut devront changer. Peut-être souhaitez-vous créer une page de garde ne nécessitant pas une image de marque et une navigation «normales». Il est possible que vous puissiez atteindre les résultats souhaités avec CSS, mais vous souhaiterez probablement produire un balisage différent. Voici où les dispositions alternatives entrent en jeu.

Créer une mise en page alternative est très simple. La première chose à faire est de créer un nouveau fichier et de lui donner un nom et le .liquide extension. Le nom du fichier est à vous. Ce qui est important, c’est de le sauvegarder dans le mises en page dossier dans votre répertoire de thème. Dans ce fichier, vous pouvez placer le code HTML dont vous avez besoin (déclarations HTML, CSS, liens JS, etc.) avec les deux espaces réservés décrits ci-dessus..

Pour utiliser ce fichier de présentation et remplacer efficacement le fichier par défaut thème.liquide fichier de disposition, nous utilisons la syntaxe Liquid suivante dans l’un des micro-modèles:

% layout "alternative"% 

Remarque: vous n'avez pas besoin d'inclure le .liquide extension. Désormais, lorsque Shopify traitera le micro-modèle concerné, il sera rendu avec alternative.liquid comme fichier de mise en page.

Modèles spécifiques aux produits

De la même manière que nous pouvons dicter des mises en page spécifiques à appliquer à nos micro-modèles, nous pouvons utiliser la logique liquide pour restituer différents modèles de produit. Liquid existe de différentes manières. La méthode que je préfère consiste à utiliser des poignées de produit. Si vous avez déjà utilisé WordPress, vous pouvez penser à un poignée de produit de la même manière qu'un limace. Voici une URL de produit typique du site Web A Book Apart à illustrer:

http://www.abookapart.com/products/responsive-web-design 

Dans cet exemple, le descripteur de produit est site Web adaptatif - le dernier élément de l'URL. Les descripteurs de produit sont créés automatiquement pour vous lorsque vous ajoutez un produit dans l'administrateur Shopify et sont basés sur le nom que vous avez entré; les caractères majuscules sont remplacés par des minuscules et les espaces par des tirets. Vous pouvez bien sûr les remplacer si vous avez besoin de.

Par défaut, chaque fois que Shopify génère une page de détail du produit, il utilise le produit.liquide micro modèle. Supposons que nous voulions servir une page de produit différente uniquement pour que le livre d'Ethan le souligne vraiment. Pour ce faire, nous devons apporter quelques modifications à la produit.liquide modèle.

Le livre d'Ethan Marcotte Responsive Web Design sur le site Shopify propulsé par A Book Apart

Comme le produit.liquide le modèle a accès à toutes les données relatives au produit actuellement affiché, nous pouvons poser la question suivante à l'aide d'un liquide si déclaration:

% if product.handle == "responsive-web-design"% % include "responsive-web-design"% % else% [Code HTML normal pour product.liquid] % endif% 

En ajoutant dans le si déclaration, que nous avons examinée dans la deuxième partie de cette série, nous sommes en mesure de contrôler quel balisage est rendu. En termes simples, si le product.handle est égal à "responsive-web-design", nous incluons le fichier appelé responsive-web-design.liquid.  Cependant, si ce n’est pas le cas, nous rendons simplement le code que nous avons déjà dans notre produit.liquide modèle.

Le pouvoir des extraits

Cet exemple nous introduit aux extraits de liquide. Snippets vivent dans le bien nommé extraits dossier et sont référencés sans le .liquide extension lors de l'utilisation de la balise Liquid % comprendre %.

Comme son nom l'indique, en utilisant % comprendre % va littéralement inclure un morceau de code dans votre micro-modèle ou fichier de mise en page. Dans l'exemple ci-dessus, le fichier contiendrait le balisage alternatif nécessaire pour présenter le livre d'Ethan, y compris tout le code Liquid nécessaire pour extraire les données relatives au produit dans le modèle..

Bien sûr, vous pouvez spécifier que ce modèle particulier soit utilisé pour un autre livre en plus de celui d'Ethan. Voici un moyen d'y parvenir:

% if product.handle == "responsive-web-design" OU product.handle == "design-est-un-travail"% % include "responsive-web-design"% % else% [ Code HTML normal pour product.liquid] % endif% 

Dans ce cas, vous voudrez peut-être renommer votre extrait de code en quelque chose de plus approprié, c.-à-d.. produit-showcase.liquid.

Il est à noter que vous ne pouvez pas imbriquer des dossiers dans votre répertoire d'extraits. En conséquence, j'ai tendance à préfixer mes fichiers avec leur fonction:

• product-responsive-web-design.liquid
• produit-showcase.liquid
• collections-books.liquid

L’utilisation de cette convention de dénomination facilite grandement la recherche d’extraits, en particulier à mesure que leur utilisation augmente..

Un exemple de la façon dont j'ai utilisé des extraits sur le site 8 Faces pour séparer les problèmes logiques

Quand utiliser des extraits

J'ai tendance à utiliser des extraits de deux manières différentes. D'abord pour séparer le code en morceaux gérables, et ensuite pour les éléments d'une page que je dois réutiliser, comme un bloc de pagination.

En règle générale, voici comment je décide où ajouter du code:

• Apparaît sur chaque page - fichier de mise en page
• Apparaît sur plusieurs pages - fichier d'extrait
• Apparaît sur une page - micro modèle

Micro modèles en tant que contrôleurs

Un autre truc que j'ai utilisé à bon escient est de traiter un micro-modèle comme un contrôleur de vue - une idée que j'ai tirée de la plupart des frameworks MVC que j'ai utilisés. Cela pourrait être un nouveau concept pour vous alors jetons-y un œil plus en détail.

Dans les exemples ci-dessus, nous utilisons la logique liquide pour rechercher un descripteur de produit particulier dans produit.liquide micro modèle. Si la réponse à notre si déclaration est vraie, nous incluons un extrait, sinon Shopify restitue le bloc HTML contenu entre les % autre % et % fin si % Mots clés.

Pour certains, cela peut sembler un peu brouillon et peut, avec le temps, devenir difficile à lire, surtout si votre produit.liquide le balisage augmente. Pour faciliter la gestion, nous pouvons simplement extraire notre balise par défaut du modèle product.liquid et créer un extrait - je le qualifie plutôt product-default.liquid.

En suivant cette approche, notre fichier product.liquid pourrait être modifié comme suit:

% if product.handle == "responsive-web-design"% % include "product-responsive-web-design"% % else% % include "product-default"% % endif%  

Bien entendu, au fur et à mesure de l'évolution de vos besoins, ce fichier pourrait intégrer d'autres contrôles et fichiers pertinents inclus en fonction des résultats. Les options sont illimitées.

Il convient de rappeler que ce ne sont pas seulement les produits dotés de poignées dans Shopify, mais également les collections et les pages. En utilisant la même approche pour les collections, nous pourrions faire ce qui suit dans notre collections.liquid modèle:

% if collection.handle == "css"% % include "collection-css"% % else% % include "collection-default"% % endif% 

En utilisant Cas Au lieu de si elsif autrement

Cette méthode fonctionne très bien si nous voulons simplement vérifier un descripteur particulier, qu'il s'agisse d'un produit ou d'une collection, mais si nous voulons l'étendre à plusieurs produits ou collections?

Nous avons deux approches possibles, la première consiste à étendre notre si déclaration en utilisant elsif. Voici un exemple:

% if product.handle == "responsive-web-design"% % include "product-responsive-web-design"% % elsif product.handle == "design-est-un-emploi"% % include "produit-design-est-un-emploi"% % autre% % include "produit-par défaut"% % endif% 

Cet exemple recherche successivement deux descripteurs de produit et ne rendra le résultat que si ni l'un ni l'autre n'est vrai. product-default.liquid fragment.

Il est possible d’utiliser plusieurs elsif déclarations dans Liquid mais cela peut devenir un peu prolixe. Une alternative, et je pense que l'approche plus ordonnée est d'utiliser Cas. Voici l'exemple ci-dessus refactored:

% case product.handle% % lorsque "conception de site Web réactif"% % d'inclure "conception de site Web réactif"% % lorsque "la conception est un travail"% % inclure "product-design-is-a-job"% % else% % include "produit-par défaut"% % endcase% 

Nous pouvons également faire une comparaison plus floue en utilisant l'opérateur Liquid contient. Supposons que nous souhaitons que tout produit dont le mot-clé est responsive utilise un extrait différent. Voici comment nous pourrions l'aborder en utilisant un simple liquide si déclaration:

% si product.handle contient "responsive"% % include "product-responsive"% % else% % include "product-default"% % endif% 

Utiliser cette méthode signifierait que nous n’aurions pas besoin de modifier notre modèle pour ajouter un nouveau fichier. elsif ou Cas pour d'autres livres contenant "responsive" dans leur titre.

Ces approches peuvent également être utilisées dans les micro-modèles de votre thème. Par exemple, vous pouvez l'utiliser pour afficher et masquer des éléments par programmation. Exemples: badges de vente, offres spéciales et produits connexes..

Créer des crochets CSS utiles

Les poignées peuvent également s'avérer très utiles lorsque vous travaillez avec CSS et JavaScript. Beaucoup d’entre nous utilisent la classe body pour les hooks CSS et JavaScript et, comme dans WordPress, il est assez facile d’ajouter un certain nombre de classes utiles à notre élément body dans Shopify..

Voici quelques idées:

Ajoutez le nom du modèle actuellement rendu à la classe body:

Notez que nous utilisons le filtre handleize pour assainir notre sortie. Quelques exemples de ceci en action sont:

Sur cette base, nous souhaiterons peut-être également ajouter la poignée de produit actuelle à notre classe de corps. Pour garder les choses bien rangées, nous pouvons utiliser un si instruction d'ajouter conditionnellement le descripteur de produit uniquement lorsque nous visualisons un produit:

Notez comment j'inclus l'espace avant le product.handle balise de sortie.

Certains thèmes ajoutent également le titre de la page en cours à l'élément body sous la forme d'un identifiant, En nous appuyant sur ce qui précède, notre code se présentera comme suit:

Pour faire bonne mesure, nous pourrions même ajouter un chèque pour les collections et ajouter cela aussi:

Il est assez facile d'ajuster cette logique à vos propres fins.

Jusqu'à présent, nous avons examiné la manière dont nous pouvons utiliser Liquid pour aller au-delà de la sortie de données et du contrôle du flux de nos modèles. Voyons maintenant une autre fonctionnalité intéressante de Shopify: les paramètres de thème..

Réglage des thèmes

Les paramètres de thème permettent aux développeurs de thèmes d'offrir à tout utilisateur un moyen simple de personnaliser l'apparence de son magasin, sans avoir à modifier aucun code HTML ou CSS. Cela rend les thèmes très flexibles - un avantage si vous envisagez de vendre un thème via le magasin de thèmes Shopify ou Themeforest..

Afin d’exposer les paramètres de thème dans notre magasin, nous devons créer un fichier appelé paramètres.html et enregistrez-le dans le dossier config. S'il vous plaît noter l'extension, c'est le seul fichier avec un .html extension dans votre thème Shopify.

Il existe une infinité d’utilisations pour les paramètres de thème, mais l’une des plus courantes consiste à modifier la couleur d’arrière-plan de l’ensemble du site. Voici un exemple de code dont nous pouvons discuter:

 
Paramètres de couleurs
 
 
 
 
Contexte (exemple)
 
 
 
 
 
 

L'élément le plus important ici est le contribution. Notez que nous lui avons donné un identifiant et un attribut de nom de bg_color et une classe de Couleur. Cette classe est importante. lorsque nous afficherons les paramètres de thème dans l'administrateur, Shopify affichera un sélecteur de couleur pratique à la place de notre saisie..

Les paramètres de thème, une fois maîtrisés, constituent une fonctionnalité étonnamment puissante des thèmes Shopify.

Vous remarquerez également que j’ai mis une valeur sur notre entrée de #FFF. Si nous choisissons d'utiliser nos paramètres de thème dans notre fichier CSS, c'est la valeur qui deviendra la valeur par défaut. Sans cette valeur par défaut, une valeur vide sera utilisée. Ceci est un gotcha je vois beaucoup!

Les paramètres de thème sont globalement disponibles, ce qui signifie que nous pouvons afficher leur valeur dans tous nos modèles et fichiers de mise en page. Cela inclut nos fichiers CSS et JavaScript. Pour référencer un paramètre, dans ce cas notre couleur de fond, nous utilisons la syntaxe suivante:

settings.bg_color 

Notez que nous utilisons le identifiant de l'entrée pour extraire sa valeur. Pour cette raison, l'identifiant de chaque entrée doit être unique..

Utiliser les paramètres du thème

Pour utiliser les paramètres de thème dans notre fichier CSS, nous devons ajouter .liquide à notre fichier CSS. Si notre fichier s'appelle screen.css nous changeons simplement en screen.css.liquid.

Une fois que nous avons fait cela, nous pouvons faire ce qui suit dans notre fichier CSS:

body background: settings.bg_color;  

Lorsque Shopify sert notre fichier CSS, il remplace nos balises de sortie Liquid par la valeur spécifiée dans les paramètres de thème de l'administrateur Shopify. Espérons que cet exemple souligne la nécessité de remplacer la valeur par défaut!

En plus de saisir du texte et des valeurs numériques dans les paramètres du thème, vous pouvez télécharger des fichiers, enregistrer des valeurs booléennes avec des cases à cocher et proposer des menus déroulants pour sélectionner une valeur dans une liste..

 
Page d'accueil
 
héros
 
 
 
 
Montrer le héros?
 
 
 
 
 
 

L'exemple ci-dessus est tiré du site Web 8 Faces sur lequel j'ai travaillé en 2013. Nous utilisons ce paramètre pour contrôler la logique sur la page d'accueil, voici comment:

% if settings.show_hero == true% [Extrait de code de bannière de héros pertinent] % endif% 

Ajouter des fichiers est un peu plus compliqué, jetons-y un coup d’œil. Le balisage est cependant assez simple:

 
Page d'accueil
 
héros
 
 
 
Image (taille réelle)
 
 
 
 
 

Il y a plusieurs choses à noter ici, premièrement l'attribut name qui dans notre exemple est home-page-hero.jpg. Quel que soit le nom du fichier que vous téléchargez, il sera renommé en home-page-hero.jpg.

La deuxième chose à savoir est l'extension, dans notre cas .jpg. Quel que soit le type de fichier que vous téléchargez, Shopify tentera de le convertir au type spécifié. Si ce n'est pas le cas, une erreur sera signalée. Enfin, contrairement aux images de produits, les fichiers téléchargés seront toujours enregistrés dans le dossier des ressources du thème..

Voici comment nous pouvons rendre notre image de héros de page d'accueil dans notre modèle:

Ici nous utilisons le asset_url filtre pour ajouter le chemin d'accès complet à l'image sur le CDN Shopify. Si vous ne connaissez pas bien ce filtre, vous pouvez en lire plus à ce sujet dans la deuxième partie de cette série..

Je vous recommande fortement de télécharger un ou deux thèmes gratuits dans le magasin de thèmes Shopify et de disséquer le modèle de paramètres de thème, car ils constituent un élément de base idéal pour le développement de votre propre thème..

Boîte à outils Shopify

Bien qu'il soit juste de dire que tout ce dont vous avez besoin pour commencer à développer des thèmes est un éditeur de texte et un compte partenaire Shopify, il existe quelques bonus qui méritent d'être pris en compte..

Si vous avez suivi la série, vous aurez peut-être souscrit un compte partenaire Shopify gratuit. Une chose que je recommande toujours de faire est de configurer la "passerelle fictive" dans vos magasins de développement. Vous le trouverez dans l’onglet Paramètres sous la caisse de l’administration de Shopify. Activer cette option vous permettra de présenter une transaction complète et de générer toutes les notifications par courrier électronique associées générées. Il est bon de rappeler que vous pouvez également utiliser toutes ces techniques Liquid dans vos courriels de notification avec un effet positif..

Shopify Desktop Theme Editor pour Mac est un autre utilitaire très utile. Une fois installé, il synchronisera de manière transparente les modifications apportées à votre fichier avec votre développement ou votre magasin en direct. De plus, si vous utilisez Mac, Windows ou Linux, vous pouvez également installer l'outil de ligne de commande Shopify Theme Gem pour synchroniser vos fichiers locaux sur votre magasin de développement..

Shopify Desktop Theme Editor pour Mac permet une synchronisation de fichiers sans faille entre votre système de fichiers local et votre magasin.

Enfin, si vous êtes un utilisateur TextMate ou un fan de SublimeText, vous voudrez peut-être installer une copie de l’extension Liquid, qui gère la coloration syntaxique de Liquid..

Thème d'inspiration

Le magasin thématique Shopify regorge de thèmes gratuits que vous pouvez télécharger et apprendre. Cependant, lorsque vous commencez votre propre thème, vous préférerez peut-être quelque chose de plus simple, comme mon propre passe-partout disponible sur GitHub..

Ressources

Enfin, voici quelques ressources de choix pour vous aider dans le développement de votre thème Shopify:

• Aide-mémoire de Mark Dunkley - Chaque modèle, variable logique et logique liquide, filtre et étiquette de sortie dont vous aurez besoin.
• Documentation sur les thèmes Shopify - Récemment remodelée et un excellent point de référence pour la création de thèmes
• Forums de commerce électronique Shopify - De nombreux sujets sont abordés, allant de la création d'un magasin à la création d'un thème, en passant par des conseils et astuces pour mener à bien une activité en ligne.

Prochaines étapes

Shopify est une plate-forme formidable et gratifiante à concevoir, avec le bonus supplémentaire que Liquid est en train de devenir largement adopté par d'autres outils tels que Mixture et SiteLeaf. Nous avons beaucoup couvert ces trois tutoriels. Surtout, j'espère que vous l'avez trouvé intéressant et utile et que les idées présentées ici vous permettent de créer de grandes expériences de commerce électronique pour vous et vos clients..