Programmation de thèmes Shopify : Liquid, JSON et Javascript

1. Introduction: Bonjour. Bienvenue sur Shopify Theme Programming : Liquid, JSON et JavaScript. Cette classe est la suite de ma classe précédente, Shopify Theme Development, comment construire et personnaliser votre propre boutique en ligne. Si c'est la première fois que vous apprenez avec moi, m'appelle Chris, et je suis l'un des meilleurs professeurs ici sur skillshare.com couvrant sujets tels que le développement web, et le freelance en ligne. Mon premier cours sur le développement de thèmes Shopify a couvert des sujets tels que la création d'un magasin de développement, l'utilisation de Theme Kit et la compréhension de la structure du thème. Ce sont tous des fondamentaux importants pour le développement de thèmes Shopify. Mais dans cette classe, nous allons approfondir le code du thème réel, et acquérir une meilleure compréhension de la façon dont les thèmes sont programmés. Nous allons examiner de plus près le langage de modélisation derrière les thèmes Shopify, discuter de la façon de créer vos propres personnalisations à l'aide de schémas JSON et en apprendre davantage sur quelques API qui vous aident à accéder aux données stockées, sans avoir à recharger la page. À la fin de la classe, vous avez une solide compréhension de la façon de programmer les thèmes Shopify, et la possibilité de créer vos propres sections et extraits pour accéder à l'ensemble de ce qui peut être réalisé avec le développement de thèmes Shopify. Si vous êtes prêt à faire passer vos compétences en développement de thèmes Shopify au niveau supérieur, cliquez sur la vidéo suivante, et je vous verrai à l'intérieur. 2. Outils et connaissances nécessaires: Comme cette classe est le développement de thème SQL to Shopify, comment créer et personnaliser votre propre boutique en ligne, il est conseillé de prendre cette classe d'abord car cette classe suppose que vous comprenez ce qu'est une histoire de développement, comment themekit fonctionne, et la structure des dossiers de votre thème Shopify. Comprendre la structure des thèmes est particulièrement important pour cette classe car nous allons sauter directement dans les fichiers sans trop parler leur emplacement dans la structure des thèmes Shopify. Ce cours se concentre exclusivement sur les aspects de programmation des thèmes Shopify. Bien sûr, si vous avez besoin de plus de connaissances théoriques autour des thèmes, vérifiez certainement la première classe. Maintenant, parce que cette classe est tout au sujet du code, vous allez avoir besoin d'un bon éditeur de code. Celui que je vais utiliser dans cette classe sera l'éditeur en ligne dans l'administrateur Shopify, mais il est fortement recommandé d'utiliser votre propre éditeur de code et d'utiliser themekit pour télécharger votre code thème. Deuxièmement, vous avez évidemment besoin d'un navigateur web, et troisièmement, vous aurez besoin de votre propre boutique Shopify. Ce magasin n'a pas besoin d'être un vrai magasin. Bien sûr, il peut s'agir d'un magasin de développement. Vous n'avez pas besoin de payer Shopify pour travailler sur des thèmes. Si vous ne savez pas de quoi je parle, consultez la leçon 3 de la classe précédente. Maintenant, j'ai mentionné avant, themekit, si vous ne l'avez pas déjà, dirigez-vous vers shopify.github.io/themekit et prenez cela maintenant, je le recommande fortement. C' est essentiellement ça pour les outils. Mais en termes de connaissances, plus de connaître les thèmes, vous aurez besoin d'avoir une compréhension de base du HTML, CSS et JavaScript. Ce sont les trois langues importantes qui composent le web, et nous ne les couvrirons pas spécifiquement dans cette classe donc si vous avez besoin de comprendre l'une de ces langues, il suffit de vérifier quelques-unes de mes autres classes d'abord. C' était tout à fait la liste. Résumons rapidement avant de passer à autre chose. En termes de connaissances, vous aurez besoin d'avoir au moins une compréhension de base de la plateforme Shopify, la structure des thèmes Shopify, je parle de mises en page, de modèles, sections, etc., et enfin, HTML, CSS et JavaScript. Pour les outils, vous aurez besoin d'un éditeur de code, d'un navigateur Web et d'un magasin Shopify pour travailler, et de Shopify Themekit si vous travaillez avec votre code localement. Si vous avez tout ça, vous êtes prêt à sauter directement dans la prochaine leçon, alors je vous y retrouverai. 3. Mises à jour de la boutique en ligne 2.0: Hey étudiants, je voulais juste sauter ici avant de commencer et m'assurer que vous êtes au courant de quelque chose que Shopify appelle Online Store 2.0. Comme vous pouvez probablement le dire, cette vidéo a été enregistrée quelques années après la publication de la classe originale, mais j'ai pensé qu'il était important de sauter ici et de vous faire part de quelques mises à jour. Si vous savez de quoi je parle ici avec Online Store 2.0, n'hésitez pas à sauter cette vidéo. Mais pour le reste d'entre vous, j'ai juste besoin de vous mettre à jour sur quelques changements apportés à l'expérience de la boutique en ligne depuis que cette classe est entrée en ligne. Juste pour répondre à certaines de vos préoccupations élèves, le contenu de cette classe est toujours pertinent. Le liquide est toujours sous la même forme. JSON est toujours utilisé pour les schémas de section et les paramètres régionaux. Les API JavaScript dont je parle dans cette classe existent toujours au moment de l'enregistrement, mais nous avons juste un nouveau format pour les fichiers modèles. Donc maintenant les modèles peuvent être de Liquid ou JSON. On va aller plus loin dans la classe. Vous devriez probablement maintenant savoir ce qu'est un modèle. Mais auparavant, les modèles étaient codés comme seulement Liquid et vous deviez masquer le programme dans les sections. Maintenant, afin de permettre des sections partout, Shopify a activé l'utilisation de modèles JSON. Donc maintenant, au lieu de stocker Liquid directement dans votre modèle, vous stockez un objet JSON dans votre modèle, et cet objet JSON a la liste des sections que vous pouvez ensuite réorganiser dans votre éditeur de thème, ce qui vous permet de créer des sections réordonnables dans tous vos modèles, pas seulement dans votre page d'accueil. Si vous voulez en savoir plus sur les modèles JSON, je vais plus loin dans la leçon 11 de la classe précédente. Je viens d'ajouter une nouvelle vidéo dans cette classe pour vous les gars afin que vous puissiez apprendre ce que sont les modèles JSON et comment les utiliser. Cela dit, cela va changer votre outil de développement maintenant si vous voulez utiliser des modèles JSON. Dans la vidéo suivante, j'ai parlé de Slate. Je ne vous recommande pas d'utiliser Slate à moins que vous ne récupérez un projet hérité. L' ardoise est bien expiré maintenant. Shopify a officiellement mis fin au support de Shopify Slate en janvier 2020. Je ne vous recommande pas de l'utiliser à moins bien sûr, vous devez le faire parce que vous prenez un projet hérité. Mais même alors, je recommanderais de migrer hors de Slate. Dans la dernière vidéo, j'ai mentionné un outil appelé Theme Kit, mais il y a aussi un nouvel outil maintenant appelé Shopify CLI, et il est important de noter Shopify CLI ici parce que c'est l'outil que vous allez devoir utiliser si vous voulez pour utiliser des modèles JSON. Pour une raison quelconque, Theme Kit n'a pas été adapté pour fonctionner avec les nouveaux modèles JSON. Donc, si vous voulez utiliser des modèles JSON, vous devrez utiliser Shopify CLI. Ce sont les principaux changements à noter avant d'entrer dans la classe. Comme je l'ai dit, Liquid est toujours le même, JSON est toujours le même, JavaScript API existe toujours. La dernière modification de Shopify est que les fichiers modèles peuvent désormais être de Liquid ou JSON. Encore une fois, pour en savoir plus sur Online Store 2.0, vous pouvez consulter les trois nouvelles vidéos que j'ai ajoutées à la classe de développement de thème Shopify, j'ai mentionné le schéma JSON. Si vous voulez en apprendre davantage sur l'interface de ligne de commande, c'est dans la leçon 6, je crois, donc la leçon 6 de ma classe précédente, et il y a aussi une introduction à la boutique en ligne 2.0 dans cette classe aussi. J' ai également une playlist Online Store 2.0 sur YouTube que vous pouvez consulter pour plus d'informations sur Online Store 2.0. Mais cela étant dit, revenons à la classe et apprenons comment nous pouvons programmer dans le développement de thèmes Shopify. 4. Aperçu de la programmation thématique: Pour la majorité de cette classe sur la programmation thématique Shopify, nous allons parler de liquide. Liquid est le langage de modélisation des thèmes Shopify, vous pouvez le considérer comme le langage de programmation back-end de votre thème Shopify, et donc votre vitrine en ligne. Bien sûr, nous pouvons créer des vitrines en ligne qui relient à Shopify en tant que données d'autres façons. Mais la plupart du temps, lorsque quelqu'un utilise Shopify pour héberger une boutique en ligne, il utilise ce canal de vente en ligne de la façon dont vous personnalisez l'apparence de votre boutique en ligne est à travers un thème. Vous devriez être bien familier avec cela si vous avez besoin d'en savoir plus sur le développement du thème, qu'est-ce qu'un thème, et où il se trouve dans le contexte de votre magasin ? J' ai une série sur YouTube et un cours précédent sur le développement du thème Shopify ici sur Skill Share. Donc, ce cours va être principalement concerné par la programmation thématique Shopify, comme son nom l'indique, et donc nous allons apprendre plus sur les brevets de programmation, donc nous allons beaucoup travailler avec Liquid. Cela dit, dernière classe, nous avons travaillé directement avec le thème Début, qui est un thème déjà construit qui ressemble à ceci, si vous n'êtes pas familier, c'est un thème déjà construit. Vous n'avez pas vraiment besoin d'aller dans et de construire des fonctionnalités de base, sauf si vous avez besoin de créer quelque chose qui n'existe pas déjà. Parce que si vous regardez le code de ce thème, il est déjà assez plein, donc si je regarde une section donnée, vous verrez qu'il est assez plein de code. Dans cette classe, ce que je vais faire, c'est au lieu de partir du point d'un thème réel, ce qui est plus pratique si vous faites réellement le développement de thèmes Shopify, je vais commencer par un thème très nu appelé Nouveau thème. Ce thème ici, vous pouvez voir est très nu. La page d'accueil n'a rien sur elle, si je clique sur Catalogue, cela m'amène à la collection où je vois tous les produits, et c'est actuellement paginer par deux produits à la fois. Gardez à l'esprit que pour que vous testiez et programmiez réellement un thème Shopify, vous aurez besoin de données de magasin, donc j'ai déjà mis ces données fictives. Vous devrez également mettre des produits de test si vous voulez que quelque chose soit à afficher. Si je clique sur Blog, vous pouvez voir que j'ai copié quelques articles de blog du site officiel de Shopify. Maintenant, si vous voulez coder, et utiliser ce thème exact, la façon dont j'ai généré ce thème, et la raison pour laquelle il s'appelle le nouveau thème est, parce que j'ai utilisé une commande dans Theme Kit, appelée, Theme New, donc pour ceux d'entre vous qui ne sont pas familiers avec Theme Kit, nous n'allons pas entrer dans les détails, j'ai une leçon de 20 minutes dans ma dernière classe ici sur le développement de thèmes Shopify, tout sur la façon de le configurer et de le configurer, mais c' est ce que je suis parler quand je parle de Shopify Theme Kit. C' est essentiellement un outil en ligne de commande que vous pouvez utiliser pour télécharger votre thème, puis vous pouvez le modifier avec votre propre ordinateur. Je vous recommande fortement si vous faites le développement de thèmes Shopify sérieusement, vous utilisez le Theme Kit. Mais comme cette classe n'est pas vraiment sur le workflow de développement et juste sur la programmation, je vais utiliser l'éditeur de code en ligne, donc je vais juste cliquer sur Modifier le code ici, et nous allons le modifier directement à partir d'ici. Maintenant, je devrais mentionner un autre cadre et outil que vous pouvez utiliser pour créer des thèmes Shopify, il s'appelle ardoise, donc si je tape Shopify Slate dans Google, vous pouvez en apprendre plus à ce sujet. Comme vous pouvez le lire sur cette page GitHub, ardoise est sur peu d'entretien. Slate est un projet que Shopify a créé mais qu'il ne maintient pas vraiment pour le moment, qui pourrait changer à l'avenir, et l'ardoise est beaucoup plus technique et difficile à configurer, donc nous ne allons pas nous concentrer sur l'ardoise dans cette classe également. Je pensais juste que ce serait négligent de moi de ne pas mentionner, et encore une fois, si vous voulez en savoir plus sur l'ardoise, il y a une vidéo bonus dans la classe précédente sur le développement du thème Shopify, allez le vérifier. C' est la deuxième dernière vidéo. Maintenant, en me débarrassant de cet onglet et en revenant à notre Nouveau Thème ici, la raison pour laquelle je voulais commencer par le Nouveau Thème c'est qu'il est calme nu, donc on peut voir ici qu'il n'y a pas beaucoup de code liquide, il n'y a que 10 lignes dans le fichier d'index, n'y a qu'une seule mise en page, et si nous passons ici à des sections et des extraits, ils sont complètement vides. n'y a qu'un fichier de langue et un fichier CSS, et un fichier JavaScript. C' est assez nu, et cela va nous permettre d'apprendre les concepts de programmation Liquid plus facilement sans avoir à passer au crible tout un tas de HTML et CSS qui existeraient sur un thème entièrement construit. Comme je l'ai mentionné précédemment, vous pouvez considérer Liquid le langage de programmation back-end des thèmes Shopify. Ce que je veux dire par là, c'est que tout ce code est généré du côté serveur, puis il passe par le côté client en HTML et CSS. Juste pour démontrer que pour ceux d'entre vous qui le concept n'est pas particulièrement clair, regardez toutes ces balises liquides, celles-ci ne vont pas passer par l'avant, sont toutes générées du côté serveur, puis il vient à travers sur le front comme juste HTML et CSS, donc si je clique sur cette page, qui m'amène au modèle de collection, et j'inspecte ce qui se passe ici, je ne verrai aucun code Liquid quel que soit. Le code Liquid est tout du côté serveur, donc la raison pour laquelle c'est important est, parce que tout ce que je veux faire que je veux du côté client, doit toujours être fait avec JavaScript, et cela devient un problème de comment accéder à ces données en utilisant JavaScript, puis travailler avec elles sur le front end sans avoir à recharger la page. Vous devriez être familier avec la différence entre le côté serveur et le côté client, sinon, consultez ma première classe sur Skill Share, j'ai une vidéo sur la différence entre front-end et back-end. Mais c'est juste quelque chose à noter. Liquid couvre la plupart de la programmation Shopify, mais bien sûr, si vous voulez plus de fonctionnalités interactives, si vous voulez éviter de recharger la page, vous devrez utiliser JavaScript. Retour au code, vous pouvez voir un tas de balises Liquid, et vous pouvez voir qu'ils commencent même avec un crochet bouclé et un signe de pourcentage, et se terminent par un signe de pourcentage crochet bouclés, ou il n'y a que deux accolades, et la différence entre ces deux balises est, c'est pour la logique, et c'est pour la sortie. Ce que je veux dire par là est, si je jette juste le titre de point de collection entre ces balises doubles accolades, il sortira juste le titre de la collection. n'y a pas d'opérations ou de logique là-dessus, à moins bien sûr, que j'utilise un filtre qui est ici. Évidemment, il y a beaucoup de concepts et de syntaxe dans Liquid, et pour cela, j'ai créé ma propre documentation pour cela. C' est mon billet de blog qui n'est pas encore sorti, mais qui sortira d'ici le moment où vous regardez cette vidéo, donc je travaille toujours dessus. Mais essentiellement, ce sera le manuel ou la référence pour cette classe, donc c'est un très long article, je couvre tous les objets, tous les filtres, toutes les balises dans Liquid, donc pour cette classe, J' ai pensé à passer en revue toute la théorie, mais je pensais que ce serait beaucoup mieux pour vous de lire sur ce truc, et ensuite nous pouvons réellement pratiquer et le voir en action dans notre thème, donc je vais créer ces modèles et ventiler cela, mais à titre de référence, nous allons utiliser ce document. Cet article va être sur christhefreelancer.com/shopify_liquid_guide, donc certainement ouvrir que, avoir une lecture, vous n'avez pas à lire tout. Je vous recommande certainement de lire écrémé une fois qu'il arrive aux objets, mais cela va être votre référence. En outre, il y a deux autres ressources auxquelles je veux vous lier, et elles sont en fait liées dans l'article, la documentation officielle réelle, donc sur les domaines où il est approfondi à partir de nous parlons de la liste des attributs, la référence Liquid va toujours être un endroit idéal pour vous apprendre tout sur les différents objets, tags et filtres dans Liquid, donc il a une quantité incroyable de détails, par exemple, si je vais dans, disons que l'objet produit, vous verrez tous les attributs, et vous pouvez tout apprendre à leur sujet, donc cet article n'est pas destiné à remplacer la documentation, mais c'est un bon point de départ, et je pense qu'un bon aperçu de la façon dont tout fonctionne, et il relie à la documentation de nombreux endroits. Il y a aussi la fameuse feuille de triche, alors ouvrez cela dans un autre onglet, et ceci ici est tous les objets, balises et filtres sur la même page, par exemple, si je voulais savoir comment obtenir le titre d'un produit, je pourrais Control-F produit, et puis je trouve ce petit accordéon ici pour l'objet produit, me donne toutes les mêmes choses que nous regardions auparavant dans la documentation, mais dans ce petit accordéon serré, et puis cela me donne un peu d'informations à ce sujet, puis je peux cliquer sur En savoir plus et cela me ramènera directement à la documentation. Ce sont les ressources que je recommande d'avoir ouvert, ou d'avoir prêt pendant que vous prenez cette classe, la feuille de triche pour référence rapide, a obtenu la documentation pour quelque chose de détaillé, et bien sûr mon article comme un aperçu de Shopify Liquid, et si vous avez du mal à comprendre, quelle est l'une de ces choses, où vous pouvez trouver ces objets, mon guide est ce qui est destiné à aider cela. Comme je l'ai écrit ici au début de l'article, « Bien que la référence liquide de Shopify et la fameuse feuille de triche soient géniales, j'ai l'impression qu'il manque beaucoup de détails et c'est pourquoi j'ai décidé d'écrire ma propre documentation. » Donc, comme je l'ai mentionné, il y a quelques choses dont Shopify ne parle pas vraiment, les différents types d'objets, et où ils sont disponibles dans la portée de votre thème Shopify, c'est la principale raison pour laquelle j'ai écrit cet article, vous pouvez voir ici, non seulement pouvez-vous en apprendre plus sur les objets, mais vous pouvez également apprendre, est-ce qu'ils contiennent plusieurs objets ? Où pouvez-vous y accéder ? Peux-tu les parcourir ? Donc juste une référence supplémentaire là pour vous. Si vous avez des questions, des questions spécifiques sur Liquid, s'il vous plaît vérifier d'abord le billet de blog, puis si vous êtes toujours en difficulté, laissez certainement un commentaire dans la boîte de discussion. Maintenant, nous avons déjà mentionné JavaScript comme la façon dont nous allons faire quelque chose d'interactif sur notre thème Shopify, et une façon dont Shopify nous permet d'accéder et manipuler les données de notre thème Shopify en utilisant JavaScript est, via l'API Ajax, donc si je recherche, API Shopify Ajax, vous pouvez en apprendre plus ici. Mais nous allons avoir une ou deux leçons complètes sur l'API Ajax. Ne vous inquiétez pas. Juste vous faire savoir que nous avons une API pour faire une demande côté client également. L' autre code que vous allez écrire lorsque vous programmez thèmes shopify est CSS ou SCSS. Vous devriez être familier avec CSS. Si vous n'êtes pas familier avec SCSS, c'est une forme de SASS, qui est fondamentalement un langage de programmation pour CSS. Il n'est pas nécessaire de connaître la syntaxe de SASS. SASS est rétrocompatible avec CSS et en fait, une fois que le code arrive à l'extrémité frontale, il est toujours compilé en CSS de toute façon. Si vous voulez mettre en CSS spécifiquement ici, vous pouvez le faire comme normal mais, si vous savez comment utiliser SASS, vous pouvez également l'utiliser. Pour ceux d'entre vous qui savent utiliser SASS, un avertissement est que shopify utilise une ancienne version de SASS. Je crois que c'est 3.3 ou quelque chose comme ça. Cela signifie simplement que toutes les fonctionnalités de la dernière version de SASS ne seront pas disponibles lorsque vous développez des thèmes shopify. Si vous rencontrez quelque chose d'un peu bizarre, c'est cassé, c'est une syntaxe parfaitement fine, c'est peut-être parce que vous utilisez une ancienne version de SASS. Un autre avertissement là-bas. Ne vous inquiétez pas. Si vous ne savez rien sur SASS, CSS est totalement bien. La syntaxe finale à laquelle vous devrez vous habituer avec les thèmes shopify, bien sûr, nous avons Liquid, nous avons JavaScripts, et nous avons CSS/SCSS. Mais vous verrez aussi ici nous avons des fichiers JSON. Si j'ouvre settings_schema.json, c'est JavaScript Object Notation, aka JSON. C' est juste un moyen de présenter facilement des données. Il imite la structure d'un objet JavaScript mais il a quelques différences. Vous pouvez en savoir plus sur JSON sur Google, mais c'est assez simple à comprendre. Ici, nous avons un tableau qui s'ouvre, et puis à l'intérieur nous avons un objet. Si nous voulions écrire un autre objet ici, nous le ferions comme ça et nous pouvons lui donner des clés et des valeurs ici. Toutes les clés doivent être avec un double devis. C' est l'une des principales différences avec JSON et toutes les chaînes évidemment avec des guillemets sauf si nous mettons un nombre pour lequel nous n'avons pas besoin de guillemets. D' accord. Les zones que vous verrez JSON dans ce fichier settings_schema.json, le fichier settings_ data.json et vos fichiers régionaux, fr.default.json. Encore une fois, nous allons examiner JSON et comment tout cela fonctionne avec ces différents fichiers dans une vidéo ultérieure. Ne vous inquiétez pas pour ça. Juste vous donner un aperçu rapide avant de sauter dans le liquide. Cela couvre à peu près tous les domaines de votre thème Shopify. Vous devriez connaître la structure des thèmes de la dernière classe. Nous avons une mise en page, des modèles, des sections et des extraits pour structurer notre thème shopify. Ensuite, nous avons nos actifs qui contiennent les CSS et JavaScript, config qui contient les données et les paramètres que nous sommes en mesure de modifier et les paramètres régionaux pour stocker la langue. La dernière chose que je dois mentionner dans cette vidéo d'introduction est quelque chose qui est très important pour Shopify Theme Programming, et c'est l'idée de modèles et de portée. Si nous allons prévisualiser notre thème et naviguons vers certaines pages, vous pouvez voir notre structure de modèle dans la structure d'URL. ce moment, nous sommes sur le domaine racine. Ne soyez pas confus à propos de ce petit attribut supplémentaire là-bas. Mais nous sommes sur le domaine racine, qui est le modèle d'index. Si nous allons ici, vous pouvez voir que l'URL change de collections/all. Cela signifie que nous sommes sur le modèle de collection. Si je change la collection réelle que nous regardons à celle que j'ai dans mon magasin appelé collection vedette, vous pouvez voir tout ressemble le même, C'est juste le titre de la collection qui s'affiche ici et les produits réels qui apparaissent sur la page sont différents. Tout cela est contrôlé par le modèle de collection unique. Si je clique sur l'un de ces produits, vous verrez que nous obtenons des produits, puis le nom du produit sous forme de poignée, nous parlerons plus de poignées plus tard, est ajouté à l'URL. Maintenant, nous savons où dans le modèle de produit. Si je retourne à ma page de collection et que je clique sur ce produit, vous verrez qu'il apparaît à peu près la même manière que l'autre produit car il utilise le même modèle. À quoi cela ressemble dans notre code est, nous allons dans nos modèles ici, et voici le code qui apparaîtra pour chaque page de collection unique. La référence à la collection ici dépend vraiment de la collection sur laquelle vous êtes. Mais c'est complètement dynamique de sorte que toute collection que vous utilisez est introduite ici à travers l'objet de collection et vous pouvez manipuler n'importe quelle collection est passée de la même manière que vous le feriez pour une autre collection. Lorsque vous êtes sur la page produit, vous êtes sur le modèle de produit. C' est le même code pour chaque produit qui affiché sur votre site Web, sauf si vous utilisez des modèles alternatifs, dont nous avons parlé dans la dernière classe, mais essentiellement, tout ce qui va changer sur la page est le contenu dynamique et qui est apporté ici avec cet objet produit. Je parle de cela dans l'article que j'appelle les modèles de portée spécifique. Si nous faisons défiler vers le bas, je parle des objets qui peuvent être accessibles de n'importe où dans votre thème en tant qu'objets globaux. Si vous connaissez le nom réel de votre produit, vous pouvez y accéder depuis n'importe où dans votre thème à l'aide de sa poignée. La même chose peut être dite pour les pages, les blogs, les articles, les images. Images est à travers le nom de fichier là-bas. Mais alors vous arrivez à modéliser des variables spécifiques si vous faites défiler vers le bas, modélisez plutôt des objets spécifiques. Ces objets sont disponibles lorsque vous êtes dans le modèle respectif. Si vous êtes dans le modèle de produit, vous avez accès à l'objet produit et cet objet produit correspond au produit que vous consultez, et vous pouvez le voir à partir de l'URL. Nous regardons sac en cuir noir. Lorsque nous faisons des choses avec l'objet produit dans le modèle de produit, nous regardons ce sac en cuir noir. Les modèles que nous avons ici ont tous leurs propres objets qui devraient être étiquetés de la même manière. Dans le modèle de collection, nous avons accès à l'objet de collection. Dans le modèle de blog, nous avons accès à l'objet blog. Les modèles ici, et c'est quelque chose que nous allons obtenir plus dans les modèles de codage et les mises en page dans la prochaine vidéo, mais les modèles sont fondamentalement les différents groupes de pages qui apparaissent dans votre site Web. Sections très puissantes et des extraits parfaits pour réutiliser le code. On en parlera dans la leçon après la prochaine. Mais je crois que j'ai déjà longuement parlé de Shopify Liquid. Encore une fois, ce sont toutes de grandes références. Je ne veux pas parcourir tout le document parce qu'il est énorme. Mais dans la vidéo suivante, nous allons sauter directement dans le codage d'un modèle commun dans shopify et apprendre à utiliser des mises en page alternatives. Je te verrai dans la prochaine. 5. Maquettes et modèles de programmation: Dans cette leçon, nous allons nous concentrer sur la programmation, mise en page et les fichiers de modèles. Le modèle sur lequel nous allons nous concentrer est le modèle collection.liquid. La raison pour laquelle j'ai décidé d'utiliser celui-ci est parce que les produits sont au cœur de n'importe quel magasin Shopify, ou du moins devraient l'être, car essentiellement un magasin de commerce électronique est mis en place pour vendre des produits. Les produits sont probablement la ressource la plus importante de votre boutique Shopify. Une des façons dont les gens peuvent naviguer à travers différents produits est à travers une collection. Nous pouvons voir ici une boucle assez simple ici pour le modèle de collection, mais il se passe encore un peu ici. Ce que je veux faire, c'est simplifier cela et aborder cette ligne par ligne. Tout d'abord, je vais prévisualiser cela dans un nouvel onglet. Nous pouvons aller ici et nous pouvons nous assurer que nous sommes dans un modèle de collection en vérifiant que les collections sont dans l'URL. Maintenant, nous avons notre front end, quoi il ressemble avec notre modèle que nous éditons. La première chose que je vais faire est de supprimer la pagination et de la décomposer en une simple boucle. pagination est pratique, mais je ne veux pas vous confondre directement, alors retirez-le pour l'instant. Voyons ce qui se passe quand on fait ça. Si je rafraîchis la page, vous verrez maintenant chaque produit de notre boutique est affiché sur la page. Habituellement, vous ne voulez pas faire cela parce que vous pourriez avoir des centaines ou des milliers de produits et cela prendrait une éternité pour charger une page. pagination est très pratique, il suffit de l'enlever par souci de simplicité. Maintenant, pour le rendre encore plus simple, je vais supprimer ce code et le supprimer encore plus loin. Nous venons d'avoir cette boucle maintenant et regardons à quoi ça ressemble à l'avant. Actualisation de la page. Vous pouvez voir que nous avons maintenant juste une liste de produits avec un lien pour les voir. Si je clique sur le premier, des baskets impressionnantes, je suis maintenant sur le modèle de produit en regardant ce produit, des baskets impressionnantes. Mais nous sommes concentrés sur cette boucle de collections ici. Allons décomposer ce qu'il se passe ici. En liquide, comme je l'ai déjà mentionné, nous avons deux types de tags. Il y en a en fait trois, et nous pouvons mettre un tiret ici et ici et cela réduit juste les espaces, cela ne change pas vraiment la fonctionnalité du tout. Je ne m'inquiéterai pas trop à ce sujet. Mais essentiellement, nous avons juste deux types différents de balises, la balise de sortie et la balise logique. Lorsque nous voulons juste sortir directement quelque chose à la page, nous utilisons simplement la balise de sortie. ce moment, nous prenons un attribut sur l'objet de collection de title. Ici vous pouvez voir, c'est le titre des collections. Maintenant, c'est un peu différent avec l'ancienne collection parce que c'est une collection générée automatiquement par Shopify mais si nous allons à une collection réelle que j'ai créée, collection en vedette, vous pouvez maintenant voir que le titre de cette collection est juste ici. Si je devais retourner dans mon backend, changer cela, ça changerait ici et partout où nous référençons collection.title. Puis entrer dans une boucle maintenant, ce que je fais est de prendre l'attribut products de la collection, qui me donne accès à tous les produits de cette collection et je suis en boucle à travers eux en utilisant le mot produit comme mon crochet afin d' accéder aux différents attributs de ce produit particulier. Ce mot pourrait être n'importe quel mot que je voulais, mais le produit a du sens. Cela le rend plus lisible. Pour les produits de collection, nous allons le faire pour chaque produit. Maintenant, quelque chose qui existe dans pour les boucles dans Liquid, je ne sais pas s'il existe dans une autre langue, c'est que vous pouvez réellement avoir une déclaration else. C' est si collection.products est vide, il ne bouclera pas et à la place il sortira ceci. L' autre dans cette instance est pour lorsque les objets que vous effectuez une boucle sont vides. C' est juste un raccourci pour si je devais mettre une déclaration if ici, en vérifiant si la longueur de ceci était supérieure à zéro, et si ce n'est pas le mettre, nous pouvons nous sauver du code et l'écrire de cette façon. Pour chaque produit dans collection.products, nous allons commencer une div et à l'intérieur de cette div, nous allons avoir un lien. Pour l'adresse réelle de ce lien, nous allons mettre dans le produit .url, donc le lien vers le produit réel. Alors nous avons cette pipe ici. Ce tuyau ici est ce qui définit un filtre dans Liquid. On peut supprimer ça, ça va marcher tout aussi bien sans ça. Tout d'abord, regardons ça avec ce filtre. Si je vais inspecter ici et je regarde l'URL, vous pouvez voir que l'URL a fonctionné-collection, puis sur les extrémités, produits/awesome-sneakers. Mais si nous supprimons ce code et appuyez sur Enregistrer, ce filtre ne s'appliquera pas et l'URL que nous obtiendrons place est juste des produits/awesome-sneakers. Ce filtre que nous avons ici dans la collection, il fait juste que l'URL du produit ajoute à l'URL que nous sommes actuellement sur pour cette collection au lieu de découper la collection. C' est pratique pour si nous voulons avoir une logique sur le modèle de produit et nous pouvons référencer la collection vers laquelle nous avons navigué car un produit pourrait faire partie de nombreuses collections différentes. Revenir à la page de la collection ici, la partie suivante, très simple. Nous venons de sortir le titre du produit. Vous pouvez voir cela ici, nous avons un lien et à l'intérieur il est le titre du produit et le a href est le lien vers ce produit. Des trucs très simples. Ajoutons à la ligne suivante que nous avions ici. Je vais les ajouter tous, les supprimer tous sauf un, et appuyer sur Enregistrer dessus. Ce que nous avons ici, c'est que nous avons maintenant le prix aussi. Produit très basique .price et nous utilisons un autre filtre appelé argent, qui le formate dans un bon format de monnaie. Si je devais supprimer à nouveau ce filtre, vous verrez qu'il fonctionnera toujours. Rafraîchissons la page. Vous obtiendrez le prix de tous ces produits à venir sous forme de nombre pur. Dans Shopify, la forme de nombre pur d'un prix inclut les cents. Vous pouvez voir ici que ce sera 8,000 cents, soit 11,000 cents, ainsi de suite. Évidemment, cela ne va pas avoir l'air si grand pour l'utilisateur final donc ce que nous faisons habituellement est de le filtrer avec le filtre d'argent et cela va transformer ce nombre en un format de monnaie formaté beaucoup plus agréable. Maintenant, nous pouvons voir que 8 000 cents deviennent 80$ et nous avons ces décimales. Nous pouvons utiliser d'autres filtres d'argent pour filtrer les décimales si nous le voulons, mais l'argent est le standard. Ajoutons à la ligne suivante et supprimez la ligne finale. Maintenant, nous avons ajouté dans une instruction unless. La balise à moins est fondamentalement l'opposé de la balise if. Il se lit d'une manière différente. À moins que le produit ne soit disponible, nous allons le faire. Nous pouvons facilement transformer cela en une déclaration if, nous devons juste changer la condition ici. Je pense que dans ce cas, il est plus logique qu' en termes de compréhension du code pour en faire une déclaration if. Je vais supprimer les mots sauf si et ce que nous devons faire ici, si le produit disponible est faux, ou nous pourrions aussi le faire si le produit disponible n'est pas vrai. Faisons juste faux. Nous devons faire pour la comparaison des signes doubles égaux ou des signes triples égaux, car un seul signe égal est pour l'assignation, pas pour la comparaison. Rappelez-vous que les gars, c'est une erreur de base assez courante pour débutant. Je pense que cela lit beaucoup plus agréable si le produit disponible est faux, car dans le produit n'est pas disponible, nous voulons montrer épuisé, et cela fonctionnera exactement de la même manière. Si je passe ici, vous ne verrez aucun de ces produits vendus, donc rien ne va apparaître de toute façon. Mais si je reviens à l'ancienne collection, j'ai mis en place un produit qui est épuisé. Je viens de l'appeler produit sans image et sans stock et vous pouvez voir ici qu'il est épuisé. Si je remets ça à la façon dont c'était avant et que j'appuie sur Sauvegarder, vous verrez que nous obtenons exactement le même résultat. Sauf si c'est juste un moyen de rendre votre code plus lisible. Dans ce cas, je pense qu'il est plus logique d'utiliser si mais ils ont décidé d'utiliser sauf ici. Les évite d'avoir à écrire un opérateur de comparaison. Je suppose que c'est pour ça qu'ils l'ont fait. La dernière ligne à l'intérieur de cette boucle est cette balise de lien. Nous créons à nouveau un lien avec la même balise et le même filtre que ci-dessus ici. Cela va créer un lien vers l'URL du produit, le produit réel. Nous allons inclure l'image. La vraie chose à regarder ici est la ligne huit, parce que nous construisons une balise d'image ici avec quelques attributs et quelques filtres. Je vais cliquer sur « Enregistrer » et nous allons rapidement voir à quoi ça ressemble. Maintenant, vous verrez que nous avons les images incluses ici comme avant. Allons le décomposer. Supprimons d'abord ce filtre ici et voyons ce qui se passe. Maintenant, nous chargeons simplement la source d'image du produit en vedette dans cette balise source. L' image est également un objet. C' est pourquoi nous pouvons enchaîner un autre point ici pour obtenir le src réel de l'image. Vous pouvez voir ici nous obtenons un attribut différent de l'image ici, la balise alt, mais nous allons y arriver en une seconde. Si j'enregistre et je retourne à la page de collecte. ce moment, vous verrez que tous les liens sont brisés. Si j'inspecte l'un d'eux, vous verrez que nous avons une URL relative, mais cela ne fonctionnera pas dans Shopify. Ce que nous devons faire passer cette image à travers un filtre. Le filtre que nous avions est l'URL de l'image. Ici vous pouvez voir un paramètre de grand, mais nous pouvons supprimer ce paramètre et juste avoir la balise URL de l'image sans paramètre. Si nous revenons en arrière, actualisons la page, vous verrez que nous obtenons des images, mais elles apparaissent toutes à une largeur de 100 pixels. C' est le comportement par défaut. Mais on peut changer ça à ce que tu veux. Peut-être qu'on veut que ce soit 200 par 200. Nous pouvons faire quelque chose comme ça, ou si nous voulons que ce soit la même largeur et la même hauteur. Nous n'avons pas vraiment besoin de mettre la valeur après x. nous pouvons simplement appuyer sur « Enregistrer » sur cela. Maintenant, nous devrions voir que notre image est deux fois plus grande. Voilà, tu y vas. Je pense que c'est un bon milieu entre ces très grandes images et celles qui sortent par défaut, qui est un 100. Maintenant, c'est vraiment pratique d'avoir ceci car vous pouvez mettre une très grande image dans votre tableau de bord Shopify, mais tant que vous écrivez du code qui limite la taille de cette image, alors c'est la taille de l'image qui sera chargée dans le navigateur. Ce que je veux dire par là, c'est si nous allons réellement et cliquez sur l'image ouverte dans un nouvel onglet. Que l'image originale que nous avons téléchargée était de 1 000 pixels de large ou de 200 pixels de large. Il ne sera servi que par les serveurs Shopify comme une image de 200 pixels par 200 pixels. C' est bon pour l'optimisation de l'image. Donc, règle de base ici, si vous incluez une image, utilisez toujours le paramètre ici et spécifiez les dimensions maximales que vous pensez que l'image doit être. Parce qu'il ne sert à rien de servir une image qui est beaucoup plus grande que ce pour quoi vous en avez besoin. Cette balise finale correspond à l'attribut alt de votre image. Doit être familier avec les attributs alt. Ils décrivent l'image pour les robots et les personnes qui peuvent réellement voir l'image. Ici vous pouvez voir alt baskets impressionnantes Si je retire le filtre d'échappement ici, vous n'avez probablement pas été remarqué une différence. Retournez, actualisez la page. Vous verrez que nous obtenons toujours le même résultat. Mais ce que le filtre d'échappement fait est s'il y a du HTML dans cet attribut, il s'assure de l'échapper. C' est quelque chose qui peut vous attraper à tout moment avec la programmation de thème Shopify et développement de thème Shopify est HTML qui vient d'un objet dans Shopify, injecté dans votre code et casser tout. Juste un conseil si vous voyez quelque chose de vraiment bizarre, vous êtes des pages entières qui cassent et vous n'avez pas écrit de code pour que cela arrive. Le code peut en fait provenir d'une valeur que vous apportez et liquide. Bonne pratique juste pour être en sécurité, échapper. Maintenant, je ne pense pas qu'il y aura du HTML dans votre balise alt typiquement. Mais juste une petite option sûre là-bas. Vous ne voulez pas que le code HTML soit transmis dans cet attribut alt. Maintenant, ce n'est pas le style bien. Nous devons toujours stylisé avec CSS. Mais nous avons les principaux points qui arrivent. Nous avons le titre, le prix et l'image, et à la fois l'image et le lien de titre vers le produit réel pour que nous puissions aller vérifier. Revenons à la page de la collection. Maintenant, nous avons juste besoin de présenter l'objet paginate. Pour cela, parce que je ne sais pas du haut de ma tête comment le faire parce que c' est déjà écrit pour nous la plupart du temps dans Shopify. Je vais accéder à la fin des documents. C' est une bonne occasion de suivre aussi bien parce que c'est ce que vous allez faire aussi. Si je tape juste dans le liquide Shopify, ce que je cherche est la référence liquide, disons juste ici. Qu'est-ce qu'on cherche ? On cherche la balise paginate. Je vais entrer dans les tags. Je pense qu'il serait fermé comme tag de thème, et c'est le cas. Vous pouvez cliquer ici, et voilà. Tout ce que vous avez à faire est d'envelopper ces balises autour d'une boucle pour et vous obtenez la pagination. Assez simple. pagination est une douleur dans le cul pour beaucoup d'autres programmes, mais Shopify le rend vraiment facile pour nous. Nous sommes sur le modèle de collection donc nous pouvons simplement copier cet exemple. Je peux retourner ici. Je pense que cinq par page est un bon nombre pour nous. Nous pouvons coder la balise de fin mri ainsi ici et paginer. Je vais frapper sur ça. Retournez ici, actualisez la page et vous verrez que seulement cinq éléments apparaissent par page. Ce qu'il ne nous donne pas, c'est la navigation pour paginer. Parce qu'il nous manque un morceau de code depuis le début d'ici. Pour vérifier que nous pouvons réellement aller et cliquer ici et regarder les anciennes versions. Regardons l'original avant de faire des changements. On peut voir ici, on a ce conditionnel. Je vais juste copier ça et retourner à notre courant. À la fin de la boucle for-, je vais coller le code que j'ai pris du code original. Maintenant, nous pouvons accéder à l'objet paginate, qui est disponible dans la balise paginate. Ceci est un objet d'aide que Shopify nous donne afin que nous puissions réellement vérifier combien de pages il y a dans cette pagination. Vous vérifiez les pages de code d'attribut et nous vérifions s'il y a plus d'une page. Maintenant, nous pouvons utiliser à nouveau l'objet paginate avec un filtre facile à utiliser, qui transformera l'objet paginate en pagination par défaut. Il y a beaucoup de magie dans les coulisses ici. Si vous souhaitez personnaliser votre pagination, vous pouvez accéder aux attributs de ces objets de pagination et les manipuler comme vous le souhaitez. Mais pour nos besoins, nous allons simplement utiliser la pagination par défaut. Je rafraîchis la page ici après l'enregistrement, et maintenant vous pouvez voir que nous avons cette pagination par défaut. Habituellement, ce que vous feriez, parce que vous n'utiliseriez probablement pas la pagination par défaut dans un thème approprié parce que vous voudriez être agréable et selon votre style. Vous devez généralement créer un extrait de pagination et l'inclure ici. Dans la prochaine vidéo, nous parlerons des sections et des extraits. Pas longtemps pour en apprendre davantage sur les extraits, mais pour terminer cette leçon, je dois vous parler des mises en page. Nous aurions pu commencer avec une mise en page, mais je voulais commencer par le fichier 18 lignes plutôt que celui-ci qui est 43 lignes. Pour ceux d'entre vous qui ont besoin d'un petit résumé sur ce qu'est une mise en page, c'est ce qui est servi comme wrapper sur tous vos modèles. Sauf si vous spécifiez une mise en page alternative sur un modèle, ce sera le wrapper qui contourne chaque modèle de votre magasin. En supposant que nous n'avons qu'une mise en page ici, et qu'il utilise le nom par défaut theme.liquid, cela va être le wrapper qui entoure chaque modèle, et le point qu'il enroule est juste ici. Cette balise spéciale, content_for_layout, est l'endroit où votre modèle est chargé. Je veux vous le montrer en pratique maintenant. Nous pouvons voir que cette balise principale vient dans le fichier de mise en page, puis à l'intérieur, nous chargeons le modèle. Allons à nouveau à notre modèle de collection, et nous verrons qu'il commence par un h1. Si je regarde ici et inspecte le code, j'ai déjà l'inspection ouverte, mais vous verrez que nous avons le modèle h1 des collections, et ensuite nous avons principal. Tout ce qui précède sera le même à part le contenu dynamique qui est chargé sur chaque page. Si je vais à la page du blog, vous verrez la tête et le début du corps est le même, et vous avez toujours ce principal ici, puis à l'intérieur du principal, vous avez tout le code du modèle. Retourner à la page des collections. Content_for_layout, c'est là que le modèle de la page que vous regardez actuellement est chargé. Mais bien sûr, nous avons tout cet autre contenu autour de lui. Ici, il y a une navigation. Juste ici est un lien vers un panier. Si les comptes clients sont activés et qu'un client est connecté, nous afficherons un lien pour accéder à ses comptes. S' ils ne sont pas connectés, mais que les comptes sont activés, nous leur donnerons un lien de connexion. Nous allons déplacer ça dans sa propre section dans la prochaine vidéo. Il y a une très bonne raison à cela, mais cela constitue toute la section du corps de votre mise en page. Ensuite, vous avez la section tête, dont vous avez vraiment besoin de vous soucier si vous allez inclure des actifs supplémentaires. Vous pouvez voir toutes les choses standard que vous auriez dans une tête HTML. Le titre, les balises meta, ces objets pour le référencement. Le titre de la page est quel que soit le titre de la page, ce n'est pas le même que page.title car ce n'est pas une page Shopify que vous personnaliseriez ici, c'est quelle que soit la page sur laquelle vous êtes, le site, c'est le titre de la page. Ensuite, page_description est votre description SEO, vous ajoutez vos données SEO ici et vous avez cette balise spéciale appelée content_for_header. Comme il est dit ici, c'est simplement un crochet d'en-tête pour les plugins. C' est un point que les plugins et je crois que le code que vous mettez ou les préférences que vous mettez ici. Si je vais dans les préférences, fondamentalement tout ce que vous voulez ajouter dynamiquement à votre tête, il sera inséré où se trouve cette balise. Je crois qu'une partie de cela, si vous l'ajoutez dans un Pixel ou un Google Analytics, et l'endroit où il l'insérerait dans la tête est juste ici, mais vous n'avez pas à modifier cela du tout. En fait, je pense que l'éditeur va erreur, si vous essayez de changer cela, c'est ce que content_for_header est. Pas besoin de le changer, laisse-le là où il est. Alors ici, c'est quand on amène nos biens. Nous avons quelques filtres ici, et je vais juste vous montrer ce qu'ils font rapidement. Nous avons cette application.scss.css et si nous sortons juste cela sur la mise en page par lui-même, numéro un, cela cassera tous les styles que nous avons créés, mais vous verrez ici, il sort littéralement ce texte à l'écran. Si vous créez une balise de sortie et que vous y mettez littéralement une chaîne, vous ne faites rien. Vous pouvez supprimer cela de chaque côté et ce sera le même résultat. Mais ce que nous faisons ici, c'est que nous prenons cela et nous le filtrons, nous trouvons l'URL complète de cet actif. Faisons ça d'abord. Actualisez la page et maintenant vous pouvez voir que cela devient une URL complète générée par le serveur Shopify qui vous liera à l'actif. Puis enfin, avec le dernier filtre, il transforme cette URL en une balise de feuille de style entièrement construite. Si j'appuie sur enregistrer, actualisez la page, vous verrez que l'URL n'apparaît pas maintenant car elle est encapsulée dans une balise HTML. Si je regarde ici, il y a beaucoup de balises générées là-dedans. Vous pouvez voir que celui qui l'apporte maintenant dans notre projet pour une balise de lien et pas seulement le sortir sur l'écran. Nous pouvons en fait simplement copier ce mot HTML pour mot, le mettre ici comme ceci. Ensuite, si nous supprimons cela, qui génère la balise de feuille de style et juste remplacer le href par cette valeur, nous devrions obtenir le même résultat. Maintenant, on devrait le voir apparaître deux fois, en fait. Bien sûr, parce que j'ai pris le tag de feuille de style de celui-ci. Celui-ci montre juste l'URL de l'actif et celui-ci est le lien entièrement formé vers l'actif. Ce que je viens de faire avec cette ligne est essentiellement la même chose que si j'ai utilisé le filtre de balise de feuille de style là-bas. Pas important pour vous de comprendre en termes d'édition cela parce que vous ne voulez probablement pas toucher à cela, mais il est important de savoir comment cela fonctionne, vous n'êtes pas confus quand disons, par exemple, vous voulez inclure une autre feuille de style vous auriez juste à dupliquer cela, le mettre sous, et puis peut-être que votre prochain fichier est juste appelé styles.css. C' est ainsi que vous incluiez un nouvel élément que vous avez inclus ici dans votre thème Shopify partout où cette mise en page est incluse. Mais en termes de transformer cela en une URL d'actif à part entière et puis de créer une balise à partir de celle-ci, vous n'avez pas vraiment besoin de jouer avec. La même chose se produit ici avec JavaScript, où prendre le nom de fichier, créer une URL d'actif à part entière à partir de Shopify , puis transformer cela en une balise de script. Je vais sauver ça. C' est plus une chose structurante de thème. Mais juste pour démontrer, je vais vous montrer comment faire un modèle alternatif. Ici, nous pouvons créer, je vais juste appeler ça alternatif. Tu peux l'appeler comme tu veux. Supprimons simplement tout ce contenu de navigation et appuyez sur Enregistrer. Maintenant, nous avons cette mise en page alternative que nous pouvons utiliser. Comment faire en sorte que cette mise en page s'applique à un certain modèle est nous pouvons aller à la ligne de départ de n'importe quel modèle et utiliser la balise de mise en page. Au lieu de theme.liquid, maintenant il va être thème alternatif et si je mets cette balise au début de notre modèle, actualisez la page, vous verrez maintenant qu'il n'y a pas de navigation. D' accord. Si je le supprime et appuie sur sauver, vous verrez maintenant que nous avons le même thème qu'avant. La plupart du temps, il n'est pas important d'avoir une deuxième mise en page, mais c'est là en option. Je vais juste supprimer celui-ci parce que nous ne voulons pas avoir à apporter des modifications à plusieurs mises en page de thème pour ce projet et pour cette classe, nous avons vraiment besoin d'un seul fichier de mise en page, mais l'option est là pour créer différentes mises en page. Peut-être que vous voulez une page avec moins de contenu dessus. Peut-être que nous ne voulons pas l'en-tête ou le pied de page, par exemple. Nous pouvons supprimer cela d'une mise en page alternative, puis utiliser cette mise en page sur le modèle. Espérons que cela a rendu très clair ce qui se passe dans un modèle de base comme ici pour la collection et votre fichier de mise en page. Ce que je veux vous laisser avant d'aller dans les sections et les extraits, c'est cette partie de ma documentation, qui est des objets spécifiques au modèle. ai parlé un peu dans la vidéo précédente. Mais je veux juste m'assurer que vous comprenez bien ça. Nous commençons par le fichier de mise en page, puis le modèle de la page où l'on regarde actuellement est chargé à l'intérieur de ce conteneur ici parce que nous avons mis cette balise content_for_layout ici. Maintenant, nous avons accès aux objets particuliers qui vont avec ce modèle. Ce que je veux que vous compreniez ici, c'est que lorsque nous sommes sur le modèle de collection, nous n'avons pas accès à un produit parce que nous n'avons aucune idée du produit que nous recherchons. À moins que nous ne fassions une boucle à travers une collection et accédons à ses produits, alors nous pouvons affecter un produit particulier à partir d'une boucle. On peut dire la même chose si on est dans un blog. Lorsque nous sommes dans un modèle de blog, nous regardons un blog spécifique. Nous pouvons utiliser l'objet blog, mais nous ne pouvons pas réellement accéder à un article à moins que nous parcourons les articles de ce blog. La même chose avec les collections et les produits. Mais quand nous allons dans la page du produit ou de l'article, nous avons déjà vu la page du produit ou le modèle de produit. Regardons le modèle d'article. Nous pouvons accéder à l'objet article spécifiquement parce que c'est le modèle qui est chargé lorsqu'un article est affiché. Je voulais juste que ça soit super clair. Si cela n'a toujours pas de sens, donnez-moi un commentaire dans la boîte de discussion ci-dessous, mais c'est la portée du modèle et des objets spécifiques aux modèles. C' est pourquoi les modèles sont vraiment importants. Mais en même temps, vous ne voudrez peut-être pas inclure beaucoup de code dans votre modèle. Vous voudrez peut-être créer un lien direct vers une section et il y a une très bonne raison à cela, que nous allons voir dans la prochaine vidéo. 6. Sections, Snippets et Locales: Dans cette leçon, nous allons parler de sections et d'extraits. Snippets est assez basique et facile à comprendre. Fondamentalement, si nous mettons du code dans un extrait, nous pouvons l'inclure à plusieurs endroits dans notre thème. Cela nous permet de réutiliser le code, mais aussi de mieux organiser notre code. Par contre, les sections sont un peu plus intelligentes et nous verrons pourquoi c'est dans cette leçon. Si nous revenons à notre thème. mise en page liquide, nous pouvons voir un besoin vraiment évident d'une section ici. Autrement dit, nous avons tout ce contenu d'en-tête dans notre mise en page. Maintenant, ce que vous feriez habituellement dans un thème Shopify est d'avoir une section d'en-tête et de pied de page. Ce que je vais faire, c'est que je vais couper tout ça pour que ça soit dans mon presse-papiers. Je ne veux pas le perdre, et ensuite je vais le remplacer par un appel à une section. Aller à écrire l'en-tête de section. Maintenant, quand j'appuie sur save, il va lier à cette section que nous n'avons pas encore créée. Nous allons entrer, créer une section avec le même nom, en-tête. L' éditeur ajoutera automatiquement l'extension de point liquide pour nous, donc nous n'avons pas besoin de le faire, et il ajoute automatiquement dans un schéma, feuille de style et balises JavaScript, très pratique. Ok, nous allons entrer dans les schémas en profondeur dans la prochaine leçon, mais pour l'instant, ce que je vais faire est de coller ce liquide et le code HTML directement ici. Si j'appuie sur Enregistrer, actualisez n'importe quelle page parce que chaque page d'un thème utilise la même mise en page, nous verrons que rien n'a changé, d'accord ? En fait, quelque chose a changé, et c'est que nous avons maintenant tout cela encapsulé dans une balise div générée par Shopify. Il lui donne un ID de tiret de section Shopify, puis le nom de la section. Il lui donne également une classe de section Shopify. Créons une autre section, et appelons-le pied de page. Après le contenu principal, nous avons généralement un pied de page et nous pouvons le mettre dans sa propre section. Si je sauvegarde cela, il sera lié à un pied de page qui n'existe pas encore, donc nous devons le créer. Je vais créer ce fichier footer.liquid dans mes sections. Je vais monter ici et ouvrons juste une balise de pied de page. Fermez la balise de pied de page, et peut-être juste mettre des informations sur les droits d'auteur, Christopher Dodd. Il y a une chose que j'ai oublié de faire, c'est nommer la section dans le schéma. Nous voulons changer cela en pied de page, puis dans notre en-tête, nous voulons que le nom de section soit en-tête. C' est ce qui va apparaître dans le personnalisateur. Comme je l'ai dit, nous allons aller plus dans les schémas, mais fondamentalement tout cela est pour le customizer. Si je retourne dans une page parce qu'ils utilisent tous la même mise en page, nous pouvons voir que nous avons également une balise similaire générée pour le pied de page. Shopify tiret, section, tiret et le nom de la section qui est pied de page, et bien sûr la section Shopify de classe. Maintenant, vous pouvez voir ici, ce n'est pas bien formaté, mais à l'intérieur, vous avez la balise de pied de page avec le droit d'auteur Christopher Dodd. Maintenant, ce que je veux vous montrer, c'est à quoi ça ressemble dans le personnalisateur. C' est une bonne représentation visuelle de ce qui se passe ici. Tout ce que j'ai fait là, c'est que j'ai cliqué avec le bouton droit sur personnaliser le thème pour aller au personnalisateur pour ce thème. Maintenant, vous verrez sur la page d'accueil que nous avons en-tête et pied de page. Ce sont les sections telles qu'elles apparaissent enact thème personnalisateur. Si nous allons à n'importe quelle page, n'importe quel modèle, parce que nous utilisons le même fichier de mise en page, nous obtiendrons en-tête et pied de page sur chaque page. Retournez à la page d'accueil. Je vais en fait supprimer le pied de page de notre fichier theme.liquid. Juste pour vous montrer comment cela apparaîtrait dans le personnalisateur. Si je vais au personnalisateur, actualisez la page, alors nous ne voyons que l'en-tête. C' est quelque chose que j'ai couvert dans la dernière classe , ce qui devrait être juste un résumé pour la plupart d'entre vous. Mais comme vous pouvez le voir ce que ce thème vraiment porter, nous avons créé toutes les sections qui existent dans ce thème. Si nous allons à une autre page, il n'y a pas encore de section entre l'en-tête et le pied de page pour ce thème. Si nous passons aux paramètres de thème, nous n'avons que la liste de retrait par défaut des personnalisations ici. Nous pouvons ajouter à cela aussi. Ici vous pouvez voir la version officielle de ce. C' est le kit de thème, le thème du modèle. Encore une fois, c'est juste celui que vous obtenez en exécutant thème nouveau dans le kit de thème. Très bien, donc pour créer notre prochaine section, une chose que nous pouvons modifier, et c'est quelque chose qui est assez commun est de prendre tout le code dans un modèle et de le déplacer dans une section. Ça peut sembler un peu bizarre au début, mais nous allons expliquer pourquoi c'est dans une seconde. Je vais appeler ce modèle de collection de section parce que c'est essentiellement ce qu'il est. Ensuite, je vais créer cette section. Maintenant et ici, nous avons un schéma, et je vais juste coller exactement le même code que nous avions dans notre modèle de collection. Je vais appeler ce modèle de collection dans le schéma réel. C' est le nom qui apparaîtra dans le personnalisateur. Si nous allons à notre page de collection, nous allons maintenant voir modèle de collection, qui est le nom que nous avons défini dans le schéma pour être une section ici. Comme vous le remarquez, parce que nous n'avons pas de paramètres dans notre schéma, il dit ici aucun contenu ou paramètres. Nous pouvons réellement personnaliser cela. La raison pour laquelle nous aurions un fichier de modèle de collection vide et un lien direct vers une section avec tout le code pour ce modèle là, est parce que nous pouvons maintenant le personnaliser en utilisant le personnalisateur. Si nous laissons ce code ici, il serait assis en dehors d'une section et alors nous n'aurions pas accès à un schéma pour lequel nous pouvons éditer avec. Ce n'est pas nécessairement vrai dans le sens où il existe un schéma de paramètres pour le thème dans son ensemble, mais nous voulons section les paramètres de ce modèle particulier. Nous voulons le déplacer dans sa propre section. Ok, pour l'instant on n'a rien fait parce qu'on n'a pas défini de paramètres. Peut-être que je veux créer un paramètre ici et nous le faisons dans l'objet settings. Quel est quelque chose que je pourrais vouloir personnaliser en tant qu'utilisateur à propos de cette page. Eh bien, peut-être que je veux contrôler la pagination. Rappelez-vous quand je dis utilisateur, je parle de l'administrateur de la boutique qui utilise ce personnalisateur dans ce cas. Peut-être que je veux contrôler la pagination. Ce que je vais faire est d'ouvrir un objet, et à l'intérieur de cet objet, je vais écrire, c'est tout le format JSON d'ailleurs, donc nous allons ouvrir une double citation, et ce que nous devons faire ici est d'insérer une entrée. L' endroit où vous pouvez en savoir plus à ce sujet est si nous seulement Google Shopify paramètres d'entrée. Je crois que c'est dans la configuration des paramètres de thème ici. Si je recherche les paramètres d'entrée, ici nous pouvons voir les paramètres d'entrée de base. Texte par exemple, c'est le paramètre d'entrée que nous mettrons dans. Nous pouvons aussi mettre comme un sélecteur d'images, nous pouvons mettre un ensemble de boutons radio, une liste déroulante, toutes choses, case à cocher. Pour la pagination, je pense qu'il est logique d'utiliser un curseur de plage. Ça va apparaître comme ça. La raison pour laquelle un curseur de plage serait bon dans ce cas, est que nous voulons restreindre l'entrée de l'utilisateur à quelque chose de raisonnable. Nous ne voulons pas paginer moins que dire deux, et nous ne voulons pas paginer plus que dire 25. Sinon, il faudra trop de temps pour charger la page. Ce que nous pouvons faire, c'est que nous pouvons copier cet exemple ici, retourner dans notre code. Quel onglet était-ce ? Ok, on y va. Plutôt que d'écrire ce mot pour mot, je vais juste le copier et le coller dans. Maintenant, nous avons un objet qui représente notre cadre. La première chose dont nous avons besoin est le type, et cela définit que cela va être une entrée de plage. L' ID est ce que nous pouvons utiliser pour y accéder en liquide. Nous devons changer cela en quelque chose qui a plus de sens. Je vais juste appeler ça la pagination. Alors juste ici, nous devons insérer une valeur minimale. Parce que c'est un nombre, je vais me débarrasser des guillemets doubles et mettre dans disons cinq. Le maximum qu'ils peuvent paginer, je vais dire est 25. L' étape est l'incrément qu'ils peuvent utiliser. Je veux seulement qu'ils puissent faire une sélection par incréments de cinq étapes. Unités, nous pouvons mettre ici en tant que produits par page, mais malheureusement cet attribut d'unité a une limite de trois caractères. Donc, je ne vais pas utiliser l'unité dans ce cas. L' étiquette est ce qui est affiché à l'utilisateur. Nous allons écrire ici des produits par page, et la valeur par défaut que je vais faire est de cinq. Si je clique sur enregistrer ici, il n'y a pas d'erreurs, heureusement, et puis je peux rafraîchir la page. Ensuite, une fois que je vais dans cette section, nous pouvons réellement trouver notre curseur de gamme ici et le mettre à jour. Bien sûr, nous avons créé cette sélection, mais nous n'avons rien fait avec elle. Nous allons devoir revenir à notre section, et référencer cette valeur de paramètre par son ID. Au lieu d'ici où il est dit par cinq, ce que je vais faire est de référencer cet identifiant. La façon dont nous faisons cela est à travers l'objet de section. Parce que nous sommes dans une section, nous pouvons accéder aux données dans un schéma d'une section via cet objet de section. Je commence par saisir cet objet de section, et maintenant j'ai essentiellement accès à cela et nous voulons entrer ici. Ce que je vais faire, put.settings. Maintenant, j'ai accès à tous les paramètres, et à l'intérieur je veux accéder à celui-ci, dont l'ID est la pagination. Je vais taper la pagination, et ce devrait être tout ce dont nous avons besoin pour que ça fonctionne. Retourner, rafraîchir la page. Si je vais dans le modèle de collection maintenant, et je l'ai mis à 10, devrait être 10 apparaissant par page. Cette collection n'a qu'environ 10 produits. Allons sur l'ancienne collection. Maintenant, nous sommes dans une collection qui a plus de 10 produits. Vous pouvez voir ici, il est par défaut à cinq, 1, 2, 3, 4, 5, mais je peux le changer à 10, appuyez sur « Enregistrer ». La page va rafraîchir, et maintenant nous allons paginer par 10 au lieu de cinq. Donc 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. C' est une façon de rendre notre modèle de collection personnalisable, en utilisant une section et en lui donnant un paramètre d'entrée dans son schéma. En termes de cette section, le modèle de collection, je vais le laisser là, parce que nous allons parler plus de schémas, et ajouter quelques options dans les vidéos ultérieures. Mais ce que je veux vous montrer, c'est comment nous pouvons créer une liste dynamique de sections sur notre page d'accueil, en utilisant le contenu des balises spéciales pour l'index. Maintenant, tout d'abord, nous allons devoir créer une section que nous aimerions mettre sur la page d'accueil. Une bonne idée, quelque chose qui est assez commun dans beaucoup de thèmes. Allons à la page d'accueil, qu'on puisse jeter un coup d'oeil. y a actuellement rien ici, alors peut-être que ce serait bien d'avoir une rangée de produits apparaissant comme une collection en vedette sur la page d'accueil. Créons cette section maintenant. En revenant dans notre éditeur, je vais créer une nouvelle section, et je vais l'appeler featured-collection. L' extension liquide point est ajoutée automatiquement, bien sûr. La première chose que je vais vouloir faire est de changer le nom de la section en « Collection en vedette ». Maintenant, avec cette section, nous ne allons pas l'inclure spécifiquement sur un modèle, ou une mise en page comme nous l'avons fait ici. Mais nous allons pouvoir l'inclure dans la page d'accueil, à travers cette balise de contenu dynamique pour index. Tu verras ce que je veux dire dans une seconde. Ce que je vais faire, c'est que je vais mettre en place une boucle. Copions la boucle d'ici, pour notre collection en vedette. Ce que nous devons faire parce que nous ne allons plus placer cela dans le modèle de collection, c'est de spécifier une collection spécifique, et c'est là que nous voyons maintenant la balise assign. Assign nous permet de créer nos propres variables. Ce que je vais faire ici, c'est sélectionner quelle collection je veux être les objets de collection pour cela. Encore une fois, nous ne sommes plus dans le modèle de collection. Nous ne savons pas quelle collection faire une boucle. Spécifions ceci et nous pouvons le faire en utilisant l'objet collections globales, et en accédant à son handle. Je vais accéder à la collection Featured, et terminons à cette balise. Aller à « Enregistrer », et maintenant nous devrions avoir une collection en vedette qui nous permet de montrer la collection en vedette partout où nous l'incluons. Malheureusement, nous ne pouvons pas l'inclure dans notre section de contenu pour l'index, sans ce qu'on appelle un préréglage. Nous devons écrire un tableau prédéfini ici. Pour cela, je vais revenir dans la documentation Shopify. Je pense que ça pourrait être sur une page différente de celle-ci. Il y a deux pages que je finis par basculer entre tout le temps quand je programme des sections. Ce n'est pas celle-là, tapons « Presets ». Je crois que c'est dans celui-ci, les sections de thème, cela devrait être le cas, si je tape des presets, ici nous pouvons trouver les détails pour les presets. Ce que nous pouvons voir ici, c'est quand une section a un ou plusieurs préréglages, chaque préréglage devient une section dynamique émergeant peut ajouter à leur page d'accueil de thème, si le contenu de l'objet index a été inclus dans index.liquid, donc ils disent qu'il est correct ici, nous devons définir un préréglage au moins un préréglage, afin que nous puissions l'utiliser dans notre contenu pour l'index. Je vais juste copier ce tableau qu'ils ont défini ici, nous n'avons pas besoin de tous ces détails. Le but principal derrière les presets est que nous pouvons définir des paramètres par défaut pour la section quand elle est incluse sur une page, mais pour nos besoins, nous voulons juste répondre à l'exigence afin que nous puissions réellement l'utiliser sur notre page d'accueil. Je vais me débarrasser de l'objet de paramètres, nous avons seulement vraiment besoin de catégorie et de nom pour celui-ci, et nous manquons maintenant le crochet bouclé fin je crois, et nous manquons également la balise de tableau final. Ici, dans la catégorie, je vais laisser cela en tant que contenu personnalisé, et je vais nommer cette collection en vedette, et vous verrez où ce nom apparaît plus tard. Très bien, maintenant que nous avons créé cette section et qu'elle a un préréglage, nous pouvons maintenant l'inclure dans notre contenu pour l'index, donc nous devons créer cette balise, je vais aller à la page index.liquid, remplacer tous ces avec cet objet spécial, content_for_index, sauvegardez cela, et maintenant, lorsque nous allons sur notre page d'accueil dans le personnalisateur, peut-être besoin de rafraîchir la page. Nous pouvons maintenant voir ce bouton pour ajouter une section, intéressant, cliquez dessus et nous allons voir ici notre catégorie et notre nom de notre section apparaît dans ce petit menu, donc si nous revenons à la collection en vedette, c'est ce que nous avons écrit ici, la catégorie et le nom apparaît ici, donc maintenant nous pouvons cliquer dessus, l'afficher en avant-première , et ensuite nous pouvons l'ajouter directement. Encore une fois, nous n'avons pas de paramètres pour cela mais nous allons configurer certains paramètres dans la prochaine vidéo, mais maintenant nous avons cette collection de fonctionnalités et nous pouvons ajouter plusieurs d'entre eux, moment nous avons codé la collection que nous voulons utiliser, mais nous pouvons aussi les réorganiser, désactiver et allumer, et c'est vraiment convivial pour la personne qui va travailler avec le thème et ils n'ont pas à toucher le code, donc c'est pourquoi sont super puissants, je vais appuyer sur « Enregistrer » sur cela donc il est certainement inclus sur la page, qui devrait finir cette petite introduction aux sections. Nous allons supprimer tout ça pour l'instant et parlons d'extraits. Un extrait comme je l'ai déjà dit, est un morceau de code réutilisable, quelque chose qui est commun dans le développement de thème Shopify à réutiliser plusieurs fois est un produit qui est affiché dans une liste de produits, donc nous l'avons fait deux fois dans notre thème jusqu'à présent, nous pouvons aller dans cette collection en vedette ici, et à l'intérieur de cette boucle, nous pouvons en faire un extrait, et de cette façon quand nous sommes en boucle à travers les produits, peut-être pas dans une collection vedette peut-être ailleurs et nous veulent utiliser le même code, nous pouvons simplement inclure cet extrait sans avoir à écrire cela à chaque fois, donc je vais couper cela pour aller dans mon presse-papiers, et je vais écrire la balise pour inclure un extrait, ça va être product-item, je suppose que je peux l'appeler, et je vais appuyer sur « Enregistrer », maintenant je vais aller dans des extraits et créer product-item, nous allons coller ce code directement dans, et maintenant partout où cet extrait est inclus, il inclura ce code ici. Maintenant, une chose importante à noter avec des extraits et des sections, c' est qu'il a toujours accès aux objets du produit, et il aura également accès aux paramètres dans le schéma ici, sorte que l'imbrication fonctionne dans Shopify est qu'il se nourrit de jusqu'aux modèles, jusqu'aux sections, jusqu'aux extraits, mais les extraits peuvent être inclus n'importe où. Ce que je veux dire par là, c'est que si je mets une variable ici dans theme.liquid, je pourrais y accéder n'importe où dans mon thème qui utilise cette mise en page. Si je suis dans un modèle pour la page par exemple, et que j'ai inclus une section que j'avais l'intention d'inclure sur les pages uniquement, je pourrais référencer les objets de page spécifiquement dans cette section, et la même chose vaut pour les extraits, donc pour cet extrait, nous savons que nous pouvons utiliser l'objet produit n'importe où où nous y avons accès, donc si nous incluons un article de produit ici dans la boucle où nous avons donné accès à un produit spécifique, alors il va entrer directement dans le , ok, donc si vous incluez cet extrait sur un endroit qui n'a pas objet produit spécifié, il se cassera, cela ne fonctionnera pas, mais tant que nous pouvons compter sur cet extrait utilisé dans un endroit où il y a un objet produit, cela fonctionnera bien, tout comme sur les sections auxquelles nous pouvons faire confiance qui auront accès à une collection si elle est sur le modèle de collection, ou nous pouvons faire ce que nous avons fait ici et assigner la collection spécifiquement, donc c'est à peu près pour les extraits et un bonne introduction aux sections aussi, espérons-le. Je veux juste parler de quelques autres choses pour tracer la programmation thématique Shopify, et c'est, nous avons parlé de CSS et de JavaScript dans la vidéo précédente, mais nous allons juste montrer comment nous ajouterions du JavaScript à notre application, Je peux juste lancer une alerte ennuyeux ici, « Vous avez chargé la page », appuyez sur « Enregistrer » sur cela, maintenant n'importe quelle page que je vais dans mon thème, il va charger ce JavaScript, évidemment pas le meilleur exemple, mais vous obtenez le point, ce JavaScript est chargé dans chaque page, juste que je démo que rapidement, et la même chose pour CSS, si vous voulez qu'une règle s'applique partout dans votre thème, vous pouvez le mettre ici, donc Peut-être que nous voulons que la taille de la police de tout, la taille de la police du corps soit quelque chose de ridicule , disons 40 pixels, c'est assez ridicule si vous me demandez, rafraîchissez la page, rien ne s'est passé, voyons ce qui se passe ici dans notre console, nous n'avons pas réellement accès à notre application.css.scss, regardons cela, je pense que c'est parce que le mauvais nom a été défini, ressemble à un bug avec le nouveau thème, nous allons aller dans theme.liquid et changer l'ordre ici, donc c'est censé être css.scss, sauvegardez cela, actualisez la page, maintenant vous verrez toute notre taille de police devient beaucoup plus grande, évidemment c'est un exemple assez stupide donc je vais supprimer ce style. Nous avons parlé de mises , de modèles , de sections , d'extraits, puis de ressources. Config dont nous parlerons dans la prochaine vidéo lorsque nous plongerons plus profondément dans JSON, mais les paramètres régionaux, juste pour mentionner brièvement ce que c'est, comme vous pouvez le voir le titre de ce fichier est en.default.json, et ce que ce fichier fait est de contenir un langage spécifique pour les utilisateurs anglais, nous pouvons créer d'autres paramètres régionaux, puis nous pouvons appeler le bon mot que nous devons utiliser dans une instance spécifique. Nous pouvons en fait éditer cela dans une interface utilisateur aussi, nous pouvons aller ici et cliquer sur « Modifier les langues », et nous verrons les mêmes options non pas sous forme JSON mais dans une interface utilisateur, voir ici, si je devais réellement aller et changer cela, peut-être que je dis, « Page non trouvée », appuyez sur « Enregistrer » sur cela, et je vais ici remarquer comment cela va changer, ce sont les données réelles de ce que nous avons défini dans cette interface utilisateur, là nous allons, page non trouvée, et cela fonctionne dans les deux sens, si je devais l'éditer ici dans le fichier de données, appuyez sur « Enregistrer » dessus, revenez à l'interface utilisateur, actualisez cela, vous verrez que c'est la valeur que nous venons de changer. Maintenant, pourquoi cela est important pour nous de comprendre, c'est quand nous voyons ces attributs ou ces objets être appelés dans le code de thème réel, donc celui-ci est pour la page 404, et il définit la langue qui sera sur la page 404, allons donc à la page 404, et nous pouvons voir ici nous avons ces balises spéciales qui sont filtrées avec ce filtre t, donc si je supprime juste cela, que pensez-vous qu'il va se passer ? Jetons un coup d'oeil, généralement la page 404 apparaît si vous tapez une adresse qui n'existe pas donc je vais simplement taper ha ha ha ha ha ha, et maintenant au lieu de voir la version traduite de cela, vous verrez juste le code, donc comme je dit, si vous mettez juste dans une chaîne dans une balise de sortie avec des guillemets, c'est la même chose est juste de mettre littéralement cela sur la page, donc nous avons besoin de cette balise t et ce que cela va faire est de dire, « Hé, regardez cet objet et puis obtenez le valeur de celui-ci et le mettre sur l'écran », donc si nous voyons général.404.title, nous allons ici, nous commençons par général, puis nous creusons dans l'objet 404, puis nous obtenons la propriété du titre, donc maintenant si je actualiser la page maintenant que nous avons remplacé ou remis dans cette balise t, vous pouvez voir que cette valeur passe par. Ceci est important à noter lorsque vous passez par l'édition votre thème et que vous rencontrez une de ces variables de langue, peut-être que vous voulez créer la vôtre qui est totalement cool, vous venez de mettre à jour ce fichier JSON ici, mais il est important de noter que lorsque vous programmez des thèmes Shopify. Je pense que cela a été une leçon assez longue, quelques-unes d'entre elles vont probablement être de longues leçons, donc je vais y mettre fin. Dans la vidéo suivante, nous allons aller plus loin dans JSON, donc vous allez en apprendre plus sur comment cela fonctionne et comment travailler avec JSON dans la vidéo suivante, donc je vous verrai là-bas. 7. Schémas JSON: Dans cette leçon, nous allons tout apprendre sur JSON. JSON est un moyen populaire de représenter les données et les thèmes Shopify, la façon dont vous représentez toutes vos données et votre thème Shopify se fait par le biais de fichiers JSON. Nous avons vu dans la dernière vidéo, nous avons un fichier de langue ici, qui est stocké dans JSON. Nous pouvons également éditer cela à travers l'éditeur de langue thématique, que nous avons également vu dans la dernière vidéo. C' est assez basique. Nous avons accès aux clés et attributs de cet objet, et nous pouvons simplement éditer ceci directement par ici, ou nous pouvons l'éditer sur le fichier de données lui-même. Ce que je veux discuter plus en détail dans cette leçon est JSON Schemas. Si je clique dessus et que je vais dans settings_schema, nous pouvons voir le schéma pour l'ensemble de notre site Web. Maintenant, je sais que nous n'avons pas encore examiné cela, mais nous avons bien sûr examiné brièvement les schémas en ce qui concerne les sections individuelles. Ici, le schéma que nous voyons ici est très similaire à la façon dont il fonctionne ici dans notre Settings_schema.json. Si vous voulez en savoir plus sur JSON lui-même, signifie JavaScript Object Notation. C' est une façon de représenter des données qui ressemble à la façon dont vous représenteriez des données en JavaScript, mais ce n'est pas exactement la même chose. Certaines différences majeures comprennent la présence de guillemets doubles autour des noms de propriété. Mais si vous voulez en savoir plus sur JSON, une recherche Google rapide, c'est juste J-S-O-N, et vous avez un monde d'informations ouvertes sur JSON. C' est assez simple. Ce n'est pas une somme d'étudier tout un cours à moins que vous ne vouliez vraiment approfondir avec ça. Mais à nos fins, tout ce que nous devons comprendre dans schéma JSON, nous avons des tableaux comme nous le ferions en JavaScript, puis un objet est représenté par ces crochets bouclés. Donc, comme nous l'avons vu avec le fichier de langue, c'est l'objet global. Ensuite, à l'intérieur de cet objet, nous pouvons cibler l'objet général. Ensuite, lorsque nous sommes à l'intérieur de l'objet général, nous pouvons saisir l'objet « 404" et ensuite saisir des attributs ou des objets imbriqués à l'intérieur de celui-ci. Nous l'avons vu entrer dans notre production ici. Aller dans les paramètres régionaux, choisir l'objet général, entrer dans l'objet « 404" imbriqué et saisir le titre de cela. Très bien, donc c'est un peu sur JSON et la syntaxe derrière elle. Mais parlons plus des schémas et de la façon dont tout fonctionne dans Shopify. Nous avons vu le schéma en ce qui concerne des sections spécifiques dans les vidéos précédentes. Mais je veux vous montrer settings_schema.json. Si nous revenons à notre personnalisateur et que nous allons sur n'importe quelle page, vous voyez que nous avons des sections dans le premier onglet ici. Nous pouvons voir nos sections comme nous l'avons vu auparavant, et tous les schémas de ces sections génèrent ces entrées. Mais il y a aussi cet autre menu appelé paramètres de thème. Ici, nous pouvons placer des groupes de paramètres auxquels nous pouvons accéder tout au long de notre thème. Il y a cependant quelques limites. Une des caractéristiques d'un paramètres dans les sections est que nous pouvons avoir des blocs que nous verrons très bientôt dans les paramètres généraux du thème. On ne peut pas faire de blocs. C' est une limitation, mais sinon ils fonctionnent à peu près la même chose. Allons te montrer un exemple. Après cet objet, je vais créer un nouvel objet et lui donner un nom de, disons simplement, styles généraux. C' est comme comment vous définiriez une section aussi. Ensuite, comme nous le ferions dans un schéma de sections, nous définissons un tableau de paramètres. Dans ce tableau de paramètres, nous pouvons créer tous les types d'entrées que nous voulons. Pour cette vidéo, j'ai déjà chargé les deux zones de la documentation Shopify qui vous aideront à créer ces schémas JSON. Le premier est : @themes /development/sections. Le titre est des sections thématiques. Celui-ci est pratique pour apprendre comment structurer votre schéma. Vous avez les différentes balises que nous avons vues dans une vidéo précédente. Nous allons également en apprendre davantage sur les blocs ici aujourd'hui. Ici, dans la configuration des paramètres de thème, il est frustrant qu'ils le mettent dans une page séparée. Mais c'est la page où vous apprendrez sur tous les différents paramètres d'entrée, donc le texte, la zone de texte, le sélecteur d'image, la radio, sélectionnez la plage de case à cocher. Ce sont les basiques et ensuite ils en ont des avancés ici, je crois, oui. Nous pouvons créer des entrées pour la couleur, les polices, les collections, produits, les blogs, les pages, les liens , les listes, les URL, beaucoup de choses différentes. Si vous voulez voir s'il y a quelque chose que vous pouvez faire une entrée utilisateur, il y a des chances que ce soit ici. Pour revenir à ici, nous devons créer un cadre. Ce que je vais faire juste à des fins de démonstration est de créer un paramètre pour la couleur des liens. Disons juste. Je vais utiliser le sélecteur de couleurs. Copions simplement l'exemple. Je vais entrer ici et remplacer mon objet vide par l'objet de la documentation. Le type est déjà défini va être couleur. On a juste besoin de lui donner une carte d'identité. Je vais appeler cette couleur de lien, et l'étiquette est ce qui est montré à l'utilisateur. Je vais appeler ça la couleur du lien. J' utilise l'orthographe américaine juste pour être cohérente et la valeur par défaut, nous allons juste dire bleu. Celle-ci ici info nous permet de mettre un petit peu de texte supplémentaire. Je ne pense pas que ce soit nécessaire dans ce cas, mais juste pour vous montrer ce que cela fait quand vous en avez besoin, je vais écrire une description ici. Ceci est pour la couleur du lien. Si je garde ça, vous pouvez voir que nous avons une erreur. Le paramètre avec la couleur de lien par défaut doit être une couleur CSS. Nous ne pouvons pas utiliser le bleu, il doit être une valeur HEX, alors laissez-moi juste faire du noir. Essaie ça. Doit être une couleur CSS. On y va. Pas le meilleur à exécuter des codes hexadécimaux. D' habitude, je les regarde. D' accord, mais maintenant nous avons ce code hexadécimal qui représente le noir. Si nous allons dans notre customizer maintenant et actualisons la page tout ressemble à la même chose, mais nous pouvons y aller. Maintenant, nous avons cette section pour les styles généraux. Cliquez sur cela, et nous avons la couleur du lien. La valeur par défaut a été définie sur #000 et elle est remplie dans les autres zéros. On peut y aller, changer ça en bleu et cliquer sur « sauver ». Maintenant, comme nous l'avons fait avec les paramètres dans le schéma de section, cela ne va rien faire à moins que nous ne référentions réellement cette valeur. C' est à quoi sert, bien sûr, la carte d'identité. Allons de l'avant et faisons tous les liens dans notre thème en fonction de cette couleur de lien. Maintenant, où nous devrions mettre un style qui va être sur chaque page de notre thème est dans notre fichier CSS global. Mais ce que nous voulons faire est de référence liquide dans ce cas parce que nous allons avoir besoin d'accéder à l'objet de paramètres dans liquide pour accéder à cette valeur. Une caractéristique des thèmes Shopify que vous ne réalisez peut-être pas est que vous pouvez utiliser liquide sur vos fichiers CSS également. Ce que je vais faire est de changer ce nom de fichier et d'ajouter liquide à la fin de celui-ci. Alors, je vais frapper « Terminé ». Maintenant, ça va avoir une extension ridiculement longue, mais, oh, eh bien. Maintenant, ce que je vais faire est de cibler tous les liens en utilisant CSS, et de changer l'attribut de couleur en fonction de ce qui est défini ici. Comme je viens de le mentionner, la façon de le faire est à travers l'objet de paramètres globaux. Je peux créer une balise de sortie, accéder à mon objet de paramètres, puis je vais aller dans le paramètre avec l'ID de la couleur du lien. Je vais mettre la couleur du lien ici, et ensuite je vais la fermer avec un point-virgule. Maintenant, nous pourrions avoir à changer le nom de ce thème intérieur. Liquide, mais allons-y jeter un coup d'oeil et voir si cela fonctionne maintenant. Je vais parler des DevTools. n'y a aucune erreur dans la console. Allons à l'endroit où nous apportons le lien. Si j'ouvre le fichier CSS, ouvrez dans un nouvel onglet, vous verrez que nous avons notre CSS, mais au lieu de la balise liquide, qui se souvient obtient tout généré du côté serveur, nous avons la sortie réelle. Tout comme nous calculons le liquide sur le backend avec tout cela, et il crache juste HTML et CSS, nous avons la même chose qui se passe ici. On peut mettre un liquide à la fin de ça, puis faire des achats pour mettre en pause n'importe quel liquide ici. Puis au moment où il arrive à l'extrémité frontale, comme nous l'avons vu, c'est juste un fichier css.scss. n'y a pas d'extension liquide, et il calcule tout le liquide et met dans la valeur réelle. Très cool. Nous pouvons donc affecter par programme notre feuille de style. Je vais revenir dans le personnalisateur ici et voyons si nous pouvons faire changer nos balises de lien. Je vais rafraîchir la page pour m'assurer que tout est à jour. Allez dans les styles généraux, et changez cela en quelque chose de vraiment évident, comme le rouge. Je vais cliquer sur « Enregistrer », et pour le moment il ne se met pas à jour. Jetons un coup d'oeil à l'intérieur du thème, oh, attends. On y va. Maintenant, nous pouvons voir que par défaut, tous les liens sont rouges, parce que nous avons juste mis cela ici dans nos paramètres généraux. Si nous actualisons le personnalisateur, nous devrions obtenir le même résultat ici aussi. Peut-être que c'est un peu en cache. Je ne sais pas pourquoi il n'affecte pas dans le personnalisateur, mais l'affecte certainement sur l'extrémité frontale ici. C' est un excellent exemple de création de paramètres de thème et de le mettre ici. Ceci est pour tout ce qui est général, les couleurs de lien, les couleurs de titre , les polices, tout ce que vous voulez affecter l'ensemble du thème irait dans les paramètres du thème. Mais le plus souvent, vous allez définir des paramètres dans votre section. Je vais juste y retourner et changer ça parce que ça n'a pas l'air trop beau d'être rouge. Appuyez sur « Enregistrer » dessus, et allez ici et actualisez la page. On y va. Maintenant, nous avons la couleur que nous avons définie. Cool. D'accord. Maintenant, allons dans l'une de nos sections et regardons la section de la collection fonctionnelled-collection. La première chose que nous voulons faire est de permettre à l'utilisateur de choisir réellement la collection qui est présentée plutôt que de la coder en dur. Je vais aller dans mes réglages ici, ouvrir ça. Comme toujours, je vais entrer et vérifier quelles entrées j'ai disponibles. Rappelez-vous que nous en avons vu un pour la collecte. Je vais cliquer dessus. Ici, nous avons un exemple que je peux simplement copier mot pour mot. Je fais ça vite, parce que je ne veux pas me mêler de la théorie. Mais si vous voulez lire ce que nous faisons ici, tout est sur la documentation. Retournez, remplacez notre objet vide ici par les attributs que nous devons éditer. Le type est déjà défini pour nous. Je vais changer l'ID en collection parce que c'est juste le plus logique. Appelez la collection d'étiquettes, et nous n'avons vraiment pas besoin d'une ligne d'information ici, parce que c'est assez simple. Ensuite, ici, nous pouvons définir la collection sur, au lieu de featured-collection, nous pouvons réellement référencer les paramètres. Donc, je vais attraper cet objet de section, aller dans ses paramètres et trouver la collection. Alors je vais sauver. Maintenant, cela va le casser parce que nous n'avons pas un jeu par défaut qui alors nous pouvons facilement aller et le mettre à jour. Si je vais dans la page d'accueil où est cette section de collection en vedette, il dit pas de correspondances parce que nous n'avons pas réellement inséré quoi que ce soit. Maintenant, le contenu ne s'affiche pas. Jetons un coup d'oeil. Qu'avons-nous fait de mal ici ? Tout va bien. Peut-être que nous avons oublié de mettre à jour ou de rafraîchir notre personnaliseur. Faisons ça maintenant. Nous ne devrions toujours pas obtenir d'allumettes parce que nous n'avons pas encore mis de collection. Mais maintenant, nous pouvons voir que la collection est maintenant une entrée. Maintenant, nous pouvons, en tant qu'utilisateur, avoir cette belle interface utilisateur pour sélectionner une collection que nous voulons apporter ici. Ensuite, lorsque nous le sélectionnons, il devrait être utilisé par notre section. Donc, je vais cliquer sur « Enregistrer » et on a toujours un problème. Laisse-moi aller vérifier si c'est aussi une erreur. Pas d'allumettes. Alors revenons en arrière, jetons un coup d'oeil. Ce que je pense que nous rencontrons ici est un problème que je trouve avec les thèmes Shopify, où l'appel d'un objet de ressource nous donne son nom, mais pas l'objet lui-même. Juste pour confirmer cela, je vais créer une balise de sortie et voir si nous obtenons juste le nom de la collection si je mets notre collection. Je soupçonne que ce sera certainement le cas. Si je rafraîchis la page, vous pouvez voir le handle de la collection apparaît. Si nous accédons réellement à l'objet de la collection, nous obtiendrions un résultat différent. C' est une chose frustrante au sein de Shopify. Vous penseriez que si nous lions une collection ici et ensuite nous la codons, nous obtiendrions l'objet de collection, mais au lieu de cela, nous obtenons le handle de collection. La façon dont nous pouvons contourner cela est en utilisant les collections globales. Je vais aller « collections » et puis je peux utiliser cette valeur dynamique comme poignée. Peut-être que ça a l'air un peu compliqué, mais croyez-moi, ce n'est pas aussi compliqué que vous pourriez le penser. C' est essentiellement la même chose que de faire une collection de fonctionnalités, qui est exactement ce que nous avions avant. Nous venons de remplacer cette poignée par la poignée que nous recevons de l'utilisateur en bas. Je vais cliquer sur « Enregistrer » et voir si nous obtenons un résultat différent. Maintenant, vous pouvez voir que nous obtenons réellement l'objet de collection et nous sommes en mesure de parcourir les produits dans cet objet de collection. Maintenant, je suis vraiment content que nous soyons confrontés à ce problème parce que c'est quelque chose qui n'est pas particulièrement évident dans la programmation thématique Shopify, et c'est quelque chose qui me fait monter un peu aussi. Mais par expérience, je savais que parfois vous attendez un objet mais obtenez autre chose dans Shopify. Souviens-toi quand on a sorti ça avant d'avoir la poignée de collecte. Allons maintenant sortir la collection et voir ce que nous obtenons à la place. C' est ce que nous nous attendions à obtenir quand nous avons sorti cet objet ou ce que nous pensions être un objet. Si nous revenons en arrière et actualisons la page, nous pouvons voir apparaître des mots appelés CollectionDrop. Maintenant, c'est une terminologie spéciale dans le liquide, qui dit fondamentalement que c'est l'objet de la collection. Donc, si c'était un objet vide, ça dirait une goutte vide. S' il s'agissait d'un objet produit, cela indiquerait la chute du produit. Malheureusement, nous ne pouvons pas sortir l'objet entier comme nous le ferions peut-être en JavaScript. Il nous dit juste que c'est un objet de collection. Donc maintenant, nous savons parce qu'avant, rappelez-vous que nous avons pris la collection ici à partir de nos paramètres de section et nous avons sorti cela aussi. Si je les sépare avec une balise de rupture, vous pouvez voir que le premier est le handle de la collection et le second est l'objet de la collection réelle. Ok, je suis probablement allé trop loin sur une tangente là-bas, mais quelque chose qui vous rend vraiment dans la programmation de thème Shopify et quelque chose que j'ai appris à la dure est quand vous sélectionnez des ressources dans votre personnalisateur, parfois vous obtenez juste le handle et non l'objet réel. À ce stade, vous devez réellement utiliser un global, référencer le handle, puis le retirer de l'objet global réel. C' est ce que nous avons fait ici, et nous l'avons fait fonctionner. Donc, maintenant, l'utilisateur peut sélectionner quelle collection est affichée dans cette section de collection en vedette. D' accord. Si je rafraîchis la page ici, nous devrions obtenir le même résultat. Oui. Donc, je pourrais ajouter n'importe quel type d'autres paramètres ici. Je pourrais montrer le prix de vente, montrer où il est vendu sur pas, montrer le vendeur. Fondamentalement personnaliser à peu près n'importe quoi sur cette section pour ces paramètres de section. C' est ce qu'on fait ici. D' accord. Maintenant, la dernière chose à couvrir avec des schémas est la question de savoir où les données sont réellement stockées ? Rappelez-vous que j'ai dit que toutes les données dans Shopify sont stockées dans des thèmes Shopify spécifiquement sont stockées au format JSO N. Alors où trouve-t-on ça ? Eh bien, toutes les données de votre thème Shopify sont stockées dans settings_data.json, peu importe d'où elles viennent, settings_schema, ou elles proviennent d'une section spécifique. Donc, ici, nous avons des schémas, et chacun de ceux-ci. La valeur réelle qui est stockée, tout va ici. Ainsi, vous pouvez voir cet objet actuel en haut, et dans notre objet actuel, nous avons la couleur du lien stockée. D' accord. Donc si je devais entrer, changez cette couleur de lien à nouveau. D'accord. Je veux que vous remarquiez que cette valeur ici est la même que cette valeur là. Maintenant, si je le change à nouveau en rouge, je pense que c'est une nuance de rouge légèrement différente, et nous actualisons ce fichier de données. Je veux que vous regardiez ce qui arrive au fichier de données. Comme vous pouvez le voir, la valeur de la couleur du lien a changé dans le fichier de données, et tout comme nous l'avons fait dans le fichier de langue, nous pouvons réellement changer cette valeur et elle changera également dans l'interface utilisateur. Il s'agit des données dorsales qui sont liées à l'interface utilisateur. Donc, cela va le changer dans le personnalisateur et changer la valeur partout où il fait froid dans le thème. Donc, si vous allez ici, la couleur du lien est de retour au noir parce que je l'ai changé dans ces données. Maintenant, c'est important car chaque fois que vous migrez des thèmes, copiez des thèmes ou essayez de fusionner deux thèmes ensemble, vous devez prendre soin de ce fichier de données. Je ne vais pas trop parler de la mise en scène parce que j' ai une vidéo sur YouTube à ce sujet. Il suffit de rechercher le développement du thème Shopify sur YouTube et j'espère que vous trouverez ma chaîne. Si je fais mon référencement, c'est ça. Mais c'est quelque chose à savoir avec votre fichier de données. Tout est stocké ici, alors soyez très prudent avec le fichier de données. Essayez d'éviter de toucher cela. Mais si vous avez besoin de fusionner des données de deux thèmes, c'est ainsi que vous le feriez. Très bien, avec cette note de côté hors du chemin, je veux attirer votre attention sur quelques autres choses dans ce document settings_json, et c'est que nous avons l'objet de cette section juste ici. Maintenant, vous pouvez voir toutes les sections que nous avons. Nous avons en-tête, modèle de collection, pied de page et celui-ci est référencé par son ID. Je ne sais pas pourquoi il est référencé par son ID au lieu de son nom, mais peu importe, nous avons une collection en vedette ici, et vous pouvez voir dans nos paramètres, nous avons une valeur clé de la collection avec le handle de collection en vedette. Donc, si je vais dans et changer cela à un handle différent, cela mettrait à jour dans la sélection que j'ai ici pour ma collection vedette. Très bien, encore une fois, c'est juste une belle interface utilisateur pour changer ce qui est écrit ici. L' autre chose que je veux que vous remarquiez est le contenu du tableau d'index. Il prend tous les ID des sections qui sont en cours d'utilisation et le met ici. Donc, si je supprime juste cet ID et appuie sur « Enregistrer ». Maintenant, lorsque nous allons à notre « Page d'accueil », cette section que l'ID référencé est maintenant absente de notre page d'accueil. D' accord. Mais on peut toujours le rajouter. Ajoutez la collection en vedette. Choisissez une collection que nous voulons mettre en vedette. Je viens d'appeler ma collection en vedette. Enregistrez cela à nouveau, et si nous actualisons le fichier de données, vous verrez que ce fichier de données dans le contenu du tableau d'index est de retour là. D' accord. Par conséquent, settings_data.json stocke toutes les données générées à partir de tous vos schémas au même endroit. Il y a bien sûr, votre photo locale, mais tout cela est juste pour les locales. C' est séparé des schémas, d'accord ? Tous les paramètres que vous avez configurés dans vos settings_schema.json et les schémas de vos sections individuelles. Toutes ces sélections, la sélection elle-même va dans ce fichier ici, settings_data.json, et c'est essentiellement pour les schémas JSON. Vous avez vu comment ajouter un paramètre à vos paramètres généraux de thème. Nous avons donc vu cela ici, et nous avons vu un autre exemple d'insertion d'un paramètre particulier dans une section juste ici en permettant à l'utilisateur de choisir quelle collection peut être présentée. D' accord ? Aussi, juste pour résumer, nous avons appris un peu de gotcha dans Shopify Liquid. Si vous sélectionnez une ressource comme une collection, la valeur de l'objet sera juste un handle, pas l'objet lui-même. Nous avons donc encore besoin de chercher cela en utilisant un objet global comme des collections, comme tous les produits, tous les objets globaux que vous pouvez trouver ici dans le billet de blog. Voyez comment, si je fais défiler vers le bas jusqu'à « Collections ». Celui-ci vous montre simplement comment vous pouvez faire une boucle à travers les collections, mais nous accédons à une collection particulière via son handle. Vous pouvez faire la même chose avec l'ancien objet produits. Vous pouvez accéder à un produit via sa poignée spécifique, puis cela devient l'objet produit. D' accord. Donc, nous devrions être assez clairs sur les schémas JSON. Rappelez-vous, vous ne saurez probablement pas par cœur quels paramètres mettre ici. Assurez-vous donc de référencer la documentation. Cette page a tous les différents paramètres d'entrée que vous pouvez y mettre. Sur cette page, sections de thème, vous pouvez en apprendre davantage sur des éléments tels que les préréglages et les blocs. Blocks est quelque chose que nous allons apprendre dans la prochaine vidéo où nous créons réellement notre propre section. Donc j'ai hâte de voir cette vidéo. Je te verrai dans la prochaine. 8. Programmer des sections personnalisées: Très bien, dans cette leçon, nous allons rassembler tout ce que nous avons appris jusqu'à présent sur Shopify Liquid et JSON Schemas pour nous entraîner à créer notre propre section. Ce que je vais faire est de créer une section de galerie, qui sera une section que nous pouvons inclure sur la page d'accueil pour le contenu, pour l'index ou sur une page spécifique et il montrera juste une galerie d' images que l'utilisateur dans le personnalisateur spécifie. Ce que je vais faire, diriger les sections, ajouter une nouvelle section, et je vais l'appeler galerie. Comme d'habitude, Shopify nous donne un schéma et nous avons juste besoin de changer le nom de la section en galerie. Appuyez sur « Enregistrer » dessus. Je vais juste mettre en place une div avec une classe de galerie et voilà. Maintenant, comment cette galerie va fonctionner est, je vais permettre à l'utilisateur de spécifier le nombre de colonnes qu'il veut par ligne, puis aussi la hauteur de l'image, puis je vais leur permettre insérer des blocs qui sont va être les images que nous allons inclure. passant à la documentation et en regardant la section sur les blocs dans le document sur les sections thématiques, faisons défiler à nouveau vers le bas pour les blocs. Vous pouvez voir ici que nous pouvons mettre en blocs qui sont des conteneurs de paramètres et de contenu, qui peuvent être ajoutés, supprimés et réorganisés avec intersection, et c'est idéal pour ce que nous faisons ici. Nous voulons qu'ils puissent ajouter autant d'images qu'ils le souhaitent et les réorganiser, et nous avons juste besoin des mêmes paramètres pour chacun. Je vais sauter le tableau de paramètres pour l'instant et créer un tableau de blocs, et dans ce tableau de blocs, je vais ouvrir un bloc. Maintenant, pour un bloc, ce dont nous avons besoin est un type et un nom, comme il est dit ici, un bloc doit avoir un nom et un type. Le type d'un bloc peut être n'importe quelle valeur définie par le développeur du thème. Donc le type n'est pas quelque chose de spécifique dans Shopify, c'est juste quelque chose que nous nous sommes fixés. Je vais faire le type et l'image, et vous verrez plus tard, nous pouvons ajouter différents types, puis vérifier le type dans notre section. Je vais lui donner un nom et l'appeler bloc image. Ce sera l'étiquette qui sera affichée à l'utilisateur. Maintenant, je crois que nous pouvons simplement créer un tableau de paramètres comme nous le ferions sur l'objet parent ici. Je vais ajouter un tableau de paramètres, ouvrir celui-ci et commencer à l'intérieur avec le premier objet, qui va être une entrée d'image. Pour cela, nous allons échanger sur cette partie de la documentation appelée configuration des paramètres de thème et je vais chercher l'image. Le type de paramètre d'entrée pour une image est le sélecteur de soulignement d'image et nous pouvons simplement copier la valeur de réglage ici. Ce sera le sélecteur d'images, nous avons juste besoin d'un type, ID et de l'étiquette. Pour revenir à notre code ici, en le collant, nous allons changer l'ID en image, et nous allons juste mettre l'image ici, très basique. Voilà donc les paramètres que nous aurons pour chaque bloc. Si j'appuie sur « Enregistrer », voyons s'il y a des erreurs, non, il n'y en a pas. Ce que je peux faire maintenant, c'est que je peux créer une boucle à travers tous les blocs dans la section OWL. Je vais créer cette boucle et je vais dire, « for block in section.blocks », puis je vais entrer dans la boucle. Nous allons formater ceci, rendre ce look un peu plus agréable dans un peu, mais pour l'instant nous allons juste sortir ce contenu dans la page. Maintenant, nous pouvons référencer le bloc directement et je vais juste créer une balise image avec l'image qui est définie, donc block.settings.image. Rappelez-vous comment nous accédons à différents attributs est simplement naviguer dans cet objet JSON. Donc, en haut ici, nous trouvons des blocs sur l'objet de section et maintenant nous sommes en boucle à travers un bloc individuel et ensuite nous avons accès à ce qui se trouve ici, l'objet de paramètres, et puis dans cela, nous pouvons accéder à la en utilisant son ID. C' est ce qui se passe ici. Si je sors juste ceci, ce que je vais obtenir est juste l'adresse de l'image. Avant de pouvoir réellement le regarder, cependant, nous devons l'inclure quelque part et ce que je vais faire pour cela est créer un modèle alternatif pour le modèle de page, puis nous allons utiliser le modèle ultime pour afficher cette section. Heureusement, il y a quelques étapes à franchir. Nous devons d'abord aller dans notre dossier de modèles et ajouter un autre modèle de page. Je vais juste appeler cette galerie, créer le modèle. Une chose qui est frustrante avec Shopify est que nous allons devoir créer cela sur le thème actuel aussi. Donc, si vous travaillez actuellement sur le thème que vous prévisualisez et que vous ne vivez pas réellement sur votre site Web, vous devez créer le même modèle sur votre thème actuel, sinon vous ne pourrez pas le sélectionner. Mais pour l'instant, ce que je vais faire est d'inclure cette section ici. Donc, je vais supprimer tout cela et dans ce modèle de page personnalisé, appelez simplement la section de la galerie, et je vais appuyer sur « Enregistrer ». Maintenant, comme je l'ai dit, pour que nous puissions le sélectionner dans la liste, je vais devoir aller dans le thème live actuel, qui est débuts et créer le même modèle que j'ai peut-être déjà fait ici. Il existe déjà un modèle avec la page de nom .gallery. Si cela n'existait pas, je peux simplement supprimer celui-ci, aller dans ajouter une page, exactement comme nous l'avons fait auparavant pour l'autre thème, et ce que nous allons faire va insérer le même contenu que le modèle de page standard. Donc, vous n'avez pas besoin de vous inquiéter si vous changez cela dans la page, il va toujours afficher le même modèle de page sur ce thème, si cela a du sens. Maintenant, si je vais dans les pages et j'ajoute une page, appelle galerie, je peux utiliser ce modèle spécifique que nous venons de créer en le sélectionnant ici. Si je sauvegarde la page, maintenant nous pouvons regarder quelle est l'adresse de celle-ci. Ça va être @pages /gallery. Revenons donc dans le code. Comme nous l'avons vu, nous avons déjà inclus la section sur ce modèle de rechange. Maintenant, nous avons juste besoin d'aller à la page que nous venons de mettre en place. Galerie de pages. instant, nous n'avons pas ajouté de contenu, donc rien ne va apparaître. Ce que nous voulons faire est d'ouvrir cette page dans le personnalisateur. Nous allons d'abord devoir actualiser parce que nous avons apporté modifications à nos codes de thème depuis que nous avons ouvert cette page et maintenant nous devrions être en mesure de voir que nous pouvons modifier le modèle de galerie. choisissant ça. Maintenant, nous pouvons voir la section pour la Galerie. Juste prendre un peu plus lent, nous sommes dans la page pour la galerie et comme il utilise ce modèle alternatif spécifique, il va lier directement à cette section, puis dans cette page maintenant pour le personnalisateur, nous pouvons voir la section qui s'affiche ici. Donc, dans la galerie, vous pouvez maintenant voir qu'il y aura cette section de contenu et vous pouvez ajouter un bloc d'image. Tout cela provient des paramètres que nous avons configurés dans notre section galerie. Donc on n'a plus besoin de ça, on a juste besoin de cette étiquette. Nous pouvons commencer à travailler directement à partir de la section galerie juste ici. Mais rappelez-vous, nous l'avons appelé un bloc d'image et donc ici, dans le personnalisateur, c'est ajouter un bloc d'image. S' il y a plusieurs types, nous serions en mesure de cliquer dessus et cela nous donne différentes options, mais nous avons juste la seule option pour l'instant. Comme vous pouvez le voir, il y a notre paramètre d'image que nous avons ici. Nous pouvons maintenant ajouter une image. Nous avons des hommes sur le devant et nous pouvons ajouter une autre image, bloquer, le gars avec le costume et vous pouvez voir ce qui se passe quand je fais ça. Au lieu de l'image réelle, nous avons une section URL. Ce qui se passe ici, c'est que l'image sélectionnée ne va pas vraiment vous donner une balise image. Donc, pour obtenir la balise image, ce que je vais faire est d'utiliser le filtre de balise image juste ici. Maintenant, nous pouvons avoir besoin de spécifier un chemin distinct aussi, regardons, donc voilà, ils apparaissent et parce que nous n'avons pas ajouté de paramètre, ils apparaissent assez petits, cela devrait être 100 par 100. Si nous avons un regard, donc la largeur est un 100, puis la hauteur est relative à la largeur en termes de son rapport d'aspect. Il va falloir les rendre un peu plus grands. Je vais ajouter un paramètre pour cette balise d'image de, disons 500x. Alors maintenant, ils vont être cinq fois plus grands, cinq fois plus gros, plutôt. J' ai fait une erreur ici et je vois que le paramètre, il représente réellement la balise alt. Si vous voulez mettre en valeur alt, c'est là que vous le mettez. Ce que je dois faire, c'est enchaîner un autre filtre ici. Je vais filtrer ceci pour l'URL de l'image comme avant et c'est là que je peux spécifier la dimension de l'image. Je vais enregistrer ça, rafraîchir la page, et maintenant l'image est cinq fois plus grande. Ce que nous avons ici, c'est que nous avons, si je rafraîchis la page dans le personnalisateur, nous avons cette galerie. Nous pouvons donc ajouter un autre bloc d'image. Si l'image n'est pas encore définie, Shopify insère juste un porte-place, ce qui n'est pas très beau, mais cela nous montre qu'il y a au moins supposé y avoir une image et je peux ajouter une autre image, et ce qui va se passer, c'est qu'ils auront tous 500 largeur et qu'ils vont juste s' empiler à travers l'espace horizontal et vertical de notre page. Si je rafraîchis la page, peut-être que c'est assez bon pour votre galerie, mais je veux rendre cette façon plus réactive. Ce que je vais faire, c'est que je vais donner à cela une largeur réactive et créer une hauteur que l'utilisateur peut changer. Ce que je vais faire est ici, au lieu de simplement sortir une image, ce que je vais faire est de créer un enveloppement d'image et dans cette balise d'enveloppement d'image, je vais lui donner une image d'arrière-plan de l'image que nous avons définie ici. L' avantage de faire cela si vous n'êtes pas familier, est que nous pouvons contrôler la hauteur et la largeur de la div, puis l'image s'adaptera à cela et elle sera recadrée en fonction des dimensions de cette balise div ici. Ce que je vais faire est d'ajouter un attribut de style et d'avoir URL d'image de fond et je n'ai plus besoin de la balise image, et je peux insérer ceci ici. Maintenant, nous devons lui donner quelques dimensions. Juste pour lui donner quelque chose tout de suite, je vais lui donner une largeur de 500 pixels et une hauteur de 500 pixels, puis je vais lui donner un [inaudible], créer de l'espace ici. On y va. Ensuite, je vais lui donner une taille de fond de couverture. Sauve ça. Voyez ce qui se passe lorsque nous actualisons la page. Vous verrez maintenant, si nous avons un coup d'oeil, ne sont plus des balises d'image, sont en fait des divs, et c'est pourquoi ils sont empilés les uns sur les autres parce que ceux-ci sont définis par défaut pour afficher le bloc, comme vous pouvez le voir ici dans les valeurs calculées. Nous voulons qu'ils s'affichent les uns à côté de l'autre, donc inline-block. Maintenant, nous pouvons soit le mettre en place dans notre fichier CSS principal ou nous pouvons le faire dans la section réelle en refactorisant ceci pour style, pas feuille de style et en mettant nos styles ici. Maintenant, dans ce cas, je vais le mettre dans la section réelle et il y a une bonne raison à cela, parce que lorsque nous utilisons ces balises de style, nous pouvons voir les choses mises à jour en direct dans le personnalisateur. Nous pourrions toujours simplement jeter des styles en utilisant HTML. Mais si nous faisons cela, s'il y a un style généré par l'utilisateur ici, comme quelque chose qu'ils ont défini dans le personnalisateur et nous avons changé cela. Ça ne viendra pas tout de suite. Donc, en utilisant ces étiquettes liquides, nous pouvons réellement stocker nos styles dans la section et cela va le rendre plus facile à trouver. Mais aussi, nous allons obtenir la possibilité de voir ces mises à jour en direct si nous utilisons personnaliser une donnée ici. Donc, je vais vous montrer ce que je veux dire par là en une seconde, mais d'abord je vais créer une règle de style ici pour le rap image et ce que je vais faire est définir tous les enveloppements d'image pour afficher le bloc en ligne et si nous allons sur notre page, même le personnalisateur ou ici et actualiser la page. Nous verrons qu'ils sont maintenant empilés l'un à côté de l'autre. Si nous allons par ici, nous verrons que nous avons un bloc d'affichage en ligne. C' est un peu mieux parce que si nous redimensionnons la fenêtre, donc je vais déplacer cela sur le côté et voir comment la fenêtre se redimensionne. Il va le faire tomber à la nouvelle ligne s'il n'y a pas de place. Mais pour le rendre un peu plus réactif, ce que je vais faire, c'est que je vais définir la largeur à une valeur relative. En revenant ici, nous allons mettre le rap image à 33 pour cent de largeur. De cette façon, on en aura trois d'affilée. Donc, je vais supprimer cette valeur ici et effectivement déplacer ces valeurs dans la classe juste pour la rendre un peu plus propre. Ici, ils vont être les mêmes pour chaque image rap, donc nous allons mettre ceci ici dans la ligne de style réel ici. Rafraîchissez la page et maintenant vous pouvez voir nos images sont réactives. Donc encore une fois, si je devais redimensionner, vous pouvez voir qu'il y aura toujours trois sur une rangée et ils vont redimensionner afin d'atteindre cela sur n'importe quelle taille d'écran. Maintenant, pour l'utilisateur, il peut vouloir choisir le nombre d'images qu'il est en place pour une rangée et il peut également vouloir être en mesure de changer la hauteur des images, car, comme je l' ai dit, avec les images réactives, elles recadrent automatiquement. Comme nous l'avons vu avant, si je réduit ça, ils seront toujours trois sur chaque rangée, alors maintenant nous perdons des parties de l'image. Donc peut-être que nous voulons rendre ça moins grand si nous utilisons beaucoup d'images par rangée. De toute façon. Donc, je veux donner l'option à l'utilisateur pour être en mesure d' affecter cette valeur et aussi la capacité d'affecter cette valeur. Parce que cela va arriver à toute la grille, ce sera une configuration ici, pas dans un bloc spécifique. Le premier paramètre que je veux faire est que je vais avoir une sélection. Nous n'avons pas utilisé select auparavant. Alors allons dans les différents types d'entrée que nous avons à notre disposition et regardons select. Je vais prendre l'exemple comme point de départ et remplacer ces objets vides par l'exemple. Donc, nous avons le type de select, je vais définir ceci à, par ligne et il va montrer à l'utilisateur les produits, oh désolé, images par ligne, et puis pour nos options, nous n'avons pas besoin d'un groupe, nous juste besoin d'une valeur et d'une étiquette. Dans notre tableau d'options, je vais avoir trois valeurs différentes et ce sera les largeurs. S' ils en choisissent deux par rangée, ce sera 50 pour cent. Donc deux par rangée et s'ils en choisissent trois par rangée, ce sera 33 pour cent, trois par rangée. Nous devons dupliquer cela à travers, termine ce 44 par rangée, va être 25 pour cent. Faisons juste cinq par rangée aussi. Ajoutez une autre option et nous en ferons cinq par ligne. La valeur par défaut, il doit être l'un d'entre eux. Faisons les trois par défaut par ligne. Ça va être 33 pour cent et les infos dont nous n'avons pas vraiment besoin. Je vais appuyer sur « Enregistrer » ici et j'ai délibérément ajouté une erreur, ou j'ai délibérément laissé une erreur dans mon schéma JSON. Maintenant, malheureusement, dans Shopify dans leur éditeur de code et lorsque vous utilisez également le kit de thème, ils disent juste erreur JSON invalide et si vous avez un gros schéma, cela pourrait vous prendre une éternité pour comprendre quel est le problème. Donc je sais ce que j'ai fait de mal, mais peut-être que tu ne peux pas le choisir maintenant. Heureusement, parce que c'est juste un objet JSON, nous pouvons réellement le mettre à travers un JSONLinta et voir quel est le problème est.Donc, je veux juste vous montrer comment le faire en ce moment. Je sais que le problème ici, c'est qu'on a une virgule à la fin. N' oubliez pas que nous supprimons cette valeur. La dernière valeur ne peut pas avoir de virgule après, mais nous ne savons peut-être pas que donc une chose que nous pouvons faire est d'utiliser un JsonLinta en ligne, donc je viens de copier l'objet JSON entier et je vais aller sur un site Web appelé jsonlint.com je crois. Je vais coller dans notre objet JSON, peu importe qu'il représente des données Shopify. Tout cela fait est de prendre le format du JSON et de vérifier s'il est correctement formaté. Donc, ici, nous avons un message d'erreur beaucoup plus détaillé, c' est-à-dire que nous avons une erreur sur la ligne 24. Il s'attendait à une chaîne, il avait un support bouclé de fermeture. Donc, cela pourrait encore prendre un peu de déchiffrement pour comprendre quel est le problème ici. Mais au moins on a un numéro de ligne spécifique et on peut dire, oh, j'ai cette virgule ici. Donc, si je reviens, enlève cette virgule, appuie sur sauver, maintenant vous verrez que nous n'avons pas d'erreurs. Donc, la prochaine chose que je dois faire est en fait référencer cette valeur qui a été définie dans le personnalisateur ici. Donc, au lieu de 33 pour cent, je vais, comme nous l'avons fait plusieurs fois tout au long de cette classe, référencer l'objet de section, aller dans ses paramètres et saisir par ligne. Je vais appuyer sur sauver sur cela et revenons dans notre customizer et rafraîchir. Bon, donc maintenant je vais aller dans la section galerie et vous pouvez voir que nous avons maintenant une liste déroulante pour sélectionner le nombre d'images par ligne. Si je change cela à deux, cela ne fonctionne pas avec 50 malheureusement, mais si je change cela à quatre, vous pouvez voir cette mise à jour en direct. Malheureusement, il y a certaines marges qui influent sur le nombre de marges pouvant s'adapter par ligne, donc nous avons juste besoin de changer cela. Mais vous pouvez voir que c'est la mise à jour en direct. Donc, va frapper économiser sur cela, vous pouvez voir si nous regardons cela dans le navigateur, ceux-ci vont chacun être 50 pour cent. C' est un peu un problème avec inline block, mais si nous le réduisons de 0,5 pour cent, cela devrait contourner la question des marges et maintenant vous pouvez voir que nous avons une grille deux par deux. Donc je vais juste revenir dans notre code ici. Changez deux par rangée, donnez-lui un pourcentage de marge de manœuvre. La même chose ici, et la même chose ici. Cela devrait, j'espère, contourner cette question. Maintenant, si nous actualisons la page sur ces deux, faisons-le dans le personnalisateur afin que nous puissions réellement mettre à jour ceci en direct. Changez-le à trois par rangée, changez-le à deux par rangée, quatre par rangée et nous n'en avons pas cinq, mais si nous en avions un cinquième, il apparaîtra ici. Très bien, plutôt cool. Maintenant, comme je l'ai dit, si nous en montrons deux par rangée, alors nous avons un bon rapport d'aspect en cours ici. Mais si nous le définissons à quatre par rangée, nous allons perdre beaucoup de l'image parce que rappelez-vous qu'ils recadrent automatiquement afin de rester réactif. Donc, je veux aussi donner à l'utilisateur la possibilité de spécifier la hauteur de toutes ces images. Alors ajoutons ça maintenant. Je vais l'ajouter en tant qu'autre sélection. Donc, whoops, allons copier cet exemple à nouveau de la documentation et remplacer cet objet vide par cela. Celle-ci va être les hauteurs, et je vais l'appeler hauteur de l'image. Nous n'avons pas besoin de groupe, comme je l'ai mentionné précédemment, la valeur par défaut va être, disons, qu'avons-nous en ce moment, 500 pixels. Disons que ça va être de 500 pixels. Pas besoin d'infos. Donc, nous allons faire les 1500 derniers pixels et ce 1300 pixels. Maintenant, nous voulons probablement faire plus d'options. Donc, nous allons juste créer une option supplémentaire, vous en voulez probablement un peu plus, mais c'est le même processus pour chacun. Mettons ça quelque part entre 400. Maintenant, avant de frapper sur ça, je vais vraiment l'insérer. Donc, tout comme je l'ai fait ici, au lieu de coder ou de coder en dur dans une hauteur, je vais référencer ce paramètre alors mettez-le là en hauteur. Encore une fois, nous avons une erreur dans le schéma JSON. Je sais que depuis la dernière, nous avons la même époque, nous avons cette virgule ici. Si vous ne l'avez pas ramassé, vous pouvez toujours le mettre pour le JsonLinta. Donc maintenant, si je regarde ça dans le customizer, nous avons un problème ici. Jetons un coup d'oeil sur ce que nous pourrions faire de mal ici. J' ai oublié de mettre le point-virgule à la fin, rafraîchir la page. Donc maintenant, nous devrions être en mesure, tant qu'utilisateur dans le personnalisateur, changer la hauteur de l'image. Voilà, tu y vas. Donc, si nous faisons quatre images par ligne, nous voulons probablement que la hauteur de l'image devienne plus petite aussi. Nous pouvons donc définir une hauteur d'image plus petite. On peut le mettre à 400, c'est 500 donc une bonne combinaison, peut-être que sur deux par rangée, on l'a réglé à 500. Mais si on en fait quatre par rangée, on le met à quelque chose d'un peu plus court, comme 300. Maintenant, je sais que cette vidéo est probablement déjà assez longue, mais je veux vous montrer une autre chose, c'est-à-dire que nous pouvons ajouter différents types de contenu dans cette galerie. N' a pas besoin d'être juste des photos, nous pouvons également ajouter des vidéos intégrées. Pour cela, je ne veux pas écrire beaucoup de codes, je vais copier quelque chose, mais il devrait être assez simple à comprendre quel que soit, ce que je vais faire d'abord parce que nous allons utiliser un type différent, est mis dans un conditionnel. Je vais dire type de bloc, rappelez-vous, nous avons maintenant accès au bloc individuel parce que nous sommes en boucle, et si le type de bloc est image, alors je sais que je vais avoir un paramètre d'image. Je vais fermer cela, et si maintenant parce que tout notre bloc jusqu'à présent, le type d'image, rien ne devrait changer lorsque nous actualisons la page. Maintenant, tout est normal, mais nous pouvons ajouter un type différent ici. Au lieu de partout où nous sommes arrivés ici, je vais ajouter un autre bloc pour une intégration vidéo. Je vais juste copier et coller pour rendre cela un peu plus rapide, et celui-ci au lieu de l'image va être un bloc vidéo, et cela va être l'étiquette qui apparaît à l'utilisateur, et pour les paramètres, je , je crois que cela s'appelle une URL vidéo, et donc l'ID de cela va être URL vidéo est qu'il est juste appelé une URL vidéo aussi, et l'étiquette va être URL vidéo. Je pense qu'il y a quelques autres attributs que j'ai ici à regarder, nous pouvons mettre dans ce qu'il accepte aussi. On peut le faire sauf YouTube et Vimeo. Nous allons devoir supprimer cette virgule de la fin, sinon, nous aurons une erreur. Si je clique sur Enregistrer sur cela, j'espère pas d'erreurs, et maintenant quand je rafraîchis la page et notre personnalisateur, et je vais à la galerie, au lieu d'ajouter un bloc d'image, il va juste dire ajouter du contenu. La raison en est que lorsque je clique dessus, il va maintenant me donner la possibilité d'ajouter les différents types. Je peux ajouter un autre bloc d'image comme avant, ou je peux ajouter un bloc vidéo. Ici, je peux coller un lien YouTube ou Vimeo. Pour cela, j'ai juste besoin de trouver une vidéo YouTube, je vais rapidement en trouver une sur ma propre chaîne YouTube. Quelle meilleure vidéo à utiliser alors, l' une de mes vidéos de ma série sur le développement de thèmes Shopify, utilisons-nous cela comme l'exemple de vidéo ici, et nous allons frapper sauver. Maintenant, même si nous avons enregistré ce bloc vidéo, nous devons réellement sortir quelque chose à l'écran. Ce que je vais faire est de copier une certaine logique ici, mais ce que je vais faire, c'est parce que ce sera un code différent pour le bloc vidéo au lieu dubloc image, c'est que je vais mettre le conditionnel tout mais ce que je vais faire, c'est parce que ce sera un code différent pour le bloc vidéo au lieu du de suite. Cette valeur ici est ce que nous avons créé ici, donc nous avons type, image, type vidéo, c'est ce que nous vérifions en ce moment. Maintenant, je vais copier et coller du code, pour nous faire gagner un peu de temps. Pour expliquer brièvement ce code, ce que nous avons ici est si le type de bloc est vidéo, nous savons qu'il s'agit d'un bloc vidéo, et si l'URL est vide, nous allons mettre dans une vidéo d'espace réservé avec ces différents attributs. Si ce n'est pas vide, alors il a certainement une valeur, donc nous vérifions simplement si le type est YouTube, si oui, nous utilisons le lien d'intégration YouTube, sinon, nous vérifions Vimeo, et si c'est Vimeo, nous utilisons le lien d'intégration Vimeo, puis nous saisissons l'ID de l'URL vidéo. C' est un peu plus compliqué parce que nous obtenons un objet de cette URL vidéo, et donc nous avons un ID et un type sur cet objet. C' est pourquoi j'ai copié et collé ce code parce que c'est un peu plus complexe et ce n'est pas très commun que vous utilisiez cela de toute façon, mais c'est un bon exemple ici d'avoir différents types. Ce que nous allons devoir faire pour finir c'est aussi avoir cet effet notre iframe. Dans chacun de ces scénarios, l'iframe va contenir la vidéo, donc je viens d'ajouter l'iframe ici aussi. Il va avoir la largeur de bloc d'affichage et la hauteur que nous avons définies dans le personnalisateur. Celui-ci ne va pas avoir de sens pour l'iframe, mais j'espère que cela fonctionne toujours, si je vais maintenant dans, regardons dans le personnalisateur. Vous verrez que ma vidéo s'affiche, malheureusement, la largeur n'est pas correcte, alors actualisons la page, voyons ce qui se passe. Ici, nous avons nos enveloppements d'image, enveloppements d' image, enveloppements d'image, et puis nous avons l'iframe ici, qui n'a aucun style qui lui est attribué, donc c' est juste faire la largeur et la hauteur. Laissez-moi regarder ce que j'aurais pu faire de mal ici, et je peux voir que j'ai mis un point devant iframe, en supposant que c'est une classe, mais je cible l'élément lui-même, donc je n'ai pas besoin d'utiliser ce point. Si je rafraîchis la page, vous verrez maintenant qu'elle est conforme à notre grille que nous avons configurée. Personnalisons cela dans le personnalisateur, peut-être mettons-le à cinq par rangée. Faisons cinq par ligne, et maintenant vous pouvez voir que l'intégration vidéo est le cinquième élément de cette ligne et nous pouvons réellement réorganiser le contenu. Maintenant, l'utilisateur peut entrer, ajouter n'importe quel nombre de blocs d'image et de blocs vidéo, peut-être des vidéos de mode et des photos de belles femmes, et cela va passer à la nouvelle ligne. Nous pourrions avoir besoin de jouer avec les styles mobiles, changer la grille pour être différente sur mobile, donc nous allons avoir besoin de quelques requêtes médias, mais c'est peut-être un projet à prendre en charge, je voulais juste donner nous une certaine pratique avec des schémas et des liquides, et quelle meilleure façon de le faire est par une section. Si nous voulons pouvoir mettre ceci sur la page d'accueil, n'oubliez pas, nous devons insérer un préréglage ici. Faisons juste cela pour terminer la leçon, donc nous allons mettre un tableau Presets, et encore une fois, je vais revenir à la référence plusieurs fois presets ici, nous avons juste besoin d'un avec une catégorie et un nom. rentrant ici, en mettant un objet, j'ai mis cet objet en place. On a la catégorie de ce qu'on appelle l'autre. Je pense que c'était du contenu personnalisé, donc vous pouvez l'obtenir pour apparaître dans la même catégorie, et nous allons donner à cela un nom de galerie, appuyez sur Enregistrer sur cela. Maintenant, cette section pourra également être incluse sur la page d'accueil. Si je vais à la page d'accueil, ajouter une section, nous avons un problème ici. C'est vrai. Je n'ai pas rechargé, un customizer encore, n' oubliez pas de le faire. Maintenant, quand j'ajoute dans une section, vous verrez que la galerie est ici, et elle ne contiendra pas les mêmes données que l'endroit ici, parce que chaque fois qu'une section est incluse, elle a ses propres données. On peut y aller et créer différentes galeries. On y va, mettons-le dans un autre bloc d'images, la mode de la femme, et faisons de la dernière une vidéo, voyons si j'ai eu l'addition. J' ai pas le lien vidéo, mais là, vous pouvez voir l'espace réservé là-bas. Nous avons notre section de galerie personnalisée, nous pouvons la mettre sur notre page d'accueil maintenant, nous pouvons l'utiliser sur des pages spécifiques, et maintenant, vous devriez avoir une bonne compréhension d'un liquide Shopify et des schémas. Maintenant, bien sûr, plus vous gagnez d'expérience avec le liquide Shopify, mieux vous y arriverez, mais je crois que cela devrait être une bonne base pour vous les gars. Tu te souviens de la documentation, de la référence liquide ici, où est-elle ? Référence liquide là vous allez. C' est votre manuel, c'est votre documentation, vous avez aussi mon article, que je vous recommande fortement de vous donner une perspective différente sur le liquide Shopify, et ensuite vous avez la feuille de triche aussi, mais c'est plutôt comme une référence rapide. Pour tout ce qui concerne l'apprentissage de toutes les parties, il y a peut-être une zone de liquide vous ne connaissez pas trop et que vous voulez en savoir plus. Consultez le billet de blog ou consultez la documentation officielle. Regardez, voyez si vous pouvez obtenir une compréhension de cette façon, parce que maintenant nous allons passer du liquide à parler de l'API Ajax. Rappelez-vous, j'ai dit que Shopify liquide est comme le langage de programmation back-end avec Shopify. Si nous voulons faire quelque chose purement du côté client, nous allons devoir utiliser JavaScript, et heureusement, dans notre thème, nous avons cette API appelée l'API Ajax pour nous permettre de faire certaines choses. Nous allons tout apprendre à ce sujet dans la prochaine leçon et peut-être deux leçons si c'est une leçon particulièrement longue, toute façon, je suis excité pour la prochaine, je vous verrai là-bas. 9. L'API Shopify AJAX: Bienvenue les gars. Dans cette leçon, nous allons tout parler de l'API ajax Shopify. Je suis actuellement sur la documentation officielle de Shopify, j'ai trouvé cette page juste en cherchant une API ajax Shopify et Google devrait être le premier résultat ou l'un des premiers résultats et c'est la page de la documentation pour l'ajax Shopify API. C' est assez bon, couvre presque tout ce que vous pouvez faire avec l'API ajax. Il y a quelques joyaux cachés dans Shopify. Fondamentalement, l'API Shopify ajax est principalement pour ajouter des articles au panier, mettre à jour les quantités dans le panier, faire quoi que ce soit avec le panier sans actualiser la page, comme il est dit ici, j'ai un exemple ici d'un magasin Shopify fonctionnant le thème de l'impulsion. Impulse est un thème Shopify haut de gamme qui est assez moderne. Je veux que vous regardiez ce qui se passe lorsque je suis sur cette page produit, je sélectionne une variance et je clique sur « Ajouter au panier ». Ici vous pouvez voir qu'il y a ce chariot latéral ou tiroir latéral qui sort avec le panier, et je peux réellement augmenter la quantité ici et les mises à jour de prix, et je peux diminuer la quantité et je peux le mettre à zéro et maintenant le panier est vide. Tout le temps que je fais ça, je ne recharge pas la page. Comme vous pouvez le voir d'ici, il n'y a pas de nouvelle page en cours de chargement, il s'agit simplement d'ouvrir ce tiroir qui est déjà sur la page. Comment fait-il ça ? Il le fait via l'API ajax Shopify, et je peux le prouver en ouvrant mes outils de développement, ici dans l'onglet Réseau, je peux voir toutes les demandes réseau. Ajoutons un élément au panier et vous verrez le premier qui est apparu, add.js, et vous pouvez voir ici le point de terminaison qui va être cart/add.js, et il envoie à travers, un tas d'informations. Maintenant, vous pouvez voir la réponse, c'est un tas d'informations de coupe pour cette variante de produit particulière. Vous verrez ici que nous avons aussi une demande get à cart.js, et vous pouvez voir ici que nous avons le panier complet ici dans cet objet. Nous avons un tableau pour les éléments, et vous pouvez aller voir cet élément que nous venons d'ajouter, donc c'est l'API ajax Shopify en action. Ceci ici, est un point de terminaison API ajax Shopify, et la raison pour laquelle je sais que c'est parce que vous pouvez le trouver ici. Voici les différents points de fin, et comme vous pouvez le voir ici, si je fais une demande get à ce chemin dans un magasin Shopify, je peux l'utiliser pour obtenir le panier et il revient au format JSON. Juste une tête haute, cela pourrait être un peu avancé pour certains spectateurs utilisant des API et ce qu'est JSON, nous avons appris sur JSON dans une vidéo précédente, mais ici, nous envoyons des requêtes à un serveur et revenons sous forme JSON si nous voulons réellement les utiliser dans notre projet, nous allons devoir analyser ces objets JSON. Cela peut être un sujet assez long et vous avez probablement besoin d'un peu de connaissance de JavaScript pour contourner cela. Encore une fois, ce n'est pas un cours JavaScript, tout est à propos de Shopify, donc vous devriez avoir quelques fondamentaux en HTML, CSS et JavaScript. Sinon, j'ai une classe ici sur skillshed.com sur JavaScript. Si vous voulez vérifier cela ou tout autre endroit que vous voulez en savoir plus à ce sujet. Mais c'est ce que nous allons faire, nous allons interroger ces points de terminaison et faire ce qui se passe ici. Maintenant, malheureusement, je n'ai pas le temps de construire un panier latéral et toute cette interface utilisateur dans cette leçon, ce que nous allons vouloir faire est que je vais vous montrer les requêtes juste en JavaScript, et ensuite je vais vous montrer un que j'ai fait jusqu'à ce que je vais vous donner les gars aussi, où j'ai loué un panier à la page et je suis capable de le mettre à jour, emporter des articles, mettre à jour les quantités directement sur la page. Je vais montrer un exemple de la façon dont vous pouvez réellement implémenter l'interface utilisateur et ce qu'on appelle les écouteurs d'événement à la fin de cette vidéo. Mais tout d'abord, ce que je veux faire, c'est que je vais fermer ça, je vais retourner à mon magasin de tests, et je vais aborder le nouveau thème sur lequel nous travaillons. Parce que nous allons récupérer des données uniquement via JavaScript, je n'ai pas vraiment besoin d'ouvrir mon éditeur de code, je peux vraiment tout faire à travers la console, ce que je vais faire est d'ouvrir un produit cette façon nous pouvons réellement ajouter ce produit au panier, puis je vais ouvrir mes outils de développement et aller à l' onglet Console . Theme va être plus agréable à regarder si nous allons ici, et écrivons notre première demande, qui est une demande de base, qui va obtenir le panier, si vous commencez sur un projet vide, vous devriez avoir un panier vide, mais vous obtiendrez toujours un objet panier avant que nous commencions cependant, cela va rendre beaucoup plus facile si nous avons quelque chose appelé jQuery installé, si vous ne savez pas si jQuery est dans votre thème, c'est dans beaucoup de thèmes, vous pouvez écrire une commande jQuery de base et voir si elle apparaît indéfinie, j'ai undefined pour la version $ sign de jQuery et j'ai jQuery n'est pas défini. Ce que je vais devoir faire est d'inclure jQuery dans mon projet.Je vais devoir faire une modification de code juste pour apporter jQuery. jQuery est une bibliothèque qui va juste rendre plus facile pour nous de faire ces requêtes Ajax. Je vais taper jQuery dans google et trouver un lien vers le CDN, ici, et je peux juste attraper la version minifiée de la dernière version. Je vais copier cette balise de script, aller dans mon fichier de mise en page, et je vais juste le coller dans. Appuyez sur « Enregistrer ». Maintenant, si je rafraîchis la page, je peux vérifier si j'ai installé jQuery en faisant la même commande, et maintenant vous pouvez voir que je récupère une fonction. Je peux essayer la même chose avec le mot-clé jQuery lui-même, et j'obtiens la même chose. n'y a pas d'erreur en disant ce qu'est jQuery, donc nous savons maintenant que nous avons jQuery et maintenant nous avons quelques fonctions plus agréables à faire pour obtenir des requêtes avec. Le premier est une demande de couper JS pour obtenir le panier, donc c'est un très simple. Je vais utiliser la fonction get dans jQuery, et je vais mettre en tant que premier paramètre, les points de fin, qui est simplement /cart.js, et puis je vais mettre dans ma fonction de rappel. Ce qui va se passer ici, c'est que je vais faire une demande à ce point final, puis je vais accéder aux données qui reviennent, donc ce que je vais faire est de consigner les données pour que nous puissions les voir ici dans notre console. Je ne sais pas pourquoi j'obtiens cette erreur ici, mais comme vous pouvez le voir, j'ai récupéré les données. Le problème avec cela, cependant, est que c'est dans une chaîne géante, donc ce que je vais devoir faire est d'analyser ceci, parce que c'est juste une chaîne JSON, mais nous sommes facilement capables de ce qu'on appelle analyser ceci, et nous récupérerons un objet JavaScript avec lequel nous pouvons travailler. Au lieu de simplement mettre des données, je vais envelopper cela dans une analyse, et maintenant vous pouvez voir que nous récupérons un objet JavaScript que nous pouvons réellement naviguer et regarder à l'intérieur. Maintenant, il semble que j'ai déjà un article dans mon panier, et pour vérifier que c'est la bonne information, je vais en fait juste aller à la page de mon panier, et je vois, oui, j'ai trois de ces baskets impressionnantes dans mon chariot. Retirons ce produit de mon panier. Le panier est maintenant vide, revenons à cette page de produit, n'importe quelle page de produit, et je vais réexécuter cette « Commande ». Maintenant, vous pouvez voir dans notre panier, nous avons le panier d'article zéro et nous avons la gamme d'articles qui est actuellement vide, exactement comme nous nous y attendions. Ce qui se passe ici est sans avoir à entrer dans notre code back-end, je suis capable de récupérer le panier de notre boutique Shopify tout dans le navigateur. D' un point de vue pratique, c'est ce qui nous permet de faire des choses purement à l'avant et dans Shopify l'endroit où il le plus logique d'avoir cette fonctionnalité est avec le panier. Parce que le panier est le principal point d'interaction avec votre boutique Shopify. Les utilisateurs naviguent sur les produits la plupart du temps, ils regardent le contenu. L' interaction principale se produit lorsque la personne est prête à acheter. Ils mettent l'article dans le panier, puis ils le transforment en caisse et finissent leur caisse. Il n'est pas étonnant que Shopify fournisse cette API pour que vous puissiez réellement faire ce genre de choses avec votre panier. Passons à la prochaine. En fait, ajoutez un article à notre panier. Je vais faire défiler vers le haut et c'est celui que je cherche. Utilisez cette option pour ajouter une variante au panier. N' oubliez pas que c'est une variante qui est ajoutée au panier, pas au produit. Ce que nous allons devoir faire est de saisir la sélection de variante de ce formulaire, puis de la soumettre au panier en utilisant cette demande de poste. Nous pouvons le faire de deux façons. Nous pouvons spécifier l'ID de variante et la quantité que nous voulons ajouter au panier. Mais le problème avec cela est que nous ne connaissons pas encore la variante jusqu'à ce qu' une personne mette dans sa sélection et que la variante soit déterminée à partir de cette sélection. Ce que nous pouvons faire est plutôt sérialiser le formulaire et ce que cela va faire est de prendre toutes les données du formulaire et il va sortir comme un objet ici pour nous. Prenons cet exemple ici. Je vais retourner ici. Tant que nous avons un formulaire sur notre page avec l'action de barre oblique de panier ajouter, cela va fonctionner. Je vais appuyer sur « Entrée » sur ça. Maintenant, rechargeons le chariot, et voyons ce qui s'est passé. Si nous ouvrons notre panier, nous pouvons maintenant voir que le nombre d'articles est un. Dans notre tableau, nous avons un élément, et l'élément est la variance de notre sélection ici. Je vais cliquer sur ceci pour nettoyer un peu ça. Je veux exécuter les demandes d'ajout au panier Ajax une fois de plus et je veux jeter un oeil dans un onglet réseau à ce qui se passe réellement ici. Rappelez-vous, nous avons sérialisé notre formulaire et nous envoyons ces données à Shopify et vous pouvez voir ici, ce qui est fait est nous donner un objet avec l'ID de la variante que nous voulons ajouter et combien d'entre elles nous voulons ajouter. Nous n'avons pas nécessairement besoin d'un formulaire de produit si nous sommes en mesure de trouver la variante par d'autres moyens tout comme un FYI là-bas. Nous pourrions en fait, au lieu de sérialiser le formulaire, si nous connaissons l'ID de variante pour d'autres moyens, nous pouvons simplement mettre un objet ici avec l'ID de variante, le copier à partir d'ici, puis la quantité et puis que fera exactement la même chose. Si je vire la console et que je lance le chariot à nouveau, vous verrez maintenant que nous avons trois de ces chaussures maintenant dans notre panier. Juste quelques autres choses que vous pouvez faire avec l'API Ajax. On peut vider le chariot. Nous pouvons faire une demande de poste à /cart /clear.js, définit toutes les quantités de tous les articles de ligne à zéro, donc efface votre panier. Revenons ici, faisons une demande de publication en utilisant jQuery et les points de terminaison étaient clairs et nous n'avons pas besoin d'envoyer plus de données avec elle, donc nous pouvons simplement l'écrire comme ça. Maintenant, si nous courons récupérer le panier à nouveau, vous verrez que notre panier est complètement vide. La dernière chose que vous voudrez probablement faire avec votre panier en utilisant l'API Ajax est de mettre à jour la quantité. Ici, vous pouvez utiliser la demande de publication sur le point de terminaison de changement de barre oblique du panier, et vous pouvez modifier la quantité d'un article déjà dans le panier. Ce que nous allons faire est d'ajouter à nouveau une variante au panier. Il suffit de copier et de faire la même requête à nouveau. Maintenant, je peux créer une requête de publication à ce point de terminaison et mettre dans un objet comme je l'avais avant. Je peux l'enlever ici et peut-être que je veux mettre à jour la quantité à cinq. Maintenant, je peux envoyer cette demande de poste. Laissons la console et ouvrons le chariot. Je viens d'en ajouter un autre. Maintenant, nous devrions en avoir six, c'est celui que je cherche et comme vous pouvez le voir, nous en avons six. Nous n'avons qu'une seule ligne parce que c'est la même variante, mais la quantité est de six. Il y a toutes les informations ici sur la variante. Maintenant, sous forme d'article en ligne, comme vous le verrez sur le panier. D' accord, cool. Ce sont les principales choses que vous voudriez faire avec votre panier. Dans l'exemple, nous avons vu et l'exemple, je vais vous montrer dans une seconde. C' est pour cela que nous utilisons l'API Ajax. L' API Shopify Ajax facilite l'utilisation ces points de terminaison pour récupérer des données sur votre panier et modifier votre panier. Le vrai défi vient de l'envoi d'écouteurs d'événements et de la gestion de cette réponse pour mettre à jour votre interface utilisateur. Malheureusement, c'est une leçon très lourde JavaScript et pas particulièrement spécifique à Shopify. C' est pourquoi je vais juste vous montrer un exemple, maintenant et le parcourir, mais nous ne allons pas le coder à partir de zéro dans cette leçon. La raison pour laquelle c'est, c'est la connaissance générale JavaScript de la façon de le faire. Si vous voulez en savoir plus sur JavaScript, encore une fois, j'ai une classe sur le partage de compétences, ou vous pouvez en apprendre davantage sur JavaScript ailleurs. Ceci est juste concerné par Shopify, mais je veux vous donner un exemple de, à quoi cela ressemblerait. Si je ferme cet aperçu et que nous retournons dans le magasin, j'ai en fait mis en place un thème avec un exemple de panier réactif. Juste ici, j'ai ce thème appelé Ajax API Demo, et il est basé sur le nouveau thème. Fondamentalement, la seule chose que j'ai changé est que j'ai ajouté Bootstrap, qui est un framework CSS. Vous verrez que les styles sont un peu différents et nous avons ces boutons, styles juste à la porte. Si je passe dans un produit, vous pouvez voir que le panier est juste à côté du produit, et si j'ajoute un article au panier, je n'ai pas besoin d'aller à la page du panier pour voir la mise à jour de mon panier. Je peux même changer les quantités et toutes les différentes parties de mon panier seront mises à jour. Comme je l'ai dit, habituellement, vous devriez aller à la page du panier et le voir là. Mais même à partir d'ici, vous ne pouvez pas mettre à jour les quantités sans avoir à recharger la page. Afin de faire un panier comme celui que nous venons de voir, donc revenir au modèle de produit, nous devons utiliser JavaScript et l'API Ajax. Juste pour vous prouver que cela utilise l'API Ajax, je vais ouvrir mes outils de développement et je vais jeter un oeil dans l'onglet Réseau. La première chose que je veux faire est en fait avant de regarder dans l'onglet Réseau, je veux juste effacer complètement le panier. Je vais aussi vider cette console. Maintenant, ajoutons un article au panier. Comme vous pouvez le voir, nous avons une demande à add.js. Si je regarde à l'intérieur, nous pouvons voir ce que nous envoyons est une pièce d'identité et une quantité. Il s'agit des données du formulaire. Ce qu'il fait est en fait sérialiser le formulaire, saisissant ces données, puis il l'envoie à l'API Ajax. En fait avant cela, avant même d'ajouter un élément à la coupe, si je rafraîchis juste la page. Vous verrez que nous obtenons la coupe de l'API Ajax. La raison pour laquelle vous pouvez dire que c'est si nous regardons ici, nous pouvons voir une demande get à cart.js. Si j'ouvre ça, je vais juste devoir passer un peu. Vous pouvez voir que nous n'avons rien envoyé parce que nous demandons juste d'aller au panier, nous ne postons rien. Vous verrez que la réponse que nous recevons est tout le panier en tant qu'objet. Rappelez-vous que nous avons vu cela avant quand nous étions juste en train de travailler sur notre console. Mais la différence maintenant est que le chargement de la page déclenche réellement cela. Alors ce qui se passe, c'est que nous prenons ces données et que nous les représentons sur la page. Jetons un coup d'oeil à ce qui se passe lorsque j'ajoute un autre article au panier. Nous faisons une demande à add.js. Vous pouvez voir ici ce que nous recevons est un élément de ligne. Nous ne récupérons pas tout le panier, mais nous récupérons un article de ligne, ce qui nous donne les informations nécessaires pour mettre à jour notre panier. Maintenant, si j'augmente la quantité, vous pouvez voir que nous faisons une demande à change.js, ce qui est un autre point final. Vous pouvez voir ici que change.js. Ce que nous faisons, c'est que nous envoyons l'ID et nous envoyons la quantité à laquelle nous devions changer. Ce que cela fera, c'est qu'il prendra les données, puis il retournera le panier entier à nouveau. Vous pouvez voir ici, si nous allons regarder à l'intérieur de l'article, nous pouvons voir la quantité quelque part ici. On y va, c'est trois, et le nombre total d'objets est de trois là-bas. Si nous avons ajouté une autre ligne, nous avons donc juste besoin de sélectionner une variante différente, ajoutez-la au panier. Maintenant, vous pouvez voir que nous ajoutons cet élément de ligne et maintenant nous avons toutes ses données ici. Si je devais changer la quantité à ce sujet, regardez la prochaine demande. Vous verrez que nous avons cinq éléments répartis sur deux lignes. La première ligne a une quantité de deux et la deuxième ligne a une quantité de trois, pour un total de cinq. Ensuite, vous pouvez voir que nous avons le prix total et tout. Je voulais vous montrer comment l'API Ajax fonctionne ainsi que la mise à jour de l'interface utilisateur sur la page. Maintenant, comme je l'ai déjà dit, il y a quelques parties à cela. Tout d'abord, les écouteurs d'événement. Certaines choses se produisent sur la page appelée événements. Ensuite, ces événements sont définis pour déclencher des requêtes à l'API Ajax. Maintenant, bien sûr, quand les données reviennent, nous devons réellement faire quelque chose et ensuite quelque chose est en train de mettre à jour notre interface utilisateur. Jetons un coup d'oeil au code en ce moment. Si je retourne dans ce thème et que je clique sur Modifier le code, il y a un peu de code ici, et je ne vais pas expliquer ligne par ligne. Mais ce que j'ai fait ici, c'est que j'ai utilisé une moustache de code de bibliothèque de modèles, c'est ça. Ce qui me permet de faire est de créer ces modèles. Donc, c'est le modèle pour l'ensemble du panier. Il s'agit du modèle de l'élément de ligne. Si vous voulez en savoir plus sur la moustache, mustache.js est l'endroit où vous pouvez en apprendre plus à ce sujet. Modèles de liste logique, vous pouvez lire le manuel ici. Ce n'est pas la documentation la plus sophistiquée, mais essentiellement vous pouvez penser à la moustache comme une version JavaScript de liquide. Il utilise en fait les mêmes délimiteurs, c'est pourquoi nous devons réellement changer les délimiteurs en des délimiteurs personnalisés afin qu'ils ne soient pas réellement en conflit. Donc, comme vous pouvez le voir ici dans ce modèle, tout comme nous le ferions en liquide, nous insérerions une URL comme celle-ci. Mais, bien sûr, parce que nous sommes en liquide et le moteur liquide va interpréter cela comme liquide, nous devons utiliser des délimiteurs personnalisés pour différencier ces variables de gabarit de celles en liquide. Nous avons les deux modèles ici et nous avons tout un tas de JavaScript qui inclut nos écouteurs d'événements, puis maintenant les requêtes d'API Ajax, puis nous gérons la réponse. Nous avons également quelques styles ici pour coiffer le panier. Comme je l'ai dit, je ne vais pas passer ligne par ligne de ce document parce qu'il se passe beaucoup de choses ici. J' ai écrit des commentaires détaillés sur toutes les différentes fonctions. J' aurais certainement lu ce dossier, et si vous avez des questions, faites-le moi savoir. Vous pouvez accéder à ce fichier via ma page GitHub, j'ai un dépôt appelé skillshare où vous pouvez accéder aux ressources pour toutes mes classes sur skillshare. Ici, vous pouvez voir product.liquid est l'une de ces ressources. Celui-ci est en fait un peu plus agréable à regarder car il fait la mise en évidence de la syntaxe sur ces modèles JavaScript. Mais vous devrez réellement déplacer ceci dans votre thème afin d'interagir avec ce code et voir ce qu'il fait. Une autre chose avant de parcourir un peu le code, c'est que vous aurez besoin de jQuery installé sur votre thème. Donc, si vous ne l'avez pas déjà, vous devrez soit l'installer en le téléchargeant et en l'incluant dans votre dossier assets. Ou le moyen simple est juste d'inclure un lien via une balise de script vers le CDN. Donc, vous pouvez juste, comment j'ai obtenu ce lien, étais-je allé à jQuery, jQuery CDN, et j'ai trouvé l'URL. Donc, comme nous l'avons fait avant quand nous faisions nos demandes dans la console, nous devons réellement inclure ce script dans notre theme.liquid. Ou si elle existe déjà, c'est cool. Mais il y a quelques parties ici où nous utilisons jQuery. Comme je l'ai mentionné, nous avons nos deux modèles ici. Avant ça. Nous avons la page produit telle qu'elle apparaît normalement. Donc, voici où se trouve notre code de modèle de produit normal, que j'ai ici. Nous avons un div ici pour le chariot latéral. Ici, nous avons cette div avec un ID de chariot va ici. Le div du panier va ici, ID est ce que nous utilisons pour dire à la moustache où mettre le modèle. Lorsque la page se charge, va charger ce modèle ici dans cette div. Maintenant, cet autre article d'une ligne est pour quand nous ajoutons une nouvelle ligne au panier. Donc, c'est une partie du chariot. Ce que cela va faire, c'est qu'il va ajouter à une partie spécifique de ce modèle. C' est essentiellement tout simplement maquette avec les données appropriées placées dans différentes parties de cette maquette. La vraie magie est ici. Donc, passer par ce code d'une manière similaire à ce que je vous ai montré ici. Rappelez-vous que nous avions, donc je vais juste remettre cela à un, rafraîchir la page et vous verrez que le panier est généré. Maintenant, si je rafraîchis la page à nouveau, vous pouvez voir que cela rend d'abord, puis cela rend, c'est parce que cela est rendu par liquide. Cela vient du back-end et cela est en fait rendu sur l'extrémité frontale en utilisant la moustache. Alors qu'est-ce que c'est cette fonction ici, exécutez get cart. Lorsque la page se charge, c'est quand nous exécutons cette fonction get cart/si nous cherchons ici, ce que get cart fait est qu'il envoie une requête à l'API AjaX pour obtenir le panier, il transmet ces données, puis il l'envoie à ce qui gère les données. J' ai fait cette manipulation des données à quelques endroits différents, c'est pourquoi j'ai déplacé cela dans une fonction différente. Ensuite, vous pouvez voir la fonction ici. Ce que cela fait est qu'il met à jour le total du panier et les articles en fonction de ce qui revient de l'API, l'API a tous les prix dans le sens, ce que nous devons faire est de les diviser tous par 100 afin d'obtenir le prix en $, puis nous rendons le chariot avec de la moustache. C' est la méthode moustache afin de prendre notre modèle, prendre nos données, et les combiner ensemble pour créer notre sortie. Ensuite, comme vous pouvez le voir ici, nous prenons l'élément qui a l'ID du panier va ici, et nous mettons cette sortie de moustache juste là-dedans. Ok, donc c'est ce qui se passe quand je charge la page pour la première fois. Il fait cette requête Ajax, puis rend ce modèle en utilisant Mustache. Qu' en est-il quand j'ajoute un produit au panier ? Donc, nous allons juste choisir cette taille neuf variante et je clique sur Ajouter au panier. Oh, nous avons déjà la taille 9, donc ça va juste augmenter la quantité. Si je vais ici et je regarde l'écouteur d'événement submit pour ajouter au panier, nous faisons un tas de choses différentes ici où empêcher le formulaire de faire un formulaire standard soumettre, afin que nous puissions gérer le formulaire en utilisant JavaScript. On fait comme avant. Nous sommes en train de sérialiser le formulaire pour obtenir ses données. Ensuite, nous le passons à l'API Ajax pour une demande de poste. Nous allons passer la réponse, mettre à jour le total du panier. Ensuite, nous allons récupérer la réponse du serveur et gérer cela. Rappelez-vous que la réponse pour ajouter un article au panier dans l'API Ajax est l'article. Donc, ce n'est pas tout le panier comme avec cart.js ou celui-ci, cart/change.js. Les réponses pour ceux-ci sont le panier entier, mais la réponse pour cette demande particulière est l'élément de ligne. cette raison, le total du panier, nous devons nous comprendre parce qu'il ne revient pas dans les données. C' est ce que j'ai fait ici. C' est assez facile à comprendre, est-ce que cela va être le total du panier précédent plus quel que soit le prix de cet article est. Ensuite, nous devons aller le trouver dans l'interface utilisateur et le mettre à jour, en le divisant par 100 afin de l'obtenir i $. Ici, nous allons vérifier si l'article existe déjà dans la coupe. Rappelez-vous que nous avons ajouté un autre élément de la même variante. Cela signifie que nous n'avons pas besoin d'une nouvelle ligne, nous avons juste besoin de mettre à jour la quantité de cette ligne. Si je vais ici et que je choisis une variante différente, vous verrez que nous obtenons une nouvelle ligne. C' est ce que fait ce conditionnel. Il vérifie si une variante existe déjà. Vous pouvez voir la fonction ici. Nous retournons un tableau basé sur si une correspondance a été trouvée. S' il y a déjà une correspondance, alors au lieu d'exécuter la moustache pour rendre un tout nouvel élément de ligne, nous devons juste mettre à jour certaines choses sur l'élément de ligne existant. Nous prenons simplement l'article du DOM en utilisant ceci et nous mettons à jour la quantité et le prix. Ici, vous pouvez voir si j'en ajoute un autre, les choses qui changent sont la quantité et le prix ici, et bien sûr, le total, que nous avons déjà traité ici. Mais si c'est un tout nouvel élément, ce que nous allons faire est de pousser cet élément dans notre tableau d'éléments. Nous allons prendre les données, les prix et nous allons les diviser par 100 à nouveau pour obtenir des valeurs en dollars. Ensuite, nous allons rendre le modèle d'élément de ligne. Chaque fois que nous rendons un tout nouveau morceau de HTML, j'ai choisi d'aller avec la moustache plutôt que de faire jQuery. Si vous écrivez beaucoup de balisage, cela aide à avoir un langage de modélisation. Mais si vous ne mettez à jour que quelques petites choses comme un numéro ici, alors vous n'avez pas besoin de vraiment vous inquiéter. Le dernier, qui est celui que je viens de faire, est la mise à jour de la quantité. Si je vais sur l'un de ces et que je mets à jour la quantité, si je le remets à zéro, comme vous pouvez le voir ici, si la nouvelle quantité est inférieure à un, ce que je vais faire est juste de cacher cet article juste après la demande de poste. En revenant un peu, ce que je vais faire est de configurer des écouteurs d'événements ici sur ces boutons d'ajustement de quantité. Le « Plus » va ajuster la quantité par positif. Le bouton « Moins » va ajuster la quantité par négatif. Cela va être passé ici avec l'événement, et nous allons trouver la quantité actuelle et l'ID de variante de l'article, appliquer l'ajustement à la quantité actuelle pour obtenir une nouvelle quantité, puis ici nous envoyons le message demande. La raison pour laquelle nous avons besoin de trouver la quantité et l'ID de variante est parce que ce sont ce qui est nécessaire pour envoyer l'API. Ensuite, la réponse que nous recevons est tout le panier, donc nous pouvons mettre en pause et ensuite si nous supprimons un article du panier, nous allons simplement le cacher, et ensuite nous allons mettre à jour ces variables. Si ce n'est pas le cas, nous allons gérer un objet panier complètement nouveau. Cela le rend plus facile en semblant que nous récupérons le panier entier de l'API. Tout ce que nous devons faire est de transmettre ces données dans cette réponse de chariot de poignée et puis il rendra le panier entier. Si j'appuie sur ça, nous rendrons le panier entier avec toutes les données. Comme vous pouvez le voir, ce montant est mis à jour et ce total est également mis à jour. C' est beaucoup de code et j'utilise ES6 beaucoup ici. C' est des trucs de niveau avancé. Ce n'est certainement pas des trucs débutants. Certainement, ne vous inquiétez pas si vous ne comprenez pas tout à fait ça. Cela nécessite un peu de connaissances JavaScript et vous devrez également connaître la syntaxe ES6. Par exemple, ce que j'ai fait ici avec la fonction flèche, l'équivalent en JavaScript traditionnel est comme ça. J' utilise ES6 juste parce que je pense que ça a l'air plus agréable, mais peut-être que c'est déroutant pour vous. Encore une fois, c'est un peu une leçon de niveaux avancés. La principale chose que je veux que vous enleviez de ceci est ce que nous avons appris ici avec l'API Ajax. Je veux que vous compreniez que si nous créons des chariots qui ne nécessitent pas de rechargements de page pour les mettre à jour, alors nous utilisons l'API Ajax. Rappelez-vous, tout ce qui reste du côté client et implique la programmation, l' accès aux données des backends, si nous ne rechargeons pas la page et faisons une nouvelle demande de serveur de cette façon, alors nous utilisons Ajax, et l'API Ajax et Shopify sont la façon dont nous sommes en mesure d'accéder à ces données. C' est la principale chose que je veux traverser dans cette vidéo. Cela devrait vous ouvrir à de nouvelles possibilités avec Shopify, mais vous n'êtes peut-être pas encore prêt pour tirer pleinement parti de cela. Il y a beaucoup de profondeur à JavaScript et à l'API. Mais ici, je pense que c'est un exemple qui résume vraiment ça. Si vous allez, encore une fois, consultez le panier, passez un peu de temps à le regarder, voyez si vous pouvez le comprendre. Si ce n'est pas le cas, travaillez sur vos compétences JavaScript. Si c'est tout aussi, ne vous inquiétez pas. Vous avez toujours votre page de panier standard. En fait, beaucoup de magasins Shopify, même certains très grands, n'ont pas de panier entièrement côté client. Il y avait un magasin que j'ai vu, j'ai été surpris qu'ils ne l'aient quand je faisais des recherches pour ce cours. Luxy Hair est un très grand magasin Shopify. Si nous allons réellement à un produit, nous y sommes. Nous avons ce produit ici. Si je clique sur « Ajouter au panier », ce qui équivaut à ajouter au panier, nous sommes redirigés vers la page du panier, et si je supprime un article, la page entière se recharge également. Même sur un site Web Shopify majeur, ils n'utilisent pas un panier entièrement côté client. Ce n'est pas une affaire énorme si vous n'êtes pas encore prêt à l'implémenter. Beaucoup de thèmes l'ont déjà. En termes de connaissances sur la programmation thématique Shopify, cela dépend de la mesure dans laquelle vous voulez aller avec elle. Mais si vous voulez coder votre propre panier côté client, ou si vous voulez être capable de manipuler un thème actuel avec cette fonctionnalité, alors vous devrez connaître cette API Ajax et connaître JavaScript. Mais il n'est pas essentiel de créer un magasin réussi. Vous pouvez toujours utiliser la page de votre panier. Vous n'avez pas nécessairement besoin d'avoir un chariot côté client ou un chariot latéral qui sort. Cette leçon, je pense, était vraiment importante, mais c'est un sujet assez important. Ce n'est pas un sujet obligatoire. Je ne pense pas que vous puissiez créer un cours sur la programmation thématique Shopify sans parler de cette fonctionnalité géniale et de cette API. Si vous êtes intéressé, voici la documentation sur le site officiel. Consultez mon exemple de code si vous voulez voir mon implémentation. Mais c'est là que je vais vous laisser sur l'API Shopify Ajax. Dans la prochaine leçon, nous allons revenir dans le liquide Shopify et apprendre quelques brevets plus avancés au sein de Shopify. Je te verrai sur celui-là. 10. Motifs liquides avancés: Dans cette leçon, nous allons revenir sur le liquide Shopify, et nous allons parler de certaines des limites et des bizarreries du langage de modélisation. Je vais revenir à mon nouveau thème, aller au code, et je vais ouvrir le modèle d'index. Je vais ici, cliquez sur Index. Ce que je vais faire pour cette leçon, c'est que je vais copier et coller des exemples et ensuite nous allons les examiner. Ce que j'ai fait, c'est que j'ai parcouru la langue et choisi un tas de bizarreries de limitation et les moyens de les contourner. J' ai ce premier paragraphe ici. Ce n'est qu'un commentaire, quelque chose pour nous à lire, puis je vais apporter les exemples spécifiques. Ce que j'ai écrit ici, c'est que même si vous pouvez penser à liquide comme un langage de programmation, c'est en fait juste un langage de modélisation. Certaines choses qui devraient être une donnée, comme la possibilité de parcourir une liste globale d' articles ou de produits, ne sont tout simplement pas possibles dans le liquide Shopify. Très frustrant quand vous êtes à la recherche de cette cohérence et de cette convention. C' est le langage de modèle de Shopify. Ils prennent beaucoup de libertés et défient les conventions dans de multiples domaines. En outre, les seuls types de données que vous pouvez créer et liquides sont les primitives et les tableaux, y compris les tableaux de tableaux et de primitives, et ce que je veux dire par primitives ne sont que des chaînes et des nombres. Bien sûr, les chaînes ne sont que des morceaux de texte, si vous n'êtes pas familier avec ce terme. Une autre chose que je devrais juste mentionner à l'avance, je vais utiliser beaucoup de terminologie de programmation. Je vais essentiellement prendre un programme est approche de liquide et montrer comment nous pouvons faire plus de choses de programmation avancées dans ce langage de modélisation, qui est un langage très limité. Voici quelques-unes des limites. Comme je viens de le mentionner, vous ne pouvez pas créer un objet en liquide. Vous verrez qu'en une seconde, vous pouvez faire une boucle à travers certains objets de type tableau. C' est très frustrant, mais vous ne pouvez pas parcourir tous les articles de votre site Shopify, et vous ne pouvez pas regarder tous les produits de votre site Shopify non plus. La seule façon de le faire est de passer par la collection all, qui montre tous les produits. n'y a aucun moyen pour nous de regarder à travers les produits nous-mêmes en utilisant du liquide. Très bizarre. Mais peut-être qu'ils ont une raison derrière ça. Vous ne pouvez pas non plus créer vos propres fonctions. C' est quelque chose que vous feriez dans n'importe quel langage de programmation, mais vous ne pouvez pas créer de fonctions en liquide. Il existe une solution de contournement pour cela. Dites par exemple, si vous vouliez utiliser une fonction afin de réutiliser du code, et que vous aviez du code qui vient de prendre une variable d'entrée et fait la même chose à chaque fois, vous pouvez toujours réaliser quelque chose comme une fonction en utilisant un extrait, et avec des extraits, vous pouvez réellement passer des paramètres, et c'est une façon que vous pouvez imiter certaines fonctions que vous trouverez dans d'autres langages de programmation. La dernière chose que j'ai noté ici est que vous pouvez créer un booléen qui est une valeur vraie ou fausse. Mais vous ne pouvez pas affecter le résultat d'une comparaison à une variable, puis refroidir ce booléen. Tu verras ce que je veux dire dans une seconde. Parlons du premier exemple, qui est la concaténation de chaînes. Je vais copier et coller un commentaire ici pour la concaténation de chaîne et un titre, afin que nous puissions le voir dans notre front end. Ce que j'ai fait ici, c'est que j'ai fait deux variables. L' un est mon prénom et l'autre mon dernier nom. Maintenant, peut-être que je voulais créer une nouvelle variable avec mon nom complet. En JavaScript ou dans d'autres langages de programmation, vous pouvez le faire en une seule ligne. Si j'ouvre ma console, efface, crée un FirstName, crée un LastName, puis pour créer le FullName, je pourrais simplement utiliser ce qu'on appelle la concaténation de chaîne. Je peux ajouter des chaînes les unes aux autres comme ceci. J' utiliserais la variable au lieu de l'explicite Christopher. FirstName plus un espace entre les deux plus le LastName, et maintenant quand j'appelle un FullName, j'ai le Prénom plus un espace plus le LastName. Je suppose que je peux juste utiliser plus et moins pour ajouter des chaînes ensemble. Dans Shopify, ça ne marche pas comme ça. Voyons comment nous ferions ça. La façon dont nous faisons cela dans Shopify est à travers la balise de capture. Ce que la capture fait, c'est qu'elle capturera essentiellement tout à l'intérieur des balises de capture. On peut faire une boucle ici. On peut faire toutes sortes de choses. Tout ce que je vais faire, c'est un exemple très simple. Je vais sortir le premier_name, puis un espace, puis sortir last_name. Maintenant, nous avons créé une variable appelée FullName. Ce que je peux juste faire est de sortir cette variable, Full_name, et juste pour que nous sachions où elle arrive sur le front, je vais mettre full_name devant lui aussi. Maintenant, ouvrons notre aperçu dans un nouvel onglet et nous verrons que j'ai un titre, Concaténation de cordes, Nom complet, Christopher Dodd. Malheureusement, j'ai mon pied de page ici aussi, ce qui le rend moche. Permettez-moi de supprimer brièvement cela du pied de page parce que ce sera la dernière leçon que nous ferons sur le liquide. Si je retourne ici, on n'a plus ce texte de pied de page. Maintenant, vous pouvez voir les résultats de FullName est sorti. Maintenant, c'est un exemple très basique, mais vous pouvez imaginer ce que vous pourriez faire ici. Vous pourriez mettre toutes sortes d'opérations ici. Vous pouvez créer une boucle complète et nous verrons dans un exemple plus tard dans cette vidéo comment nous mettons une boucle complète dans une capture afin de créer un tableau. Regardons l'exemple suivant. Pour l'exemple suivant, je vais copier et coller le code directement dans car il y a un peu ici et je ne veux pas le réécrire. Fondamentalement, cet exemple est sur les sous-chaînes. Sous-chaînes, comme son nom l'indique, une partie d'une chaîne. Par exemple, nous voulions saisir la partie ID vidéo réelle d'une URL vidéo YouTube. Dans d'autres langages de programmation comme JavaScript, nous pourrions utiliser une fonction appelée sous-chaîne, et nous pourrions sélectionner où nous voulons que la sous-chaîne commence et se termine, puis nous pourrions attribuer cela à une nouvelle variable. Eh bien, c'est un peu différent dans le liquide Shopify parce qu'il n'y a pas de fonction de sous-chaîne ou de méthode dans le liquide Shopify. Ce que nous devons faire est en fait de créer un tableau à partir de la chaîne, puis nous allons trouver la partie que nous recherchons en prenant l'un des éléments du tableau. Nous avons cette URL vidéo YouTube stockée dans cette variable, et tout d'abord, nous allons vérifier si elle contient youtube.com slash watch. Il s'agit d'une étape facultative. Ce n'est pas nécessairement pertinent pour l'exemple, mais c'est ce que vous voudriez faire. Vous voudriez vérifier si elle a effectivement ceci dans l'URL, et si c'est le cas, ce que nous allons faire est que nous allons diviser la chaîne autour égaux v et ensuite nous avons accès à ce qui est de chaque côté de celui-ci. Maintenant, c'est là que cela devient déroutant parce que nous devons le faire en plusieurs étapes, et cela rend difficile d'étiqueter vos variables correctement. Cet exemple, nous avons video_id ici, puis nous le réaffectons à quelque chose de complètement différent ici. Ici video_id n'a pas nécessairement de sens en tant que nom de variable. Mais ce que nous faisons ici est juste de créer un tableau afin d'accéder à notre identifiant vidéo. Si je peux parler un peu, ce que nous faisons c'est que nous créons une variable où nous prenons l'URL et nous allons la diviser par v égale. Si nous nous souvenons de ce que le split fait, cela crée un tableau. Maintenant, nous avons ce tableau video_id et il y a deux éléments. Il a tout avant que le v égal, et après le v égal. On va mettre un chèque supplémentaire ici. Encore une fois, ce n'est pas obligatoire, mais si vous avez un deuxième argument dans votre URL YouTube, vous allez vouloir vérifier cela. Si c'est le cas, nous allons nous séparer à nouveau parce que nous ne voulons pas de la partie après la fin. Dites par exemple, je suis allé ici et peut-être que je mets dans un temps, je pense que le code est t dans YouTube, t ou s, Je pense que laissez-moi juste sauver cela parce que nous filtrons ici et prendre la partie après la fin, nous devrions être très bien de toute façon. Maintenant, ce que je fais est de prendre ce tableau ici, trouver la deuxième valeur dans ce tableau, qui sera la partie après v égal, et puis je vais le diviser à nouveau à cette fin. Je vais le diviser à nouveau, et sur la même ligne, je vais prendre le premier élément dans le tableau résultant. J' ai cette chaîne que nous allons transformer en un tableau. Ensuite, nous le divisons avec ceci comme le premier élément du tableau, puis ceci comme le deuxième élément du tableau. Alors ce que nous devons faire, c'est faire exactement la même chose sur cette section. Ce sera le premier élément du tableau, et ceci de l'autre côté de la fin, qui est ce caractère divisé, est ce qui va être le deuxième élément du tableau. Ensuite, nous appelons d'abord, pour obtenir le premier élément dans le tableau, nous ne nous soucions pas du second. Ce qui se passe, c'est que nous obtenons notre video_id final et ensuite nous pouvons insérer cela directement dans un lien Embed. Vérifions si ça marche. On va y aller et rafraîchir la page. Maintenant, nous pouvons voir que nous avons mon lien vidéo ici. Ce que nous venons de faire, c'est que nous avons converti cette URL YouTube en URL d'intégration YouTube, qui prend le même identifiant d'ici. Maintenant, je sais que c'est beaucoup de lignes, et comme je l'ai dit, les noms de variables sont confus parce que nous devons le faire plusieurs étapes. Vous voudrez peut-être nommer ça autre chose. Peut-être que vous voulez appeler cela une vidéo URL_Parts et ensuite le référencer en tant que parties vidéo_ ici. Faisons ça pour un exemple pour le rendre plus facile. On a des parties vidéo, puis on l'appelle video_parts ici. Enregistrer que cela devrait toujours fonctionner, et il s'avère que c'est le cas. C' est juste une astuce si vous voulez la rendre plus lisible pour vous-même et cela semble déroutant, vous pouvez étiqueter la variable autre chose, mais beaucoup de fois vous allez la voir comme ceci. Vous venez de recyclé un nom de variable. L' exemple suivant est probablement le plus compliqué des exemples dont je vais parler dans cette leçon liquide avancée, et c'est la création de tableaux d'objets. Je mets des objets entre guillemets doubles ici parce que, comme nous l'avons mentionné précédemment, nous ne pouvons pas créer d'objets et de liquides et nous ne pouvons pas créer nos propres tableaux d'objets comme nous l'avons vu auparavant. La seule façon de créer un tableau est de prendre une chaîne et de la diviser en fonction d'une valeur délimitant. Ensuite, nous avons un élément pour chacune des parties de la chaîne qui sont entre ces valeurs de fractionnement. Donc, cela signifie que nous ne pouvons pas réellement créer des tableaux d'objets. Donc, comme je l'ai écrit ici, Shopify liquide ne permet pas de faire des objets et vous ne pouvez pas non plus créer des tableaux d'objets. Vous pouvez cependant créer des tableaux de chaînes et de nombres, ainsi que des tableaux de tableaux en utilisant Capture et fractionnement. Alors, comment puis-je expliquer cela, pour ceux d'entre vous qui ne comprennent peut-être pas complètement ce que je dis ici est de vous montrer un exemple en JavaScript d'abord. Donc, en JavaScript, je pourrais créer deux objets. Créons des objets de deux personnes que je vais avoir person1, qui va avoir un prénom et un nom de famille de Christopher Dodd. Puis j'ai trouvé un nom de personne aléatoire pour personne2, qui va être Michael Jordan. Je ne sais pas pourquoi j'ai choisi Michael Jordan. Son nom est venu me voir ne faisant aucune comparaison là-bas. Donc, ce que je pourrais faire est de créer un tableau de personnes. Je pourrais stocker ces deux objets dans ce tableau. La façon dont vous créez un tableau en JavaScript, ouvrez un crochet carré, mettez dans votre premier objet, en mettant votre deuxième objet ou valeur. Alors maintenant, si je génère un tableau de personnes, vous pouvez voir que j'ai cette liste d'objets. Ce que cela me permet de faire, comme nous l'avons fait en boucle à travers les produits dans une collection, c'est que je peux parcourir ce tableau et saisir le prénom de chaque personne, par exemple. Malheureusement, nous ne pouvons pas le faire nous-mêmes dans le liquide Shopify. L' équivalent de ce que je viens de faire s'il existait dans le liquide Shopify, serait de créer un tableau appelé, appelons-le juste collections je ne pense pas que nous l'utilisons déjà. Je ne peux pas utiliser de crochets dans le liquide, mais ce serait bien si vous pouviez créer quelque chose comme cette collection, collection2 et ensuite nous le terminons comme ça. Nous avons donc créé ce tableau de collections. Donc si je garde ça, on va avoir une erreur de liquide ici. Erreur de syntaxe liquide attendue fin de chaîne mais trouvé une virgule dans la collection, collection2. Donc, il nous dit que nous ne pouvons pas le faire et, en effet, si nous essayons de référencer le premier élément de ceci. Donc, si j'ai essayé de faire des collections, prenez le premier élément du tableau et dites le titre, si je sors que rien ne va apparaître à l'écran. On vient d'avoir le titre de cette section. Mais nous n'avons pas vraiment le titre de la première collection parce que nous ne pouvons pas vraiment le faire. Donc cela peut être frustrant parfois dans le liquide, il y a des moments où nous pourrions vouloir créer nos propres collections, je suppose. Mais la façon évidente de contourner cela est de créer votre collection dans Shopify et ensuite vous pouvez la parcourir comme d'habitude. Dans Shopify, vous ne pouvez pas créer d'objets dans un liquide, mais vous pouvez bien sûr créer des collections dans votre magasin et c' est un objet avec un tableau de produits. Il y a quelques solutions de contournement à cela. Je vais juste copier et coller un peu plus de code à passer si vous les gars maintenant. Ce premier exemple est un peu délicat, mais une fois que vous avez la tête autour, cela devrait avoir du sens. Ce que nous allons faire, c'est que nous allons utiliser cette balise de capture avant de créer une liste de produits. Comment allons-nous limiter chacun de ces attributs ? Est-ce que nous allons utiliser un symbole de pipe, et à la fin de ce produit, nous allons mettre dans un double deux-points. Passons à travers ce qui se passe ici. Donc, nous capturons le résultat de ceci dans une variable. Donc, ce que nous allons faire est de parcourir une gamme de produits dans une collection et ensuite nous allons saisir les pots auxquels nous voulons avoir accès. Nous avons donc le titre du produit. Ensuite, nous mettons un caractère pour nous de diviser cela avec la valeur suivante, qui est l'URL du produit, fractionner à nouveau et diviser à nouveau en utilisant ces valeurs que nous avons retirées de l'objet produit. Ensuite, celui-ci met un délimiteur pour mettre fin au produit tant que ce n'est pas le dernier. Parce que nous ne voulons pas confondre notre filtre divisé ici pour penser qu'il y a un autre élément après cela. Donc si c'est le dernier, c'est tout. Plus besoin de fractionnement. À la fin de cela, ce que nous allons avoir est une chaîne avec toutes ces informations divisées par des tuyaux, et à la fin du produit, ces deux colonnes. Je pense que ça va avoir le plus de sens si je viens de sortir sur la page. Donc, si je viens de sortir des produits, lister, enregistrer, et nous allons regarder les résultats dans notre aperçu. Donc, si nous regardons vers le bas, nous avons le titre, alors nous avons un tuyau pour le séparer de l'URL de ce produit et nous avons un autre tuyau pour le séparer de la description de ce produit. Ensuite, nous avons un autre tuyau pour le séparer de l'URL de l'image, et puis nous pouvons voir ici nous avons les deux deux-points pour le séparer du produit suivant, et ensuite nous avons la même chose à nouveau. Donc, ce n'est pas trop utile parce que ce n'est qu'une seule chaîne, mais parce que nous avons ces caractères là pour indiquer quand diviser, nous pouvons maintenant utiliser le filtre split pour en faire un tableau. Donc maintenant, je vais créer un tableau de produits à partir de cette liste de produits et le diviser par ce délimiteur. Alors maintenant, je vais avoir juste cette partie. Je vais avoir un tableau avec des éléments qui ont juste cette partie. Mais encore une fois, je veux partager ça plus loin une fois que je suis à l'intérieur et que je veux diviser par ce tuyau. Donc maintenant, je vais parcourir tous les produits et le tableau de produits, puis créer un autre tableau appelé product_vals et nous allons diviser par cela maintenant. Maintenant, je peux référencer les valeurs à l'intérieur de ce tableau par leur position. Donc, malheureusement, bien sûr, nous ne créons pas d'objet ici. Je ne peux pas dire, donnez-moi le titre du produit. Donc, ce n'est pas très lisible mais encore une fois, c'est une solution de contournement. Donc, je peux réellement l'utiliser pour trouver la première valeur et si je sais que la première valeur sera toujours le titre du produit, alors cela me donnera le titre du produit. Cela va me donner la troisième valeur. Donc, si je regarde celui-ci et que je passe ici au numéro trois, ça va me donner la description du produit. Donc, si je sauvegarde cela, je pense que le code fonctionnait avant de toute façon, nous actualisons la page. Vous verrez que nous avons le titre et la description de tous ces produits dans cette baie. Donc, ce n'est pas un exemple très pratique, mais il vous montre une façon de faire choses pour lesquelles vous utiliseriez un objet, mais faites-le dans un liquide Shopify où vous ne pouvez pas créer d'objets. Je vais donner un exemple de plus et ensuite nous allons passer à autre chose. Cet exemple pourrait avoir plus de sens pour vous. Donc, cet exemple que j'ai pris de raisedbyturtles.org, certainement les vérifier et leur donner un cri pour moi. Donc, ce que nous faisons ici, c'est que nous créons plusieurs tableaux. Le premier tableau va décrire ce qu'est cet objet, puis le deuxième tableau et les tableaux après cela auront des valeurs, des attributs fondamentalement dans ce tableau. Donc, si vous pouvez voir ce que je fais ici ou ce que l'auteur à soulevé par turtles.org a fait. Nous avons créé ce tableau d'éléments et nous nous divisons par ce symbole de hachage. Nous allons donc avoir dans nos articles deux éléments, item1 et item2. Ensuite, dans ce tableau de couleurs, nous allons avoir le bleu et le vert. Donc, la façon dont nous pouvons les lier ensemble est par leur position dans le tableau. Donc, tant que nous écrivons le premier élément de notre tableau de couleurs pour correspondre au premier élément de notre tableau d'éléments, alors nous pouvons les référencer par le même index et c'est ce que nous faisons ici. Donc ce que nous faisons ici, et ignorer ces lignes ici. C' est juste pour réduire l'espace blanc qu'il fait exactement la même chose que ça. Mais fondamentalement, ce que nous faisons ici, c'est que nous parcourons chaque élément du tableau d'éléments, et si c'est le premier élément, nous allons obtenir l'attribut de couleur en référençant l'index de la boucle. Donc, supprimons simplement ce conditionnel et ce que nous obtiendrons est que nous obtiendrons un tableau d'éléments sortant la couleur qui lui appartient. Donc si j'appuie sur Sauvegarder, rafraîchissez la page, et je fais défiler vers le bas, nous deviendrons bleu et vert. Nous pouvons même venir ici et si nous voulions ajouter le nom de l'élément associé à cette couleur, ce que nous pourrions faire est parce que nous sommes déjà à l'intérieur de l'élément et le tableau d'éléments, nous pouvons simplement sortir l'élément et puis je vais mettre une balise de rupture pour les briser. Nous devrions voir l'article un article bleu à vert. Actualisez la page et vous verrez l'élément un élément bleu en vert. Maintenant, j'ai l'impression que j'ai besoin de dire quelque chose ici et c'est que si vous ne comprenez pas pleinement l'application pratique de cela en ce moment, ne vous inquiétez pas. C' est un truc liquide avancé. C' est pourquoi je l'ai appelé la leçon de liquide avancée. Essentiellement, ce que j'essaie de faire ici est une fois que vous entrez plus profondément dans votre voyage de programmation liquide Shopify, et commencez à maîtriser le langage plus. Vous allez avoir besoin de savoir comment faire les choses en marge et c'est de ça que cette leçon est à propos. En utilisant les références que je vous ai déjà montrées, en utilisant votre pratique de bras avec la programmation thématique Shopify, puis en arrivant à un point où il y a certaines choses que je veux faire dans le langage de programmation. Quelles sont les limites et comment puis-je contourner cela ? Donc si vous n'êtes pas encore à ce stade, ne vous inquiétez pas trop, j'ai juste pensé que je parlerais de ça maintenant parce que c'est un domaine où vous pourriez penser, ok, Chris, pourquoi dois-je faire ça ? Si vous n'avez pas encore besoin de le faire, ne vous inquiétez pas. Mais ce sont des trucs une fois que vous serez vraiment dans liquide Shopify que vous allez vouloir être conscient. Ok, comme le programme est, nous aimerions penser qu'il y a une façon cohérente et conventionnelle de faire les choses. Mais la chose frustrante avec Shopify liquide est qu'il s'agit d'un langage de modélisation développé par Shopify, et il y a beaucoup de bizarreries et de différences là-dedans. Il défie la convention de bien des façons. Donc cette leçon est comme l'antidote à ça. Encore une fois, c'est des trucs avancés. Ne vous inquiétez pas trop. Si ce n'est pas quelque chose que vous pouvez utiliser tout de suite. Mais peut-être que c'est quelque chose à revenir à une date ultérieure. Cela dit, passons à nos derniers exemples. L' exemple suivant concerne le stockage de valeurs booléennes. Donc, comme je l'ai mentionné ci-dessus, laissez-moi diviser cela. Appelez ceci créant des Booléens. Comme je l'ai mentionné ci-dessus. Nous pouvons créer un booléen, mais seulement en l'affectant explicitement vrai ou faux. Nous pouvons en fait attribuer le résultat d'une comparaison à une variable. Ce que je veux dire par là, c'est, encore une fois, je vais vous montrer un exemple en JavaScript. 11. Bonus : l'API Storefront: Tout le monde, bienvenue à cette leçon bonus sur l'API vitrine. Jusqu' à présent, nous travaillons uniquement avec le canal de vente en ligne. Si je regarde dans ma boutique Shopify, vous pouvez voir une liste de canaux de vente et la boutique en ligne est celle qui est pré-installée avec votre compte Shopify. Bien sûr, la façon de personnaliser votre canal de vente en ligne est à travers les thèmes. Nous avons tout fait à partir d'un thème. Eh bien, l'API de vitrine nous permet en fait d' accéder à nos données de magasin depuis n'importe où sur le web. J' ai pensé à la meilleure façon d'expliquer ça et je pense que la meilleure façon est que vous le voyez tout de suite. Ce que je vais faire, c'est vous montrer une application que j'ai créée. J' appelle cette application l'application Shopify client storefront app. J' ai hébergé sur un hôte d'application gratuit appelé Heroku app. Pour utiliser cette application, je vais devoir insérer quelques détails du Store. J' ai le jeton d'accès que j'ai créé déjà prêt à être utilisé et le domaine du magasin est juste ici. Si j'appuie sur soumettre, il va se connecter à mon magasin et puis soudainement vous voyez une vitrine personnalisée que j'ai construite sur une adresse complètement différente de Shopify. Juste ici, cette application est faite avec un framework JavaScript appelé view JS, que j'ai récemment appris et c'est vraiment cool pour faire des applications interactives côté client. Ce que vous pouvez faire avec cette application, c'est que vous pouvez parcourir les collections dans un magasin particulier, dans ce cas mon magasin, la boutique de test Chris. Vous pouvez parcourir les différentes pages de contenu, vous pouvez cliquer sur un élément particulier, vous pouvez sélectionner une variante, vous pouvez ajouter la variante au panier, et tout cela est fait du côté client. Comme vous pouvez le voir, il n'y a pas de rafraîchissements de page du tout parce que je l'ai fait complètement avec un framework JavaScript appelé view JS. Vous pouvez également utiliser cette API pour créer des applications en angulaire ou réagir, c'est un excellent moyen pour vous d'utiliser vos données de magasin d'une manière complètement côté client. Maintenant, si je clique sur le paiement ici, il va à la caisse réelle de mon magasin, et donc il revient à Shopify, mais toute cette expérience d'achat ici, y compris regarder des blogs, est tout sur cette plate-forme d'hébergement tiers. Chaque fois que je clique sur quelque chose et que je charge des données, cela arrive via l'API storefront. Ouvrons mon onglet réseau et nous pouvons réellement voir ces demandes passer par. Je vais aller dans mon onglet Réseau et cliquez sur l'onglet pour XHR. Rafraîchissons mon application. Vous pouvez voir que nous avons fait trois demandes ici. L' API storefront utilise quelque chose appelé GraphQL, qui est un sujet entier en soi. Si vous n'avez pas été familier avec la façon GraphQL de faire des API, mais essentiellement nous avons GraphQL, il y a un seul point de terminaison plutôt que plusieurs points de terminaison, et vous envoyez une requête à ce point de terminaison et il vous renvoie le données exactes que vous recherchez. Si vous avez déjà utilisé des API de repos, peut-être qu'il y a un point de terminaison d'API où vous demandez toutes, disons que les collections dans votre magasin, mais dans ce cas, je veux seulement l'image, je veux le titre et je veux le lien vers le collection. Eh bien, dans une API de repos, vous pourriez ne pas être en mesure de sélectionner uniquement ces données, et donc ce que vous feriez est que vous demandiez toutes les informations sur les collections. Cela signifie que vous devrez peut-être faire plusieurs demandes d'API ou simplement faire des demandes qui sont plus grandes qu'elles ne doivent l'être. Encore une fois, c'est un peu plus un sujet avancé, mais je voulais juste que vous ayez le concept et peut-être que vous pouvez utiliser l'API de vitrine à vos propres fins sur la piste. Pour revenir à cet onglet réseau ici, si je clique sur la première requête, si je vais dans l'en-tête, vous pouvez voir la requête que j'envoie à l'API et cette requête ici est une requête GraphQL. Il dit fondamentalement que je veux l'objet de la boutique et je veux ces attributs sur l'objet de la boutique. C' est juste une syntaxe GraphQL. Ici, vous pouvez voir ce que nous récupérons de l'API. Nous obtenons les données de la boutique et nous obtenons des choses comme le code de devise , le nom du magasin, le domaine principal et la raison pour laquelle cette demande existe est parce que j'utilise le nom du magasin ici. Regardons la suivante. Il semble que celui-ci accède aux collections. Comme vous pouvez le voir ici, il s'agit de la requête GraphQL. Je sais que c'est assez grand, si vous ne comprenez pas GraphQL, ne vous inquiétez pas, vous ne allez pas comprendre cela, mais le point que je fais est que vous récupérez quelque chose de l'API vitrine. Ce sont toutes les données de collecte, mais pas plus que ce que vous avez demandé. Dans mon cas, ce que j'ai fait est que j'ai demandé chaque collection et je veux connaître son handle, c'est ID, et je veux le premier produit de chaque collection et la première image de chaque produit de cette collection. La raison en est que si l'image est nulle, je veux pouvoir accéder à la première image du premier produit à la place, c'est pourquoi j'ai accédé en profondeur à cette collection. Ensuite, vous avez la troisième demande. La troisième demande, comme vous pouvez le voir ici, est d'accéder aux pages avec dans mon magasin. Où j'utilise ceci est juste ici pour fournir des liens vers différentes pages. J' utilise le nom de la page, puis j'utilise le handle pour créer un lien unique vers cette page également. Si je clique sur nous, vous pouvez voir cela tire les données de la page à propos de nous. Si nous cliquons ici, nous pouvons voir une autre demande pour obtenir plus d'informations qui en fait est la même information. Si nous faisons un peu plus en cliquant, si je clique sur le blog, vous pouvez voir que nous faisons une autre demande d'API de vitrine. Si je creuse ici, vous verrez qu'on a une liste d'articles. Ensuite, bien sûr, ces données sont représentées sur la page en utilisant view JS. Donc, pour vous donner un peu d'un coup d'oeil dans l'application si vous êtes intéressé, je l'ai juste ici, le dossier des services est où je fais toutes mes demandes d'API. Dans mon service de base, j'ai les paramètres de la requête d'API storefront. Ensuite, je crée cette fonction d'appel d'API, qui utilise un axe de code de bibliothèque pour interroger réellement l'API storefront et j'expose cette fonction au service produit et voici toutes mes requêtes GraphQL. Maintenant encore une fois, cela va profondément dans beaucoup de concepts différents comme la vue JS, que vous ne connaissez peut-être pas, GraphQL, que vous ne connaissez peut-être pas et peut-être que vous n'avez même pas beaucoup d'expérience avec les API, donc ne soyez pas submergé ici. Nous n'allons pas passer beaucoup de temps à passer par cela, mais ce que je veux faire dans cette leçon est de vous montrer un exemple de la façon dont nous pouvons utiliser ces données dans notre thème. Cette classe, bien sûr, concerne la programmation de thème Shopify et il est possible d'utiliser l'API de vitrine dans votre thème si vous le souhaitez. C' est donc ce sur quoi nous allons nous concentrer dans cette leçon, mais pour la plupart des gens, l'API de vitrine sera plus utile lorsque vous aurez besoin d'accéder aux données de votre magasin Shopify. Mais vous voulez être en mesure de le faire d'une manière complètement personnalisée, par exemple, créant une vitrine personnalisée ou peut-être une application téléphonique qui utilise les données de votre magasin. Le magasin d'une API est tout sur l'accès aux données que le client voit. Donc rien de tout cela n'a à voir avec l'accès à des choses comme l'ajout de produits, ajout de clients, la création de remises. C' est tout via l'API d'administration, qui est ce que vous utilisez pour créer des applications qui vont juste ici dans la section de votre application. Encore une fois, je ne veux pas trop parler de tout cela parce que cela est en dehors du contexte de la programmation de thème Shopify, mais ce que je veux faire dans cette leçon est de vous montrer un exemple de la façon dont nous pouvons réellement utiliser l'API de vitrine dans un sur notre propre boutique. Ce que nous allons devoir faire, c'est si je retourne à mon application et que j'ai envoyé une option ici pour me déconnecter. Nous pouvons voir que j'ai besoin d'un domaine pointu et j'ai besoin d'un magasin pour un jeton d'accès. Comme vous l'avez vu avant, j'avais déjà un jeton et je l'ai mis à l'intérieur, mais allons recréer un jeton pour que vous puissiez voir comment vous feriez cela vous-mêmes, donc si je vais dans des applications, alors je vais dans la gestion des applications privées. Vous devriez être familier avec ce processus si vous avez déjà configuré le kit de thème, car comme vous pouvez le voir ici, nous avons dû créer une application privée afin d'utiliser le kit de thème. Comme vous pouvez le voir ici, j'ai cette application API storefront. Je vais supprimer cela et le recréer pour vous les gars afin que nous puissions voir comment nous pouvons créer une application API de vitrine nous-mêmes. Ici, il y a un bouton pour créer une nouvelle application privée, je vais cliquer dessus et nommer cette application quelque chose de approprié. Je vais juste l'appeler app API storefront. C' est essentiellement l'interface qui vous permettra de vous connecter à l'API storefront. On va mettre l'e-mail du développeur d'urgence. Comme vous pouvez le voir ici, nous pouvons définir certaines autorisations d'API d'administration. On n'a pas besoin de ça. Ce dont nous avons besoin, c'est des autorisations d'API de vitrine. Ici, tout ce que nous avons à faire est de cocher cette case et ensuite nous pouvons personnaliser les autorisations que nous allons activer cette API. Ceux qu'il est déjà vérifié devraient être assez bons mais vérifions tout juste au cas où. Si nous appuyez sur « Enregistrer », cela va nous avertir que toute personne qui a ces informations d'identification peut faire requêtes à l'API, alors soyez prudent quant à qui vous partagez cette API. Je vais cliquer sur « Je comprends, créer l'application ». Maintenant, vous pouvez voir que l'application est créée et si je fais défiler vers le bas, cela me donne le jeton d'accès vitrine. Je vais laisser cette page ouverte pour que nous puissions accéder à ce jeton plus tard, et je vais ouvrir mon canal de vente en ligne dans un nouvel onglet. Ce que je vais faire, c'est retourner dans notre nouveau thème et éditer le modèle d'index. Nous avons tout ce code ici de notre leçon de liquide avancée, va supprimer ça. Ce que je vais faire à la place est de mettre un div qui va contenir notre contenu. En fait, je vais lui donner un ID parce qu'il n'y en aura un et je vais ouvrir des balises de script. Parce que nous utilisons une API qui peut accéder aux données de n'importe où sur Internet, nous pourrions le faire dans n'importe quel modèle. Il n'a pas besoin d'être dans le modèle index.liquid, pourrait être littéralement n'importe où. Pour cette vidéo, à des fins de démonstration, il est juste logique de le faire dans le modèle index.liquid. Ce que je vais faire est de saisir des données en utilisant l'API storefront, puis de la représenter sur la page via jQuery en insérant ce contenu dans cette div. Je vais copier et coller le code de l'API car cela prend une certaine configuration. C' est une fonction que j'ai créée plus tôt, évidemment. Ce qu'il fait, c'est qu'il prend une requête et envoie ensuite cette requête à l'API Ajax. Ensuite, avec cette réponse, nous pouvons réellement accéder aux données qui reviennent. Passons à travers cela très vite. Nous utilisons la fonction de récupération intégrée dans JavaScript pour faire une requête au point de terminaison de l'API storefront, qui est juste votre nom de vitrine, api/graphql.json. Si nous faisions cette demande à partir de Shopify, nous devrons bien sûr inclure le nom du magasin. Si je passe à mon application et que j'accède aux paramètres de mon ApicAll ici, vous voyez que nous avons dû définir le nom du magasin ici. Mais parce que nous sommes déjà sur le magasin lui-même ici, nous pouvons simplement utiliser l'URL relative et envoyer une requête à /api/graphql.json. Ensuite, nous ouvrons cet objet ici. Nous nous assurons que la méthode est post et nous devons envoyer ces en-têtes. Nous devons nous assurer que le type de contenu est GraphQL, nous devons autoriser l'origine du contrôle et bien sûr, nous avons besoin de notre jeton d'accès. C' est ce que nous avons généré avant. Si je retourne à mon application privée, rappelez-vous que je voulais garder cela ouvert, je vais devoir aller ici, copier ce jeton d'accès, et remplacer le jeton d'accès ici par le mien. Ensuite, nous définissons le corps de la requête à la requête qui va être transmise ici. Ensuite, avec la réponse, nous allons l'encoder avec json. Nous devons le faire pour que nous puissions réellement lire les données. Les deux choses dont nous allons avoir besoin, c'est que nous allons avoir besoin d'une vraie requête. Je vais juste mettre en place une requête vide ici. Ensuite, nous devons réellement appeler l'API. Je vais les configurer maintenant, aller à la requête API, et puis je vais utiliser cette promesse. Je vais dire réponse, console, réponse du journal. Tout cela va faire, une fois que nous envoyons la requête est le journal de la console ce que nous recevons du serveur. Afin de créer cette requête, un outil pratique se trouve dans la documentation de l'API de vitrine. Je crois que c'est sur le démarrage ou la première page de référence de l'API. Juste à noter, il y a beaucoup d'informations ici si vous voulez faire vos propres recherches sur l'API de vitrine. Ceci est plus d'un petit spectacle pratique et dire comment vous pouvez réellement utiliser l'API. Mais si vous allez à cette page, la page de référence de l'API de vitrine, vous pouvez faire défiler vers le bas et vous obtenez cet explorateur GraphQL interactif. Cela vous aide à créer des requêtes GraphQL. Comme vous pouvez le voir ici, nous en avons un très basique qui saisit l'objet pointu et obtient ensuite le nom de celui-ci. Si je fais ça, tu peux voir ce qu'on va récupérer est quelque chose comme ça. Utilisons simplement ceci pour tester si notre appel API est configuré correctement. Dans cette requête, je vais envoyer via cette requête GraphQL. Si j'appuie sur « Enregistrer » dessus, puis je prévois le thème, nous ne devrions voir rien venir sur la page à part l'en-tête. Mais si j'ouvre ma console, nous verrons que nous avons une erreur, nous avons un crochet manquant après une liste d'arguments. Retournons juste en arrière. Peut-être qu'il y a eu une erreur quelque part ici. Oui, j'ai oublié de mettre un support supplémentaire là. Rafraîchissons cette page. Maintenant que nous avons cette console ouverte, nous pouvons voir que nous avons un objet qui revient de l'API de vitrine. Nous pouvons vérifier que cela provient de l'API de vitrine en allant sur notre onglet réseau, et vous pouvez voir ici est une réponse de l'API. Nous pouvons voir la requête que nous avons envoyée à travers et nous pouvons voir la réponse. Puisque nous avons enregistré cet objet par console, nous l'avons maintenant également disponible dans notre console. Nous avons le nom de notre magasin, ce qui est quelque chose que nous pourrions facilement faire dans un thème de toute façon. Faisons quelque chose d'un peu plus impliqué. Ce que je vais faire, revenez ici, et je vais copier à travers une requête GraphQL que j'avais dans mon application de vitrine personnalisée. Si je passe à mon code de projet, je vais juste attraper le code API ici pour saisir les 20 premiers produits du magasin et je vais mettre à jour notre requête ici. Sauvegardons ça et voyons si ça marche. En entrant ici, nous avons un objet qui revient avec tous ces produits. Donc, si nous ouvrons tout ça, nous pouvons voir que nous avons toutes les données que nous avons demandées. Si nous allons dans l'onglet Réseau, tout va toujours bien. Nous avons ce que nous avons envoyé dans notre requête GraphQL, et nous avons récupéré le résultat. Encore une fois, je ne vais pas passer beaucoup de temps à vous enseigner GraphQL parce que c'est tout un sujet en soi. Mais je veux juste vous montrer ce qu'on peut faire ici. On a toutes ces données, ce qui est charmant. Mais nous voulons réellement utiliser ces données. Ce que nous pouvons faire est d'utiliser jQuery pour mettre à jour notre page. La plupart des thèmes ont jQuery déjà installé. Si vous travaillez sur un thème existant, vérifiez certainement si vous avez déjà jQuery car c'est le nouveau thème et c'est très basique. Je vais devoir réellement importer jQuery à partir du CDN. Si je cherche juste jQuery sur Google, il devrait y avoir un lien ici vers le CDN jQuery, et cela nous donne un lien vers une version minifiée de jQuery. Je peux saisir cela, et en utilisant ma connaissance des balises liquides, peux mettre cela comme une chaîne et ensuite utiliser le filtre de balise de script pour créer réellement une balise de script à partir de cela. Ce que je vais faire pour tester si jQuery fonctionne, c' est utiliser une fonction jQuery qui ne devrait pas fonctionner si jQuery n'est pas installé, mais devrait fonctionner si jQuery est installé. Ce que je vais faire, ce journal de console juste prêt lorsque le document est prêt. Si j'appuie sur « Enregistrer » sur cela, je rafraîchis la page, ouvre d'abord la console, puis actualise la page, vous verrez que nous sommes prêts, puis les données. Nous savons que nous avons définitivement installé jQuery maintenant. Je vais me débarrasser de cette fonction prête. Maintenant, ce que nous devons faire, c'est gérer notre réponse différemment. Ce que je vais faire est de mettre entre crochets bouclés ici, et je vais garder la réponse du journal de la console parce que je vais la référencer. Mais ce que nous allons faire, c'est en fait parcourir les produits ici et faire sortir quelque chose sur l'écran. J' utilise ce qui est dans le journal de la console pour comprendre comment naviguer dans ces objets. Nous avons un objet de données, puis nous avons des produits, puis nous avons des bords à l'intérieur de cela. Edge est un tableau. Ensuite, nous allons parcourir ce tableau, trouver le nœud de chacun de ces éléments de tableau, puis ce sont les données de chacun de nos produits. Je vais revenir ici, et je vais prendre la réponse, puis je vais naviguer dans les données, puis je vais naviguer dans les produits, puis dans les bords. Je sais qu'il y a beaucoup de points ici. Alors c'est là que nous commençons notre boucle. Donc, je peux dire pour chacun et je peux prendre le produit, et ensuite ce que nous allons faire pour chaque produit c'est que je veux juste m'assurer que nous sommes en train de regarder la bonne chose. Je vais en fait simplement consoles log product.node. Jetons un coup d'oeil si ça marche. Je vais cliquer sur « Enregistrer », actualiser la page ici avec la console ouverte. Comme vous pouvez le voir, nous avons le journal de la console initial, qui contient toute la réponse que nous avons reçue. Ensuite, vous pouvez voir un journal de console individuel pour chacun des produits avec leurs attributs que nous avons récupérés dans cet objet de données. Maintenant, nous sommes à l'intérieur de cette boucle, nous pouvons réellement traduire ces données en contenu sur la page réelle. Ce que je vais faire est de créer un modèle. Je vais appeler ce modèle const, et dans ce modèle, je vais construire du HTML. Disons div classe, produit. Dissocions ceci en une autre ligne pour que nous ayons un bon espacement, rend un peu plus lisible, et ensuite je vais faire un titre pour chacun. En utilisant l'interpolation de chaîne, je vais naviguer dans ce nœud de produit, donc product.node, et l'attribut que je cherche est title. Je vais prendre le titre du produit, puis en dessous, que devrions-nous montrer ? Peut-être la description du produit, product.node.description, une chose de plus, peut-être l'image. Il va y avoir plusieurs images pour un produit particulier. Eh bien, la possibilité au moins pour plusieurs images pour un produit particulier, donc celui-ci va être un peu plus compliqué, mais nous y arriverons. Ce que je vais faire est d'ouvrir une balise d'image HTML, et pour obtenir le src, l'adresse réelle de l'image. Ce que je vais devoir faire est de naviguer dans notre nœud produit, puis à partir de notre nœud, j'ai besoin d'accéder à ces images, objet, puis à l'intérieur des bords. Je vais faire ce petit peu pas à pas, donc les images, les bords, et je veux la première image de la liste des images disponibles dans ce produit. Je vais sélectionner cela en utilisant son index zéro. Maintenant, nous allons être à l'intérieur de celui-ci, et nous voulons obtenir le noeud, puis dans le noeud, le TransformedSrc, Node.TransformedSrc. Si vous vous demandez ce qu'est TransformedSrc, nous pouvons en fait dans notre requête QL graphique, spécifier ce que nous voulons que les MaxWidth et MaxHeight de l'image soient, comme ce que nous avons fait avec des balises URL d'image ou des filtres dans Liquid. Espérons que nous avons navigué correctement nos objets, j'ai raté une dernière étape ici, et c'est, je dois réellement ajouter le modèle à cette div ici. Je vais ouvrir un sélecteur jQuery, cibler ce div, puis je vais ajouter le modèle. Cela va être ajouté pour chaque produit de la boucle à ce div de contenu ici, donc je vais appuyer sur « Enregistrer » sur cela, actualiser la page. Maintenant, vous verrez que nous avons les données que nous avons obtenues d' ici dans notre API Storefront représenté sur notre page. Nous avons le titre, nous avons l'image, nous avons la description, et vous pouvez le voir, tous les 20 premiers produits de notre magasin sortent. Maintenant, tout cela est à travers JavaScript, nous n'utilisons aucun Liquid ici, c'est tout côté client. Vous pouvez peut-être le voir sur une connexion plus lente ou peut-être que si je rafraîchis la page, vous verrez qu'il y a un léger retard avant que tout se charge, puis les produits, leurs noms, et les images se chargent. Fondamentalement, ce qui se passe est, le code côté serveur est généré en premier, vous récupérez la page, la page se termine le chargement, puis peu de temps après, nous obtenons la charge asynchrone en JavaScript. Encore une fois, il n'est pas tout à fait clair pourquoi nous utiliserions l'API Storefront pour accéder à ces données alors que nous pouvons déjà y accéder dans Liquid. Mais c'est un exemple de la façon dont vous pouvez réellement utiliser l'API Storefront dans vos thèmes. Encore une fois, la meilleure utilisation de l'API Storefront est créer une application entièrement côté client. Si je lance juste mon magasin pour un jeton d'accès dans cette application à nouveau, c'est ici un exemple parfait d'une application purement côté client, et il est logique que nous utilisions les données en utilisant une API JSON, ce qui ne nous oblige pas à recharger le chaque fois. Vous pouvez voir ici que tout cela est fait côté client, qui signifie que nous n'avons jamais à recharger la page. Je suppose que ce serait un avantage majeur de l'utilisation de l'API Storefront. Encore une fois, c'est pourquoi il s'agit d'une leçon bonus, et c'est une leçon bonus parce que vous n'allez probablement pas utiliser l'API Storefront, mais je voulais vous laisser avec une courte leçon sur cette API pour vous montrer ce qui est possible. Peut-être que vous voulez réellement créer un Storefront personnalisé, ou peut-être vous avez réellement besoin d'accéder à certaines données disponibles dans l'API qui ne sont pas disponibles dans Liquid. Je connais en fait quelques exemples où l'API Storefront vous donne des données que Liquid ne le fait pas, alors peut-être que vous voulez l'utiliser pour ces cas de frange. Si vous voulez tout savoir sur les différents objets de l'API Storefront, voici où vous pouvez le faire. Tout comme nous l'avons vu dans la documentation de Shopify Liquid, nous pouvons regarder les objets disponibles dans l'API Storefront via ce menu ici. Il m'a fallu un certain temps pour comprendre comment lire cela correctement, mais si nous avons un coup d'oeil à ce que nous avons fait pour la leçon d'aujourd'hui avec les produits, vous pouvez voir ici que cela vous montre tous les, ce que l'on appelle les connexions. Il s'agit d'autres ressources auxquelles vous pouvez accéder à partir d'un produit en tant que point d'entrée, puis ici, sont tous les attributs. Par exemple, si je voulais accéder au descripteur de produit, c'est ainsi que vous le feriez. La description en HTML, la date CreatedAt ici et le métafield stocké sur ce produit. Enfin, voici ce qu'on appelle une QueryRoute, qui est le point d'entrée pour les requêtes, c'est ce que nous avons utilisé pour accéder à tous les produits. Comme vous pouvez le voir sur QueryRoute, nous pouvons accéder à des articles, blogs, des collections, des pages et des produits comme nous l'avons fait. Ensuite, une fois que vous êtes à l'intérieur du produit, vous pouvez cliquer ici pour en savoir plus sur la connexion au produit et naviguer cette documentation API comme si vous naviguiez dans une réponse QL graphique. Cela imite ce que nous avons vu ici en ce sens que nous sommes à la QueryRoute. Donc, nous retournons à QueryRoute, et dans notre QueryRoute, nous allons dans les produits, donc ici, les produits. Si je clique sur la connexion des produits, vous verrez maintenant que nous pouvons faire des bords ou de page infur, ici nous allons. Bords. Si je vais dans les bords, chaque bord aura un noeud et un curseur si nous le demandons. Comme vous pouvez le voir, chacun a un noeud, puis si nous cliquons sur « Node », il nous donne un produit, puis vous pouvez voir les connexions sur cet objet et les champs disponibles. Comme vous pouvez le voir, nous avons accédé à certains de ces champs, nous avons accédé à la description, à l'ID de gestion, et nous avons également accédé aux connexions aux images et aux balises. C' est certainement une leçon plus avancée, et il m'a fallu un certain temps pour comprendre comment utiliser l'API Storefront moi-même. Ce n'est certainement pas quelque chose que vous pouvez apprendre dans une leçon de 20 minutes, mais c'est pourquoi c'est une leçon bonus. C' est un peu révélateur de vous montrer une autre façon de représenter vos données de magasin dans une vitrine personnalisée, ou peut-être d'une manière unique sur votre thème en ligne. Il y a, bien sûr, une autre API que j'ai mentionnée précédemment, qui est l'API d'administration, et si vous voulez aller dans Shopify App Development, c'est l'API que vous allez avoir besoin d'apprendre. J' ai réellement créé une application Shopify moi-même en utilisant cette API, c'était une expérience assez cool, mais certainement pas quelque chose que je pourrais couvrir dans une vidéo de 20 minutes jamais. C' est peut-être un sujet pour un autre cours. Mais c'est à peu près ça les gars, ça devrait couvrir un assez bon aperçu de tout ce qui a voir avec Shopify Theme Programming. Si vous l'avez fait jusqu'ici, je tiens à vous remercier et à vous féliciter d'y rester. Il y a beaucoup à Shopify Theme Programming, et si vous voulez en savoir plus à ce sujet, le billet de blog est disponible sur mon site web, Christhefreelancer.com/shopify-liquid-guide/. C' est plus de 10 000 mots sur Shopify, donc si vous vous sentez ennuyé ou aventureux et que vous voulez avoir une longue lecture sur tout, Shopify Liquid, évidemment, nous ne pouvons pas couvrir 10 000 mots de contenu dans une seule classe de partage de compétences, mais c'est là que j'irais pour en savoir plus sur les différents pots. Si vous avez des questions, comme toujours, laissez-les dans la boîte de discussion ci-dessous. Merci beaucoup de gars, et je te verrai dans la prochaine. 12. Conclusion: Donc, cela conclut à peu près cette classe sur la programmation Shopify Theme. Pour votre projet de classe, je veux que vous créez votre propre section de modèle, extrait ou thème entier si vous vous sentez aventureux. Comme nous l'avons vu dans cette classe, combinaison du code liquide et du schéma JSON nous permet créer nos propres modèles et sections personnalisables. Maintenant, c'est votre chance de créer quelque chose que vous souhaitez exister et de le partager avec la classe si vous le souhaitez. Si vous souhaitez en savoir plus sur le développement de thèmes et la programmation de thèmes Shopify, suivez-moi en ligne et consultez ma chaîne YouTube pour des tutoriels supplémentaires. Enfin, si vous avez besoin de conseils ou de conseils sur ce que nous avons abordé dans la classe d'aujourd'hui, assurez-vous de laisser un commentaire dans la boîte de discussion ci-dessous et je ferai de mon mieux pour vous orienter dans la bonne direction. Merci comme toujours d'avoir regardé et j'espère vous revoir dans certains de mes autres cours.