Développement de thème Shopify avancé

1. Introduction: Salut, je m'appelle Gavin. Je suis le fondateur de Disco, une entreprise qui aide les propriétaires de magasins Shopify à tirer le meilleur parti de leurs magasins grâce au développement de thèmes clients et au développement d'applications client. J' ai également publié quelques produits autour du développement Shopify, dont Mastering Shopify Thèmes et Mastering Shopify Apps. Il y a aussi quelques projets open source sur lesquels j'ai travaillé. Toutes ces choses ont en quelque sorte pour but d'aider les développeurs comme vous développer des thèmes Shopify dans une carte vraiment efficace et facile. Être impliqué dans toutes les différentes parties de Shopify, signifie que je dois constamment apprendre et réapprendre beaucoup de choses autour du développement du thème Shopify, et c'est vraiment ce que j'essaie de partager avec vous à travers ce cours, les meilleures pratiques, les astuces, astuces et techniques que j'ai développées au fil des ans. Le titre de ce cours est Advanced Shopify Theme Development, et il fait suite à l'introduction de Kurt Elster à Shopify Theme Development. Ce cours est également disponible ici sur Skillshare. Ce cours est basé sur le fait que vous avez non seulement des compétences existantes en développement web, mais aussi un peu de familiarité avec Shopify. Donc, si ce n'est pas encore le cas, je vous suggère de retourner et de suivre le cours de Kurt avant de revenir à celui-ci. En supposant que vous êtes à l'aise avec les bases du développement Shopify , ce cours se concentrera sur l'amélioration de vos compétences dans deux domaines clés. La première porte sur l'amélioration du processus que nous utilisons pour élaborer des thèmes. Donc, en regardant les outils et les techniques autour de ce genre de choses. La deuxième partie, pour s'assurer que nous ne parlons pas seulement de ces choses dans le vide, est de plonger dans certains scénarios du monde réel, et de regarder le code et les pratiques de développement que nous allons réellement utiliser dans un scénario réel. Ce cours devrait vous donner les compétences et la confiance dont vous avez besoin pour répondre à projets de développement plus importants de Shopify et aux demandes des clients entrants. Cela signifie que vous serez prêt à offrir plus de valeur à vos clients et à votre entreprise. À son tour, cela signifie que vous pouvez facturer davantage pour la valeur que vous créez 2. Aperçu du projet de cours: Comme avec beaucoup de choses, la meilleure façon d'apprendre développement de thème Shopify à mon avis est au moins de le faire réellement, et c' est pourquoi ce cours contient un projet de classe. Je vous encourage vraiment à vous fissurer une fois que vous avez regardé la vidéo la première fois. Le projet commencera avec le téléchargement du thème de base. C' est fonctionnel, mais c'est très simple. Ensuite, nous vous demandons simplement d'appliquer certaines des techniques que vous apprendrez tout au long de ce cours à travers ce thème. Donc, des choses comme l'ajout de filtrage et de tri dynamiques, certaines fonctionnalités Ajax, ajoutent au panier des choses comme ça. Ensuite, vous avez également la chance si vous vouliez vraiment ajouter vos propres petits morceaux de style avec CSS et SASS. Travailler à travers ce projet ne devrait prendre que quelques heures et nous allons vous donner une certaine exposition à ce que je pense scénario pratique des mondes réels pour le développement du thème Shopify. Les seules choses dont vous avez vraiment besoin pour le projet sont un magasin de développement et un éditeur de texte de votre choix. Vous devez vous familiariser avec la configuration d'un magasin de développement. Si vous n'êtes pas familier avec cela, retournez au cours Kurtz sur les Introduction aux thèmes Shopify pour vous donner un rafraîchissement. Si vous êtes coincé à n'importe quel stade avec le projet, alors vous pouvez vérifier le dépôt GitHub qui a des exemples pour chaque étape des projets ou vous pourriez toujours entrer en contact avec moi en tant que classe plus tard et je vais essayer de vous aider. Une fois le projet terminé, ce serait vraiment génial si vous pouviez le partager avec moi-même et avec d'autres étudiants et vous pouvez le faire via la plateforme Skillshare. D' accord. Commençons. 3. Un meilleur flux de travail de développement: Le premier sujet que nous allons aborder est le flux de travail de développement. Ainsi, le processus que nous utilisons pour développer, tester et déployer nos thèmes. La raison pour laquelle je pense que c'est une chose importante à aborder est parce que plus nous consacrons d'efforts à notre flux de travail, plus il est facile pour nous de développer ces thèmes et plus nous pouvons consacrer de temps à construire des choses que les clients en fait se soucier de. L' objectif ici est de livrer les choses plus rapidement et de manière plus professionnelle, nous pouvons éviter de nous répéter par étapes manuelles et cela facilite également la collaboration avec d'autres développeurs lorsque nous travaillons ensemble en équipe. Donc, commençons par le début et regardons ce que nous obtenons avec l'éditeur en ligne par défaut de Shopify. Donc, nous arrivons à cela de l'Admin Shopify et une fois que nous l' ouvrons, nous voyons que nous avons réellement un bon aperçu de notre structure de thème sur la gauche ici et puis quand nous ouvrons réellement des fichiers, nous obtenons de belles fonctionnalités comme la syntaxe liquide et il existe une version limitée du contrôle de révision. En ce sens, nous pouvons faire des changements et enregistrer, puis attendre pour revenir aux anciennes versions. Mais il y a encore des limites assez sévères avec cette approche. Donc, nous développons le cloud. Donc, si nous avons un éditeur local préféré, nous n'avons pas vraiment l'avantage de pouvoir l'utiliser. Nous n'avons pas vraiment d'historique des changements dans tous les fichiers différents. Dans notre thème, il n'est pas très facile de rétablir changements dans les grands groupes et, bien sûr, il est très difficile de collaborer avec d'autres utilisateurs utilisant ce flux de travail parce que nous ne savons pas vraiment qui édite quels fichiers et si nous allons écraser les modifications. Compte tenu de ces problèmes, nous allons commencer à chercher des moyens de les résoudre ou de les contourner et de faciliter le processus de développement. La première chose que nous allons faire pour vous aider avec cela est en regardant la gemme Theme. Maintenant, la gem Theme est un petit utilitaire de ligne de commande qui automatise le processus de téléchargement et téléchargement de fichiers entre votre machine de développement local et un thème Shopify avec lequel vous travaillez. Voyons comment se mettre en place avec la gem Theme. Donc, la première chose que vous voulez faire est de vous assurer que vous avez Ruby installé, car il s'agit d'un RubyGem. Si vous ne savez pas comment faire fonctionner Ruby sur votre plateforme, vous pouvez Google pour obtenir des instructions sur la façon de mettre en place cette configuration. Ensuite, une fois que vous avez fait cela, vous exécutez simplement une commande d'installation de gem avec le thème Shopify. Gem est l'argument qui va installer la gem et nous avons ensuite accès à une option de ligne de commande thème, qui si nous tapons simplement dans notre ligne de commande, nous dirons que nous obtenons un tas d'instructions d'utilisation. Étant donné que la gem de thème Shopify utilise l'API Shopify pour télécharger et télécharger des ressources pour nous, nous allons devoir la configurer avec certaines informations d'identification d'API afin de pouvoir fonctionner avec un thème actuel. Donc, c'est ce que je vais faire ici. Je crée une nouvelle application privée à partir de l'administrateur Shopify. Je vais juste lui donner un nom quelque chose comme Theme Gem et ensuite nous pouvons utiliser les informations d'identification générées ici et passer cela à la Gem Theme. Ainsi, vous verrez qu'une fois que vous avez créé une application, vous aurez cette clé API et un mot de passe API. Donc, pour être mis en place avec un nouveau thème, ce que nous allons faire est de revenir à la ligne de commande, créer un répertoire pour notre thème, puis une fois que nous y avons sudo, nous pouvons utiliser la commande theme configure pour configurer la configuration pour nous. Donc, nous allons juste utiliser les informations que nous avons dans notre pass admin pour configurer. Donc, nous passons la clé API, le mot de passe et ensuite nous allons également passer dans le domaine du magasin avec lequel nous travaillons. Donc, c'est juste le compte .myshopify.com et puis une fois que nous avons appuyé sur Entrée, cela va créer un fichier config.yaml. regardant le contenu de ce fichier, nous pouvons voir qu'il a ajouté la clé et le mot de passe que nous passons dans ce fichier de configuration et nous n'avons pas vraiment besoin de soucier des autres options de configuration pour le moment. Comme vous pouvez le voir, j'ai maintenant exécuté une commande de téléchargement de thème et cela va essentiellement utiliser l'API Shopify pour obtenir une liste de tous les actifs notre thème actuel sur notre boutique Shopify et les télécharger localement. Donc, si nous ouvrons un éditeur de texte tel que Sublime Text et regardons cela localement, nous pouvons voir que nous avons copié tous les fichiers de notre thème vers notre machine locale. Donc, nous pouvons maintenant faire usage de l'une des meilleures fonctionnalités de la gem Theme qui est la commande de montre thème. Donc, si nous exécutons cela dans un répertoire où nous avons un thème, nous pouvons alors utiliser un éditeur local pour apporter des modifications à ces fichiers et les faire appliquer automatiquement chargés au magasin Shopify avec lequel nous travaillons. Donc, pour voir un exemple ici, je vais juste changer le titre de ma page et puis une fois que j'ai enregistré ces changements, verra que cela est automatiquement téléchargé sur la boutique Shopify. Donc, c'est ainsi que nous apportons le développement local et évitons ce problème dont nous parlions auparavant avec l'éditeur en ligne par défaut, où nous ne pouvons pas utiliser notre éditeur préféré ou utiliser des méthodes de développement locales. Le deuxième outil que nous allons examiner pour nous aider avec notre plancher de développement de thème est Git et si vous ne l'avez pas utilisé Git avant c'est un système de contrôle de révision qui est très couramment utilisé dans beaucoup de développement de logiciels y compris le développement web et cela vous donne beaucoup d'avantages en ce qu'il rend beaucoup plus facile de collaborer avec d'autres personnes, cela vous donne un moyen de garder un historique de révision afin que vous puissiez voir qui a fait les changements quand avec vos thèmes et cela joue aussi très largement dans certaines des stratégies de déploiement avancées que nous allons examiner dans les leçons ultérieures. Jetons un coup d'oeil à la façon dont nous pourrions mettre un thème que nous avons localement sous le contrôle de révision de Git. Donc, la première chose à faire est de vérifier que nous avons réellement le client de ligne de commande Git et nous le faisons simplement en tapant git — version. Si vous exécutez un système Mac ou Linux, vous l'aurez par défaut, vous devrez peut-être l'installer manuellement sur Windows. Une fois que vous avez fait cela, vous pouvez exécuter la commande git init dans le répertoire local et cela va configurer votre dépôt Git. La première chose que je fais lorsque je crée un nouveau dépôt Git pour un thème Shopify est de créer ce qu'on appelle un fichier gitignore et d'y ajouter le fichier config.yaml. Donc, cela dit simplement à Git que nous ne voulons pas suivre les modifications apportées au fichier config.yaml et c'est parce qu'il contient des informations d'identification d'API pour notre magasin, donc nous ne voulons pas vraiment les valider dans un référentiel et potentiellement exposer eux au public. Donc, une fois que j'ai configuré ce fichier ignore, je peux ajouter tous les fichiers de mon thème avec la commande git add , puis les valider en utilisant la commande git commit et nous verrons que tous les fichiers dans le répertoire que j'ai a été validé dans le dépôt Git. Donc, ce git va tous être très familier si vous avez utilisé Git avant. Si vous n'avez pas utilisé Git avant, je vous encourage vraiment à sortir et trouver l'un des excellents tutoriels disponibles en ligne sur la façon de l'utiliser. C' est un outil très utile que nous l'utiliserons beaucoup pendant ce cours pour vous donner une idée de la façon dont le flux de travail fonctionne avec Git. Donc, une fois que nous avons mis en place notre référentiel, comme nous venons de le faire, puis j'apporterais des modifications à notre thème. Donc, par exemple, ici je suis juste en train de changer le titre de la page. Nous sauvegardons ces changements et puis revenons de la ligne de commande, nous pouvons obtenir un aperçu de ce qui a changé en utilisant la commande Git status et ensuite nous pouvons exécuter git add pour ajouter ce changement à notre prochain commit. Ensuite, nous pouvons exécuter la commande git commit pour finaliser réellement ce commit et il y a outils GUI autour qui vous aideront avec ce workflow si vous préférez utiliser cela plutôt que la ligne de commande. Mais une fois que vous avez ajouté toutes ces modifications, vous verrez que vous pouvez exécuter git log et obtenir un historique de qui a fait les changements et quand à votre thème. Nous avons maintenant vu deux façons d'améliorer notre flux de travail de développement, nous avons apporté notre développement de thème local via la gem Theme et nous avons également placé nos thèmes sous contrôle de révision à l'aide de Git. Nous allons examiner d'autres techniques de processus de développement plus tard dans le cours lorsque nous examinerons le déploiement de thèmes avancés et l'automatisation des flux de travail. Mais pour l'instant, je veux vraiment rester coincé dans des trucs plus pratiques. Donc, du code réel, ce que nous pourrions voir dans un scénario de développement de thème Shopify réel. Mais au fur et à mesure que nous commençons à nous attaquer, vous pouvez utiliser les choses que nous venons apprendre dans ce cours pour suivre. 4. Personnalisations de produit: Il est temps de plonger dans une édition de thème réel, et nous allons commencer par regarder la personnalisation des produits. Donc, comment nous pouvons laisser les visiteurs personnaliser leurs produits à partir de la page produit. C' est une fonctionnalité assez courante. Vous l'avez probablement vu sur beaucoup de thèmes dans le magasin à thème Shopify, sur Mosaic sur leurs sites autour du web. Mais l'approche que nous allons adopter est de commencer par regarder les bases mêmes et voir comment les fonctionnalités d'un magasin Shopify sont construites à partir de ces composants de base. Ce faisant, nous allons nous concentrer sur les trois éléments les plus importants lorsque vous construisez une page produit. Le premier est de s'assurer que vous communiquez avec le client, afin de lui indiquer quelles options sont disponibles ce qu'il peut faire pour configurer son produit pour effectuer différentes sélections. La deuxième chose est de s'assurer qu'il est facile pour eux de faire leurs sélections, donc selon le type de choix qu'ils doivent faire, vous êtes en mesure de fournir les entrées et les contrôles appropriés pour qu'ils puissent le faire. Ensuite, la dernière chose est de fournir des commentaires, sorte que s'ils font une sélection, afin qu'ils changent la couleur d'un produit ou quelque chose comme ça, ce changement est reflété sur la page, sorte que je puisse voir que cela a été reçu et voir quel effet il a sur leur achat. Commençons par présenter la boutique Candle qui est la boutique de démonstration que nous allons utiliser tout au long de ce cours pour travailler sur. Donc, c'est la page produit qui nous intéresse. Nous avons un ensemble de variantes. Les options de variante que nous pouvons choisir entre pour ce produit particulier de la bougie est la couleur de la bougie, et si la bougie est livrée avec un couvercle ou non. Nous sommes également en mesure d'ajouter une propriété personnalisée, une propriété d'élément de ligne personnalisée à la bougie qui est un message gravé, et enfin nous avons ces petits bits supplémentaires de métadonnées qui sont le prix affiché et l'image affichée. Le prix et l'image dépendent de la variante particulière que nous choisissons. Avant de commencer à examiner comment améliorer cette page produit, regardons ce que nous avons en ce moment. Donc, nous avons une page produit standard avec une liste déroulante de sélection avec toutes les options de variantes possibles. Sous les prix, nous sommes en mesure d'entrer une propriété personnalisée à un message, puis quand nous ajoutons au panier, nous sommes amenés à la page du panier comme d'habitude, et tout cela fonctionne sans JavaScript. Donc, pour jeter un oeil au HTML réel derrière cette page produit en ce moment, nous dirons qu'il est écrit assez simple. Nous avons un titre du produit. Nous avons une section qui contient toutes les images du produit que nous avons vu sur le côté gauche là où en utilisant un peu de logique liquide pour déterminer ce que l'image devrait être basée sur la première ou la variante sélectionnée. Nous avons ensuite une section qui est le formulaire de produit, qui contient le formulaire HTML réel que nous avons vu, le prix du produit. Il comprend également cette sélection avec les différentes variantes et les prix en elle. Nous avons une section qui contient les propriétés personnalisées pour les produits ou où nous avons ajouté ce message gravé et puis au bas du formulaire, nous avons le bouton Ajouter au panier. Donc, dans l'ensemble, une approche assez standard d'une page de produit. Donc, en pensant à des façons d'améliorer cette page de produit, l' une des premières choses qui saute à propos de sa page pour moi est la boîte de sélection, avoir toutes les options dans la liste déroulante ne montre pas vraiment l'utilisateur ce que les différents sont et ce qu'ils peuvent sélectionner. Donc, nous allons voir comment nous pouvons changer ça. Donc, en sautant dans le theme.liquid, nous allons ajouter un peu de JavaScript et nous reviendrons et traverserons exactement ce que cela fait dans une seconde. Mais si je fais cette modification, enregistrez le fichier, et nous allons juste vérifier ce thème, Watch est en cours d'exécution et télécharge automatiquement nos modifications dans le magasin de thèmes. Si nous actualisons, nous verrons que nous avons réellement divisé ces options, sorte qu'il semble plus clair pour l'utilisateur quels sont les choix. En revenant au JavaScript que vous avez écrit, passant juste à travers cela, nous pouvons dire la ligne 20 que nous vérifions pour nous assurer que nous incluons seulement cela sur les pages de produits, ligne 21, nous incluons la sélection d'options JavaScript qui est une bibliothèque fournie par Shopify qui fait réellement la plupart de cette magie pour nous, et puis le reste de ce JavaScript est en train de configurer cela fondamentalement. Donc, il appelle ce nouveau shopify.OptionSelectors et il transmet l'ID de cette boîte de sélection d'origine. Donc, cela veut dire, ciblez cette boîte de sélection et c'est ce que je veux diviser en ces zones de sélection séparées, puis nous passons quelques options à cet initialiseur. Ça fait tout ce qu'on vient de voir. Donc, c'est bien, mais si nous revenons à notre page, vous verrez que nous ne recevons pas vraiment beaucoup de commentaires lorsque nous modifions ces options. Donc, dans la barre d'URL en haut, nous pouvons voir que l'URL change mais nous ne voyons pas réellement ce changement reflété sur la page. Donc, l'image ne change pas, le prix ne change pas lorsque nous changeons ces options. Alors, voyons comment nous pouvons résoudre ça. Donc, la clé à cela va être la fonction de rappel onVariantSelected que nous avons clignoté comme étant juste une fonction vide plus tôt. Donc, c'est une fonction qui est appelée à chaque fois les options sur votre page changent et qu'une nouvelle variante est sélectionnée, et il a passé la variante comme objet adjacent et aussi la sélection qui a réellement déclenché cette modification, donc cette case de sélection. Donc, ce que nous allons faire ici est juste mettre à jour cette fonction pour changer le dôme de notre page, pour la mettre à jour en fonction de la variante qui a été sélectionnée. Donc, vous pouvez voir ici le code que j'ai ajouté nous mettons à jour le prix qui est affiché et nous utilisons le prix de la variante et la fonction de format argent de Shopify pour le faire, alors nous trouvons juste l'élément de prix et le mettre à jour au besoin. Nous activons ou désactivons également le bouton Ajouter au panier. Donc, parfois, nous pouvons sélectionner une variante qui n'est pas réellement disponible et nous devons désactiver le bouton. Ensuite, nous mettons à jour l'image en vedette sur la page, donc nous vérifions si la variante a une image en vedette liée à elle, puis en utilisant la méthode Shopify GetSizedImageURL pour obtenir l'URL appropriée pour cette image en vedette, puis juste trouver l'élément de dôme d'image en vedette sur la page et changer sa source. Donc, enregistrer cela et vérifier que c'est télécharger sur Shopify. Si je rafraîchis la page maintenant, nous devrions voir que la page est mise à jour au fur et à mesure que nous changeons ces options. Donc, nous disons que l'image en vedette change, le prix change pour refléter la variante que nous venons de sélectionner. C' est donc une fonctionnalité intéressante qui donne à nos clients plus de commentaires sur les choix qu'ils font et leur permet de comprendre les différences entre les options de produits qu'ils choisissent. La prochaine chose que nous allons aborder est le comportement des images miniatures. Donc, pour le moment, si je clique sur une image miniature, j'obtiens une version plus grande de cette ouverture dans un nouvel onglet, comme celui-ci, ce qui n'est pas nécessairement un mauvais résultat mais en tant que client, je m'attends à ce que si je clique sur une vignette rouge, je souhaite que les options ici changent pour correspondre à la vignette sur laquelle j'ai cliqué. Donc, en ce qui concerne la façon dont nous allons implémenter cela, nous allons le faire en deux étapes, et la première étape sera d'ajouter un balisage aux liens miniatures eux-mêmes. Donc, si nous trouvons les liens miniatures ici, nous allons ajouter un attribut de données spécial à l'image miniature elle-même. Donc, nous allons appeler cette variante de changement de données. Nous allons ensuite spécifier l'ID de la variante à laquelle cette vignette est liée, et donc chaque image de Shopify a une liste de variantes auxquelles elle peut être liée. Nous allons juste prendre le premier de ceux-ci et retourner l'ID de variante pour cela. Donc, pour voir à quoi cela ressemble réellement dans notre page, revenons au navigateur, actualisons, puis inspectons ces liens miniatures individuels à l'aide de l'outil Inspecteur Chrome, et nous pouvons dire que chacun de ces liens a un variante de changement de données, attribut de données et il est lié à un ID de variante particulier. L' ajout de ces attributs de données n'a pas réellement changé le comportement de nos miniatures, c'est donc ce que nous allons faire maintenant et configurer un gestionnaire d'événements pour gérer les événements de clic sur ces vignettes. Donc, nous allons le faire à l'intérieur de Theme.Liquid. Plonger dans cela, la première chose que nous allons faire est en fait quand nous initialisons ces optionsSelectors, nous allons maintenir une référence à cette option select et nous verrons pourquoi dans une seconde. Mais une fois que nous avons fait cela, nous allons maintenant ajouter un gestionnaire d'événements pour les événements de clic sur tous les éléments avec cet attribut de variante de changement de données que nous avons configuré précédemment. Dans la méthode pour ce gestionnaire, nous allons empêcher le comportement par défaut, donc ouvrir dans un nouvel onglet, et alors ce que nous allons faire à la place est d'utiliser cette référence à l'option select, c'est que nous allons appeler la méthode select variant, et transmettez-lui l'ID de la variante à laquelle cette miniature particulière est liée. Alors, sauvegardons et regardons comment cela fonctionne. Rafraîchir la page, et maintenant, si nous cliquons sur une vignette, nous devrions voir que la sélection de l'option est en train de changer pour refléter les valeurs de la variante à laquelle cette vignette est liée. Donc, c'est exactement le genre de comportement que nous voulons. Il est important de noter que nous n'avions pas vraiment besoin de spécifier manuellement, dans ce gestionnaire de clics sur la vignette, nous n'avions pas à le dire, et maintenant vous devez mettre à jour l'image en vedette, ou maintenant vous devez mettre à jour le prix, en fait, il circule simplement en conséquence de la façon dont nous avons configuré notre gestionnaire de sélection de variantes. Cela montre pour moi la puissance de l'approche de construire les choses autour de cette option de base simple sélection est en premier lieu, la mise en place d'une bonne variantes. Sélectionnez appel sauvegardé, ils voient une page au besoin, car alors, nous pouvons ajouter des composants supplémentaires plus tard comme ces sélections de vignettes, et tout ce qu'ils ont besoin de faire essentiellement, est d'envoyer un message à l'option select, disant, « J'aimerais sélectionner cette variante maintenant. » La logique que nous avons déjà implémentée gérera toutes les autres mises à jour de la page. En appuyant sur, réfléchissons à ce que nous pouvons faire d'autre pour améliorer cette page pour les utilisateurs. L' une des choses que j'identifierais est la liste déroulante de sélection pour l'option de couleur. Donc, sélectionner la liste déroulante est bonne lorsque vous avez beaucoup d'options, et qu'un utilisateur sait ce qu'il veut choisir, par exemple, un pays. Mais pour les couleurs, vous feriez probablement mieux afficher ces couleurs aux utilisateurs sous la forme d'une nuance ou quelque chose. Donc, ce que nous allons faire maintenant, voyons comment nous pourrions nous attaquer à cela. Donc, plonger dans le modèle de produit, nous allons ajouter un peu de liquide pour le faire, et quand je dis un peu, je veux dire beaucoup. Malheureusement, c'est un peu typique d'un liquide. Donc, nous ne allons pas trop plonger dans les détails de cela, mais pour vous donner l'idée générale, ce que nous faisons est d'itérer toutes les options de ce produit. Donc, si sa couleur ou sa taille, trouver ceux qui sont liés à la couleur, puis basé sur cette itération à travers toutes les variantes que ce produit a défini toutes les différentes couleurs qui sont disponibles. Ensuite, pour chaque couleur disponible, nous sortons un lien qui a une nuance à l'intérieur. Donc, c'est ce que ce lien est ici, et nous pouvons dire qu'il sort un attribut de style qui inclut cette couleur, et puis un peu comme nous avions l'attribut de variante de changement de données sur nos images miniatures, nous avons maintenant une option de changement de données, et la valeur de changement de données, attribut de données. Donc, notre approche ici va en fait être assez similaire aux vignettes, et que nous allons mettre en place un écouteur d'événement pour écouter les clics sur ce type de lien spécifique, mais plutôt que de changer la variante entière, ce que nous allons faire, c'est utiliser l'option de changement de données et la valeur de changement de données, les attributs de données sur nos liens de nuance pour modifier uniquement la couleur spécifique que nous sélectionnons plutôt que la variante entière. Donc, juste avant de prévisualiser à quoi ressemblent les changements liquides que nous venons d'implémenter, nous allons juste ajouter un peu de style à notre feuille de style pour assurer que nos nuanciers s'affichent correctement, et ensuite nous allons sauver cela, , puis vérifiez ce qui se passe lorsque nous actualisons notre page, et nous verrons que les échantillons sont rendus comme nous l'avions espéré. Maintenant, parce que nous les avons mis en place comme des liens pointant vers une variance particulière comme une sorte de recul, cela va en fait semi-fonctionner. Si nous cliquons sur ces liens maintenant, vous verrez que la variante est en cours de mise à jour dans l'URL. Mais pour que cela fonctionne pleinement comme nous le voulons, nous allons devoir configurer cet écouteur d'événement JavaScript d'une manière similaire à la variance. Donc, en revenant dans le theme.liquid où nous avons tous nos JavaScript pour le moment, nous allons ajouter un deuxième écouteur d'événement qui est très similaire à ajouter l'écouteur de variante de changement de données. Mais cette fois, nous écoutons un clic sur notre option de changement de données. En fait, je suis désolé. Dans la gestion réelle à cela, encore une fois nous empêchons l'action par défaut, puis nous extrayons le type et la valeur de l'option. Donc, si c'est une option de couleur, puis si elle est rouge, vert ou bleu, puis nous regardons à l'intérieur des listes déroulantes de sélection existantes que nous avons générées pour voir si cette valeur existe, et si oui, nous allons changer cette case de sélection à cette valeur donnée. Pour voir comment cela fonctionne réellement, nous retournons à la page et actualisons. Maintenant, lorsque nous sélectionnons une option de couleur différente, nous devrions voir que seule l'option de couleur est mise à jour et qui est mis à jour dynamiquement via JavaScript. Donc, maintenant que nous avons cela fonctionne, parce que cela peut être cela n'a pas de sens d'avoir l'option lead comme un style de nuance aussi. Parce que, il n'y a que deux options et être utile pour permettre aux utilisateurs de choisir entre ces deux options. Donc, nous allons le faire en généralisant fondamentalement l'extrait de liquide que nous avons ajouté à notre page produit pour les nuanciers de couleur, et en le faisant fonctionner avec des options autres que les couleurs. Donc, nous allons le faire en créant un dossier d'extraits, et en créant un nouvel extrait. Donc, c'est fondamentalement, exactement le même que le liquide que nous avons ajouté au modèle de produit avec ces quelques légères modifications, les modifications étant qu'il rendra pour tous les types d'options, pas seulement les options de couleur mais il y a un check-in là pour dire si l'option est une option de couleur ou non. S' il s'agit d'une option de couleur, il va alors rendre ce lien de tuile avec le nuancier, sinon, il va simplement rendre un lien de texte normal. C' est probablement un bon moment pour répéter, pour ne pas être trop stressé si vous ne suivez pas avec chaque petit détail du code. Pour le moment, nous nous concentrons sur l'approche globale et les idées, et vous êtes toujours en mesure de lire le code réel beaucoup plus en détail sur le dépôt GitHub. Finissons ici, et maintenant que nous avons configuré notre extrait, nous pouvons remplacer le code dans notre modèle de liquide de produit par juste une inclusion de cet extrait. Donc, cela fonctionnera à la fois pour la couleur et l'option non-couleur. Donc, maintenant nous pouvons enregistrer qui va automatiquement télécharger dans notre magasin et puis quand nous actualisons, nous pouvons voir que l'option couvercle est maintenant la même que l'échantillon aussi. Ainsi, les utilisateurs peuvent maintenant avoir un bon aperçu de toutes les différentes options disponibles pour ce produit, et travailler en tandem entre la couleur et la sélection du couvercle pour être exactement ce qu'ils veulent. Donc, nous sommes très proches d'être finis, mais ce ne sont probablement que deux petites choses que nous aimerions nettoyer avant la fin. Le premier est que, nous voulons seulement montrer les nuanciers ou les listes déroulantes sélectionnées, pas les deux en même temps, et nous devons prendre en compte le fait que les nuanciers ne fonctionneront pas lorsque nous ont JavaScript activé, donc, nous devons réfléchir à ce qui va se passer lorsque JavaScript n'est pas activé sur notre site. Donc, ce que nous allons faire pour gérer cela, est un modèle assez commun, nous allons ajouter une classe CSS au corps de notre page, et supprimer cette classe quand nous avons JavaScript activé, et basé sur si cette classe est présent ou non, nous allons pouvoir afficher ou masquer les différentes méthodes de sélection. Donc, nous avons ajouté la classe à notre corps, et maintenant nous avons juste besoin d'ajouter un peu de JavaScript dans supprimer cette classe. Ensuite, une fois que nous avons fait cela, nous pouvons sauter dans notre feuille de style et simplement ajouter un peu de style pour cacher des éléments particuliers lorsque nous n'avons pas JavaScript activé. Donc, rafraîchissant la page maintenant, nous pouvons voir qu'avec JavaScript activé, ces cases de sélection sont cachées, et nous sommes capables d'utiliser les échantillons comme d'habitude, si JavaScript n'est pas activé, alors nous avons cette belle chute à la boîte de sélection simple qui est un joli mais cela fonctionne. D' accord. Donc, il y avait beaucoup de choses en train de se passer dans cet exemple. Mais ne vous inquiétez pas si vous n'avez pas tout compris la première ou la deuxième fois. La chose vraiment importante pour sortir de la leçon, c'est de voir comment la page produit est construite dans Shopify, et aussi de comprendre l'avantage d'adopter cette approche d'amélioration progressive. Donc, construire chaque composant l'un au-dessus de l'autre, d' une manière indépendante, de sorte qu'il soit plus facile à maintenir et à raisonner sur ce qui se passe, sur la page. Cette approche d'amélioration progressive de prendre ces petits blocs de construction, et de les empiler les uns sur les autres afin qu'ils soient indépendants, et que nous obtenions une page qui fonctionne sans JavaScript, puis ajoutons lentement fonctionnalité. C' est une approche que nous allons adopter dans la prochaine leçon lorsque nous commencerons à regarder les pages de collection. 5. Filtrage, tri et affichage de collections: Dans cette leçon, nous allons continuer notre travail avec le magasin de bougies de démonstration. Mais cette fois-ci, nous allons nous concentrer sur les pages de collection plutôt que sur les pages de produits. Mais nous allons toujours faire le même genre de choses, nous allons toujours essayer d'aider nos clients à faire leurs choix plus efficacement et plus efficacement. Offrir une meilleure expérience utilisateur. Une fois de plus, nous allons le faire d'une manière qui renforce notre connaissance et notre compréhension de la façon dont les pages Shopify sont regroupées à partir de zéro. Voici un exemple de page de collecte de notre magasin de bougies de démonstration et ce que nous allons faire dans cette leçon, est d'ajouter des façons pour les clients explorer vers le bas et de trouver les produits qui les intéressent vraiment. Donc, des choses que vous avez vues dans beaucoup de magasins Eagle Nest auparavant, choses comme, être capable de changer notre façon de voir les produits, être capable de vendre des produits, être capable de les filtrer. Pendant que nous faisons tout cela, je pense qu'il est important de garder à l'esprit que l'objectif de ces pages de collection est toujours de faciliter les choses pour l'utilisateur, d' explorer vers le bas et de trouver ce qu'ils recherchent. Par conséquent, nous allons commencer par permettre aux clients de modifier leur façon de voir ces produits. Que ce soit sous forme de grille ou dans une liste où ils peuvent voir plus de détails. Jetons un coup d'oeil au HTML que nous commençons par. Si nous ouvrons le modèle de collections, nous verrons que c'est assez simple, nous avons un titre, nous avons une section appelée produits de collection qui est l'endroit où les produits réels sont affichés, puis nous avons une section vide appelée contrôles de collection, qui sera l'endroit où nous mettrons les éléments qui permettront à notre utilisateur de contrôler ce qu'ils disent. Donc, nous allons commencer à donner à l'utilisateur la possibilité de contrôler la vue en enveloppant la page entière dans un formulaire et nous verrons pourquoi nous le faisons dans une seconde, puis nous allons ajouter du HTML aux contrôles de collection, et c'est va se composer d'une liste déroulante de sélection, qui nous donne la possibilité de choisir quelle vue, puis nous avons un bouton de soumission, qui appelle une mise à jour. Donc, pour voir quel effet cela a réellement sur notre page, nous allons dire que nous avons maintenant ce contrôle de sélection très simple, et nous pouvons changer entre un ListView et un GridView. Donc, que nous ne modifions rien sur notre page, mais vous verrez qu'il change l'URL et ajoute ce paramètre de requête de vue. Pour faire quoi que ce soit avec ce paramètre de requête, nous allons devoir utiliser une fonctionnalité dans Shopify appelée modèles de vue alternatifs. Donc, pour ce faire dans notre répertoire de templates, nous allons créer un nouveau modèle et nous l'appellerons collection.list.liquid, puis nous allons juste ajouter du contenu HTML aléatoire ici pour voir comment cela fonctionne. Sauvegardez cela, et puis si nous revenons à notre navigateur, nous pouvons dire que si notre paramètre de vue est laissé comme grille, alors nous obtenons ce que nous avions à l'origine, mais si nous le changeons en liste, le modèle ultime est rendu avec le contenu que nous venons de créer. Faisons quelque chose d'un peu plus utile que ça. Donc, pour commencer, nous allons avoir des fonctionnalités communes entre nos vues de grille et de liste. Donc, nous allons extraire la page de collection actuelle dans un extrait. Nous appellerons cette vue de collection, et nous allons simplement copier ce que nous avons dans notre modèle de collection existant. Maintenant, dans notre collection.liquid, nous allons inclure cet extrait et nous allons dire que notre vue par défaut devrait être une vue de grille. Donc, nous allons l'inclure avec grid comme paramètre pour cet extrait. Ensuite, sur notre vue de liste alternative, nous allons inclure exactement la même chose, mais juste changer le paramètre en liste. Donc, maintenant que notre extrait est inclus dans les deux modèles, nous pouvons l'ajuster pour gérer à la fois les vues de grille et de liste et nous allons le faire en ajoutant une classe CSS et en mettant maintenant le nom de l'extrait de vue de collection, qui sera rempli avec une liste ou une grille, selon l'endroit où nous l'incluons, et nous avons mis en place des styles CSS pour le rendre différemment en fonction de la valeur de cela. Donc maintenant actualiser notre page, vous verrez que si nous avons le handle de vue liste, nous allons voir les produits sous forme de liste, et si nous le laissons comme grille, alors nous les verrons rendus sous forme de grille. Donc, c'est une implémentation de vue simple. Maintenant, passons au tri et c'est là que nous verrons l'avantage d'avoir cette approche basée sur le formulaire pour mettre à jour nos paramètres de requête parce que tout ce que nous avons vraiment à faire pour ajouter le tri dans notre formulaire est d'ajouter cet élément select avec ces valeurs d'option ici. Donc, nous nommons simplement la valeur select, sélectionnons l'élément tri par et les options que nous y mettons sont les paramètres de tri prédéfinis sur lesquels Shopify nous permet de trier nos produits. Donc, il suffit d'enregistrer cela et de sauter à nouveau dans le navigateur, nous pouvons dire que nous avons maintenant un tri par sélection déroulante, ainsi que la vue et nous pouvons mélanger et faire correspondre nos valeurs ici pour changer la façon dont nous regardons nos produits. Donc, cette approche basée sur un formulaire est agréable car cela signifie que nous n'avons pas besoin JavaScript pour mettre à jour la façon dont nous regardons les produits, et cela signifie également que toutes les informations dont nous avons besoin pour recréer la vue que nous regardons sont là dans l'URL. Notre prochaine étape consiste à laisser nos clients affiner les produits qui les intéressent par l'utilisation de filtres. Maintenant, il est important de noter que sur Shopify, nous avons vraiment deux niveaux de filtrage. Nous avons le filtrage au niveau de la collection et le filtrage au niveau des balises. Donc, nous allons d'abord prendre le filtrage au niveau de la collection et c'est essentiellement, juste réduire les produits qui nous intéressent en fonction de la collection dans laquelle ils se trouvent. Nous allons adopter l'approche la plus simple pour implémenter cela, qui consiste simplement à fournir une liste de liens vers chaque collection que nous aimerions filtrer. Donc, nous venons d'ajouter cet élément de liste à nos contrôles de collection et en haut, nous avons un élément de liste qui contient un lien vers l'ancienne collection, ce qui est un cas spécial, puis pour toutes les autres collections dans notre magasin, nous allons rendre un nouvel élément de liste et à l'intérieur de cet élément de liste, nous allons rendre soit un lien vers la collection, soit si c'est la collection actuelle, nous allons simplement rendre une plage. En voyant cela en pratique, nous allons actualiser notre page et nous verrons que, comme prévu, nous avons une liste de liens vers toutes nos différentes collections. Donc, en cliquant sur ceux-ci va nous conduire à l'URL de cette collection, comme vous pouvez le voir ici, et en plus de cela, nous sommes alors en mesure de changer notre vue et les paramètres de tri pour ajuster la vue de manière appropriée. Pour permettre aux utilisateurs d'explorer encore plus spécifiquement nos collections, nous pouvons les laisser filtrer en fonction des étiquettes des produits. Encore une fois la mise en œuvre sage, nous allons garder cela assez simple. Donc, comme nous l'avons fait avec notre filtrage de collection, nous allons avoir une liste de liens que nous pouvons utiliser pour filtrer sur les balises. Donc, vous pouvez voir ici, nous avons notre liste non ordonnée, et ensuite nous allons parcourir chaque balise de la collection, et pour chacune de ces balises, nous allons rendre un lien soit en utilisant le lien Shopify vers supprimer une balise ou un lien pour ajouter des filtres de balises. Ce sont des aides liquides utiles que Shopify fournit est exactement à cet effet. En voyant à quoi cela ressemble sur notre boutique, nous verrons qu'après avoir rafraîchi, nous avons maintenant nos balises répertoriées comme des liens et nous pouvons les activer et les désactiver si nécessaire pour filtrer davantage la collection. Vous remarquerez également que la liste des balises disponibles change fonction des balises présentes dans la catégorie. Ainsi, cela aide les clients à se rétrécir à seulement des balises pertinentes. Comme précédemment, nous pouvons appliquer des ajustements de vue et de tri et tout est obtenu pour nous dans l'URL. Donc, nous avons seulement quelques fonctionnalités à ajouter avant d'avoir une page de collection assez fonctionnelle et l'une de ces fonctionnalités qui nous manque est toujours la pagination. Heureusement, notre approche simple basée sur un formulaire va rendre l'ajout relativement facile. En regardant le code HTML de notre page de collection pour le moment. Pour paginer quoi que ce soit, nous devons l'envelopper dans cette balise paginate que nous passons ensuite la liste des éléments que nous voulons paginer qui dans ce cas sont les produits de la collection, puis un certain nombre d'articles que nous aimerions par page. Donc, nous allons commencer par trois. Habituellement, vous auriez quelque chose d'un peu plus haut sur une vraie page, mais cela nous permettra de voir la pagination en action. Je vais également inclure cet extrait de pagination ici et cela rendra les contrôles que nous utilisons pour paginer. Je ne vais pas entrer trop en détail sur le contenu réel de ce code car vous pouvez trouver à la fois sur les exemples GitHub pour cette leçon et dans la documentation Shopify. regardant le résultat de notre travail, vous pouvez voir que nous avons été immédiatement réduits à trois résultats sur la page et nous avons cette pagination qui en bas ici, et nous pouvons passer à travers les pages dans nos résultats et l'URL est conservée à jour conformément à cela. Je tiens à souligner ici que toutes les informations d' état sur notre page, donc quelle collection, quels filtres nous appliquons, quel état de vue nous sommes, comment nous trions les produits est tout dans l'URL. Ce qui signifie, non seulement que nous pouvons copier et coller cette URL pour revenir exactement à la même position, Nous pouvons rafraîchir la page et revenir à exactement la même position. Mais aussi, si nous avons désactivé JavaScript, notre page fonctionne exactement de la même manière. Je pense que cette propriété est vraiment importante dans les thèmes Shopify parce que même si beaucoup de gens ne naviguent pas sur le Web sans JavaScript ces jours-ci, il y a des situations où le JavaScript ne se charge pas à cause d'une erreur. Ou il ne fonctionne pas à cause d'une erreur, mais aussi pour les utilisateurs sur des connexions lentes, disons des connexions mobiles, souvent ils peuvent interagir avec votre page avant que JavaScript n'ait une chance de lancer. Donc, avoir cette expérience de base, s' assurer que nos pages sont progressivement améliorées, améliore vraiment l'expérience utilisateur et évite de perdre des ventes. Maintenant, cela ne veut pas dire qu'il n'y a pas moyen d'utiliser JavaScript pour améliorer l'expérience client pour ceux qui l'utilisent. Donc, par exemple, pour le moment, nous devons appuyer sur le bouton de mise à jour après avoir sélectionné notre vue et nos options de tri, améliorons cette expérience en faisant soumettre automatiquement le formulaire lorsqu'une case de sélection est modifiée. Pour ce faire, nous allons ajouter du JavaScript au bas de notre theme.liquid. Donc normalement, vous mettrez ceci dans un fichier JavaScript séparé. Mais pour des raisons d'argumentation, on va mettre ça ici. Et donc ce bit de JavaScript a une vérification pour s'assurer qu'il est seulement exécuté sur les pages de collection. Ensuite, nous configurons un écouteur d'événement sur un événement de modification sur n'importe quel élément avec une collection de mise à jour de données, attribut de données. Et puis dans le gestionnaire de cet événement, nous soumettons simplement le formulaire dans lequel l'élément vit. Donc, nous allons nous assurer que nos éléments sélectionnés ont effectivement cette collecte de données de mise à jour, attribut de données, et une fois que nous avons sauvegardé cela et actualisé notre page, nous devrions maintenant voir que si nous changeons les cases de sélection, nous sommes soumettre automatiquement le formulaire et notre vue est en train de changer. C' est génial, mais cela signifie aussi que nous avons maintenant ce bouton de mise à jour inutile, ou du moins c'est inutile lorsque nous avons JavaScript activé. Donc, ce que nous allons faire est d'utiliser un modèle commun pour cacher ce bouton lorsque nous avons JavaScript activé, et de le rendre visible uniquement lorsque nous n'avons pas JavaScript disponible, et que nous devions réellement soumettre le formulaire. Donc, vous pouvez voir ici dans la feuille de style de thème que nous avons cette classe js-hide qui va cacher les choses si nous avons JavaScript activé. Mais alors, montre-le si on ne le fait pas. Donc, pour nous assurer que les bonnes classes sont appliquées, nous avions la classe no js au corps par défaut, et ensuite nous supprimons simplement cela en utilisant JavaScript. Donc, au bas de la page, nous allons juste ajouter un peu de code pour désactiver cette classe si nous avons effectivement JavaScript activé. Donc, en regardant cela en action, nous allons enregistrer, actualiser ce navigateur, et nous avons JavaScript activé pour le moment et nous verrons que ce bouton est effectivement caché mais je peux toujours changer ma vue et mes options de tri. Ça marche bien. Mais alors, si je désactive JavaScript, nous avons maintenant ce bouton, et sommes capables de l'utiliser comme d'habitude. Donc, pendant que nous sommes en train d'ajouter des fonctionnalités JavaScript à nos pages de collection, jetons un coup d'oeil à l'ajout d'ajax afin que les clients puissent passer à travers nos pages de collection sans avoir à effectuer une actualisation complète de la page. Personnellement, je trouve que les avantages perçus des pages alimentées ajax un peu surestimés. Surtout lorsque vous tenez compte de la complexité supplémentaire dans leur mise en œuvre. Mais il peut y avoir quelques avantages et heureusement, dans notre cas, la façon dont nous avons construit nos formulaires à ce jour signifie que l'ajout de fonctionnalités ajax est en fait raisonnablement simple. Donc, notre approche pour cela va commencer par ajouter un ID au formulaire que nous utilisons, et c'est pour que nous puissions y faire référence en JavaScript. Notre stratégie va essentiellement intercepter les événements de soumission sur ce formulaire et faire de cet événement de soumission de formulaire régulier une requête ajax. Donc, c'est ce que nous allons faire avec ce JavaScript ici et en marchant à travers, nous pouvons voir, comme je l'ai mentionné, nous capturons l'événement submit sur ce formulaire de collecte. Nous empêchons l'action par défaut sur ce formulaire qui est de soumettre comme un formulaire régulier, puis nous utilisons la méthode de chargement de jQuery qui est une commodité envoyer une requête ajax récupérer du contenu HTML et le remplacer dans notre page actuelle. Donc, dans ce cas, il va remplacer le contenu de notre page par notre vue de collection mise à jour, et nous avons également un peu de code ici qui est déclenché sur le rendu réussi de ce contenu en utilisant pour garder la barre d'URL de notre navigateur à jour. Donc, cette approche simple est tout ce dont nous avons besoin pour réellement utiliser ajax avec nos pages de collection. Donc, si je rafraîchis la page ici, et maintenant à chaque fois que j'effectue une action qui soumet à nouveau ces formulaires, comme changer ma vue. Ma page est en fait rechargement via ajax. Donc, nous pouvons vérifier que ce qui se passe réellement en ouvrant les outils de développement Chrome, vérifier le panneau réseau, puis nous verrons si cela que je change cette case de sélection. Il effectue en fait une seule requête ajax et non un rechargement de page complète. Maintenant, l'astucieux d'entre vous a peut-être remarqué que bien que cela fonctionnera pour toute action qui déclenche un formulaire actualisé comme la mutation des cases de sélection, comment la collection relie alors qu'ils fonctionneront encore Bureau effectuant une actualisation complète de la page chaque fois que nous cliquons dessus. Donc, il y a en fait une solution à cela aussi, et c'est assez similaire à la façon dont nous avons géré la soumission du formulaire. Donc, vous verrez, notre filtre lié ici a déjà un attribut de collecte de liens de données, et donc notre solution ici va être d'ajouter simplement un écouteur à l'événement click pour tout ce qui a un attribut de collecte de liens de données. Encore une fois, évitez l'action difficile qui est de suivre le lien, puis utilisez à nouveau la méthode de chargement pour charger dans la destination de ce lien comme contenu de notre page et à nouveau en utilisant l'état push pour garder notre URL à jour. Donc, pour jeter un oeil à la façon dont cela fonctionne, encore une fois, nous pouvons ouvrir le panneau de développement Chrome pour vérifier que nous faisons réellement des requêtes ajax, et maintenant nous pouvons dire que lorsque nous cliquons sur ces liens, nous sommes en fait effectuer une seule requête ajax plutôt qu'un rechargement de page complète. Bien sûr, grâce à la façon dont nous avons construit cela avec une amélioration progressive, nous pouvons désactiver JavaScript et avoir toujours une page de collection entièrement fonctionnelle et très, très utilisable pour nos clients. Encore une fois, il y avait beaucoup de choses dans cette leçon. Mais je veux vraiment stresser. Ne vous inquiétez pas si vous n'avez pas eu certains des aspects les plus techniques là-bas. Vous pouvez toujours vous diriger vers le dépôt GitHub. Vous pouvez consulter les exemples de code là-bas. Ils sont bien commentés, et cela devrait le rendre un peu plus facile à comprendre. est important de comprendre comment les pages Shopify sont regroupées à partir d'un niveau de base, et comment nous pouvons utiliser ces composants individuels ensemble pour créer une page vraiment fonctionnelle et utilisable. 6. Ajouter Ajax à votre thème: Si cela est fait correctement, ajouter la fonctionnalité Ajax à votre thème peut être un excellent moyen de le rendre un peu plus réactif et plus facile à utiliser pour les clients. Et c'est probablement quelque chose que vous aurez vu dans beaucoup de thèmes ces jours-ci. Dans cette leçon, nous allons examiner la meilleure façon de commencer à ajouter Ajax alimenté ajouter au panier fonctionnalité à nos pages de collection. Donc, nous sommes de retour sur la page du produit et cette fois-ci, nous cherchons à améliorer notre expérience client en ajoutant la fonctionnalité Ajax panier à notre bouton Ajouter au panier. fonctionnalité Ajax peut rendre nos pages de produits un peu plus réactives et elles peuvent également éviter que nos clients n'aient à effectuer des tâches répétitives comme la reconfiguration d'un produit s'ils veulent commander plusieurs versions de celui-ci. Comme nous l'avons fait dans notre leçon précédente avec les pages de collection, nous voulons faire cette amélioration progressive. Jetons donc un coup d'oeil à ce qui se passe avec nos pages produits en ce moment. Ainsi, nous sommes en mesure de sélectionner nos options de produit, d' ajouter un message personnalisé, puis lorsque nous cliquons sur « Ajouter au panier », nous faisons une demande de publication standard pour ajouter ce produit à notre panier et nous sommes redirigés vers la page du panier. Donc, ce que nous allons examiner dans cette leçon est comment changer cette interaction de sorte que lorsque nous cliquons sur le bouton « Ajouter au panier », nous faisons réellement une demande Ajax pour ajouter le produit au panier avec le choix et options sans rediriger l'utilisateur de la page produit. Donc, commençons par regarder la documentation de Shopify pour l'Ajax ou l'API qu'ils mettent à disposition pour voir une idée de ce qui est possible avec elle. Donc, vous verrez dans la documentation qu'ils ont des informations utiles à ce sujet, mais nous sommes surtout intéressés ici sont ces demandes possibles. Donc, vous pouvez voir ici que nous sommes en mesure de récupérer des informations sur les produits, nous sommes en mesure d'ajouter de nouveaux articles au panier, saisir des informations de défection sur le panier actuel, et nous sommes en mesure de faire des demandes de publication pour mettre à jour des articles existants dans le chariot. Donc, notre stratégie pour améliorer progressivement cette interaction va être d'intercepter la soumission du formulaire lorsque nous cliquons sur la page « Ajouter au panier » en utilisant la requête Drae, puis au lieu d'une demande de publication régulière, nous allons prendre la même dans ce formulaire et faire une requête Ajax pour ajouter les articles au panier. Nous allons creuser notre code de thème. Donc, si nous ouvrons notre modèle de produit, nous verrons que nous avons notre formulaire que nous allons soumettre. Il a une idée de la forme du produit et nous l'utiliserons dans notre JavaScript. Dans le JavaScript réel, nous allons utiliser pour transformer cela en une requête Ajax, nous allons ajouter au bas du thème LIQUID, qui est l'endroit où nous avons mis la plupart du JavaScript à ce jour. Dans un vrai thème, comme je pense l'avoir mentionné précédemment, nous voudrions le mettre dans un fichier JavaScript séparé ici dans le répertoire assets. Mais pour l'instant, nous allons juste garder tout ici pour qu'il soit plus facile de garder une emprise mentale de. Donc, quand il s'agit des JavaScripts réels, nous allons comme nous l'avons mentionné, nous allons ajouter un écouteur d'événement à l'événement submit pour ce formulaire et nous allons empêcher l'action par défaut, qui est de soumettre que forme normale. L' émulation du post de formulaire se fait avec la méthode $.post notre point de terminaison est /cart/add json et nous allons passer le paramètre de données obtenu de sérialisation du formulaire. Donc, $ (this) fait référence à la forme elle-même dans ce cas. Donc, cela devrait être en fait tout ce dont nous avons besoin pour les pièces initiales et la fonctionnalité. Donc, si je retourne à la page de mon panier et actualise et fait quelques sélections et envoie un message mes produits et appuie sur « Ajouter au panier », il semblera que rien ne se passe réellement, mais c'est parce que la soumission du formulaire a été interceptée. Et donc si je vais à mon panier, vous verrez que ce produit a effectivement été ajouté avec succès. Donc, si nous voulons vérifier que cela s'est passé via Ajax et pas par une autre forme ou magie, nous pouvons utiliser les outils de développement chrome pour inspecter les demandes réseau qui sont réellement faites. Donc, si nous faisons une autre sélection poinçonner un message et puis quand nous appuyons sur « Ajouter au panier », nous verrons la demande d'ajout Ajax réelle à venir et nous avons été en mesure d'inspecter les détails de cela à travers ce panneau, nous pouvons voir le qui sont passées, et nous voyons également que la réponse qui revient est une représentation JSON de l'élément de ligne qui vient d'être ajouté. Bien sûr, toute notre motivation en ajoutant Ajax est de rendre cela plus utilisable pour nos clients. Et ce que nous avons fait est de le rendre moins utilisable parce que nous fournissons maintenant peu près zéro feedback sur le fait que quelque chose est ajouté au panier. Alors, regardons comment on peut réparer ça. Nous allons utiliser un modèle assez commun ici et c'est pour changer le texte du bouton « Ajouter au panier » et le désactiver quand nous commençons à faire notre requête Ajax, puis quand c'est fait, nous allons changer cela en arrière. Pour ce faire, nous allons utiliser ces rappels auxquels jQuery nous donne accès. Nous l'avons fait, échouons et toujours. Ceux-ci font partie de l'interface des promesses jQuery. Donc, fait le rappel fait, sera exécuté chaque fois qu'une requête Ajax est réussie. Fail sera exécuté et c'est depuis quand nous obtenons une réponse d'erreur et toujours le rappel il sera toujours exécuté à la fin d'une requête ajax. Donc, dans notre cas d'utilisation, nous allons toujours vouloir restaurer le bouton « Ajouter au panier » à son état d'origine. Donc, nous allons mettre ça dans le rappel toujours. Donc, cela s'exécutera peu importe si la demande est un succès ou un échec. Donc, sauver cela nous allons voir l'impact que cela a sur nos pages. Donc, rafraîchir notre page et configurer nos options de produits. Maintenant, regardez attentivement quand nous appuyez sur « Ajouter au panier » ici et vous pouvez voir que le comportement est comme prévu. C' est un bon début, mais nous avons encore besoin de donner un peu plus de commentaires lorsque les choses ajoutent au panier. Ainsi, par exemple, le total du panier dans le coin supérieur droit n'est pas mis à jour. Donc, nous ne sommes pas sûrs à 100% que quelque chose a été ajouté avec succès et il serait également agréable faire apparaître un lien de retrait dès que nous l'ajoutons au panier. Donc, juste pour rassurer les utilisateurs que leur changement a été enregistré et les encourager à franchir une étape suivante. S' attaquer d'abord à la mise à jour des informations sur le panier dans la barre nord. Lorsque nous ajoutons avec succès quelque chose au panier. Donc, dans le rappel fait, nous allons réellement faire une deuxième requête Ajax au point de terminaison /cart.json qui nous donne une version mise à jour de tout ce qui est dans le panier pour le moment. Lorsque cette requête Ajax est terminée, nous allons utiliser cette information de panier pour mettre à jour l'élément HTML du panier de la barre de navigation que nous pouvons voir est ici dans notre en-tête et nous allons mettre à jour cela avec ce texte, le mot panier, puis une version formatée du prix total du panier. Cela gère notre problème de mise à jour. Pendant que nous sommes ici, nous allons également ajouter rapidement un peu de gestion des erreurs dans le cas d'échec. Donc, cela va être très basique juste ajouter un message d'alerte avec l'erreur ce retour de Shopify. Dans un scénario réel, vous voudriez les inspecter un peu plus et fournir un message utile à l'utilisateur. Faites-leur savoir exactement ce qui s'est mal passé. Sur notre prochaine tâche, qui consiste à faire apparaître ce lien de paiement lorsque nous avons ajouté un élément avec succès. Donc, nous allons ajouter à ce lien de paiement en tant qu' élément HTML sous notre bouton « Ajouter au panier ». Vous pouvez voir qu'il s'agit d'un ID du lien de retrait. Il pointe vers le check-out et nous allons le rendre initialement caché avec affichage de style aucun. Retour à notre javascript theme.liquid et nous allons juste ajouter la logique ici pour rendre ce lien de retrait visible à la fin d'une opération d'ajout au panier réussie. Ensuite, nous pouvons tester et voir si les choses vont un peu mieux. Donc, rafraîchir notre page. Ensuite, lorsque nous passons par le processus de sélection de nos options, en ajoutant un message. Comme vous pouvez le voir, à la fois le panier dans la barre de navigation est mis à jour et nous avons également ce lien vérifier maintenant apparaissant. C' est un moyen vraiment facile d'ajouter un panier Ajax progressivement amélioré à vos pages de produits comme nous l'avons mentionné précédemment dans un scénario réel, vous voudriez probablement fournir aux utilisateurs un peu de commentaires supplémentaires à la fois dans et faites-leur savoir exactement ce qui a mal tourné si quelque chose ne va pas. Mais aussi dans le cas de succès peut-être faire un peu plus évident ici que quelque chose a été ajouté avec succès à votre panier et toujours penser aux prochaines étapes que vous voulez à l'utilisateur de prendre si c'est ajouter un autre produit, reconfigurer un produit ou pour démarrer le processus de paiement. Après avoir traversé le processus de voir comment nous avions configuré manuellement la fonctionnalité de panier Ajax, nous allons maintenant regarder une bibliothèque qui fait la plupart du travail pour nous, qui est Cart.js. Maintenant, je dois offrir un petit avertissement ici que Cart.js est un projet que j'ai moi-même rédigé mais il est 100% open source et gratuit à utiliser pour tous les développeurs de thèmes. Retour à notre page produit, que nous avons réinitialisé au comportement pré-Ajax. Nous sommes toujours en train de passer par le flux de redirection du panier régulier ici et nous allons jeter un oeil à la façon dont nous mettrons en œuvre la fonctionnalité Ajax en utilisant Cart.js. La première étape consiste à vous rendre sur cartjs.org et à télécharger la dernière version de la bibliothèque. On peut le faire comme un fichier zip. Ensuite, une fois que nous avons fait cela, nous voulons juste extraire le fichier zip et ensuite saisir la bibliothèque comme un fichier javascript, fichier javascript minifié et nous allons le déposer dans le répertoire des actifs de notre thème. Donc, si nous vérifions simplement dans notre éditeur de texte, nous pouvons voir que cela a été copié à travers. Pour commencer à utiliser cartjs dans notre thème, nous devons ajouter un peu de JavaScript d'initialisation au bas de notre theme.liquid et nous devons également inclure la bibliothèque aussi. Donc, nous allons le faire en utilisant une URL d'asset et une balise de script, puis nous appelons ces fonctions d'initialisation et passons l'état initial de notre panier. De là, nous avons juste besoin d'ajouter un peu de balisage à notre thème pour indiquer ce que nous aimerions faire avec cartjs. Ainsi, nous pouvons ajouter un attribut de soumission de panier de données à un formulaire et cela va émuler la fonctionnalité de soumission de formulaire que nous avons implémentée manuellement précédemment. Ensuite, nous pouvons également envelopper un élément d'affichage avec un attribut de rendu de panier de données. Nous allons juste émuler la fonction de mise à jour que nous avions dans la barre de navigation. Donc, avec l'ajout de seulement ces deux attributs, nous avons en fait répliqué beaucoup de fonctionnalités que nous venons de construire manuellement. Donc, nous pouvons voir ici la soumission du formulaire est capturée et nous mettons automatiquement à jour le panier dans la barre de navigation. C' était une jolie tournée tourbillon de cartjs. Il y a un peu plus à la bibliothèque que cela , mais c'est pour cela que nous avons vraiment du temps dans cette leçon. Donc, nous allons le laisser là et si vous êtes intéressé, vous pouvez le vérifier sur la page d'accueil de cartjs. C' est tout pour cette leçon. J' espère que vous avez une bonne compréhension de la façon de commencer à appliquer ces techniques Ajax à votre thème et que vous comprenez aussi l'importance de prendre cette approche d'amélioration progressive où nous construisons les fonctionnalités de base d'abord, puis plus tard l'Ajax en plus de cela. 7. Meilleures pratiques: Maintenant, il est temps de parler du sujet préféré de tout le monde, les meilleures pratiques. Je sais que ce n'est pas le plus sexy des sujets, mais il peut être vraiment important de construire vos thèmes d'une manière qui facilite le maintien pour vous-même et les autres. Donc, si un autre développeur vient sur vos projets plus tard, il veut construire une intégration avec votre thème, ou même si vous revenez sur votre thème six mois plus tard, et que vous ne vous souvenez pas de ce que votre thème faisait ou ce que faisait votre code, le fait suivre ces meilleures pratiques rend les choses beaucoup plus faciles à trouver et à aller de l'avant. Commençons par regarder le liquide qui est une des caractéristiques les plus uniques et les plus déterminantes de Shopify. Dans cet exemple, le thème avec lequel nous travaillons a une page produit qui est écrite en liquide comme tous nos modèles le sont. Dans la partie inférieure de cette page produit, nous avons une section de produits connexes, et qui utilise un tas de liquide pour générer une liste de produits connexes. Une chose utile à faire quand nous avons beaucoup de gros liquide compliqué, est de l'extraire dans un extrait séparé. Cela le garde un peu plus gérable pour nous et il nous permet également de réutiliser ce code dans d'autres sections. Donc, nous pouvons vouloir réutiliser cet extrait de liquide ailleurs. Donc, ici, nous l'avons découpé de notre modèle de produit, et nous incluons cet extrait, et nous allons le vider dans l'extrait de produits connexes ici. Maintenant, quand il s'agit du code liquide réel lui-même, une chose que je vois que les gens ne parviennent pas à faire avec du liquide beaucoup de temps est d'ajouter des commentaires. Je ne peux vraiment pas insister assez sur l'utilité d'ajouter des commentaires dans le liquide, surtout quand vous avez des choses compliquées. Ce n'est pas seulement utile pour les futurs développeurs qui pourraient prendre un projet après vous mais aussi pour votre futur auto car dans deux mois, si vous revenez et regardez le code liquide que vous avez écrit, vous ne vous souviendrez pas de l'intime les détails de celui-ci. Deux, derniers points rapides. Il est vraiment utile de s'assurer que votre code est bien formaté si indenté, facile à lire à nouveau pour la même raison que l'ajout de commentaires est vraiment utile. Juste une note finale et c'est sur les extraits d'imbrication. Donc, comme vous pouvez le voir au bas de cet extrait, nous incluons en fait un autre extrait, l'extrait de produit. Je dirais que deux niveaux est à peu près le maximum que vous voulez aller avec un thème Shopify et des extraits imbriqués. Plus que cela et il devient un peu difficile de raisonner mentalement sur ce qui se passe dans votre code, et cela devient un problème de maintenance un peu délicat. Continuons, parlons des feuilles de style. Beaucoup des meilleures pratiques pour les feuilles de style Shopify vont être exactement les mêmes que dans le développement Web régulier. Donc, ajouter des commentaires toujours utiles à la fois pour vous-même et pour d'autres futurs développeurs. Quelque chose qui est unique à Shopify est cependant son support pour le préprocesseur Sass. Il est donc payant de se familiariser avec certaines des astuces et méthodes que vous pouvez utiliser dans cette langue. Ainsi, par exemple, la directive @extend comme nous le voyons ici. Une autre chose unique aux contextes Shopify est que nous pouvons utiliser liquide pour produire des valeurs de nos paramètres de thème dans nos fichiers de feuille de style comme nous le faisons ici. Cependant, nous pouvons rencontrer un petit problème avec le liquide ici parce que les étiquettes liquides elles-mêmes ne sont pas réellement valides Sass. Cela peut donc causer des problèmes si nous utilisons un prétraitement externe ou si nous utilisons simplement la validation de syntaxe. Donc, ce que nous pouvons faire est ce que je fais ici et c'est d' ajouter une fonction d'échappement de chaîne qui est valide Sass, mais bien aussi rendre vos variables de modèle liquides dans votre fichier de feuille de style ;. Cela devrait donc éviter les problèmes que je viens d'identifier. Passons maintenant à JavaScript qui est en fait l'un des domaines avec lesquels je vois le plus de problèmes en termes de maintenabilité et de performance dans les thèmes Shopify. Donc, si vous vous souvenez comment nous avons écrit la plupart du JavaScript dans les leçons précédentes, nous avons mis la plupart directement dans le bas de notre theme.liquid. Ce n'est pas vraiment la meilleure pratique. Donc, ce que vous voulez vraiment faire est d'extraire autant de JavaScript que possible et de le placer dans des fichiers JavaScript séparés dans votre répertoire d'actifs. C' est mieux pour la maintenabilité et cela signifie également que les navigateurs sont capables de mettre en cache votre JavaScript au lieu d'avoir à le charger à chaque chargement de page. Cela signifie également que vos fichiers JavaScript sont disponibles pour effectuer un prétraitement, vous pouvez les minifier ou les concaténer avant de les livrer en production. Maintenant, l'inconvénient d'extraire votre JavaScript dans des fichiers d'actifs est que vous n'êtes plus en mesure d'accéder au code liquide disponible à partir de vos modèles de thème. La meilleure façon que j'ai trouvée autour de ce problème est créer des fonctions d'initialisation à l'intérieur votre JavaScript et de passer vos objets liquides dans des configurations à partir de vos fichiers modèles. Donc, pour voir comment nous pourrions faire cela ici, nous allons créer une configuration une fonction d'initialisation de page de produit qui attend objet json d'un produit que nous ne pouvons plus rendre à partir de liquide à l'intérieur de ce fichier JavaScript, puis nous fera juste un peu de nettoyage de code pour que cela fonctionne avec notre nouvelle fonction d'initialisation. Nous pouvons voir ici le code liquide que nous utilisions et que nous ne pouvons plus utiliser, donc nous allons simplement passer la variable produit dedans. Nous allons juste nettoyer ceux sur ce code un peu donc c'est un peu plus lisible. De là, la tâche est simplement de pouvoir passer cette variable de produit à cette fonction de configuration à partir du liquide thème. Nous pouvons donc le faire en nous assurant d'abord que nous avons inclus notre nouveau fichier JavaScript que nous venons de créer. Une fois que nous avons fait cela, nous pouvons simplement utiliser cette seule ligne de JavaScript ici dans maintenant des modèles liquides pour passer cet objet liquide à notre fonction d'initialisation. Malheureusement, nous n'avons pas le temps nécessaire dans ce cours pour creuser vraiment en profondeur ce qui fait de la meilleure pratique JavaScript pour un thème Shopify. Mais je pense qu'il y a trois choses clés que vous pouvez penser qui vous aideront à écrire JavaScript qui est facile à maintenir et très connu professionnellement. Le premier d'entre eux est d'écrire votre JavaScript défensivement. Ce que je veux dire par cela, c'est l'écrire d'une manière qui ne fait pas d'hypothèses sur la page sur laquelle il est chargé. Donc, ne supposez pas qu'un élément DOM va exister sur la page parce que votre script peut être chargé sur la page du produit, ou sur la page de collection, ou sur une page d'index, et vous n'avez peut-être pas nécessairement le contrôle de cette . L' autre aspect de l'écriture de JavaScript défensif est de s'assurer que votre script joue bien avec d'autres choses tierces qui pourraient être installées sur la page. Si quelque chose ne va pas avec un autre script, alors j'espère que vous pouvez contourner cela et écrire votre JavaScript d'une manière qui ne dépend pas des choses des autres fonctionnant correctement 100 pour cent du temps, car il ne arriver. La deuxième chose que je pense est vraiment importante est d'écrire votre JavaScript de manière modulaire. Ainsi, divisez votre JavaScript en composants modulaires qui ont leurs propres domaines de responsabilité individuels. De cette façon, ils ne dépendent pas les uns des autres, c'est beaucoup plus facile à maintenir, c'est beaucoup plus facile pour d'autres développeurs de venir, comprendre ce qui se passe, raisonner, puis de développer davantage ces modules. La troisième chose dont je voulais parler autour votre JavaScript est de m'assurer qu'il est écrit de manière événementielle. Ce que je veux dire par cela est que lorsque par exemple vous modifiez des variantes sur une page de produit plutôt que d'avoir une longue fonction qui a une prescription pour toutes les différentes choses à mettre à jour sur la page, place déclenche un événement modifié de variante, puis vous pouvez faire en sorte que tous vos autres composants se connectent à ces événements et mettent à jour leur propre domaine de responsabilité indépendamment. Ainsi, par exemple, vous pouvez déclencher un événement mis à jour de variante et vous pouvez avoir un composant qui met à jour le prix du produit, un autre qui met à jour l'image en vedette du produit. De cette façon, vous gardez les choses très séparées comme avantages similaires à lorsque vous décomposer votre JavaScript en modules. Ce dernier point, cet événement en JavaScript, devient vraiment important lorsque vous commencez à obtenir thèmes vraiment complexes qui pourraient traiter des choses comme différentes devises, différentes langues, différentes locales, parce que vous pouvez avoir tout un tas d'entrées différentes et cela rend beaucoup plus facile si vous avez seulement à vous soucier de la mise à jour des composants individuels sur une page, vous pouvez raisonner beaucoup plus facilement. Un autre sujet que nous n'avons pas le temps de traiter en profondeur est la performance thématique. C' est un peu dommage parce que je pense que la performance est un sujet qui n'a vraiment pas assez d'importance quand nous parlons de thèmes Shopify. Oui, j'ai réalisé l'ironie que je dis qu'on n'a pas assez de temps pour en parler quand je pense que c'est dommage qu'on n'en parle pas assez. Le fait est que les performances affectent vraiment vos taux de conversion. Donc, Google a fait une étude et une augmentation d'une seconde dans vos temps de chargement de page peut entraîner jusqu'à sept pour cent baisse de la conversion. Donc, c'est quelque chose de vraiment important. La question devient alors, que pouvons-nous faire en tant que développeurs de thèmes à ce sujet ? La première chose que je pense qu'il est vraiment important d'avoir est une façon de mesurer la performance de votre thème afin que vous ayez idée de savoir si quelque chose que vous faites fait fait réellement une différence. Il y a deux outils qui, je pense, sont vraiment génial pour cela. Le premier est Google PageSpeed Insights. C' est un outil très simple que Google vous donne. Vous pouvez brancher une URL, vous obtiendrez une ventilation sur l'endroit où les gros articles de performance de billets ou les gros problèmes de billets sont pour vous. Le deuxième outil qui est vraiment génial est WebPagetest.org. Il va dans beaucoup plus de profondeur. Vous obtenez des graphiques en cascade, il vous donne une ventilation sur tous les différents composants individuels sur votre page, et il a aussi cette chose appelée l'indice de vitesse. L' indice de vitesse est une mesure de la rapidité avec laquelle une page devient utilisable pour un client plutôt que du temps nécessaire pour charger la page entière, et c'est généralement une chose plus importante car ce que clients se soucient vraiment, c'est la rapidité avec laquelle capables d'interagir avec votre page plutôt que lorsque le tout dernier widget JavaScript se charge. Maintenant, en termes de ce que vous pouvez réellement faire pour améliorer votre performance thématique, il y a quelques points importants que je commencerais par aborder en premier. Le premier d'entre eux est JavaScript chargé par le haut. Donc, la plupart du temps si vous regardez des thèmes, ils chargent beaucoup de bibliothèques, y compris par exemple jQuery dans la tête du thème. Déplacer ces bibliothèques d'ici vers le bas du corps de la page peut avoir un impact énorme sur temps de chargement car le navigateur n'a pas à télécharger l'analyse et exécuter tout ce JavaScript avant même qu'il ne commence à montrer le contenu en haut de la page. Un autre grand tueur de performance est les images non optimisées. Donc, si vous avez des JPEGS ou GIFS ou PNG dans votre thème qui n'ont pas été correctement optimisés, vous pouvez envoyer beaucoup de piqûres inutiles sur le fil. Vous pouvez utiliser des outils comme ImageOptim ou ImageAlpha pour optimiser ces images avant qu'elles n'atteignent votre thème, et vous pouvez également les regrouper dans un processus de développement de thème automatisé comme nous le verrons plus loin. Une autre chose à surveiller est de vous assurer que vous servez l'image de la bonne taille sur le bon type d'appareils. Donc, il ne sert à rien de charger une image rétinienne 3X sur un téléphone mobile qui ne sera pas en mesure d'afficher ces pixels, et de même, il ne sert à rien de servir une image haute résolution à un appareil de bureau qui n'a pas de affichage de résolution. Donc il y a quelques choses que vous pouvez faire pour assurer que vous faites la bonne chose là-bas. Vous pouvez utiliser les bibliothèques JavaScript pour vous assurer que le bon type d'image est sélectionné, et pour les navigateurs plus récents où cela est le plus applicable, vous pouvez utiliser le nouvel attribut de jeu de sources sur les images. Enfin, et c'est vraiment la chose la plus difficile à faire avec votre thème, mais aussi la plus utile, et c'est juste pour enlever des choses. Donc, s'il y a des composants sur la page qui sont vraiment lents à charger ou qui prennent beaucoup de téléchargement ou de bande passante, alors considérez simplement si vous pouvez les remplacer par quelque chose qui est un peu plus léger. Un bel exemple de cela que je dis tout le temps sont des carousels. Donc les carousels sont horribles du point de vue de la convivialité. Les utilisateurs n'ont tout simplement pas tendance à passer à la deuxième ou à la troisième diapositive, ou ils sont frustrés par eux quand ils veulent aller au premier élément de la diapositive, et ils veulent ensuite essayer d'y revenir. Donc, les carousels sont juste une mauvaise convivialité, mais ils chargent également plus d'images que vous pourriez réellement avoir besoin. Donc, remplacer un carrousel JavaScript par une seule image peut être un excellent moyen d'améliorer la convivialité du thème mais aussi de réduire considérablement la quantité qui doit être téléchargé pour votre thème en premier lieu. Les 're sont mes meilleurs conseils pour la performance et s'assurer que vos thèmes se chargent un peu plus rapidement. Si vous êtes vraiment intéressé par ce sujet, j'ai écrit un peu à ce sujet sur mon blog, gavinballard.com où je plonge spécifiquement dans les cas d'utilisation autour des thèmes Shopify et l'optimisation des performances. 8. Automatiser votre flux de travail: Dans cette leçon, nous allons parler de l'automatisation des flux de travail. Ainsi, le processus de prise de tâches répétitives et de les automatiser. Nous obtenons beaucoup d'avantages de faire cela. Le plus évident, c' est que nous nous épargnons beaucoup de temps. Donc, nous n'avons pas besoin d'effectuer la même étape manuelle encore et encore. Mais il y en a d'autres aussi. Nous obtenons plus de flexibilité dans la façon dont nous pouvons structurer nos projets. Donc, au lieu d'avoir à emballer les choses, comment Shopify s'attend à ce que le thème final soit, nous pouvons structurer les choses d'une manière qui facilite la maintenance, diviser nos fichiers JavaScript par exemple et les compiler ensemble. Nous rendons également notre processus de déploiement beaucoup plus fiable, car il est automatisé, nous n'avons pas à nous soucier d'oublier une étape si nous faisons les choses manuellement. Ensuite, le dernier avantage que nous obtenons de cela, c'est que nous avons une certaine forme de documentation de notre processus de déploiement. Donc, alors que, avant nous n'avions pas vraiment de moyen de communiquer notre processus de déploiement à un autre développeur, par exemple. Ça vient peut-être d'être écrit dans un Google Doc ou nous essayons juste de nous en souvenir. En automatisant le processus, nous avons une forme de documentation de ce processus dans le code lui-même. Dans cette leçon, nous allons examiner un outil spécifique pour l' automatisation des flux de travail appelé Grunt. Grunt est basé sur Node.js, c'est un framework assez populaire et commun et je l'aime, car il a un très grand écosystème de plugins. Donc, s'il y a une sorte de tâches que vous pourriez vouloir faire avec votre thème Shopify, qu'il s'agisse de concaténer des fichiers, réformer des feuilles de style ou d'optimiser des images, il y a probablement déjà un plugin pour Grunt qui le fait. Nous allons prendre Grunt dans cette leçon et voir comment nous pouvons appliquer au processus de construction des thèmes Shopify. La première chose à vérifier, est que nous avons à la fois le gestionnaire de paquets de noeud et de noeud installé sur nos machines. Si vous n'avez pas cette configuration, vous pouvez rechercher sur le nœud et le site Web npm sur la façon d'obtenir cela trié. Une fois que nous avons fait cela, nous pouvons exécuter cette commande npm install pour installer la bibliothèque client Grunt. Cela nous donnera accès aux outils de ligne de commande avec Grunt. Une fois que cela est configuré, nous sommes dans notre répertoire thématique. La première chose que nous voulons faire est d'exécuter npm, dans lequel crée un fichier package.json. Si vous êtes familier avec les projets de nœuds, vous l'avez déjà vu auparavant. Sinon, c'est fondamentalement juste un moyen de lister toutes les dépendances de notre projet particulier. Donc, c'est là que nous allons tirer tous nos plug-ins Grunt et des choses comme ça. Donc, je passe à travers les étapes de configuration assez rapidement. Si vous ne suivez pas 100 pour cent, ne faites pas trop de stress. Vous pouvez toujours en savoir plus à ce sujet sur le site Web de Grunt et aussi dans le matériel didactique. Donc, à ce stade avec notre thème de démonstration, nous avons installé nos dépendances pour Grunt. Nous avons Grunt et un paquet .json mis en place. Maintenant, on a juste besoin de chercher quelque chose à voir avec ça. Notre thème de démonstration pour cette leçon est le thème LaunchPad, qui est fourni par défaut avec tous les magasins Shopify. Si nous plongons dans le répertoire des assets pour ce thème, nous pouvons voir qu'il y a beaucoup de plugins jquery que ce thème tire par défaut et c'est une chose assez courante à voir dans beaucoup de thèmes Shopify. Mais le problème avec cela, est que nous devons charger tous ces fichiers JavaScript individuellement, donc nous faisons des requêtes HTTP supplémentaires. Donc, ce que nous allons examiner dans cette leçon, c'est comment nous pouvons utiliser l'automatisation des flux de travail pour garder ces fichiers séparés dans le développement, afin de les rendre plus faciles à gérer. Mais les rassembler tous, concaténer tous ensemble, sorte que nous n'avons qu'à livrer un fichier réel au navigateur. Heureusement, pour nous, Grunt a un plugin, qui fait ce que nous voulons à peu près tout de suite. Ça s'appelle grunt-contrib-concat. Donc, nous installons des plugins Grunt en utilisant la commande npm install. Si j'avais save-dev à la fin comme argument là, cela va s'assurer qu'il est ajouté à notre package.json, sorte que nos dépendances sont clairement listées. Donc, nous avons juste besoin d'attendre un peu pour que cette installation ait lieu. Ensuite, si nous inspectons réellement le contenu de notre package.json, nous verrons que ce nouveau plugin a été ajouté dans notre liste de dépendances. Maintenant, si nous inspectons le contenu de notre dossier de thème, nous pouvons voir que l'installation de npm et node dans Grunt a ajouté ce répertoire node_modules à notre thème. Si nous exécutons un état git, nous verrons que git le ramasse comme un répertoire que nous pourrions vouloir ajouter à notre projet. Nous n'avons pas vraiment besoin du dossier des modules de noeud dans notre projet, car tout ce qu'il contient est les dépendances qui sont répertoriées dans package.json. Donc, ce n'est pas vraiment un code pertinent pour nos projets, donc, nous devrions ajouter cela à notre gitignore. Donc, que nous ne commettons pas accidentellement des choses, que nous n'avons pas vraiment besoin de l'être. Nous voulons cependant nous assurer que les modifications apportées au gitignore et au package.json lui-même sont documentées dans notre gitrepository. Donc, nous allons le faire maintenant. Maintenant, nous avons tous les composants pour exécuter les tâches Grunt ensemble. Mais nous avons encore besoin d'un moyen de définir ce que sont ces tâches réelles et comment elles devraient fonctionner sur les fichiers de notre thème. Nous le faisons en utilisant un fichier Grunt. Un fichier Grunt est un fichier JavaScript qui se trouve au niveau supérieur de notre répertoire thématique et c'est là que nous définissons toutes les tâches automatisées, que nous aimerions pouvoir exécuter sur notre thème. Donc, si nous regardons cet exemple de fichier Grunt, nous pouvons voir qu'il s'agit d'un fichier JavaScript. Donc, il utilise simplement la syntaxe JavaScript régulière. Donc, il a une ligne d'exportation en haut, puis, nous définissons nos tâches dans cet appel Grunt.initConfig. Donc, vous pouvez voir ici, je passe un hachage qui définit quelques tâches, y compris cette tâche concat. Je donne un nom à cette tâche, puis, je définit les fichiers source que je veux concaténer ensemble, et le fichier de destination pour l'endroit où je veux que tout se termine. En bas, j'ai deux lignes. Un pour charger le plugin concat, puis le second enregistre simplement tâche concat que nous avons définie comme tâche par défaut. Alors, comment cela fonctionne réellement quand nous voulons exécuter ces tâches ? Si nous revenons à la ligne de commande, nous pouvons exécuter grognement concat. Comme vous pouvez le voir, il nous dira qu'il exécute cette tâche et qu'il a créé ce fichier plugins jquery. Donc, si nous voulons jeter un oeil à ce que cela ressemble, nous pouvons voir que le fichier plugins a été créé et comme prévu, c'est une concaténation de ces autres fichiers plugin jquery que nous avons définis. Donc maintenant, tout ce qu'il nous reste à faire, c'est de remplacer ces importations individuelles de ces plugins jquery individuels par l'importation unique de l'appel unique à une balise de script pour le fichier concaténé ensemble. Une fois que nous avons fait cela, nous pouvons simplement supprimer ces appels existants. Ce que nous venons de faire était un cas d'utilisation très simple pour Grunt juste concaténer les fichiers. Mais nous aurions pu faire beaucoup plus, nous pourrions être en train de midifier ces fichiers avant qu'ils ne soient mis en production. Nous pourrions effectuer une vérification de la syntaxe sur le JavaScript, pour nous assurer que tout était correct et sans erreur avant d'entrer en production. Nous pourrions optimiser les images et, en plus de cela, nous pourrions le faire d'une manière différente selon l'environnement dans lequel nous étions. Donc, que nous soyons en développement ou en production. Mais bien sûr, Grunt n'est pas le seul outil que nous pouvons utiliser à travers ce genre de choses. Il existe d'autres outils, comme Gulp ou CodeKit, qui exécutent efficacement le même processus. Mais le choix réel de l'outil que vous utilisez, n'est pas vraiment la chose importante ici. C' est juste que vous avez une certaine forme d'automatisation du flux de travail, pour obtenir tous les avantages que nous avons énumérés au début de la leçon. 9. Déployer des thèmes Shopify: Comme la leçon précédente, cette dernière leçon porte sur notre processus de déploiement et plus précisément, nous allons parler du déploiement, façon dont nous extrayons notre code de nos machines de développement en production, dans Shopify dans un professionnel et efficace. Commençons par avoir un aperçu des méthodes de déploiement et de la façon dont nous avons fait les choses à ce jour. Lorsque nous avons mis en place la gemme thème dans les leçons précédentes de ce cours, nous l'utilisions essentiellement pour déployer directement sur notre thème en direct sur notre boutique Shopify. Cela fonctionne bien pour le développement, mais il y a quelques problèmes quand cela devient un magasin de production en direct. La première est que vos développeurs poussent les changements directement dans la production sans aucune mesure préventive réelle pour éviter les accidents. Vous n'avez pas vraiment le moyen de tester de nouvelles fonctionnalités. Vous avez également des difficultés à savoir dans quel état votre thème live se trouve sur votre site de production et vous ne savez pas vraiment quelle version du code est en cours d'exécution, et l'utilisation de ce genre de méthode rend également très difficile collaborer avec d'autres personnes sur votre thème Shopify, car il est très facile pour plusieurs développeurs d'écraser les modifications de l'autre et il est très difficile de revenir à un état antérieur si quelque chose ne va pas avec cela. Donc, une façon d'essayer de résoudre certains de ces problèmes est d'avoir deux thèmes en cours d'exécution sur le même magasin, une version live et une version de développement. Par conséquent, nous utilisons toujours la gem de thème pour mettre à jour les modifications directement apportées au thème de développement pendant que nous développons puis une fois que nous sommes satisfaits des modifications que nous avons apportées, pu déployer ces modifications sur le thème en direct. Une façon de le faire serait de dupliquer la dernière version de notre thème de développement et publier en tant que thème en direct sur la boutique Shopify et de le faire via l'administrateur Shopify. Mais il y a quelques problèmes avec ça. Tout d'abord, c'est toujours un processus très manuel donc, il y a la place pour l'erreur humaine. Il est également très difficile de savoir dans quel état se trouve notre magasin en direct, donc nous ne savons pas vraiment quelle des dernières versions de développement a été publiée et cela ne résout pas vraiment nos problèmes de collaboration. Donc, imaginez que la meilleure approche est de continuer à utiliser la gem thème pour télécharger directement sur le magasin de développement, mais ensuite d'utiliser également la gem thème pour déployer sur le thème en direct une fois que nous sommes satisfaits de l'état du thème sur notre machine de développement. Ce genre d'évite un peu de bouleversements avec le processus de déploiement de l'administrateur Shopify. Mais encore une fois, nous avons encore ces problèmes où nous utilisons toujours un processus manuel et nous avons encore des problèmes de collaboration comme où le téléchargement notre thème directement à partir de la machine d'un développeur vers le magasin en direct. Une bien meilleure approche que nous pouvons utiliser est de continuer à utiliser la gem de thème pour télécharger dans le magasin de développement, car c'est vraiment le moyen le plus instantané pour nous d'obtenir des commentaires sur le développement pendant que nous le faisons. Mais ensuite pour introduire le concept d'un dépôt tiers. Donc, ce serait un service de référentiel de code, donc quelque chose comme GitHub ou Bitbucket ou GitLab ou votre propre serveur Git hébergé en interne. Une fois que nous sommes satisfaits des modifications que nous avons apportées à notre thème localement, nous pouvons simplement faire une poussée Git vers ce dépôt. Ensuite, nous pouvons utiliser un service de déploiement pour prendre la dernière version de notre code de thème et la pousser sur le thème en direct de notre boutique Shopify. Ainsi, l'introduction de ce concept de référentiel tiers entre les développeurs et l'environnement de production nous donne beaucoup d'avantages. Ainsi, nous obtenons instantanément tous les avantages de collaboration liés à l'utilisation d'un référentiel Git central, donc des choses comme la résolution de conflits gérée pour nous. Nous pouvons utiliser tous les mécanismes que le service d'hébergement Git particulier a ainsi par exemple. tirage, demandes de pool émergentes et soulever des problèmes et des choses comme ça. Nous séparons les développeurs du déploiement directement vers l'environnement de production, ce qui minimise le risque d'erreurs, et en faisant en sorte que cette étape de service déploie automatiquement déploiement à partir de notre sur le site en direct. Nous ouvrons la porte pour des choses comme les tests automatisés pendant cette étape et le déploiement uniquement si tous ces tests ont réussi. Donc, de façon réaliste, nous aurions probablement trois thèmes ou plus sur notre boutique Shopify. Donc, un thème de mise en scène ainsi, puis un thème de développement pour chaque développeur ne sont pas identiques, puis notre service de déploiement déploierait automatiquement la dernière version de notre code sur le thème de mise en scène où il peut être testé , puis une fois il a passé un processus d'assurance qualité, nous pouvons déclencher un déploiement manuel via cette offre de service de déploiement sur le thème en direct que les clients disent. Pour aller un dernier pas plus loin dans un scénario réaliste. Parce qu'il est une mauvaise pratique de faire fonctionner votre site de production sur le même magasin Shopify que vos thèmes de mise en scène et de développement, car vous ne pouvez pas séparer les données telles que les commandes et les clients. Ce que vous voulez réellement faire est d'exécuter deux magasins Shopify distincts afin que votre service de déploiements puisse toujours être déployé automatiquement sur le thème de transit votre magasin de développement, puis lorsque vous déclenchez ce déploiement manuel, qui va au thème en direct sur le magasin de production. Il existe un certain nombre de services qui vous permettront de déployer du code à partir d'un dépôt Git vers un thème Shopify, et bien sûr, si vous avez des magasins de développement système back-end, vous pouvez toujours lancer le vôtre. Aujourd'hui, nous allons regarder un outil spécifique et c'est celui que j'aime utiliser, il s'appelle DeployBot. Vous pouvez le trouver sur deploybot.com. La raison pour laquelle je l'aime pour le déploiement de thèmes Shopify est qu'il a un support natif intégré pour les thèmes Shopify. Ainsi, il est vraiment facile de se lancer et de fonctionner et il prend également en charge certaines fonctionnalités plus avancées comme exécution d'un script de construction dans le cadre du processus de déploiement. Voyons comment nous pouvons déployer un thème en utilisant DeployBot. Donc, nous sommes de retour sur notre thème de démo et si nous sautons dans notre photo, nous pouvons voir que j'ai un pari de config. Donc, j'ai la configuration GM du thème à télécharger dans le magasin et j'ai également placé ce thème sous le contrôle de révision Git. Comme première étape pour cet exemple, j'ai également poussé ce thème à GitHub, donc je l'ai hébergé dans un référentiel central. Voyons maintenant comment le DeployBot s'intègre dans le mix. Vous pouvez créer un compte gratuitement avec DeployBot et utiliser jusqu'à un dépôt avec ce plan, puis une fois que vous êtes connecté à votre compte, vous êtes présenté avec ceci, ce qui vous guide dans le processus de connexion un référentiel dans votre boutique Shopify. Ainsi, comme vous pouvez le voir ici, vous pouvez connecter GitHub, Bitbucket ou votre propre référentiel Git auto-hébergé. Je vais sélectionner le référentiel pour ce thème de démonstration et appuyez sur Connect. Ensuite, de l'autre côté des choses, je dois créer un environnement, donc c'est accrocher à l'endroit où nous déployons dans lequel, dans ce cas, sera un magasin Shopify. Donc, j'ai juste besoin de donner à cela une étiquette, spécifier comment je veux déployer dans cet environnement. Dans ce cas, je vais laisser ce manuel. Je vais déployer la branche principale, et ensuite on peut voir qu'on nous demande sur un serveur. Ensuite, nous avons cette option de lier indirectement à Shopify. Donc, en choisissant cela, je donne juste un nom et l'URL de mon magasin Shopify. Ensuite, on peut s'accrocher directement. Donc, le webhook se définit fondamentalement comme une application personnalisée dans notre boutique Shopify. Juste besoin de lui donner un nom et ensuite nous pouvons choisir le thème vers lequel nous voulons déployer. Donc, nous en avons un qui s'appelle la personnalisation des produits que nous allons utiliser. Nous avons un tas d'options avancées que nous n'avons pas encore explorées. Donc, c'est en fait toute la configuration que nous devons mettre en place pour que le service de déploiement de base soit opérationnel. Nous pouvons maintenant appuyer sur le bouton Déployer et DeployBot va chercher la dernière version de notre code à partir de GitHub. Cela vous donne la chance de revoir les changements qui vont être déployés et ensuite nous pouvons appuyer sur le bouton Démarrer Déployer pour pousser ces informations, et pousser ce thème et ces fichiers dans notre boutique Shopify. Maintenant, si nous actualisons notre boutique Shopify pour le moment, nous ne verrons aucun changement car, bien sûr, nous avons poussé la version la plus récente de toute façon. Mais voyons comment nous allons passer par le processus si nous faisons un changement. Donc, décidons que nous voulons changer la couleur de notre barre de navigation et donc nous faisons cet ajustement notre feuille de style. Enregistrez ces modifications et passez par le processus de l'ajout à Git. Une fois cela fait, nous pouvons pousser ces changements notre dépôt GitHub et nous allons juste vérifier et voir qu'en effet ce changement a été poussé, ce que nous pouvons voir. Ensuite, si nous laissons tomber dans DeployBot, nous verrons que si nous appuyons à nouveau sur le bouton Déployer, il vérifiera à nouveau les changements récents et nous donnera un aperçu de ce qu'il va changer et déployer. Encore une fois, dans une question de simplement commencer le déploiement et DeployBot va pousser ces changements sur notre thème Shopify. Maintenant, si nous nous rafraîchissons, nous verrons que ce changement a effectivement eu lieu. Maintenant, l'un des avantages d'utiliser un service de déploiement est que, si nous poussons quelque chose qui ne va pas ou que nous n'aimons pas, pu revenir assez facilement et Deploybot comme vous pouvez le voir, rend ce processus assez simple. Nous pouvons revoir à nouveau ce que nous annulons et retirer instantanément les changements si quelque chose se passe mal. C' était l'introduction très rapide de cinq minutes au déploiement qui est le sujet final de ce cours. Mais juste avant de terminer, nous allons jeter un coup d'oeil à un scénario de déploiement final qui apporte des techniques plus avancées en particulier, certaines des choses d'automatisation de flux de travail dont nous avons parlé la dernière leçon. Donc, nous sommes de retour en regardant le thème Développement de la bougie. Mais cette fois-ci, j'ai deux thèmes sur mon magasin. J' ai un thème Live et un thème Développement. Donc, nous téléchargeons indirectement sur le thème Développement. Dans Développement ou en utilisant le thème [inaudible], puis nous allons déployer vers la version Live du thème en utilisant Deploybot et j'ai déjà configuré flux DeployBot d'une manière similaire à ce que nous avons fait avec le screencast précédent. Maintenant, j'ai également apporté quelques changements assez importants à la structure de notre répertoire de thèmes et c'est pour s'adapter à certains des éléments d'automatisation de flux de travail dont nous avons discuté plus tôt. Donc, vous pouvez voir maintenant que j'ai un répertoire de thème qui contient tous les fichiers source pour mon thème, et j'ai également ajouté un fichier Gruntfile qui effectue tout un tas de tâches de compilation, donc minification et concaténation, et en construisant tous ces fichiers source dans mon thème dans un répertoire .build, ici au niveau supérieur. Pour voir cela en action, passons à la console et exécutons une build Grunt, et nous verrons que compile notre thème dans ce répertoire .build. Donc, si j'ouvre maintenant, on peut dire une version finale prête à être déployée dans un magasin Shopify. Maintenant, notez que le fichier config.yml est assis dans ce répertoire de construction, afin que je puisse exécuter une montre de thème ici, et télécharger mes modifications dans Development directement la version Development du thème sur le magasin Shopify. Donc, si je change de répertoire dans le répertoire de construction et exécute la montre de thème. Ensuite, revenez à mon thème, modifiez les fichiers sources d'origine de ces thèmes. Donc, en changeant le titre de ma page par exemple , puis exécutez cette étape de construction à nouveau en utilisant Grunt, nous pouvons dire que Grunt sera assez intelligent pour reconstruire seulement les choses qui doivent changer , puis mon téléchargement de thème ramasse ce changement et télécharge au magasin. Maintenant, si je rafraîchis dans notre navigateur, immédiatement je ne vais pas voir ce changement parce que nous affichons actuellement la version Live du magasin, et nous étions en train de télécharger vers la version Development. Mais nous pouvons bien sûr, prévisualiser cela comme nous l'avons fait ici et vous pouvez voir que ce changement a effectivement été fait. Maintenant, nous ne voulons pas avoir à exécuter une build Grunt manuellement chaque fois que nous modifions notre thème, mais heureusement, nous avons aussi une configuration de tâche de montre dans notre Gruntfile. Donc, cela signifie que nous pouvons maintenant aller dans nos fichiers de thème source, apporter des changements comme bon nous semble, puis dès que nous enregistrons, Grunts va récolter, compiler ce dont nous avons besoin et à son tour la montre de thème téléchargera ce changement dans le magasin. Une fois que nous sommes satisfaits des changements que nous avons apportés dans le développement, nous voulons les transmettre à Git, afin que nous puissions les déployer sur notre site Live. Donc, pour ce faire, nous passons par le processus standard d'ajout de Git, et je vais changer ceci en un Commit, puis le pousser vers notre dépôt GitHub. Nous pouvons ensuite passer par le processus d'exécution d'un Deploy with Deploybot d'une manière similaire à ce que nous avons fait dans notre screencast précédent. Par conséquent, en appuyant sur le bouton Déployer, examinant les modifications à apporter, puis en exécutant ce déploiement. Si nous revenons à notre navigateur et maintenant, nous pouvons voir que ce changement a été déployé sur le site Live. Revenons à nos fichiers de thème une seconde pour examiner ce que ce Gruntfile fait réellement pour nous et comment cela fonctionne avec DeployBot. Ainsi, dans nos fichiers source de thème, vous pouvez voir que nous n'utilisons pas la structure de répertoires Shopify standard. Nous avons en fait décomposé notre JavaScript et nos feuilles de style en fichiers séparés, ce qui nous aide avec le développement et maintient tout un peu plus modulaire et facile à raisonner. Dans le répertoire de la construction, il y a ces fichiers sont compilés ensemble. Qui plus est, c' est que si nous sautons dans notre site Live dans notre navigateur et faisons un peu de creuser dans le CSS, nous verrons que les actifs qui sont servis à partir du site Live ne sont pas seulement compilés ensemble, mais ils sont aussi minifiés. Ceci est possible car DeployBot prend en charge les commandes Build. Donc, si nous sautons dans les paramètres qui sont configurés pour notre thème Shopify, Nous verrons que DeployBot est en fait capable d'exécuter une build Grunt pour nous avant de déployer notre thème sur la boutique Shopify. Vous remarquerez également que nous passons un indicateur de production à la tâche Build, et c'est pour dire à Grunt d'exécuter certaines tâches que nous ne trouverions pas utiles ou trop coûteuses à exécuter dans Development. Ainsi, par exemple, en réduisant ces feuilles de style, nous l'utiliserions également ici pour minifier nos JavaScripts et nous l' utiliserions également pour minifier et optimiser nos images, ce qui est une tâche assez coûteuse. Cela prend un peu de temps que nous ne pouvons pas vraiment nous embêter à attendre dans le développement, mais nous aimerions le lancer avant de lancer notre thème en production. Espérons que vous avez maintenant une idée de bonnes techniques à utiliser pour obtenir votre code de votre machine de développement, dans un magasin Shopify en production et éviter tous les problèmes que nous avons identifiés au début d'une leçon. 10. Conclusion: Eh bien, c'est tout. Nous avons fini. Merci beaucoup de m'avoir rejoint sur ce cours. J' espère vraiment que cela a été utile pour vous, j'espère que vous avez appris quelque chose que vous ne saviez pas avant, et si vous avez l'impression que vous pouvez aborder une chose Shopify plus avancée développer maintenant. Je suis toujours très heureux de parler à des étudiants ou à n'importe qui en général de Shopify, je passe beaucoup trop de temps à penser et à parler de Shopify. Donc, si vous voulez entrer en contact ou poser des questions, donnez-moi quelques commentaires. Si vous êtes coincé sur les projets, alors contactez-nous. Mes coordonnées ici sur la page du cours SkillShare. En dehors de cela, je pense que tout ce qui reste est pour moi de dire bonne chance dans votre développement de chose Shopify et Kirti heureux.