Développement de thèmes Shopify avec Vue.js : optimisation des pages produit et panier

1. Introduction: Bonjour et bienvenue à Shopify Theme Development avec Vue.js. Je suis Christopher Dodd. Je suis un développeur web indépendant et professeur de haut niveau ici sur SkillShare.com, couvrant tout le développement web et le freelance en ligne. Dans la classe d'aujourd'hui, nous allons apprendre comment intégrer JavaScript Framework Vue.js dans les pages produit et panier d'un thème Shopify. Ce cours est idéal pour ceux d'entre vous qui ont suivi certains de mes autres cours sur le développement de thèmes Shopify ici sur SkillShare.com et sont prêts à prendre leurs compétences en développement de thème au niveau supérieur. Avec Vue.js, nous sommes en mesure d'apporter les structures de données Shopify sur l'extrémité frontale et permettre à l'utilisateur de vivre les éléments de mise à jour sans recharger le navigateur. En utilisant Vue.js sur d'autres bibliothèques JavaScript comme jQuery, nous pouvons créer une expérience plus optimale pour nous en tant que développeurs, ainsi que pour les utilisateurs finaux de notre boutique de commerce électronique. Si vous êtes prêt à commencer, cliquez sur la vidéo suivante et je vous verrai à l'intérieur. 2. Connaissances requises: La classe d'aujourd'hui lors de l'utilisation de Vue.js dans les thèmes Shopify est un sujet avancé et par conséquent, vous aurez besoin de connaissances préalables pour comprendre et tirer le meilleur parti de cette classe. Avant de suivre cette classe, vous devez comprendre la différence entre front-end et back-end en matière de développement web, ceci est également connu comme côté client et côté serveur. Si vous ne savez pas pourquoi nous aurions besoin de transférer des données de Shopify Liquid en JavaScript, par exemple, je vous recommande de jeter un oeil à la leçon 4 de ma précédente classe Skillshare, Comprendre le développement Web. Deuxièmement, vous allez avoir besoin de connaître JavaScript. Si vous avez besoin d'un rafraîchissement, vous pouvez consulter ma classe Skillshare, Web Development Fundamentals : JavaScript. Troisièmement, vous devriez avoir au moins une certaine familiarité avec l'API Ajax et Shopify. Dans ce cours, nous allons le brancher à la vue et l'utiliser pour mettre à jour notre panier à la volée. Si vous souhaitez un rafraîchissement de l'API Ajax, consultez la leçon 8 de ma classe, Shopify Theme Programming. Bien sûr, enfin, vous devriez avoir une certaine expérience générale avec développement de thèmes Shopify et l'écriture de code Shopify Liquid. Sinon, je recommande certainement mes deux cours Skillshare précédents sur le sujet, Shopify Theme Development et Shopify Theme Programming. Autre que cela, même si vous êtes nouveau sur Vue.js, vous devriez avoir suffisamment de connaissances pour continuer avec les vidéos suivantes. 3. Pourquoi utiliser Vue: Avant de commencer, parlons des raisons pour lesquelles nous souhaiterions utiliser Vue dans les thèmes Shopify. En termes simples, Vue.js est pratique pour toutes les zones de notre site Web Shopify qui nécessitent ou encouragent l'interaction de l'utilisateur en dehors de simplement naviguer vers de nouvelles pages. Réfléchissons une seconde à la façon dont un utilisateur peut communément interagir avec un site Web de commerce électronique. On peut le diviser en trois comportements principaux. Premièrement, naviguer ou trouver des produits spécifiques à acheter deux, ajouter et retirer des produits dans et de leur panier, et trois, prendre ces produits à la caisse et terminer leur commande. Sur le point 1, naviguer ou trouver des produits spécifiques à acheter, plupart du temps cela se produit via la navigation. Il vous suffit de cliquer sur la collection ou la catégorie que vous souhaitez parcourir et vous recevez une liste d'options. Cela ne nécessite pas d'interactivité au-delà de la navigation sur les pages. Mais qu'en est-il quand vous atteignez la page du produit et que vous êtes présenté avec quelques options pour modifier le produit à votre goût avant de l'ajouter au panier. Ici, lorsque vous mettez à jour votre sélection, l'image du produit, le prix du produit et d'autres détails peuvent changer. De préférence, l'utilisateur ne devrait pas avoir à naviguer vers une nouvelle page ou à actualiser la page pour voir ces modifications mineures. Deuxièmement, une fois qu'un utilisateur a fini de naviguer et d'ajouter des articles à son panier, il aimerait peut-être retirer des produits de son panier ou ajouter des unités supplémentaires du même produit. Encore une fois, il serait préférable que la mise à jour soit enregistrée instantanément plutôt que d'attendre une actualisation de la page. Heureusement, ces deux interactions que nous pouvons gérer sur le front end en utilisant JavaScript. Mais en utilisant JavaScript ou jQuery sur le framework du tout, nous allons devoir spécifier quelles sections de la page sont destinées à changer et dans quelles situations. Cela nous oblige à écrire des codes désordonnés, fois mettre à jour les données et ensuite faire en sorte que les données mises à jour soient ensuite reflétées sur la page. Vue.js résout ce problème pour nous via quelque chose appelé réactivité. Je vous encourage à lire sur la réactivité en profondeur sur le site de Vue, mais pour l'instant c'est ainsi que je vais l'expliquer. En termes simples, Vue nous permet de créer une structure de données et d'insérer des valeurs dynamiques dans notre structure HTML front-end. Lorsque les données changent, il en va de même pour les valeurs de la page. Par conséquent, ils sont considérés comme réactifs. Lors de l'écriture de Vue.js, nous n'avons pas besoin de dire explicitement à l'interface utilisateur de mettre à jour, à la place, l'interface utilisateur réagira à tout ce que les données liées à cet élément ont mis à jour. Mettons-le en termes de deux domaines où nous utiliserons Vue dans la classe d'aujourd'hui, la page produit et la page panier. Sur la page du produit, si le produit a plusieurs variantes , une sélection de l'utilisateur est requise. La sélection détermine ensuite la variante actuelle, qui peut porter avec elle un prix, une image et/ou un niveau de stock différent . Sur la page du panier, la plupart sinon la totalité du contenu de la page proviendra de ce qui est actuellement stocké dans le panier, tels que les différents articles du panier, leurs images, titres, prix, et la combinaison de ces prix, qui composent le prix total. Lorsqu' un article ou une unité est retiré du panier, cela produit un effet de récupération sur le tableau d'articles, le prix de ligne de l'article et/ou le total du panier. Dans Vue.js, nous pouvons ouvrir nos outils de développement pour voir clairement notre structure de données et comment les valeurs de la page sont maintenues en synchronisation avec la structure sans avoir à écrire manuellement des lignes de code pour mettre à jour les valeurs comme on le voit sur la page. Pour résumer, Vue.js est le plus pratique dans ces environnements, ces situations dans lesquelles vous ne voulez pas avoir à actualiser la page chaque fois qu'une mise à jour se produit. Sur les magasins de commerce électronique en particulier, Vue.js est particulièrement pratique lorsque vous traitez des sélections de variantes et des interactions de panier d'achat. 4. Comment utiliser Vue dans les thèmes Shopify: Vue.js est un framework qui peut être utilisé pour créer une application Web d'une seule page, ou il peut être déposé dans n'importe quelle page Web unique. L' instance Vue, comme on l'appelle, se branche dans votre structure HTML existante et, grâce à l'utilisation de balises personnalisées, attributs et de syntaxe de modèle, permet de lier des données et des événements du HTML à l'instance Vue. Dans la classe d'aujourd'hui, nous allons créer deux applications ou instances Vue, l' une la page du produit et l'autre la page du panier. Pour la page produit, nous allons utiliser Vue pour suivre la variante actuellement sélectionnée. Cela sera déterminé par la combinaison d'options sélectionnées par l'utilisateur via ce formulaire. Nous allons importer la liste des variantes du back-end Shopify et utiliser les valeurs de ces listes déroulantes pour déterminer la variante actuelle. Pour la page du panier, nous allons importer les données du panier de notre back-end Shopify dans notre instance à l'aide de l'API AJAX panier. Nous allons également importer une collection spécifique pour offrir des ventes incitatives sous le panier, ainsi que des états de chargement de transition pour les boutons d'ajout au panier et la table du panier étant donné que nous allons faire des appels asynchrones à l'API AJAX. Voici la vue d'ensemble de ce que nous allons utiliser Vue dans notre thème Shopify. Notez que les instances Vue et les modèles Shopify ont une relation one-to-one ici. fur et à mesure que nous commençons à construire, puis à regarder Vue, il devrait commencer à comprendre pourquoi nous le faisons de cette façon. À la fin de cette classe, vous pouvez explorer quels autres modèles de votre thème Shopify pourraient bénéficier d'une instance Vue. Un exemple que je peux penser en haut de ma tête est le modèle de collection. La boutique Shopify propose un grand nombre de produits individuels, vous pouvez créer un système de filtrage plus sophistiqué où l'utilisateur n'aura pas besoin d' actualiser la page après avoir ajouté ou supprimé différents paramètres dans filtrer une liste de produits. Cela impliquerait la mise à jour d'un grand nombre de données en fonction des commentaires des utilisateurs et constituerait une bonne occasion d'utiliser Vue. Pour l'instant, nous allons nous concentrer sur les deux zones les plus courantes où Vue.js a du sens sur la plupart des sites Shopify, ce qui, à mon avis, serait des sélections de variantes sur les pages de produits et les interactions de panier. 5. Configurer votre projet: Nous allons commencer la partie screenshare de cette classe à l'intérieur de mon terrain de test habituel pour les thèmes Shopify, Chris Testing Shop. Évidemment, vous allez avoir besoin d'un magasin Shopify pour travailler. C' est le cas dans n'importe laquelle de mes autres classes de développement de thème Shopify. Gardez à l'esprit ici, les gars, que nous nous concentrons sur un domaine très particulier du développement de thèmes Shopify en utilisant Vue.js. Nous ne couvrirons pas des choses telles que CSS, fonctionnement de Shopify ou les autres choses qui vont de pair avec le développement de thèmes Shopify. On s'attend à ce que vous sachiez comment utiliser Theme Kit. On s'attend à ce que vous compreniez CSS, HTML, un peu de JavaScript. Nous allons nous concentrer spécifiquement sur Vue dans cette classe. C' est pourquoi j'ai créé un projet de démarrage pour que nous puissions travailler dans cette classe, car nous ne voulons pas construire un thème à partir de zéro, mais nous voulons aussi utiliser un thème aussi simplifié que possible. La façon dont nous allons accéder à ce thème est d'accéder à mon compte GitHub. Donc github.com, et je crois, c'est juste « Christopher Dodd ». On y va. Dans les dépôts populaires, vous pouvez voir Skillshare, mais il y en a un nouveau que j'ai créé ici appelé « vue-class-theme ». Nous retournerons au dépôt Skillshare dans une seconde. Mais ce que je veux faire ici est de saisir ce « point de départ » dans mon dépôt vue-class-theme ici et de l'amener dans notre éditeur de code, qui pour cette classe, va être VS Code. Bien sûr, vous pouvez utiliser l'éditeur de code que vous voulez, je préfère juste utiliser VS Code. C' est gratuit et puissant. Pourquoi pas ? Je vais ouvrir VS Code, cliquer sur « Nouvelle fenêtre » ici, et exécuter un nouveau terminal. La façon d'obtenir ce dépôt est de saisir l'URL ici, puis « git clone ». On y va. Ce sera quelque part dans notre structure de fichiers, où que nous ayons mis en place notre terminal. Pour moi, ça va être ici dans mes comptes d'utilisateurs. Là, vous pouvez voir, je vais juste déplacer ça sur le bureau juste pour le rendre un peu plus facile. Alors maintenant, je peux ouvrir ça. Je vais juste ouvrir, diriger vers ce dossier, et voilà. Maintenant, comme c'est le cas avec tout le développement de thèmes Shopify, nous allons devoir mettre en place un fichier config.yml. J' ai couvert cela quelques fois différentes dans les différentes vidéos YouTube que j'ai faites. Il a été couvert dans la première classe sur le développement de thèmes Shopify ici sur Skillshare, donc nous ne allons pas passer par Theme Kit. Ce que j'ai déjà dans le dossier partagé ici, j'ai mon config.yml. Je vais juste apporter ça. Bien sûr, le fichier config.yml a tous les détails d'authentification et l'ID de thème afin de réellement se connecter au magasin. Je vais fermer celle-ci une fois qu'on aura ça. La prochaine étape pour nous est de télécharger ce thème sur notre boutique Shopify. Ce que je vais faire pour ça c'est zip, faire Compresser sur un Mac. Maintenant, il est zippé, aller à mon magasin de tests, cliquez sur « Télécharger le thème ». Sélectionnez le fichier zip. Appuyez sur « Télécharger ». Cela prendra un peu de temps pour télécharger et puis nous verrons cela arriver. Je vais juste supprimer cette majuscule V. Maintenant, nous devrions pouvoir cliquer sur « Aperçu » et voir un aperçu de notre thème. Sur la page d'accueil, il n'y a rien, mais ce que j'ai ici, c'est deux liens, un pour magasiner le tee ou les chaussures. Maintenant, nous allons parler des données du magasin dans une seconde, mais regardons ce que nous avons jusqu'à présent. Nous avons notre t-shirt ici et ensuite nous avons notre page de collection où nous avons une gamme de chaussures. Maintenant, bien sûr, tout cela est basé sur les données de magasin. Je le mentionne dans presque toutes les classes, cela tire de l'information que vous avez à l'intérieur de votre magasin. Vous n'aurez pas exactement les mêmes informations que moi, mais j'ai essayé de le rendre aussi simple et aussi facile pour vous de commencer et de le faire fonctionner sur votre magasin que possible. Ce que j'ai fait, c'est que j'ai exporté tous ces produits. Il suffit de retourner à GitHub, aller dans le dépôt Skillshare. Ici chaussures et chemise CSV, si nous importons cela dans Shopify, alors nous allons avoir tous ces produits dans notre magasin. Voici une petite vidéo de ce à quoi cela ressemble lorsque vous importez ces informations dans un nouveau magasin. Maintenant, vous devriez avoir votre thème téléchargé et vous devriez avoir ces produits téléchargés également. Si vous voulez suivre, vous pouvez simplement utiliser tous les produits que vous avez dans votre magasin en ce moment si vous voulez, c'est à vous de décider. Mais maintenant, nous avons le thème ici. Connectons notre Kit Theme. Comme je le fais habituellement, aller ouvrir, personnaliser, saisir l'ID de thème de ce thème. Allez dans notre fichier config.yml, mettez à jour l'ID du thème ici. Pour confirmer que cela fonctionne, je vais ouvrir un nouveau terminal et exécuter la montre à thème. Maintenant, vous pouvez voir que nous sommes connectés à ce thème et nous surveillons maintenant les changements. La prochaine étape consiste à mettre en place notre environnement pour Vue. Mais avant de le faire, je veux juste vous familiariser avec le projet comme nous ne l'avons pas fait jusqu'ici. C' est très simple. Ceci est basé sur un thème de départ assez nu. Vous verrez qu'il n'y a pas beaucoup d'actifs, il n'y a pas d'extraits ici. En fait, il n'y a pas non plus de sections. C' est un thème très simple. Évidemment, si vous avez un thème de production, vous auriez plus de dossiers et de fichiers ici. On est juste en train de garder les choses simples pour ce cours. La première chose sur laquelle je veux attirer votre attention, est le fichier theme.css. J' ai déjà créé ces règles de style. Je ne voulais pas passer du temps dans cette classe à créer CSS, donc j'ai tout mis dans un fichier CSS déjà pour nous. Il y a un fichier JS de thème ici. Nous pouvons mettre dans notre JavaScript général pour le thème ici, mais nous utilisons Vue et branchons pour stocker des données. Ce n'est pas vraiment nécessaire pour cette classe et nous n'utiliserons pas réellement ce fichier dans cette classe. Mais c'est aussi une option pour votre JavaScript général. J' ai aussi un logo de site ici. C' est juste Chris Testing Shop. Quel que soit votre magasin, si vous utilisez ce thème, vous aurez le même logo à moins que vous ne modifiiez ce fichier. J' ai une icône de corbeille pour la page du panier, et j'ai ce script ici, que vous pouvez trouver ici sur GitHub si vous le souhaitez. Sinon, il est déjà inclus dans le projet. C' est un moyen de faire le formatage de l'argent dans Shopify via JavaScript. Sinon, vous êtes coincé avec le formatage de l'argent liquide Shopify et cela ne fonctionnera pas lorsque nous utilisons JavaScript et Vue.js. C' est votre dossier d'actifs. Je veux attirer votre attention à côté du fichier de mise en page. Nous avons un fichier de mise en page assez basique ici. Je peux voir que j'ai inclus le curseur lisse, qui a été supprimé. Cela sera supprimé pour votre version du thème. Fondamentalement, ce que nous avons est le thème CSS inclus, c'est le seul CSS supplémentaire que nous avons inclus. Nous incluons ce script d'argent Shopify afin qu'il puisse formater les valeurs de l'argent Shopify. J' ai également inclus jQuery. jQuery est pratique pour faire nos requêtes AJAX. Sinon, si nous utilisons JavaScript Vanilla, le code finit par paraître désordonné, et il est tellement plus facile d'utiliser jQuery. J' ai inclus jQuery là aussi. Ce sont quelques dépendances. Nous allons avoir besoin de shopify-money pour formater les valeurs monétaires et jQuery pour les requêtes AJAX. Encore une fois, nous pouvons utiliser Vanilla JS, mais jQuery est un peu plus agréable. C' est à ce sujet pour les dépendances. Maintenant, il est temps d'apporter Vue.js. La façon dont nous pouvons le faire comme indiqué dans les docs est, après notre balise jQuery ici, ajouter dans cette balise de script qui apporte Vue. Si vous vous demandez d'où j'ai eu ça, c'est dans la Documentation Vue. C' est une bonne occasion de vous montrer où vous pouvez trouver la documentation pour Vue. La chose que vous devez vraiment être conscient c'est que dans cette classe, je vais utiliser Vue 3. Il y a trois versions différentes : Vue 1, Vue 2, Vue 3. Peut-être que si vous regardez cela à une date beaucoup plus tard, il y a d'autres versions après cela, mais au moment de l'enregistrement, c'est actuellement à Vue 3. Ici vous pouvez voir que vous naviguez dans la documentation pour Vue 2 par défaut. Vous devez cliquer ici pour la documentation Vue 3. Comme vous pouvez le voir, le site ressemble à peu près exactement le même, mais votre URL ici est différente. Cliquez sur « Démarrer ». Ceci est votre référence pour tout ce que Vue tout au long de la classe si vous êtes coincé. Comme vous pouvez le voir ici, juste celui avant l'installation, voici la balise de script que j'ai eue. C' est exactement le même que ce qu'on a ici. La prochaine chose que nous voulons installer est Vue DevTools. Croyez-moi, c'est si utile lors du développement pour Vue. Vue DevTools ajoute un onglet supplémentaire ici dans nos DevTools dans Chrome. Je suis sûr qu'il existe des versions pour d'autres navigateurs aussi bien, mais je vous recommande d'utiliser Chrome lors de ce développement web. Nous allons ajouter ici un onglet supplémentaire qui nous permettra d'inspecter notre couche de données Vue ainsi que nos propriétés calculées et toutes sortes de choses. Cela aide beaucoup à déterminer quelles données et ce qui se passe dans Vue pendant que nous développons. Pour cela, je vais chercher le magasin d'extensions Chrome, Chrome Web Store. La chose à noter ici est que si nous utilisons Vue 3, alors nous devons utiliser la version bêta ici. C' est celui qui fonctionne parfaitement sur Vue 1 et Vue 2, mais nous devons utiliser la bêta si nous allons utiliser Vue 3. Évidemment, cela changera en fonction du moment où vous regardez ce cours. Mais pour inspecter Vue 3, nous allons devoir utiliser cette version ici, la bêta. Je vais cliquer sur « Ajouter à Chrome », appuyez sur « Ajouter une extension », et vous pouvez voir qu'il a été ajouté à Chrome. Maintenant, ouvrons notre thème et prévisualisons le thème. Je suis sûr que pour que Vue DevTools fonctionne, nous allons devoir créer une application Vue réelle. Dit Vue.js non détecté. J' ai inclus le package, mais nous n'avons pas encore créé d'application. Juste pour prouver que tout cela fonctionne, ce que je vais faire est d'aller dans le premier modèle. Nous allons travailler sur le modèle de produit et ouvrir des balises de script. Puis à l'intérieur, je vais créer une application Vue. Rappelez-vous, dans la section théorique de cette classe, nous avons parlé de la façon dont nous faisons une relation individuelle entre les applications et les modèles de notre boutique Shopify. Nous allons créer une application appelée ProductPage pour accompagner ce modèle. Nous allons ouvrir un objet et ensuite nous allons créer une application à partir de cet objet. En dessous de cet objet, nous allons écrire vue.createapp, puis charger notre objet là. Ensuite, nous allons le monter sur notre DOM en spécifiant l'ID des éléments. Je l'ai déjà défini ici sur la page produit. En utilisant la syntaxe CSS avec le hachage, en mettant dans la page du produit là. Maintenant, les gars, juste pour noter ici que c'est la syntaxe Vue 3. Si vous regardez des exemples en ligne, la syntaxe peut être différente car cette personne peut utiliser Vue 1 ou Vue 2. Gardez ça à l'esprit. Il s'agit de la syntaxe la plus récente pour Vue 3. Si vous regardez des exemples anciens, cela aura l'air un peu différent de cela. Mais votre point de vérité ici est que vous pouvez toujours revenir à la documentation, assurez-vous que vous êtes sur la version 3. Ensuite, si nous passons à l'introduction, vous pouvez voir ici que c'est le même format. Nous pourrions effectivement obtenir une erreur si nous n'incluons pas un objet de données. Je vais vérifier ça d'abord. Allons à notre modèle de produit. Allons à la console. Il ne semble pas y avoir de problèmes jusqu'à présent. Allez dans l'onglet Vue, et voilà. On a cet élément racine ici. Voilà, les gars. Nous venons de créer notre première application Vue. Nous pouvons l'inspecter maintenant dans la Vue DevTools, il va être l'onglet final probablement dans votre DevTools ici sur Chrome. Maintenant, nous sommes dans la boîte pour commencer à créer notre première application Vue. Sans plus tarder, je vous verrai dans la prochaine vidéo où nous construisons cette application de page produit et ajoutons une certaine interactivité à cette page. Comme vous pouvez le voir, nous pouvons changer la variante ici, mais elle ne la change nulle part sur la page. Si je clique sur « Ajouter au panier », il va simplement ajouter la première variance. Nous devons réparer ça et nous le ferons dans la prochaine vidéo. Je te verrai là-bas. 6. Utiliser Vue sur la page produit: Dans cette leçon, nous allons refactoriser la page produit ici pour utiliser Vue.js. Si nous regardons le code maintenant, le contenu et toutes les valeurs dynamiques proviennent de Shopify liquide. Ce que cela signifie, c'est qu'il est rendu du côté serveur une fois lorsque la page se charge. Peu importe ce que nous faisons, la variante actuelle va être petite blanche parce que c'est la variante qui est sélectionnée au chargement de la page, et peu importe ce que nous faisons ici pour mettre à jour notre couleur, la couleur de l'image du produit ne va pas pour changer, et c'est une mauvaise expérience utilisateur, bien sûr. Actuellement, nous n'avons même pas cette configuration pour changer l'identifiant de variante. Lorsque nous cliquons sur « Ajouter au panier », il va ajouter le petit T blanc Je vais effacer mon panier rapidement en exécutant fetch. Vous pouvez le faire aussi. Ceci est juste le point de fin de l'API de panier Ajax pour effacer le panier. Il suffit de chercher le panier clear.js, et que rafraîchir la page qui effacera le panier. Retour à cette page ici. Si nous allons dans le code, nous rendons tout ce liquide Shopify sur la page, mais bien sûr, nous voulons mettre à jour certaines choses en fonction de la sélection ici dans la sélection de variance. C' est pourquoi nous voulons utiliser Vue. La première chose que je vais faire est de configurer les données. On l'a vu avant. Nous allons devoir créer une fonction de données dans cet objet, puis à l'intérieur de cette fonction, nous retournons un objet qui contient nos données. Réfléchissons à certaines des choses que nous voulons suivre dans cette application. Bien sûr, nous voulons suivre l'identifiant de la variante actuelle parce que c' est ce qui va être ajouté au panier lorsque nous cliquons sur « Ajouter au panier ». Je vais commencer par cet identifiant de variante actuelle, et la valeur de départ de notre identifiant de variante actuelle sera égale à ce que nous avons actuellement ici dans notre valeur. Comme je l'ai mentionné précédemment, la valeur qui a été insérée dans ce champ caché, et donc, ce qui est ajouté au panier lorsque vous cliquez sur « Ajouter au panier » est la variante sélectionnée ou la première disponible. Déplaçons cette valeur ici, notre instance Vue, et cela va nous assurer que l' identifiant de variante actuel sur le chargement de la page sera défini avec cette valeur. Mais alors nous pouvons le mettre à jour lorsque nous interagissons avec notre application Vue. Maintenant, ce que je vais faire ici est quelque chose de très subtil mais très important. Je vais mettre un deux-points en face de la valeur, et cela va transformer ce champ en un champ Vue dynamique. Au lieu de mettre une valeur explicite là comme ici, la valeur va être un, nous pouvons y mettre un nom de variable à partir de notre objet de données et il sera mis à jour en fonction de ce qui arrive à ces données. C' est là que la réactivité intervient. Ici, nous allons mettre le nom de la variable ici. L' idée est que si cela change au fil du temps, cela changera également automatiquement. Mais pour l'instant, nous devrions voir exactement les mêmes résultats. Je vais rafraîchir la page. Passons à notre onglet Vue, et vous pouvez voir ici nous arrivons à inspecter les données et nous pouvons voir notre identifiant de variante actuelle. Si nous inspectons le formulaire et cherchons ce champ caché, vous pouvez voir que c'est la valeur. En fait, ce qu'on peut faire, c'est aller ici et éditer ça à la volée. Si je mets ceci comme 1, 2, 3, 4, 5, par exemple, j'ai changé la valeur, et vous pouvez voir ici qu'il a changé dans le DOM aussi. Vous avez cette liaison de données qui se passe ici. C'est plutôt cool. Si j'actualise la page, cette valeur sera chargée à nouveau. C'est plutôt cool. La prochaine chose que je veux capturer, les différentes variantes disponibles pour ce produit particulier. La façon dont je vais le faire est de faire une boucle liquide. Ce n'est pas le code le plus propre, mais c'est juste la façon dont nous devons le faire dans le liquide Shopify. Je vais créer un tableau de variantes ici, et à l'intérieur de ce tableau, je vais utiliser Shopify liquide pour nous donner nos variantes. Nous allons mettre dans une boucle for ici, variante dans les variantes de produit. Fondamentalement, ce que je fais ici est de transférer les données du liquide Shopify dans notre instance Vue afin que nous puissions interagir avec elle à l'intérieur de Vue, le tout sur l'extrémité frontale sans avoir à compter sur le liquide Shopify. Pour chaque variante dans les variantes de produit, je vais avoir un objet avec une virgule. N' oubliez pas la virgule, sinon il n'y aura pas de séparation entre les variantes, et je vais copier certaines des données du liquide Shopify. Premièrement, variante id, nous allons avoir besoin de savoir si la variante est disponible. Nous pouvons définir cela sans guillemets afin qu'il puisse simplement insérer comme une valeur booléenne là, puis nous allons saisir ses valeurs d'option. Dans les trois options que nous avons à notre disposition dans Shopify, quelle est la sélection ? Si vous n'êtes pas familier avec l'un de ces objets, vous pouvez toujours les rechercher dans la documentation liquide Shopify. Je pourrais vous le montrer en ce moment juste comme un point de référence rapide, Shopify référence liquide. Si jamais vous êtes confus sur les attributs que vous avez sur un objet particulier, vous pouvez simplement aller dans la référence, descendre. Regardez la variante est celle que nous recherchons, et puis vous pouvez voir des explications de tous ces attributs que je mets dans nos données Vue. Je pourrais juste garder celui-ci ouvert juste au cas où, et revenons en arrière et construisons dans l'option 2 de repos et l'option 3. Ensuite, je vais mettre dans le prix de la variante, veillant à filtrer cela à travers le filtre d'argent dans le liquide Shopify, sinon cela va sortir comme logique sans formatage. Ensuite, je vais attraper l'image pour cette variante, et je vais ajouter une étape supplémentaire ici pour vérifier si l'image de la variante est vide. Parce que dans Shopify, si l'image de variante est vide, elle charge toujours une image, c'est juste la mauvaise image. Je vais d'abord créer une variable ici, et vous verrez ce que je fais en une seconde, prenez cette URL d'image en utilisant tous les filtres disponibles dans le liquide Shopify. Encore une fois, vérifiez la référence s'il y a quelque chose ici qui vous prête à confusion. Ensuite, ici ce que je vais faire pour l'image est mis à moins que la déclaration. Sauf si l'URL de l'image ne contient pas d'image, qui est l'image qui apparaît lorsqu'il n'y a pas d'image définie sur cette variante particulière. Je vais sortir cette URL d'image que j'ai définie dans cette variable juste au-dessus, et il n'y a pas d'autre instruction là-bas. Si c'est le cas, une image non va juste apparaître comme vide. Balayage. Maintenant, juste sur la question des images, ce que je vais aussi faire est de créer une image de secours. Dans le cas où la variante n'a pas d'image, ce qui va être beaucoup d'instances, je vais simplement utiliser l'image en vedette du produit. Je vais faire l'image de produit de secours va être présenté image, qui est une variable que nous avons configurée ici. Je peux prendre cette image en vedette et ensuite saisir l'URL de cette image en vedette, veillant à ce que nous mettions cela entre guillemets. Maintenant, regardons dans nos DevTools Vue, assurez-vous que nous n'avons pas fait d'erreurs de syntaxe. Rafraîchissez ici. On dirait qu'on pourrait avoir un jeton inattendu. On y va, disponible. J' ai tapé le varian plutôt que la variante. Rafraîchissons la page. Pas d'erreurs JavaScript, dirigez-vous vers Vue. Ici vous pouvez voir que nous avons un tableau avec toutes les variantes et les données qui ont été configurées. Nous avons notre image de produit de secours. Nous avons notre identifiant de variante actuel. Nous pouvons maintenant utiliser toutes ces informations dans notre application Vue. Nous pouvons le lier aux éléments de la page ou nous pouvons l'utiliser dans les calculs. Maintenant, il y a juste un peu plus de données que je veux ajouter ici, et c'est pour capturer notre sélection ici. Nous allons juste au-dessus des variantes, mettre dans notre sélection de variantes, et nous allons lier ceci à notre formulaire. Assurez-vous que la virgule est là. C' est juste l'option 1 va égaler la valeur sélectionnée de nos options avec des valeurs, valeur sélectionnée. Voici ce que nous faisons, si nous allons dans la documentation, nous regardons produit. Il y a un attribut ici appelé options avec des valeurs, et il retournera un tableau. À l'intérieur du tableau vous donnera les valeurs et le nom de l'option de toutes les options. Vous avez le nom et la valeur ici. Vous pouvez jeter un oeil à cet objet particulier ici. Nom, position, valeur sélectionnée, valeurs. Nous utilisons la valeur sélectionnée de la première option de produit dans nos produits. Ce sera l'option 1. Assurez-vous de mettre cela entre guillemets là. Je vais juste copier pour les deux prochaines. Pour ce 1, 2 et 3, nous avons juste besoin de mettre à jour la position dans le tableau et cela devrait être tout bon. Revenons à notre page ici. Vous pouvez voir que nous avons maintenant notre sélection de variantes, qui est petite et blanche. Nous avons cette sélection de variante ici chargée dans Vue au chargement de la page. Mais ce que nous n'avons pas actuellement, c'est la liaison des données de sorte que lorsque ces mises à jour, nos données dans l'instance Vue sont également mises à jour. Faisons ça maintenant. Passons à notre code. Je vais traîner ça parce qu'on n'a pas besoin de ça si gros. Ce que je vais faire est de lier ces valeurs à ces sélections ici. Comme nous pouvons le voir ici, nous parcourons les options avec l'attribut de valeurs sur le produit, qui pour chaque élément du tableau nous donne le nom de l'option de produit, les valeurs qui sont disponibles, et le valeur. Nous pouvons utiliser cette logique pour déterminer quelle est la sélection actuelle et créer une sélection afin que l'utilisateur puisse changer cela. Ce que nous devons faire est de lier cette valeur de la sélection à notre modèle de données ici. La façon dont nous pouvons le faire est d'ajouter un attribut ici de v-model. Nous ajoutons ceci à la sélection car c'est celui qui porte la valeur. Ici, nous pouvons commencer à la racine de l'objet de données. On va faire la variante. En fait, ça vaudrait peut-être la peine d'avoir ce côte-à-côte. Vous pouvez voir les deux côtés. Voici notre objet de données ici. Voici le code HTML. Nous voulons aller dans la sélection des variantes et retirer l'option appropriée. Je vais aller option de sélection de soulignement variante. Ensuite, ce que je vais faire pour sélectionner le nombre particulier que je veux est d'utiliser l'attribut dans cette boucle sur les objets d'option de produit de position. Product_Option.Position. Ça va insérer un numéro d'un ici, et ça va le lier à ça. Maintenant, nous avons le modèle Vue sur notre élément. On peut retourner à la page ici, rafraîchir. Si je change l'une de ces options, vous pouvez voir les mises à jour dans les données. C' est bien et bien. Nous mettons à jour notre sélection de variantes. Mais ce que nous devons faire est de convertir cette sélection de variante en une variante réelle. Nous avons notre liste de variantes ici. Ce que nous devons faire est de calculer quelle variante est actuellement sélectionnée par la sélection que nous avons stockée ici. C' est quelque chose que nous devrions faire dans n'importe quel magasin Shopify, que nous utilisions Vue ou non. Je ne vais pas passer trop longtemps à le traverser. Ce que nous allons faire est de créer notre première méthode cependant. C' est quelque chose de nouveau que nous n'avons pas encore couvert, c'est d'ajouter une méthode. Sur notre instance, nous avons notre objet de données ici. Mais créons une méthode qui est fondamentalement une fonction sur notre instance Vue. façon dont nous faisons cela est de nous assurer que nous mettons une virgule là et que nous définissons un objet de méthodes. A l'intérieur de l'objet de méthodes, nous créons notre première méthode. Je vais l'appeler variante des options. À l'intérieur, je vais chercher la variante basée sur les options de variante. Là où je vais le faire, c'est que je vais copier et coller du code, et puis je vais juste les expliquer. Ce que je fais ici est d'utiliser la méthode find sur ce tableau de variantes pour trouver une correspondance. Lorsque l'option de variante 1 est égale à l'option de sélection de variante 1, alors il s'agit d'une correspondance sur cette option particulière. On va commencer à vérifier s'il est vide. Parce que si c'est vide, alors nous ne devrions même pas chercher une correspondance par défaut va être vraie à moins que nous venions contre un faux. Puis, à la toute fin, nous allons être retournés avec un match. Cela va retourner la méthode find ici. Ce que nous allons faire avec cette valeur, si je crée une nouvelle ligne, c'est mettre à jour l'identifiant de variante actuelle pour être égal à la variante qui est sélectionnée dans cette instruction find et prendre l'ID de celle-ci. Maintenant que nous avons créé cette méthode, nous devons toujours la connecter à notre élément sur la page. Nous allons utiliser un autre attribut ici dans Vue.js, commençant par le symbole @, puis en écrivant l'événement que nous recherchons. C' est essentiellement dire onchange. Ensuite, onchange, nous allons exécuter la variante à partir des options. Nous avons la liaison, et quand nous la modifions, non seulement nous la modifions ici dans notre sélection de variante, mais nous allons recalculer l'identifiant de variante actuelle à partir de notre sélection de variante ici, ou plutôt ici. Actualisation de la page. Je veux que vous remarquez ici. Dans notre instance Vue, si je change la sélection, vous verrez que notre variante actuelle est recalculée. Si je sélectionne Moyen noir et que je clique sur « Ajouter au panier ». Nous devrions maintenant voir un t-shirt noir moyen être ajouté au panier. Je vais juste exécuter cette commande Fetch à nouveau pour se débarrasser du panier. Revenons à la page produit de la boutique Tee. C' est bien et bien maintenant, nous avons notre sélection de variantes. Mais que se passe-t-il si chacune de nos variantes a un prix différent, un statut d'épuisement différent, une image de variante différente. Nous voulons que cela soit mis à jour sur la page. En outre, il y a une chose dans Shopify où l'identifiant de variante est stocké dans l'URL. Si vous partagez cette URL ou actualisez la page, la même variante est sélectionnée, nous devons donc l'ajouter également. Les trois domaines que nous allons faire sont l'image de la variante, le prix de la variante et l'état de l'historique dans notre URL. Revenons à notre application Vue. Si nous allons réellement trouver ce qu'est l'image de la variante actuelle, le prix de la variante actuelle et l'ID de la variante actuelle sont, eh bien, nous avons déjà l'ID mise à jour ici. Nous allons avoir besoin de comprendre quelle variante est actuellement sélectionnée et de saisir cela comme un objet de ce tableau de variantes. Si je retourne aux données à l'intérieur de Vue, la seule chose que nous avons sur la variante actuelle est son ID. Cela nous permet de rechercher la variante, mais cela ne nous permet pas réellement d'accéder aux attributs de données sur la variante. Ce que nous allons faire est d'utiliser ceci pour rechercher l'objet variante pertinent à l'intérieur de ce tableau. La façon dont nous allons le faire est via quelque chose appelé une propriété calculée. propriétés calculées existent dans Vue.js car nous ne voulons pas mettre de fonctions et de logique dans notre structure HTML. Nous ajoutons simplement un objet supplémentaire ici avec nos propriétés calculées. Ensuite, nous pouvons traiter la propriété calculée comme s'il s'agissait d'un attribut de données ici et la placer dans notre HTML. Ce que nous allons faire à l'intérieur de notre propriété calculée, nous allons créer notre propre propriété appelée variante actuelle. Vous verrez cela reflété dans nos DevTools Vue en un instant. Les propriétés calculées ne sont que des fonctions qui renvoient une valeur. Nous allons faire le retour et ensuite nous allons chercher la variante en utilisant la méthode find. Variant, et tout ce que nous devons rechercher est l'identifiant de variante égal à cet identifiant de variante actuel. Cela devrait nous donner l'objet de variante pertinent de ce tableau. Revenons ici, rafraîchissons la page. Vous verrez sous les données que nous avons calculées maintenant. Si nous regardons dans la variante actuelle, vous pouvez voir que nous avons un objet avec l'identifiant de variante, les options, l'image, le prix. Si je vais ici et que je change cela, alors cela sera mis à jour. Si le prix est différent, cela sera mis à jour. Voir ici, l'image sera mise à jour si elle est censée être mise à jour. Tout cela se produit sans que nous ayons à déclencher une méthode car une propriété calculée est réactive. Si l'une de ces modifications change , toutes les propriétés calculées seront recalculées. Si nous le mettons dans une méthode, alors nous devrions recalculer explicitement. C' est la beauté des méthodes calculées. Nous pouvons relier les données et les faire réactives. Maintenant que nous avons notre propriété calculée de variante actuelle, nous avons maintenant accès à nos variantes actuelles image et prix. Assurez-vous que nos mises à jour de l'interface utilisateur en réponse à cela. Je vais retourner ici, et je vais aller à, faisons le prix d'abord. Je vais me débarrasser de cela, et je vais ajouter un attribut sur l'élément lui-même, le code V-HTML. Chaque fois que vous voyez v tiret, qui est très probablement un attribut Vue. Je vais ajouter du V-HTML. A l'intérieur du V-HTML, je peux mettre dans l'attribut que nous recherchons. Ça va être current_variants.price. Ensuite, ici pour l'image, je vais remplacer ça. Je vais rendre cette dynamique en mettant le deux-points devant et ensuite je vais mettre dans l'image de variante actuelle. Maintenant, si la variante actuelle n'a pas d'image, nous allons devoir utiliser le repli. Je vais utiliser la syntaxe double pipe ici. Si cela vient comme false, null ou indéfini, je crois que la liste est, alors nous allons par défaut à la valeur qui vient ensuite, qui sera l'image de produit de secours. Cela va être très important pour les produits qui n'ont aucune variante d'images. Retournons à notre front, et changeons ça en noir. Comme vous pouvez le voir, l'image de variante met à jour ce n'est pas particulièrement lisse en ce moment, nous allons ajouter un peu de transition sur cela mais comme vous pouvez le voir, lorsque nous mettons à jour la couleur, l'image de variante change aussi, changeant cette couleur. Si nous mettons à jour la taille, vous pouvez voir que le prix change. Comme toujours, vous pouvez utiliser les outils VUE-DevTools pour vérifier si cela correspond aux données, ce qu'il fait bien sûr. La troisième chose que je voulais lier est l'état de l'histoire, que nous ne mettons pas à jour actuellement. C' est important si vous partagez ce lien avec quelqu'un ou si vous actualisez la page. Si je rafraîchis maintenant, vous verrez qu'il est juste par défaut à la première sélection. Nous allons également créer une méthode pour mettre à jour l'état de l'historique. À l'intérieur des méthodes objet après cette variante de la méthode options, je vais créer une méthode d'état de l'historique de mise à jour. Je vais mettre dans l'argument d'une variante, puis ici du code, « Si l'historique remplace l'état ». C' est du code que j'ai copié à partir d'un thème précédent car il va être le même que vous utilisiez la vue ou non. Je le charge juste dans une instance de vue à cette occasion. Je vais juste taper le reste du code et nous pouvons parler de ce qu'il fait en une seconde. Ce n'est pas essentiel que vous compreniez exactement ce qui se passe ici, évidemment cela aide si vous le faites, mais fondamentalement ce que nous faisons ici, s'il n'y a pas de « historique remplacer l'état », et il n'y a pas de « variante » alors nous allons juste revenir. Mais s'il y en a, nous allons créer une nouvelle URL. Nous allons prendre le protocole, qui sera probablement HTTPS, puis ajouter ces deux barres obliques, puis l'hôte, puis le chemin d'accès, puis nous allons ajouter dans ce paramètre de requête de variante égale, puis passer dans le ID de variante. Ensuite, nous allons mettre à jour notre historique de fenêtre vers la nouvelle URL. N' hésitez pas à copier et coller ce code. Tout ce qu'il fait est de mettre à jour l'URL dans un navigateur en utilisant JavaScript. Maintenant, bien sûr, cela ne va pas se déclencher sans nous le refroidir quelque part donc ce que je veux faire après que la variante a été calculée à partir de ces options, je veux mettre à jour l'état de l'historique. Afin de déclencher une méthode à partir de la même instance, nous faisons juste this.updatehistorystate, et ensuite nous avons cet objet variant afin que nous puissions juste le placer là-dedans. Cela va trouver l'ID de variante de cet objet et le placer après ce paramètre de requête dans notre navigateur. si je rafraîchis la page ici, sélectionnons une variante différente et voyons ce qui se passe. Ici, vous pouvez voir que notre identifiant de variante est ajouté ou mis à jour dans notre navigateur. Si je rafraîchis la page, j'obtiendrai la même sélection. Ce sont les trois domaines que nous voulons réagir. Nous voulons que le prix réagisse, nous voulons que l'image du produit réagisse, et nous voulons que l'état de l'histoire réagisse. C' est essentiellement ça pour notre instance Vue. La seule chose que je vais faire avant de passer à autre chose, c'est que ça a l'air un peu glitchy. Je veux dire, ça pourrait être une meilleure expérience utilisateur donc je vais utiliser quelque chose qui vient standard dans Vue, qui est les transitions. Si je retourne à l'endroit où se trouve cette image, et que je vais envelopper l'image dans un élément Vue appelé transition, je vais l'appeler fondu, ce qui lui donnera la transition de fondu, puis le copier là-bas. Il y a deux choses dont nous avons besoin pour que cela fonctionne. L' un est que nous avons besoin du CSS. Ce que cela va faire est d'ajouter des classes à cet élément pendant qu'il change. Nous devons réellement mettre dans notre CSS ce que nous voulons qu'il fasse lorsque ces classes sont ajoutées. Je vais juste vous montrer où c'est dans notre thème. CSS, juste ici. Il va ajouter et supprimer ces classes. Nous avons juste besoin de les définir dans notre CSS. Vous pouvez le trouver sur les exemples de ce qu'il faut faire dans la documentation Vue. Si nous allons dans « Transitions » « Enter & Leave », vous pouvez voir que c'est fondamentalement le même code de la documentation donc voici la référence. L' autre chose dont nous aurons besoin est, nous devons ajouter une clé à cet élément, parce que Vue ne saura pas qu'il a changé même si ce SRC a changé. Il doit savoir que l'élément a changé. Une façon de le forcer à comprendre cela est de donner une clé à l'élément. Nous allons faire : key, et ensuite nous allons rendre la clé égale exactement à la même que ici dans la SRC. Maintenant, si je rafraîchis la page, et que nous allons changer cet attribut, vous pouvez voir que nous avons ce joli petit fondu entre les différentes couleurs. À quel point c'est bon ? Là, vous l'avez. Nous avons notre page produits ici. Si je sélectionne une variante, le prix, l'image la variante et l'ID de la variante dans l'URL vont se mettre à jour à côté, ou dans quelques millisecondes, et il va enregistrer l'ID de la variante actuelle en fonction de l' sélection. Lorsque je clique sur Ajouter au panier, si j'ai sélectionné un grand t-shirt rouge, il va ajouter un grand t-shirt rouge à mon panier. Comme vous pouvez le voir ici cependant, cela n'a pas d'interactivité, si je monte la quantité, cela ne fonctionnera pas, si je clique sur la corbeille, ça ne fonctionnera pas. Ces ventes incitatives ici ne sont pas liées. Si vous êtes prêt à passer à la prochaine leçon, nous allons réellement connecter cette page à Vue, et Vue va gérer toutes ces interactions et synchroniser toutes ces données. La page du panier, bien sûr, est un excellent candidat pour Vue.js. Dans la leçon suivante, connectons cette page de panier. 7. Utiliser Vue sur la page panier: Dans la dernière leçon, nous avons raccordé la fonctionnalité de sélection des variantes sur la page du produit. Maintenant, si vous modifiez cela va changer tous les éléments de la page qui sont liés à cette sélection. Remontons la ante maintenant et travaillons sur la page du panier. Comme vous pouvez le voir ici, il y a beaucoup d'interactions possibles. Premièrement, nous devrions être en mesure de mettre à jour la quantité, afin que nous puissions ajouter plus de T-shirts à notre commande, ajouter moins de T-shirts à notre commande, nous devrions être en mesure de supprimer un article de ligne du panier, en cliquant sur ce bouton poubelle. Nous devrions également être en mesure d'ajouter n'importe lequel de ces ventes au panier et avoir la mise à jour en direct du panier. Dans cette leçon, c'est ce que nous allons construire en utilisant Vue. Nous actualisons simplement la page, assurons que tout est synchronisé. Passons à partir de notre modèle de produit ici et ouvrons notre modèle de panier. Dans cette leçon, nous allons devoir refactoriser certaines de ces boucles créées en JavaScript, car nous allons mettre à jour ces listes en utilisant Vue. Ce sera beaucoup plus dynamique que ce que nous avons fait dans le modèle de produit précédent. Comme nous l'avons fait auparavant, ouvrons une balise de script en bas du fichier template ici, et en utilisant la même convention, je vais appeler cette application Vue CartPage. Ensuite, je vais mettre cet objet dans une méthode d'application create Vue, donc vue.CreateApp CartPage.mount, et je vais le monter sur l'élément qui a l'ID de CartPage. Maintenant, l'une des plus grandes différences entre cette instance Vue dans ce modèle par rapport au modèle de produit est que nous n'allons pas utiliser Shopify Liquid pour charger les données. La raison pour laquelle nous avons une API appelée l'API du panier Ajax qui nous permet d' utiliser la requête Ajax pour recueillir des informations sur le panier et mettre à jour le panier. En fait, nous n'avons pas besoin d'utiliser Shopify Liquid du tout. Je pense qu'il pourrait être utile de mentionner que nous pourrions utiliser l'API Ajax dans notre modèle de produit. Au lieu de cela où nous créons les objets de données en utilisant différentes balises Shopify Liquid, ce que nous aurions pu faire à la place, et je vais juste coller du code en ce moment, c'est au lieu de cela ici, il suffit de commenter cela, donc ce n'est pas distrayant, au lieu de cela, ce que nous aurions pu faire est commencé avec un objet produit vide et ensuite apporté les informations sur le produit via l'API Ajax également. J' ai opté contre cela, et la raison pour laquelle c'est parce que nous voulons que les objets qui se remplissent au chargement de la page, cela peut causer des problèmes supplémentaires, cela peut causer des problèmes supplémentaires, si cela est vide au chargement de la page et que cela est chargé, rend juste un peu plus difficile. Mais c'est aussi une option sur votre application de page produit, si vous vouliez éviter d'utiliser Shopify Liquid. Je vais juste remettre ce code là où il était avant. peu près le même concept que sur la page du produit à la page du panier, nous pourrions charger dans les informations du panier à l'aide de Shopify Liquid. Mais pour mettre à jour le panier à la volée, nous allons avoir besoin d'utiliser l'API Ajax également. Ce que nous allons faire est de travailler uniquement avec l'objet panier via l'API Ajax. Dans cette application particulière, nous n'allons pas avoir à utiliser Shopify Liquid. C' est une grande différence. Comme mentionné précédemment dans la classe, je m'attends à ce que vous compreniez un peu sur l'API Ajax. Si vous ne le faites pas, il y a une leçon que je relierai dans la description d'une précédente classe Skillshare. L' API Ajax est un moyen pour nous de recueillir en particulier des informations sur le panier via JavaScript. Nous n'avons pas besoin d'utiliser du liquide Shopify. C' est parfait pour créer des interactions de chariot frontal, ce que nous allons faire ici en utilisant Vue. Chargons en fait quelques données de panier à partir de l'API Ajax en ce moment. Comme je vous l'ai déjà montré avec l'objet produit, nous allons devoir commencer avec un objet de données vide ou un objet panier vide ici. Nous savons qu'à l'intérieur de l'objet du panier, ils vont être des articles. Nous pouvons définir une structure de base ici, mais jusqu'à ce que la requête Ajax revienne, nous ne pouvons pas encore remplir ces données. Nous allons juste commencer avec les articles du panier comme un tableau vide. Mais ce que nous allons faire sur le crochet de cycle de vie créé est de mettre à jour cet objet ici. Je viens de mentionner un nouveau concept ici, les crochets de cycle de vie. C' est fondamentalement différentes parties du processus de création et de montage d'une instance Vue, nous pouvons déclencher certaines choses. Tout comme vous le feriez lorsque vous écrivez, disons, jQuery ou tout autre JavaScript, vous attendez que la page se charge, que le DOM se charge afin d'exécuter du JavaScript. Avec Vue, nous pouvons nous connecter à différentes méthodes de cycle de vie. Juste une recherche rapide de ce que c'est. S' il y a une recherche ici, crochets de cycle de vie, nous avons BeforeReate, créé, BeforeMount, monté, BeforeUpdate, mis à jour. Mais fondamentalement, les principaux communs sont montés et créés. Ce que je vais faire est dès que l'instance Vue a été créée, je veux déclencher cette requête Ajax et mettre à jour notre objet panier. En fait, passons à notre page de panier et ajoutons ce crochet de cycle de vie juste après la méthode de données là-bas. C' est juste une méthode à la racine de l'instance Vue, donc nous dirons quand l'instance est créée, nous allons créer une requête get, et cela utilise jQuery. Vous devriez être familier avec cette syntaxe. Nous utilisons jQuery pour frapper le point de terminaison cart.js, puis nous allons diriger a.then, traiter la réponse. Nous allons à JSON analyser la réponse, donc cela va devenir un objet JavaScript alors. Ensuite, nous allons prendre cet objet JavaScript qui va être notre panier et puis ici nous allons définir l'objet panier dans les données de cette instance à l'objet panier qui est retourné de l'API. Si je vais ici, actualisez et ouvrez Vue DevTools. Vous pouvez voir que l'objet cart de l'API Ajax remplit maintenant notre.data. Vous pouvez voir tant d'informations toutes à partir du panier Ajax API, nous avons toutes ces informations maintenant dans notre instance Vue. Si jamais vous voulez vérifier la demande d'API Ajax comme toujours, vous pouvez aller dans l'onglet Réseau, actualiser la page, ici vous devriez le voir. Il devrait être l'un des premiers là-bas, cart.js. Vous pouvez voir que nous faisons cette demande GET code d'état 200. Tout est bon. C'est ce qui revient. Impressionnant. Nous avons maintenant notre chariot. Ce que nous voulons faire est d'utiliser notre objet de carte dans Vue pour rendre cette pièce maintenant plutôt que Shopify Liquid, parce que nous allons mettre à jour le panier en fonction de si nous supprimons un produit ou nous ajoutons un nouveau produit au panier. Il va y avoir des produits ajoutés et supprimés de cette liste à la volée, et nous ne voulons pas avoir à attendre que Shopify Liquid effectue un chargement de page pour mettre à jour cette table. Ce que je vais faire est d'introduire de nouvelles choses que nous n'avons pas vues auparavant dans cette classe qui est une boucle, et quelques conditionnalités aussi bien à l'intérieur de Vue. Comme vous pouvez le voir ici, nous avons si le nombre d'articles dans le panier est supérieur à zéro alors nous voulons les parcourir et les montrer. On ne veut plus faire ça avec Shopify Liquid. Refactorisons ceci pour utiliser Vue. Ce que je vais faire est de me débarrasser de cela et d'utiliser ce qu'on appelle une balise de modèle. Une balise template est fondamentalement une balise qui ne sera pas rendue dans Vue, mais elle est juste utilisée pour la logique et les boucles. Je pourrais faire un div ici et envelopper tout cela dans un div et ensuite faire mon v-if, mais je ne veux pas réellement rendre un div. Je vais juste div-template, et vous verrez dans une seconde, il ne rendra pas un élément, mais il rendra ce qui est ici si l'instruction if-est vraie. Pour mettre un conditionnel à l'intérieur de notre HTML Vue ici, nous pouvons utiliser v-if, et ce que je veux faire est similaire à la façon dont nous venons de le faire dans Shopify Liquid. Je vais regarder cart.items.length et vérifier si c'est supérieur à zéro. Si oui, nous allons parcourir, sinon, ce que je vais faire, mettre fin à ce modèle, créer un nouveau pour d'autres, et tout ce que vous faites est v-else, et mettre dans votre panier est actuellement vide. Je vais me débarrasser de ça. Terminez if-statement là-bas et actualisez la page ici, il devrait ressembler le même. Mais une chose que vous devriez remarquer en fait est que lorsque nous actualisons la page, il y a un léger problème avant qu'elle n'apparaisse parce que nous calculons si elle devrait afficher ou non en fonction de JavaScript. Il y a une fraction de seconde où l'objet panier est réellement vide. Ceci est en fait faux pendant une fraction de seconde avant que les informations du panier soient chargées, puis cela devient vrai. C' est un peu glitchy, mais on va le réparer plus tard dans cette leçon. Maintenant, nous voulons remplacer ce Shopify Liquid for loop par une vue for loop. Pour cela, nous pouvons simplement mettre la boucle for directement sur cet élément lui-même. Je vais me débarrasser du début et de la fin. Changeons l'indentation ici. Nous pouvons faire v-for et ce que nous pouvons faire ici est pour l'article dans cart.items. Voyons si nous abordons les problèmes en faisant cela. Comme vous pouvez le voir, nous avons une position, mais cela a, bien sûr, cassé tous ces éléments car avec notre code précédent nous avons créé cet objet élément à l'intérieur de notre boucle afin que nous puissions saisir ces attributs. Nous allons devoir le refactoriser aussi. En entrant ici, je ne veux pas de la version liquide Shopify du titre de l'article. Ce que je vais faire à la place v-html comme nous l'avons fait avant, et faire item.title. En utilisant les informations dans Vue pour l'image src, regardons simplement notre objet de données ici, voir le titre qui arrive maintenant. Ça va dans nos articles. Jetez un coup d'oeil. On a cette image ici pour qu'on puisse se débarrasser de ça. Mettez un deux-points car c'est une valeur dynamique et nous insérons une variable ici, item.image. Voyons si cela a fonctionné correctement. Oui. Ensuite, ici pour le prix de la ligne finale de l'article, nous allons formater cette valeur en seulement une seconde, mais pour l'instant, mettons simplement la valeur explicite. Nous ferons l'objet, la ligne, le prix. Vérifiez que cela fonctionne. Oui. Encore une fois, c'est dans le sens et ce n'est pas formaté, mais nous allons corriger cela en seulement une seconde. Ensuite, ici la valeur intérieure, nous voulons corriger cela à la quantité réelle de l'article. Comme toujours, si nous mettons une variable ici, valeur dynamique, nous devons rendre ce champ dynamique en mettant ce deux-points. Je crois que c'est tout. n'y a plus de liquide Shopify ici. Débarrassez-vous d'une partie de cet espace blanc et amenons cette indentation. On y va. En fait, dans la barre latérale, on en a un. Nous allons juste supprimer ce v-html et au lieu d'aller dans un article spécifique, nous allons juste faire le panier prix total. Nous avons toujours une boucle Shopify Liquid ici, mais nous réparerons ça dans une seconde. Je vais me rafraîchir ici, et comme vous pouvez le voir, toutes ces informations proviennent maintenant de notre instance Vue plutôt que de Shopify Liquid. Ici, il est toujours généré par Shopify Liquid mais nous y arriverons après avoir travaillé sur la fixation de cette quantité, le formatage des prix et la possibilité à un utilisateur de retirer un produit du panier en utilisant cette icône. abord, nous allons brancher ce sélecteur de quantité afin qu'il mette réellement à jour la quantité de l'article de ligne dans le panier. Pour cela, nous allons créer une méthode, c'est similaire à ce que nous avons fait sur la page du produit lorsque la sélection est modifiée, nous devons réellement déclencher une méthode sur cet événement, et dans ce cas, nous allons être soumettre une requête Ajax à l' API du panier Ajax pour mettre à jour la carte sur le back-end. Allons en fait après notre crochet de cycle de vie créé ici et créer l'objet d'une méthode, et à l'intérieur nous allons créer cette méthode de panier de mise à jour. Maintenant, les méthodes que j'ai créées dans cette instance Vue, ou je vais créer dans cette instance Vue en fonction des différentes fonctions dans l'API Ajax panier. Nous avons les principaux est d'obtenir le panier, d' ajouter un article au panier, mettre à jour les quantités, puis voici le changement. Vous pouvez également mettre à jour les quantités et les propriétés. Vous avez également Clear, si vous voulez effacer le panier, nous n'aurons pas de bouton pour effacer l'ensemble du panier, mais nous allons déclencher ce point de terminaison API afin d'activer la suppression d'un élément de ligne du panier ou en réduisant sa quantité. Les deux vont utiliser le même point final et donc la même méthode. Pour revenir au code, les deux attributs que je vais mettre ici, variante id et quantity. C' est basé, bien sûr, sur ce que nous avons mis par ici. Nous avons un identifiant de variante et la quantité, puis nous l'envoyons dans l'objet d'une mise à jour. Ce que je vais faire id et quantité, puis à l'intérieur de cette méthode, je vais commencer la demande de poste en utilisant jQuery et cela va au point de fin update.js du panier. Ensuite, nous allons mettre dans le corps de la requête, et pour cela, nous pouvons le faire comme ceci, ou nous pouvons le faire comme une chaîne. Je pense que c'est un peu plus facile, donc je vais le faire de cette façon. Essentiellement, tout ce que nous devons faire est d'avoir des mises à jour entre crochets, mettre l'identifiant de variante, puis égal à suivi de la quantité. Je vais juste le faire, les mises à jour, et en passant, ces ticks arrière, si vous n'êtes pas familier, nous permettent de mettre ces variables dans la chaîne sans avoir à quitter et entrer dans la chaîne encore et encore. Avec les ticks arrière définis, je vais mettre id avec cette syntaxe là-dedans, puis après les égaux mettre la quantité. Ensuite, nous allons enchaîner a.then, tout comme nous l'avons fait avec get cart, prendre la réponse, JSON analyse la réponse, et puis nous allons être retournés à l'objet panier auquel nous allons définir notre propre panier objet égal à. Maintenant, notez que toutes les requêtes AJAX ne retourneront pas l'objet panier. Certains d'entre eux retournent un élément d'une seule ligne, mais dans ce cas, le point de terminaison update.js renvoie le panier. Même chose, évidemment, pour obtenir le panier, avec ajouter au panier. Je crois qu'il retourne juste l'article. Nous verrons ça dans une seconde quand nous intégrerons ça dans nos ventes incitatives. Mais pour l'instant, nous pouvons compter que le point de terminaison du panier update.js va nous rendre le panier. Évidemment, cela ne va pas fonctionner, sauf si nous l'attachons à notre sélection. Alors passons à cette méthode de changement. Tout comme nous l'avons fait avec le modèle de produit, je vais mettre à l'intérieur de cette @change, mise à jour coupe. Pour l'ID de variante, nous l'avons défini sur l'élément. On y va, variante ID. Ensuite, le deuxième argument, la quantité est également définie sur l'article, c'est juste la quantité. Maintenant, si on laisse ça comme il est et qu'on retourne ici et on met ça en place, tu verras que ça revient à un, et c'est parce qu'on n'a pas mis de modèle en V ici. Donc, comme nous l'avons fait sur la page Produits, nous devons changer ceci en V-model pour obtenir cette liaison de données bidirectionnelle. Maintenant, actualisons la page et voyons si cela fonctionne. Comme vous pouvez le voir, lorsque nous mettons en place la quantité, nous voyons le prix de la ligne et la mise à jour du prix total. Vérifions que toutes les pièces individuelles fonctionnent. Il devrait être si cela obtient ce résultat, mais laissez-moi rafraîchir notre onglet Réseau ici, effacer l'onglet Réseau, cliquez dessus, et vous verrez que nous sommes en train de frapper ce point de terminaison update.js. Il revient vert. Là, vous pouvez voir ce que nous lui envoyons, et ici vous pouvez voir ce que nous recevons. C' est un tout nouvel objet de panier. Cela, comme nous l'avons indiqué à notre avis, va mettre à jour cette situation. Si je vais dans mes articles et je fais défiler vers le bas jusqu'à l'endroit où il a la quantité. Où est la quantité ? C'est là. Si je clique dessus, cela prendra une seconde, mais une fois qu'il reviendra de l'API, il la mettra à jour sur notre instance de vue également. Shopify par défaut des prix de sortie comme celui-ci, en cents, sans formatage, donc nous allons devoir le formater nous-mêmes en JavaScript. Mais si vous vous souvenez, nous avons inclus ce fichier shopify-money.js, et à l'intérieur de ce fichier shopify.money.js, nous avons cette méthode d'argent format sur l'objet Shopify. On va l'utiliser maintenant. Ce que je vais faire est de créer une nouvelle méthode afin que nous puissions l'utiliser à différents moments de notre application. Voici l'objet de méthodes. Je vais vérifier soigneusement où cela se termine, puis avant qu'il ne se termine, je vais ajouter une autre méthode ici appelée prix de format. A l'intérieur de cette méthode, il y a deux prix que je veux mettre à jour. Je veux mettre à jour le prix de la ligne et je veux mettre à jour le prix total. Ce sont les deux que nous pouvons voir dans notre interface utilisateur ici. Mais je ne vais pas réellement mettre à jour les valeurs elles-mêmes, je vais créer une nouvelle valeur appelée prix de ligne formaté et prix total formaté. De cette façon, nous conservons ces vieux. Vous pouvez le faire comme vous voulez, vous pouvez les remplacer, mais je vais laisser l'original en place et juste en créer un nouveau. Je vais créer une boucle ici, boucle à travers les différents articles de notre panier. Pour chaque article, je vais créer un nouvel attribut, le prix de ligne formaté, qui sera égal au prix de la ligne d'article, mais avec une différence que nous l'exécutons via la méthode d'argent au format Shopify. Je vais l'envelopper dans le format de l'argent. C' est pour le prix de la ligne d'article. Ensuite, pour le panier global, je vais créer un nouvel attribut, le prix total formaté, et cela va être égal, encore une fois, au résultat de l'argent au format Shopify (this.cart.prix total). Maintenant, bien sûr, nous ne faisons pas ça nulle part, alors faisons-le après avoir mis le chariot. Il y a deux endroits où on fait ça. Je vais l'exécuter ici après avoir mis à jour le panier, et l'exécuter ici quand nous chargeons le panier pour la première fois. Maintenant, rafraîchissant la page, vous verrez que nous avons toujours les mêmes valeurs ici. Mais si nous allons dans notre objet ici, vous pouvez voir que nous avons un prix de ligne formaté, et sur le panier, nous devrions avoir un prix total formaté. Ce que nous avons à faire est d'aller dans notre HTML et de les mettre à jour. Donc, au lieu du prix de la ligne, prix de la ligne formaté, et au lieu du prix total, le prix total formaté. Ensuite, il utilisera la version formatée plutôt que l'autre version qui vient directement de Shopify. Voilà, tu y vas. Maintenant, nos sélecteurs de quantité fonctionnent, et il met à jour nos prix de ligne et le prix total. Maintenant, vous avez peut-être remarqué ici que nous n'écrivons pas vraiment le code DRY quand nous avons this.cart est égal au panier et ce prix .format deux fois dupliqué. Ce que je vais faire est de déplacer les deux dans une nouvelle méthode que je vais appeler set cart. Il va prendre un objet panier, puis il va mettre cet objet panier dans le panier, puis formater les prix. Au lieu de cela, ce que je vais faire est de mettre ce panier ensemble, et ensuite nous pouvons faire la même chose pour le panier de mise à jour. Cela rend juste notre code un peu plus DRY afin que nous puissions recycler le code. Voilà, ça marche toujours. Maintenant que nous avons cette fonction de panier de mise à jour fonctionne et que nous touchons l'API avec succès, il devrait être assez facile d'activer ce bouton pour fonctionner. Tout ce que je vais faire est de créer une autre méthode après les prix de format appelés remove du panier. Tout cela va prendre est un ID de variante. Il n'a pas besoin de connaître la quantité car la quantité est implicite. La quantité, bien sûr, sera nulle si nous la retirons du panier. Ce que je peux faire est juste le faire, mettre à jour le panier, mettre dans l'ID, puis pour le deuxième argument, la quantité, juste mettre à zéro. Maintenant, nous allons lier cela sur l'événement onclick pour ce bouton. Je vais utiliser cette syntaxe de symbole @, et écrire ici, « Supprimer du panier item.variant ID. Maintenant, vérifions si ça marche. Parfait. Nous venons de retirer un article de notre panier. Si je retourne au T-shirt, ajoutons un petit T-shirt rouge. Tu verras qu'il est là. Nous pouvons mettre à jour la quantité, nous pouvons la retirer du panier, et tout fonctionne. C' est nos principales fonctions dans la table de chariot. Prenons une courte pause, et nous allons en fait coder ces ventes incitatives ici. Nous allons ajouter une autre fonction ici pour ajouter au panier, ainsi que pour mettre à jour et supprimer les articles qui sont déjà dans le panier. 8. Ventes du panier et animations: Bien sûr, tous les magasins ne vont pas avoir des ventes incitatives sur leur page de panier. Mais c'est une bonne occasion d'augmenter la valeur moyenne des commandes en offrant aux clients un moyen facile d'ajouter des produits supplémentaires à leur panier. En utilisant Vue.js, nous pouvons rendre cette interaction assez lisse et transparente. Si nous allons à nouveau dans notre éditeur de code, vous pouvez voir que nous apportons ces valeurs via Shopify Liquid et que nous faisons nos boucles et conditionnalités via Shopify Liquid. Tout comme on l'a fait ici, on va devoir le refactoriser. La première chose que nous devons faire est d'obtenir ces ventes incitatives dans un tableau sur une instance de vue réelle. Après le panier, ce que je vais faire est de créer un tableau appelé Upsells. Ici, nous allons charger dans cette collection que nous incluons ici, mais dans notre vue des données afin que nous puissions rendre cette section un peu plus interactive et vous verrez pourquoi nous devons le faire en une seconde. Tout comme nous l'avons fait sur la page produit pour la variance, je vais créer une boucle Liquid ici pour apporter des produits d'une collection particulière. Je vais utiliser la collection de chaussures. Rappelez-vous que cette valeur doit correspondre à la poignée d'une collection dans votre magasin si vous avez importé les chaussures, puis créé une collection avec ces chaussures, puis vérifiez que la poignée est des chaussures, alors cela devrait fonctionner. Sinon, vous devrez le faire. Évidemment, nous allons devoir mettre des produits à la fin ici. Je vais fermer ça, endfor, et puis à l'intérieur ici, ouvrir un objet et copions quelques valeurs de Shopify Liquid. Donc marée. suivant ce même format, je pense que je vais juste passer en revue ces maintenant parce que nous l'avons vu avant et je suis en train de copier essentiellement les données du back-end Shopify en utilisant Shopify Liquid dans notre front end ici. Je vais avancer rapidement à travers ça un peu. Assurez-vous de terminer les objets par une virgule ici afin que vous ayez une séparation entre ces objets. Comme vous pouvez le voir ici, nous apportons le titre, la poignée, l'image, l'identifiant du produit ; ce qui deviendra clair pourquoi nous le faisons en seulement une seconde, et bien sûr l'ID de la variante. Parce que l'ID de variante, comme nous le savons, est ce qui est réellement ajouté au panier. Rafraîchissons notre page et vérifions simplement que les données arrivent. Comme vous pouvez le voir ici, nous n'avons rien dans notre tableau upsells, vérifions pourquoi cela pourrait être le cas. Je vois ici que nous avons oublié un s sur les collections. Appuyez sur Enregistrer sur ça. Maintenant, vous pouvez voir que le tableau de ventes incitatives a toutes les mêmes informations que nous avons ici et maintenant nous pouvons faire une boucle à travers cela au lieu d'utiliser Shopify Liquid. Allons refactoriser ce code maintenant. Je vais à l'intérieur faire un v-for ou v-if plutôt. Si upsells.length est supérieur à zéro. Nous pouvons nous débarrasser de cette déclaration entourant si maintenant. C' est un code qui ne devrait pas être là. Je vais juste enlever ça. Ensuite, à l'intérieur de la boucle, au lieu de faire cette boucle, ce que nous allons faire est de la mettre ici. Je vais faire un modèle, v-for upsell dans les ventes incitatives. Nous avons mis cela autour de cela pour remplacer la boucle for-. Pour imiter cette limite, je vais vous montrer en une seconde comment nous faisons cela, nous allons devoir ajouter l'attribut supplémentaire ici de l'index. Cela suivra l'index de l'élément et du tableau, puis nous pouvons faire v-if index est inférieur à cinq. Rafraîchissant la page, vous pouvez voir que nous avons perdu nos ventes incitatives générées par Shopify Liquid. C' est parce que nous devons vraiment aller ici et mettre à jour ces attributs. Tout comme nous l'avons fait avec la table de panier ci-dessus, je vais les remplacer par des attributs de vue. Titre de vente incitative, et puis pour celui-ci, le src, nous allons mettre le deux-points devant lui, supprimer ceci et utiliser l'image de vente incitative. Je crois que c'est tout. Rafraîchir la page ici, voir que cela ne fonctionne toujours pas. Je pense que notre problème ici est que nous devons déplacer l'index à l'élément ci-dessous. C' est la différence entre Vue 2 et Vue 3, vous pouvez le faire dans Vue 2 mais pas dans Vue 3. Rafraîchissez ici. Voilà, tu y vas. Maintenant, nous pouvons voir les produits sont là dedans. Nous avons juste besoin de rendre cet indice inférieur à quatre et pourtant, nous n'avons que les quatre produits à l'intérieur. Maintenant que nous utilisons Vue pour afficher ces ventes incitatives maintenant plutôt que Shopify Liquid, nous passons à l'étape suivante qui consiste à activer ces boutons « Ajouter au panier » pour fonctionner. Ce que je vais faire, dirigez-vous vers le code et créons une nouvelle méthode pour ajouter au panier. Nous avons notre retrait du chariot ici. Je pourrais juste le mettre avant le retrait au panier. Ajouter au panier. Pour ajouter n'importe quel produit au panier, nous allons avoir besoin de connaître son identifiant de variante. Comme toujours, nous pouvons nous référer à la référence ici sur la documentation officielle de Shopify. Je viens de trouver ceci au fait, en cherchant l'API Shopify Ajax. Il devrait être sur l'API Cart juste là. Donc pas trop difficile à trouver avec un peu de Googling. On y va. Nous devons envoyer à travers un tableau d'articles avec l'ID de variante du produit et la quantité de combien nous voulons ajouter. Actuellement, notre site Web, nous n'avons pas la possibilité d'ajouter plus d'une quantité au moment de l' ajout du produit au panier à partir de la page produit. Mais si nous avions cela, nous pourrions utiliser cette valeur pour mettre en option ici, mais dans notre cas, nous allons juste en mettre une pour cette valeur. Tout ce dont nous avons besoin est l'identifiant de variante du produit, que nous allons ajouter au panier. Nous allons ouvrir une demande de poste ici. Ça va être panier add.js. Ensuite, nous allons avoir le tableau d'éléments et à l'intérieur nous allons avoir un autre objet et nous ajoutons juste un élément. ID sera égal à ID. Cette syntaxe signifie que nous n'avons pas à le faire, nous pouvons juste le faire, et la quantité va être une comme nous l'avons mentionné juste avant. Ensuite, une fois que nous obtenons une réponse de l'API, nous allons faire ce que nous faisons toujours JSON pause afin que nous puissions l'avoir comme un objet JavaScript, puis prendre l'élément qu'il renvoie. Qu' est-ce qu'on va faire ? Console simplement le consigner parce que nous ne pouvons pas réellement mettre à jour notre panier comme nous le ferions habituellement parce que la demande Ajax d'ajouter au panier renvoie réellement un article plutôt qu'un panier. Retournons à ici. Ouvrons l'onglet Réseau, fermons ou effacons l'activité réseau précédente. Ajoutons un article au panier. En fait, avant de faire ça, nous devons vraiment lier ça. Donc, je vais devoir saisir ajouter au panier, mettre sur l'événement click ici. Je vais devoir mettre upsell.variant ID. Rafraîchissons ici, effacez l'onglet Réseau, puis cliquez sur « Ajouter au panier » et voyons ce qui se passe. Si nous entrons à l'intérieur, nous verrons que nous obtenons un tableau d'éléments retourné. Ce n'est pas en fait un article, ses articles. Ici, vous pouvez voir les données qui sont transmises. Je vais changer ça en objets. Mais quoi qu'il en soit, lorsque nous allons dans la console, vous devriez voir que nous obtenons cette réponse dans notre console parce que notre console l'a enregistrée ici. Si nous actualisons la page, vous verrez que nous avons ajouté ce produit à un panier. Comme je l'ai mentionné cependant, nous ne récupérons pas les objets du panier. Alors, comment allons-nous nous assurer que ce panier met à jour après avoir ajouté un produit au panier ? Dans cette situation, ce que nous pouvons faire est simplement de demander le panier à nouveau. Nous pouvons faire la même chose que nous avons fait dans la création. Saisir ceci et régler le chariot. Mais ce serait un code très sec parce que nous allons nous répéter en ayant exactement le même code à deux endroits différents. Ce que je vais faire est de créer une nouvelle méthode avec ce appelé get cart. Cela va être au début de notre liste car il est central pour notre instance de vue ici. Désolé, je l'ai appelé pour commencer, chercher le chariot. Alors au lieu de l'exécuter ici, je vais juste appeler ça « get cart ». Exactement même code, mais maintenant nous pouvons prendre cela et exécuter le même code sur cette méthode. Les articles reviennent, mais nous courons juste obtenir panier. Lorsque nous exécutons Ajax ajouter au panier, il exécute en fait deux requêtes Ajax. Vous verrez que maintenant, malheureusement, nous avons une erreur. J' ai oublié de mettre une virgule ici après la méthode. Rafraîchir la page que vous pouvez voir ici. Ce qu'on va faire, c'est que je vais enlever ce t-shirt, et ajoutons des chaussures folles au panier. Comme vous pouvez le voir, il y a un petit problème là-bas avec l'image, mais vous pouvez voir des chaussures folles a maintenant été ajouté au panier aussi. Ce que nous avons fait, a ajouté le produit au panier en utilisant l'API Ajax, puis a lancé une autre requête à l'API pour récupérer le panier entier. C' est plus facile que d'essayer d'ajouter l'élément à l'objet de carte existant, puis de mettre à jour le total. Je trouve qu'il est juste plus facile de récupérer le panier après avoir mis à jour le panier ou ajouté à celui-ci. Maintenant, nous avons branché toutes les interactions principales. Nous sommes en mesure de mettre à jour la quantité d'articles dans le panier. Nous pouvons retirer un produit du panier. Nous pouvons ajouter un nouveau produit de ces ventes incitatives au panier mais il y a quelques petites choses ici que nous pourrions faire pour rendre l'expérience utilisateur plus agréable et plus fluide. Numéro 1, si j'ajoute un produit du panier upsells au panier, alors je devrais retirer ce produit du panier upsells, ou à tout le moins, indiquer que ce produit a déjà été ajouté au panier. Si je clique à nouveau sur « Ajouter au panier » sur le même produit, tout ce qu'il va faire est de mettre à jour cette quantité, ce qui peut être correct, mais je pense que cela pourrait certainement être amélioré. L' autre chose est que lorsque vous attendez que l'ajout au panier se produise, il n'y a pas de commentaires pour l'utilisateur. Donc soudainement, vous cliquez sur le bouton, rien ne se passe et puis quelques secondes plus tard, une fois la demande asynchrone terminée, puis il apparaît soudainement dans votre panier. L' autre chose, c'est qu'ils n'ont pas de belles transitions. Tout est rapide et un peu trop vif, et nous voulons assouplir ça un peu. C' est ce que nous allons faire dans la dernière partie de cette vidéo ici. Ce que je vais faire d'abord est de créer un tableau filtré de ventes incitatives. Comme je l'ai mentionné, si une vente incitative particulière est ajoutée au panier, je veux supprimer cela du tableau upsells et ne pas l'afficher dans cette liste de ventes incitatives. Pour ce faire, ce que je vais faire est d'utiliser une propriété calculée. Je vais créer une propriété calculée. J' aime faire cela avant les méthodes. Nous avons vu les propriétés calculées dans la dernière leçon sur le modèle de produit. Nous allons l'utiliser à nouveau ici pour créer une propriété calculée appelée ventes ascendantes filtrées, qui va juste être une version filtrée des ventes ascendantes. Ce que je vais faire, ce sera un peu de code compliqué. Mais ce que nous essayons de faire est de trouver l'intersection des articles dans le panier et dans le tableau Upsells. S' il est dans le panier, supprimez-le de ce tableau de ventes incitatives filtrées. Je vais le décomposer en deux étapes. abord, je vais obtenir la liste des produits dans le panier. Je vais appeler ces produits dans un panier. Mais parce que nous allons chercher via l'ID de variante, c'est la façon dont nous allons identifier, nous allons utiliser une fonction de carte en JavaScript. Au lieu de dire this.cart.items, qui vous donnera la liste des objets, je vais transformer cela en un tableau ciblant la valeur spécifique de l'ID de produit article. Je vais vous montrer ce que ça fait en une seconde. Je vais le convertir en une chaîne en utilisant la méthode de deux chaînes. Nous ne pouvons pas faire un journal de console, malheureusement à l'intérieur d'une propriété calculée. Ce que j'aime faire est juste à des fins de débogage, c' est de le déplacer hors de la propriété calculée dans quelque chose comme créé. Ensuite, il s'exécutera au chargement de la page. Si nous y allons maintenant, je rafraîchis la page, malheureusement, elle revient avec un tableau vide. Je pense que c'est en grande partie parce que nous attendons toujours sur le panier pour arriver de l'API Ajax. Un peu de piratage, mais je vais mettre un délai d'attente ici pour le faire exécuter un peu plus tard, comme peut-être deux secondes plus tard que ce qu'il était avant. Allons juste obtenir ce code pour exécuter deux secondes après la création. Comme vous pouvez le voir, nous avons un tableau avec tous les ID de variante. Si nous ajoutons un autre produit au panier, nous avons des chaussures à l'intérieur. Rafraîchissons. Deux secondes plus tard, nous verrons un tableau avec tous nos ID de variante. Remettre cela dans la propriété calculée, ce que je vais faire est de prendre ce tableau d'ID de variante représentant les produits déjà dans le panier, puis je vais filtrer les ventes incitatives en fonction de cela. Aller à filtrer les ventes incitatives, prendre chaque vente incitative individuelle et sinon, produits dans le panier comprennent l'ID de produits de vente incitative. C' est un peu un long morceau de code. Mais fondamentalement, ce que nous disons ici est que cela retournera vrai si les produits dans des chariots ou un tableau d'ID de variante qui se rapportent aux produits dans le panier, inclut l'ID de produit de la vente incitative. Fondamentalement, si la vente incitative est dans le panier. Sinon, nous voulons retourner ces ventes incitatives. Il s'agit essentiellement de filtrer toutes les ventes incitatives qui sont déjà dans le panier. Ce que nous pouvons faire maintenant, c'est au lieu de courir dans upsells, ici nous pouvons mettre dans filtered_upsells, ce qui lui donne assez de temps pour charger et rafraîchir notre page ici. Nous devrions commencer à voir maintenant qu'aucun de ces produits n'est déjà dans le panier. Si j'ajoute Old School Kicks, vous verrez que la liste des ventes incitatives se met à jour ici. Nous avons filtré les ventes incitatives qui ont déjà été ajoutées au panier. Si je supprime ça, vous verrez que les chaussures insensées retournent dans le tableau de ventes incitatives. Nous avons maintenant réglé ce problème avec les ventes incitatives. Nous ne voulons pas vendre un produit qui a déjà été vendu. Nous voulons l'enlever s'il est déjà dans le panier. Ce que je veux faire, cependant, lorsque j'ajoute un produit au panier, c'est fournir quelques commentaires à l'utilisateur. Ce que nous pouvons faire est d'utiliser une déclaration if pour cela. Ce que je vais mettre ici dans le bouton Ajouter au panier, je vais mettre un autre bouton devant lui. Tu verras pourquoi je fais ça dans une seconde. Je vais donner à ça la classe de upsell-atc. En fait, gagne-moi un peu de temps. Je peux juste copier ça. Ce que je vais faire aussi est d'ajouter une classe de modificateur ici, upsell-button en ajoutant. Ce que je suis sur le point de faire ici est de changer l'état du bouton. Au lieu d'ajouter au panier, cela va dire ajouter, et ce style devrait déjà être configuré dans le fichier CSS du thème. En actualisant la page ici, vous verrez que chacun d'entre eux a cet état d'ajout, mais nous voulons alterner entre eux en fonction ajout ou non d'un produit. façon dont nous faisons cela est d'ajouter un autre attribut à nos données. Nous pouvons entrer ici et créer un état de chargement. Lorsque la page se charge d'abord, elle est vide, puis après un certain temps, les requêtes asynchrones à l'API Ajax retournent le panier et le mettent à jour. Lors du chargement de la page, rendons le chargement vrai. Mais après chaque requête Ajax où nous avons fini quelque chose, nous allons mettre le chargement à faux. Quelles sont ces situations ? Si nous faisons défiler ici, nous pourrions éventuellement le mettre ici après get_cart. Mais comme vous pouvez le voir, il frappe le set_cart. Ce que je vais faire est de descendre à set_cart, puis après format_prices, je vais mettre dans ce chargement égal à faux. Bien sûr, le chargement sera vrai lorsque nous chargeons la page pour la première fois, mais une fois qu'il est défini sur false, nous avons besoin de la possibilité de le définir à nouveau sur true. Pour cela, ce que nous allons faire, c'est quand nous ajoutons un produit au panier, nous allons définir ce chargement égal à vrai. Lorsque nous retirons un produit du panier, nous allons définir this.loading est égal à true. Nous ne allons pas le faire pour le panier de mise à jour parce que cela me convient, nous ne allons pas mettre en animation pour cela spécifiquement. Mais pour retirer du chariot, je veux qu'il y ait un état de chargement. Cela peut ne pas être clair exactement en ce moment pendant que nous faisons cela, mais vous verrez bientôt comment cet attribut de chargement nous permettra de créer quelques transitions plus agréables. Jetons un coup d'oeil si je supprime ceci maintenant, actualisons ici. Recommencez ça. Si je clique sur ce bouton, il va se charger pendant une fraction de seconde, puis une fois le chargement terminé, il ira faux. Même chose avec Ajouter au panier. Une fois que je l'ai ajouté au panier, il va charger vrai pendant une fraction de seconde, puis passer à false. Nous allons l'utiliser en seulement une seconde mais avant de le faire, je veux ajouter un état de chargement supplémentaire et c'est sur ces éléments particuliers. Nous allons devoir le faire sur une base individuelle ici. Vous ne pouvez pas le faire sur l'objet panier global. Ce que je vais faire est de passer à notre tableau de ventes incitatives ici et de mettre sur un état de chargement sur chacun des articles de vente incitative. De la façon dont je vais le faire, je vais l'appeler ajouter, obtenir vraiment spécifique ici, et l'appeler adding_upsell. Par défaut, cela sera défini sur false car lorsque nous chargeons la page, nous n'ajoutons pas de vente incitative. Mais lorsque nous faisons ceci Ajouter au panier ici, nous voulons définir l'attribut add upsell sur la vente incitative particulière sur true. Ce que nous allons devoir faire pour cela pour accéder à l'objet réel est de trouver la vente incitative en premier parce que pour le moment, nous avons seulement l'ID de variante upsells. Nous allons devoir chercher cet objet de vente incitative. Je vais créer une vente incitative const ici, puis trouver dans le tableau upsells la vente incitative avec l'ID de variante qui est passé dans upsell.variant_idégal à id. qui est passé dans upsell.variant_id ici et faire upsell.adding_upsell est égal à vrai. Ensuite, quand le chargement est terminé, nous pouvons définir l'attribut adding_upsell sur la vente incitative particulière sur false. Revenons maintenant à notre application front-end. Observez le tableau upsells lorsque nous ajoutons un produit au panier. Parfois, cela arrive si rapidement qu'il n'a même pas le temps de mettre à jour. Je vais cliquer sur « Ajouter au panier » ici et vous verrez, il dit toujours faux. Si je deviens un peu plus rapide, alors vous verrez qu'il passe à vrai avant qu'il ne devienne faux. On y va, vrai ou faux. Vous pouvez voir à la fois la table de panier se chargeait alors et l'état de vente incitative ajouté est passé à vrai. Ce que nous pouvons faire maintenant est d'ajouter une transition à la table du panier, puis d'échanger ces boutons en fonction de l'état de la vente incitative en termes ajout ou non au panier actuellement. Retournons à l'intérieur. Tout ce que j'ai à voir avec ces deux éléments, je les ai côte à côte, mais maintenant, je peux juste les mettre sur eux. Je vais faire v-if=product.adding_upsell, alors nous allons afficher ceci. Sinon, nous allons afficher le bouton Ajouter au panier habituel. Cela devrait être tout ce qui est nécessaire pour l'interaction avec les ventes incitatives du produit, on dirait que j'ai fait une erreur ici en ajoutant la vente incitative. J' ai nommé ce produit au lieu de upsell, upsell.adding_upsell. Actualisé. vous pouvez voir que ce bouton ne s'affiche pas car nous n'ajoutons pas actuellement la vente incitative. Mais si je clique dessus, vous verrez que les boutons basculent brièvement pour lui donner un état de chargement avant qu'il n'ajoute au panier, puis l'article disparaît car il est maintenant filtré hors de notre tableau de ventes incitatives. Je peux le faire avec Gnarly Shoes aussi. Comme vous pouvez le voir, il a un état d'ajout avant de l'ajouter au panier. On y va. Nous avons donné des ventes incitatives un peu d'état de chargement là-bas, et maintenant, nous allons envelopper la table du panier dans un peu d'élément de transition. Ici, dans la table du panier, je vais ajouter un élément de transition comme nous l'avons fait sur le modèle de produit. Mettez tout cela à l'intérieur des éléments de transition appelés les éléments de transition nom fondu. Enfin, une étape de plus, ce que nous allons devoir faire est de vérifier cet état de chargement. On va couper tout ça, mais on l'a toujours dans mon presse-papiers. Créez un div et mettez un attribut sur leur code v-show. S' il ne se charge pas, il va s'afficher. Cela peut sembler un peu redondant, mais cela va donner cette fonctionnalité de décoloration et de décoloration en ne montrant pas quand il est en train de charger. Quand il ne se charge pas, il ne s'affiche pas et cela déclenchera la transition. Ensuite, quand il reviendra, la transition va s'estomper. Voyons comment ça marche. Comme vous pouvez le voir, lorsque je rafraîchis la page, le panier s'est effacé. Si j'ajoute un produit au panier, le panier s'estompe. Si je retire un article du panier, il s'estompe. La raison pour laquelle il fait cela, la façon dont nous l'avons fait pour agir comme ceci est parce que nous définissons cet état de chargement lorsque nous ajoutons un produit au panier ici et nous mettons également à jour cet état de chargement lorsque nous retirons également des produits du panier. Nous sommes également sur le chargement de la page, avoir configuré pour charger jusqu'à ce que le set_cart soit terminé le traitement, puis le chargement passe à false. Cela rend l'état de chargement de notre table de chariot un peu plus agréable. Je suis sûr que vous pourriez améliorer beaucoup plus. Je ne suis pas nécessairement un concepteur, mais c'est la fonctionnalité et les principes de base pour que cela se produise. Là, vous l'avez. Si nous fermons nos outils de développement, notre page produit fonctionne avec quelques transitions agréables. Je peux ajouter un T-Shirt rouge moyen à mon panier. Va par ici, vente incitative avec des chaussures folles. Allez à la caisse si je veux ou augmentez la quantité. Peut-être mettre ça à trois. Tout est synchronisé avec notre panier Ajax API. Si j'étais dans un magasin de production réel, je pourrais cliquer sur « Checkout » ici et vérifier. En fait, je pense que ça pourrait me laisser vérifier. Voilà, tu y vas. Voilà, c'est ma sélection. Ouais, c'est à peu près tout pour la page du panier. Je sais que c'est une assez longue vidéo ou un ensemble de vidéos pour faire fonctionner cette page de panier. Mais c'est le plus grand domaine d'interaction au sein d'un site Shopify le plus souvent. Pensez quand vous allez faire du shopping, les choses restent sur les étagères jusqu'à ce que vous les ramassiez et les mettez dans votre panier ou les remettez. La principale interaction de l'utilisateur avec votre site qui est logique d' utiliser Vue avec au moins est les interactions de panier. Évidemment, aussi, la variante de commutation très pratique pour avoir Vue pour cela. Comme je l'ai mentionné plus tôt, si vous vouliez filtrer votre page de collection, vous pourriez avoir quelques filtres trépidants ici. Si vous aviez beaucoup de produits dans votre magasin et beaucoup d'attributs différents à filtrer, vous pourriez en faire une application Vue ainsi. Mais le principe principal est que chaque fois que vous avez des interactions qui doivent se produire en direct sur le front, vous voudrez au moins utiliser JavaScript et je vous encourage à utiliser Vue ou un autre type de framework. Évidemment, vous avez appris Vue dans cette classe donc c'est ce que je recommanderais, mais cela devrait être un bon point de départ pour commencer à intégrer Vue dans vos projets. Selon le moment où vous regardez ce cours, la vidéo suivante peut être une vidéo bonus sur l'utilisation Vuex au cas où vous partageriez des données entre différentes parties. Nous avons utilisé le panier et la page du panier ici, mais peut-être que vous voulez mettre à jour le panier sur une autre page et synchroniser ces données. Nous allons en apprendre davantage sur la boutique Vuex dans la prochaine vidéo, selon le moment où vous l'écoutez. Sinon, je vous verrai dans la conclusion, et j'ai hâte de vous lancer dans votre propre projet de classe. 9. Bonus : enregistrer les données panier avec VueX: Bienvenue dans cette vidéo bonus sur Vuex. Je voulais couvrir cela comme un bonus dans cette classe car c'est un concept dans Vue que j'ai utilisé précédemment en utilisant Vue dans développement de thème Shopify et quelque chose qui pourrait être utile pour vous d'apprendre aussi. Dans cette classe jusqu'à présent, nous avons créé deux applications dans notre thème Shopify, une pour la page produit et une pour la page panier. Actuellement, ils sont très séparés. Ils possèdent chacun leurs propres données, propriétés et méthodes, qui sont exclusives à chaque instance. Pour partager des données entre plusieurs instances et composants de notre thème Shopify, nous pouvons utiliser une bibliothèque appelée Vuex. Si je regarde Vuex en ligne, le premier lien est ce qui est Vuex. Comme il l'indique ici, Vuex est un modèle de gestion d'état et une bibliothèque pour les applications Vue.js. Il sert de magasin centralisé pour tous les composants d'une application. Nous avons des règles garantissant que l'État ne peut être muté que de manière prévisible. Essentiellement, Vuex nous permet de créer un stockage centralisé de données auquel toutes les instances et composants Vue peuvent accéder. Maintenant, pourquoi aurions-nous besoin de cela spécifiquement dans le développement du thème Shopify ? Eh bien, il y a un exemple clair et c'est si nous devions permettre des interactions de panier front-end en dehors de cette page de panier. Par exemple, une fonctionnalité que vous avez peut-être remarquée sur un site Shopify auparavant est un panier latéral. Comme sur ce magasin, par exemple, si nous ajoutons un produit au panier ici, vous verrez que nous avons une petite interaction ici. Nous avons quelques informations sur le panier ici, mais nous pouvons également aller à la page du panier réel et voir les mêmes informations. Si je devais ajouter une de ces ventes incitatives au panier, cela se reflète également dans ce panier latéral. Cela signifie que les données sont partagées entre le panier latéral et la page du panier. Il vient essentiellement du même endroit, il vient de l'objet chariot. Tout cela doit être synchronisé. Donc, comment nous pouvons le faire est via un magasin Vuex. Maintenant, notez que chaque fois que je fais référence à un magasin Vuex, je fais référence à un magasin centralisé de données, pas au magasin Shopify lui-même. Parfois, il peut devenir un peu déroutant parler des magasins Vuex sur les magasins Shopify. Par conséquent, je m'assurerai de me référer au magasin Vuex comme le magasin Vuex ou Vuex pour l'abrégé. Très bien, donc dans cette vidéo, nous allons déplacer les données et les méthodes du panier dans un nouveau magasin Vuex. Mettez à jour notre page de panier, puis je vous montrerai comment nous pouvons utiliser cette nouvelle source de vérité pour mettre à jour d'autres domaines de notre thème. Ça a l'air bien ? Commençons. D' accord, donc la première chose que nous allons faire est d'inclure le script pour Vuex. Très bien, donc je vais revenir à cette documentation vuex.vuejs.org, cliquer sur l'installation, et ce que nous allons devoir faire est de vérifier que la version que nous utilisons est compatible avec la version que nous utilisons de Vue. Donc, dans cette classe, nous avons utilisé Vue 3. Donc, si vous suivez le même que cette classe et utilisez Vue 3, alors vous devrez utiliser la version quatre de Vuex. Alors cliquez sur V4 ici, passez à cette documentation, allez à l'installation, et je vais récupérer ce lien CDN de Vuex 4. Copie ça, tête dans notre code. Dans notre theme.liquid après notre balise de script Vue, je vais ajouter dans Vuex. Donc, assurez-vous juste que nous utilisons Vuex version 4 si nous utilisons Vue version 3. Maintenant que nous avons inclus la bibliothèque de Vuex, nous pouvons maintenant créer notre boutique Vuex. Ce que j'aime faire, c'est le mettre dans un extrait. Comme vous pouvez le voir, ce thème n'a pas d'extraits en ce moment. Donc, je vais réellement créer le dossier des extraits. Dans le dossier snippets, je vais créer un fichier appelé store.js.liquid. Nous n'allons pas utiliser de variables liquides ici. Donc, une alternative pourrait être de le mettre dans theme.js, ou de créer un fichier js et des actifs et de l'inclure. Mais cela nous permet de l'inclure sur des pages spécifiques en utilisant le mot-clé include, que je vais vous montrer en seulement une seconde. Donc ce qu'on va faire, c'est le faire tout de suite. On va l'utiliser sur la page du panier. Donc je vais faire de la place ici et inclure cet extrait. Inclure store.js. Nous n'avons pas besoin de la partie .liquid car c'est implicite lorsque nous utilisons des instructions include. D' accord. Donc deux parties pour tout brancher. Premièrement, nous allons devoir créer un magasin ici. Ensuite, nous allons devoir lier ce magasin aux instances qui vont l'utiliser. Donc je vais juste utiliser la convention standard ici. N' oublions pas d'ouvrir nos balises de script car nous sommes dans un fichier .liquid. La syntaxe standard et la convention de nommage standard sont de simplement appeler notre magasin, magasin. Nous pouvons ensuite utiliser la méthode create store de l'objet Vuex comme ceci. A l'intérieur, nous allons créer notre boutique Vuex. Toutes nos options pour le magasin iront juste ici. Avant de le faire, je veux juste le lier dans notre instance Vue ici. Ce que je vais faire est de changer ceci en un nom plus approprié car c'est l'objet options. Je vais renommer ceci en options de page de panier, options de page de panier, puis je vais stocker ceci dans une variable. Donc nous allons appeler cette page de panier. Donc, cela va stocker l'application réelle maintenant plutôt que les options. Alors ce que je vais faire est de monter la page du panier et d'ajouter une autre étape ici pour utiliser notre nouveau magasin Vuex. Donc, ce que nous faisons est d'utiliser et ensuite nous mettons dans le nom de variable de notre magasin Vuex, que nous venons d'appeler magasin. Idéalement, nous ne devrions avoir qu'un seul magasin pour l'ensemble du site. Donc, il est logique de l'appeler magasin et ensuite nous pouvons juste l'inclure comme ça. Je vais retourner au magasin ici et juste dans mon éditeur de code, changer la détection de langue en HTML. Ça va se débarrasser de ces lignes squigggly. En fait, il y a une étape de plus et c'est d'aller dans nos options ici et juste s'assurer que nous ajoutons en magasin aux options. Ok, c'est l'équivalent de magasin : magasin. Donc on peut juste économiser de l'espace et le mettre en magasin. Ensuite, cela nous permet maintenant de référencer le magasin dans cette instance. Ok, donc ce que nous allons faire, c'est que nous allons déplacer données de notre panier dans notre magasin nouvellement créé. Donc je vais couper ça. Je vais laisser les ventes incitatives là-dedans. Dans notre magasin, je vais créer une fonction d'état. Ensuite, comme nous le faisons lorsque nous retournons des données à l'intérieur d'une instance Vue, je vais copier et coller ceci dans notre état ici. Je pense qu'on peut ramener un retrait ici. Oui. D'accord. Maintenant, un peu de théorie de Vuex. Nous avons quelques concepts de base ici. State, qui est essentiellement des getters de données, qui nous permettent d'accéder aux données que nous venons de définir sur l'état du magasin. mutations, qui sont le seul moyen de modifier les données dans un magasin Vuex. Donc, les mutations signifient chaque fois qu'on change de données. Des actions que nous envoyons pour valider des mutations, puis des modules que nous n'utilisons pas dans cette leçon. Mais essentiellement, ce que nous allons faire est que nous allons utiliser des getters pour obtenir les données. Ensuite, nous allons utiliser des actions et des mutations pour définir les données. D' accord ? Maintenant, si vous voulez en savoir plus sur les raisons pour lesquelles nous utilisons des mutations et des actions afin de modifier les données et pas seulement l'une ou l'autre, vous pouvez lire à ce sujet ici sur la documentation. Je ne vais pas entrer dans la théorie des actions et des mutations dans cette vidéo particulière, mais toutes les informations sont là si vous voulez regarder dedans. Bon, alors retournons à notre magasin ici, notre magasin Vuex. Réfléchissons aux mutations que nous pourrions avoir besoin de faire. Fondamentalement, la seule mutation que nous devons faire ici est de mettre à jour le panier. Rappelez-vous chaque fois que nous changeons le panier, nous obtenons simplement un nouvel objet de panier à partir de l'API Ajax et définissons ces nouvelles données. D' accord ? Donc nous n'avons besoin qu'd'une seule mutation. Vous pouvez choisir de le faire ou non. Mais j'aime utiliser la convention de la capitale pour nommer des mutations. Donc, je vais ouvrir un objet mutations. Ici, je vais créer une mutation de chariot. Le premier argument va être l'état. Ceci est standard lors de l'exécution de mutations. Ensuite, la prochaine chose sera la charge utile, qui va être le chariot. Donc c'est ce qu'on va passer. Alors tout ce que nous allons faire est de faire le panier d'état est égal au panier. Encore une fois, cela peut sembler un peu redondant, mais il y a une méthode à la folie avec Vuex. Il suit un modèle spécifique. Encore une fois, si vous voulez en savoir plus à ce sujet, vous pouvez le faire sur la documentation. Mais après avoir créé cette mutation, ce que je vais faire, c'est créer des actions. C' est là que nous commençons à transférer certaines de ces fonctions asynchrones de notre page de panier vers notre boutique Vuex. Mais avant cela, je veux créer du code de travail et vous montrer que cela fonctionne réellement. Donc ce que je vais faire, c'est que je vais fermer ça et ouvrir ça dans un onglet divisé. Débarrassez-vous de tous les autres onglets ici. Ce que nous allons faire est de refactoriser ceci, déplacer, une partie de ce code ici. Maintenant, la première chose qui se passe lorsque nous chargeons la page, bien sûr, c'est que nous obtenons le panier. Donc recréons cela en utilisant ce magasin Vuex. D' accord ? Donc, ce que je vais faire est avant les actions en fait, je vais ouvrir un objet getters ici. Ici, nous pouvons mettre nos getters. Encore une fois, cela va sembler un peu redondant. Pourquoi ne pouvons-nous pas accéder directement à l'État ? Encore une fois, il y a une théorie derrière elle que vous pouvez rechercher sur la documentation. Mais comment cela fonctionne est dans le but d'accéder à l'objet panier, nous devons écrire une fonction juste comme ça, et cela va juste retourner state.cart. Donc, pour obtenir ces données de notre magasin Vuex, rappelez-vous que nous avons déjà inclus le magasin ici, nous avons juste besoin de créer une nouvelle propriété calculée qui tire juste ces données du magasin Vuex. Donc tout ce que je vais faire est de remplacer l'objet panier que nous venons de supprimer par la propriété calculée. Ici, nous allons, je vais juste l'appeler panier et c'est là que nous apportons nos données de magasin Vuex, je vais d'abord référencer store.state.cart. Bien sûr, lorsque vous chargez la page pour la première fois, nous aurons ces données. C' est pourquoi sur créé, nous lançons get_cart, mais maintenant nous allons le faire via Vuex. Ce que nous allons faire, c'est mettre cela en action. Donc ici, je vais créer une action appelée get_cart, et à partir du premier argument, je vais retirer la méthode commit. C' est une pratique standard avec des actions, et nous n'avons pas de charge utile ici, donc c'est tout ce dont j'ai besoin et ce que je vais faire est d'imiter l'action get_cart ici. Je vais saisir tout cela, l'amener, et au lieu d'exécuter cette méthode de panier ensemble, je vais en fait exécuter la mutation de panier set et le terme pour cela est appelé commit. Ce que nous faisons ici, c'est au lieu de cela que nous faisons store.commit, puis nous mettons le nom de la mutation set_cart, puis comme deuxième argument, nous mettons la charge utile là, qui est ce que nous obtenons de l'API. Ensuite, cela va définir la valeur du panier à ce que nous obtenons de l'API. Encore une fois, c'est exactement ce que nous avons ici. On le met juste dans Vuex. Donc, sur créé à la place de this.get_cart, nous allons à la place distribuer l'action que nous avons ici. Donc, ce que je vais faire est de stocker .dispatch get_cart. Maintenant, si nous exécutons ce code maintenant, revenons à notre panier, ouvrons nos DevTools, actualisons la page ; vous verrez que lorsque nous allons regarder ici, notre table de panier est là, mais c'est actuellement défini pour n'afficher aucun. Vous pouvez voir que votre panier est vide, mais il ne s'affiche pas comme vous pouvez le voir ici. La raison en est que nous avons maintenant perdu cette partie du code ici où nous avons défini panier et changé le chargement à false. Donc, ce que nous allons devoir faire, c'est cette action rende une promesse, puis quand cette promesse sera résolue, alors nous allons remettre le chargement à false. Donc, ce que nous devons faire pour cela, c'est ici, où les demandes de get commencent, nous devons juste mettre le retour en face. Ensuite, on peut mettre un point ici. Donc, lorsque l'action get_cart a fini d'être distribuée, finit d'être exécutée, alors nous allons définir le chargement sur false. Bon, maintenant, actualisons la page, et vous pouvez voir maintenant que nous avons cette valeur à venir. Maintenant, si nous allons magasiner le T et nous ajoutons, disons un petit t-shirt noir au panier, vous verrez qu'il apparaît non pas à partir de nos données de panier qui sont stockées sur l'instance de vue, mais à partir d'une propriété calculée du panier qui tire de notre magasin . Nous avons donc les débuts de notre refactor ici, et nous pouvons voir que ça sort maintenant de notre magasin Vuex. Revenons au code et continuons à travailler là-dessus. Donc, en descendant dans nos ventes incitatives filtrées, je peux voir ce .cart. Nous utilisons maintenant panier comme propriété calculée, tirant cette valeur, donc je vais remplacer this.cart par store.state.cart. C' est le premier changement, et alors que nous descendons, nous n'avons plus besoin de get_cart car c'est maintenant une action Vuex. Nous allons juste vérifier où nous nous référons à cela. Comme vous pouvez le voir, nous l'utilisons également dans ajouter au panier. Supprimons simplement cela et puis nous allons refactoriser ajouter au panier quand nous y arriverons. Dans set_cart, nous le faisons à travers la mutation maintenant, donc je peux le supprimer, mais ce que je vais devoir faire, c'est qu'il y a cette étape supplémentaire ici pour les prix des formats. Alors sortons cette logique d'ici, et mettons-la dans la mutation réelle. Je vais supprimer les prix de format et à l'intérieur de cette mutation ici, prenons l'objet panier qui est soumis comme charge utile, et mettons-nous à jour avant de le mettre dans notre état. Pour cela, tout ce que nous avons à faire est de supprimer ce point parce que nous utilisons maintenant le panier qui est passé, dans cette charge utile. Donc, cela va créer ces nouveau prix de ligne formaté, et le prix total formaté, puis l'insérer dans state.cart. Bon, donc revenons aux actions ici. Allons plus loin. Nous pouvons nous débarrasser de set_cart maintenant, et nous allons devoir créer une nouvelle méthode ou une nouvelle action pour celui-ci ici, le panier de mise à jour. Pour celui-ci, je vais supposer que la seule fois que nous mettons à jour le panier, nous le faisons juste pour une ligne, donc nous allons garder cette syntaxe. Donc, ce que je vais faire est de saisir ce code asynchrone ici et créons une méthode de panier de mise à jour ici et bien sûr, le premier argument va être commit, puis le deuxième argument va être un objet avec ces deux mêmes arguments ; ID et quantité. Ensuite, à l'intérieur, nous pouvons faire cette demande de poste et pour que nous puissions le faire retourner une promesse, nous mettons le retour en face de la requête Ajax. Cela nous permet bien sûr d'enchaîner un point puis sur l'expédition comme nous l'avons fait ici. Débarrassez-vous de ce code et bien sûr, this.set_cart doit être remplacé par store.commit set_cart, puis dans notre méthode de carte de mise à jour ici, tout ce que nous avons à faire est de déclencher cette action ou d'utiliser le terminologie, expédier l'action. Donc, nous faisons cela à partir de l'objet de magasin, expédition, mise à jour panier, puis un objet avec les deux paramètres, ID et quantité, et c'est tout ce que nous avons besoin de faire. Parce que dans notre méthode de mise à jour du panier, nous utilisons simplement cela pour mettre à jour la quantité comme vous pouvez le voir ici, nous n'avons pas besoin de mettre à jour les états de chargement par conséquent, nous n'avons pas besoin d'enchaîner un point alors à la fin. Mais pour add_to_cart, nous allons certainement devoir utiliser des promesses. En fait, nous allons devoir enchaîner quelques promesses ensemble. Je vais te montrer comment on fait ça maintenant. Donc, après update_cart, nous allons mettre add_to_cart, et utilisons la même syntaxe qu'avant. Le premier argument, nous allons retirer la méthode de validation, puis la charge utile va être ID. Retirons cette requête ajax ici comme je l'ai fait avant pour que nous puissions faire face à la promesse telle qu'elle revient de l'action, mettre un retour devant elle, et malheureusement le retrait est tout fack ici, alors laissez-moi régler ce problème rapidement. D' accord, ça va faire. Maintenant, pour refactoriser ce code, nous devons remplacer cette méthode par un autre envoi. Ensuite, nous allons nous occuper une fois que la promesse reviendra de Vuex dans notre instance. Supprimons simplement cela et nous le ferons à l'intérieur de l'instance un peu plus tard. Ce que je vais devoir faire pour envoyer une action à partir d'une autre action est juste de retirer la méthode dispatch ici sur cet objet, et donc au lieu de this.get_cart, je vais exécuter dispatch get_cart, et c'est tout ce que nous avons à faire. Parce que nous allons gérer la promesse à l'intérieur de notre instance, nous n'avons plus besoin de faire quoi que ce soit d'autre dans le magasin Vuex. Alors faisons ça maintenant. Allons ici, dans add_to_cart, et faisons notre expédition, magasin, expédition, add_to_cart avec notre charge utile d'ID, et ensuite nous pouvons gérer la promesse comme ceci et d'abord mettre à jour l'état de chargement à false, et puis vente incitative, ajout de vente incitative, faux. Il est logique de mettre à jour ces états de chargement car cela concerne l'interface utilisateur que nous traitons sur la page elle-même, donc à l'intérieur de cette instance particulière, mais tout à voir avec les données du panier doit être centralisé dans cette Magasin Vuex. Espérons que cela explique pourquoi nous gérons certaines promesses au sein Vuex et quelques promesses au sein de l'instance Vuex. Tous ces attributs de chargement concernaient l'interface utilisateur sur la page du panier elle-même, et non les données du panier. Enfin, nous avons cette méthode remove from cart, qui déclenche ce chariot .update. Ce que je vais faire ici est de remplacer cette méthode de panier de mise à jour par l'action de panier de mise à jour sur notre boutique Vuex. Comme nous l'avons vu auparavant, store_dispatch, même charge utile qu'avant. Nous avons juste besoin de le mettre sous une forme d'objet, ID et zéro, alors nous allons définir ce chargement de point sur false après qu'il revienne. Voyons si ça marchera. Je ne suis pas sûr que la valeur explicite ici va à l'erreur. Oui. Comme vous pouvez le voir, il n'aime pas le zéro là-bas. Ce que je vais faire est juste de faire la quantité const égale à zéro, puis de remplacer cela par la quantité. Appuyez sur « Enregistrer » dessus. Actualisez la page ici. Comme vous pouvez le voir, nous avons une erreur, « Impossible de lire la propriété total_price of undefined ». Si je fais défiler ici, vous pouvez voir que j'ai une référence à ça ici. Juste besoin de supprimer cela, parce que nous n'avons pas accès à cela. Bien sûr, cela faisait référence à l'instance Vue, l'application Vue, mais maintenant nous sommes à l'intérieur de notre panier, donc nous avons juste besoin de regarder ce que nous avons passé, et l'objet du magasin. Je vais arranger ça, me rafraîchir ici, et maintenant on peut voir notre chemise noire passer. Si je dois mettre à jour la quantité ici, vous pouvez voir malgré les erreurs dans notre console JavaScript, cela fonctionne maintenant. Si je frappe la poubelle ici, il va retirer ce produit du panier, rafraîchissant pour montrer que c'est légitime. Si j'appuie sur « Ajouter au panier » sur l'un de ces éléments, cela fonctionne maintenant. Maintenant, toutes ces données proviennent de notre magasin Vuex. Si je vais ici, malheureusement, avec cette dernière version de Vue DevTools, je ne pense pas que nous puissions réellement regarder le magasin lui-même, il n'y a pas un onglet Vuex comme il y avait dans les versions précédentes de vous Vue DevTools mais ce que nous pouvons voir, c'est que nous obtenons les objets chariot à partir de calculs plutôt que de données ici, et cela nous indique clairement que nous tirons cet objet panier d'ailleurs que l'instance. Si je supprime cela, vous verrez que cet objet panier est mis à jour conformément à ce qui se trouve dans le magasin Vuex. Maintenant, bien sûr, ce que vous voyez ici est exactement le même que ce que nous avions avant. Vous ne savez peut-être pas pourquoi c'est différent ou mieux, alors j'ai pensé que je pourrais vous montrer comment nous pourrions utiliser ce nouveau point de vérité centralisé pour interagir avec le panier sur n'importe quelle autre page de notre site Web Shopify. Ce que je vais faire est en fait mettre le nombre d'articles dans notre panier ici, et avoir cette mise à jour en direct lorsque nous ajoutons un nouveau produit au panier, actuellement nous ne pouvons le faire que depuis la page du produit ici. Bien sûr, nous pouvons le faire sur la page du panier, mais nous sommes déjà sur la page du panier, donc cela n'a pas vraiment de sens de le faire, mais peut-être voulons-nous ajouter au panier et il y a des commentaires tout de suite sans recharger le page. Maintenant, nous pouvons utiliser ces données de panier pour mettre à jour quelque chose dans notre en-tête pour indiquer que nous avons ajouté un produit au panier sans avoir à aller à la page du panier. Je vais vous montrer un petit exemple de ça maintenant. Ce que je vais faire est de créer une instance Vue pour l'en-tête, et malheureusement, nous n'avons pas de fichier de section pour l'en-tête. Nous pourrions aller créer ça maintenant, ne serait pas trop dur, mais gardons juste le code dans notre theme.liquid. Je vais fermer cette page de panier ici. Ce que je vais faire, c'est inclure le même extrait ici, juste au-dessus de notre en-tête. Nous allons inclure store.js, et donc maintenant nous incluons ce magasin Vuex dans notre fichier de mise en page de thème également. Je vais également ajouter un ID d'en-tête à cet élément ici afin que nous puissions l'identifier clairement dans notre instance Vue. Ensuite, comme nous l'avons fait tout au long de cette classe, je vais créer une instance Vue sous ce code HTML ici. Tout d'abord, nous allons créer des objets d'options, des options d'en-tête. Ouvrons juste un objet vide pour l'instant, et puis je vais créer une autre variable qui va contenir notre en-tête d'application, vue.CreateApp, insérez ces options d'en-tête, et puis je vais monter cela en utilisant le ID que nous venons d'ajouter à l'en-tête, puis je vais obtenir cette instance Vue pour utiliser le magasin Vuex. Maintenant, si je rafraîchis la page ici, nous devrions voir en dessous que nous avons deux applications. Vous verrez que les informations que nous avions ici sont maintenant disparues, parce qu'il est assis sous App 1 ici. Laisse-moi voir si je peux zoomer et te montrer. On y va. Comme vous pouvez le voir, App 1 et App 2, nous ne les avons pas réellement nommés, donc c'est un peu déroutant. Allons et faisons ça maintenant. Je vais donner à cette instance un nom de « En-tête », et allons entrer et nommer nos autres instances dans la page du panier. Je vais mettre un nom dans les « Options », « Panier », puis « Page Produit », « Nom », « Produits ». Cela va juste lui donner un nom dans Vue DevTools afin que nous puissions facilement l'identifier. Revenons en arrière, actualisons, regardons les DevTools, et vous pouvez voir que nous pouvons basculer entre l'application Header et l'application Product ici. Nous exécutons deux applications sur une page. Bien sûr, si nous allons à la page du panier, vous verrez que nous avons l'en-tête et le panier là aussi. Revenons à la page du produit. Nous pouvons maintenant basculer entre les différentes applications. Ajoutons ces données de panier à l'en-tête. Donc, ce que je vais faire est d'apporter dans ce magasin, et puis comme nous l'avons fait pour la page Panier, je vais créer une propriété calculée qui tire le panier du magasin Vuex. Ce sera le panier, exactement comme nous l'avons fait dans la page Panier, store.state.cart. Ensuite, afin de remplir ce panier lors du chargement de la page, ce que je vais faire est d'appuyer sur le crochet de cycle de vie que nous avons créé, puis dans ce crochet de cycle de vie, envoyer l'action get_cart. Rafraîchissons la page maintenant avec nos DevTools ouverts. Il semble que nous avons une erreur, « Identificateur inattendu, magasin ». C' est parce que j'ai oublié la virgule ici. « Sauvegarder », « Rafraîchir ». Revenez à nos DevTools Vue. Oui, on a l'en-tête et le produit. Si nous cliquons dans l'en-tête, nous pouvons voir que nous avons notre objet panier venant de la boutique Vuex maintenant. Comment nous pouvons utiliser ceci est que nous pouvons maintenant entrer ici, créons une travée, et à l'intérieur ici dans le v-html, nous pouvons ajouter le nombre d'articles de notre panier. Je vais faire cart.item_count. Ceci est, bien sûr, un attribut sur l'objet panier, vous pouvez voir ici. Si je « Enregistrer », « Actualiser » la page ici, vous pouvez voir que nous avons un article dans le panier. Bien sûr, nous aurions pu obtenir le même résultat en utilisant shopify.liquid mais ce que nous allons faire maintenant est de mettre à jour la page du produit pour soumettre l'ID de variante via Vue plutôt que par les moyens standard Shopify qui finissent par traiter le « Ajouter au panier » et vous déplacer vers la page du panier. Comme vous pouvez le voir ici, nous avons déjà une interaction entre l'en-tête et la page du panier. Juste pour compléter cela, revenons à la page du produit. Allons au code de la page du produit, juste ici. Ce que nous allons faire est juste ici, ajouter un gestionnaire d'événements, nous pourrions effectivement supprimer complètement ce formulaire et juste avoir un bouton qui le fait aussi, mais restons juste avec le formulaire pour l'instant et le faire plus facile. Nous allons attacher ceci à l'événement submit, et en tant que modificateur supplémentaire, nous pouvons mettre ici appelé prevent, et cela va empêcher la fonctionnalité de soumission par défaut, qui est, bien sûr, ce que nous voulons. Ici, nous pouvons mettre une méthode qui va gérer le Ajouter au panier. Je vais juste créer ça maintenant. Allons vers le bas après la méthode finale et créons une fonction handle_atc. Tout ce qu'il va faire est de prendre l'ID de la variante qui doit être ajoutée au panier, et nous allons juste envoyer l'action « Ajouter au panier » avec la charge utile de cet ID. Alors on va monter ici. Où était-ce ? Juste ici. Pour handle_atc, et comme argument dans cette méthode, nous allons mettre l'ID de variante actuelle. Cela rend les champs cachés un peu redondants, mais cela devrait toujours fonctionner. Allons ici, actualisons la page, et voyons ce qui se passe lorsque nous cliquons sur « Ajouter au panier ». Vous pouvez maintenant voir que la page ne s'actualise pas, mais quelque chose a changé. Le numéro dans le panier mis à jour. Nous pourrions ajouter d'autres interactions comme nous pourrions le faire apparaître ici en disant, « Ajouté récemment », nous pourrions toujours rediriger vers le panier, nous pourrions avoir un chariot latéral sortir comme nous l'avons vu plus tôt. Nous pourrions faire toutes sortes de choses, mais le fait est que nous avons maintenant la synchronisation des données entre notre en-tête et notre page de panier. Comme vous pouvez le voir, le numéro dans notre en-tête est mis à jour lorsque nous mettons à jour les articles sur notre page de panier, même s'ils sont dans des applications distinctes, et la raison pour laquelle nous partageons des données entre eux à l'aide de Vuex. C' est un petit bonus sur Vuex pour vous. Si vous construisez un chariot latéral complet tout en ayant une page de panier complète, alors vous allez vouloir partager des données entre eux, et Vuex est la solution idéale pour faire ce travail dans Vue. J' espère que vous avez appris quelque chose de cette leçon. Si vous voulez incorporer un chariot latéral et utiliser Vuex dans votre projet de classe, je vous encourage à le faire. Je vous donnerai plus de détails sur votre projet de classe dans la dernière vidéo qui sera à venir. Merci d'avoir regardé. Je te verrai dans celui-là. 10. Bonus : adapter aux modèles JSON: Dans cette courte leçon de bonus, je vais vous montrer comment déplacer nos applications Vue dans fichiers de section plutôt que de les laisser dans des fichiers de gabarits liquides. La raison pour laquelle je vous montre cela est à cause de la Boutique en ligne 2.0. Si vous n'êtes pas familier avec Online Store 2.0, je vous encourage à consulter ma première classe ici sur Skillshare, développement de thème Shopify : Comment créer et personnaliser votre propre boutique en ligne. J' y ai ajouté trois vidéos supplémentaires pour tenir compte des modifications de la Boutique en ligne 2.0. Essentiellement, ce qui a changé, c'est que les fichiers modèles peuvent désormais être JSON ou Liquid. Pour m'adapter à cette nouvelle façon de créer des thèmes, je veux vous montrer comment nous pouvons déplacer nos fichiers d'intersection d'applications, puis transformer ces modèles en fichiers JSON à la place. Je vais creuser dans le thème ici, je vais juste te montrer ce que je veux dire. Ici, sous Modèles, vous avez tous les fichiers de modèle codés comme Liquid qui, bien sûr, nous permet d'insérer du code liquide HTML, CSS JavaScript, le tout dans ce fichier de modèle, et c'est ce qui est utilisé comme modèle. Mais si vous cliquez sur cela de nos jours, vous verrez qu'il existe une option pour un modèle JSON. Ce que je vais faire, c'est que j'ai dupliqué le thème pour garder celui-ci intact, et ici, je vais cliquer sur « Modifier le code » sur le duplicata, et commençons à refactoriser notre projet ici. Tout d'abord, nous voulons créer une nouvelle section à la maison. Faisons d'abord modèle de produit, donc je vais créer une nouvelle section, et je vais juste l'appeler Modèle de produit. Ne pas avoir à mettre le .liquid là-dedans parce que ce sera automatique, et maintenant nous allons juste avoir à remplir le nom de la section, allez juste l'appeler Modèle de produit ou Produit principal, quelque chose comme ça parce que nous pouvons vouloir mettre d'autres choses là-dessus. Modèle de produit principal. Maintenant, je vais juste appuyer sur « Enregistrer » sur cela, et je vais passer à notre modèle de produit.liquide. C' est là que nous avons notre application Vue pour la page produit. Je vais copier tout le code en utilisant la commande A sur un Mac. Je ne suis pas sûr de ce que c'est sur un Windows, puis Commande C. Ensuite, je vais aller ici, créer un peu d'espace en haut, et coller dans notre code là. Maintenant que nous avons notre code collé et enregistré, nous pouvons supprimer ce fichier de modèle, ce qui nous donnera l'espace pour créer un modèle JSON. Je vais cliquer sur « Ajouter un nouveau modèle », et descendre au produit, et ici vous pouvez voir que nous pouvons créer un modèle Product.JSON maintenant. Aller à la touche « Créer un modèle » et maintenant nous avons la base de notre modèle de produit. D'accord. Je vais approfondir cette question dans leçon 11 du développement du thème Shopify : Comment créer et personnaliser votre propre boutique en ligne. Je vais briser un peu cela, mais essentiellement ce que nous devons faire ici est d'ajouter les champs requis pour l'utiliser. Cela ne me permet pas d'enregistrer à moins que je ne fasse un changement, mais vous verrez que si vous n'incluez pas cela, il va erreur. Nous devons inclure ces champs obligatoires. Tout d'abord, nous devons donner un nom à ce modèle de produit, et je vais juste lui donner le nom simple de modèle de produit. Maintenant, dans l'objet de notre section, nous devons lier le modèle de produit que nous venons de créer. Je vais commencer par l'appeler Main-Product, et ouvrons un objet comme valeur de cela. Ensuite, tout ce que nous avons besoin est de mettre dans un type, et le type doit être égal au nom de la section ; le nom de fichier de section moins le .liquid. Ce sera juste un modèle de produit. D'accord. Dans notre tableau de commandes, nous devons mettre le nom qui correspond à ceci, donc le produit principal. Cela semble redondant à ce stade parce que nous n'avons qu'une seule section, mais si nous avions plusieurs, nous pouvons définir un ordre différent pour eux ici dans ce tableau d'ordre. Je vais appuyer sur « Enregistrer » sur ça. Comme vous pouvez le voir, pas d'erreurs. Ensuite, je vais cliquer sur « Personnaliser le thème ». Maintenant que nous sommes dans notre éditeur de magasin, nous devons cliquer ici pour passer au modèle de produit que nous venons de créer. Ce sera juste des produits par défaut car il n'a pas point après produit, c'est juste Product.json. Si c'était produit point autre chose, alors il apparaîtrait comme un substitut comme celui-ci. Je vais juste cliquer sur cela, et ici vous pouvez voir que nous avons toujours notre modèle de produit. Si je vais à Shop the Tee, vous pouvez voir que nous avons notre application, et cela fonctionne toujours. C' est parce que nous avons inclus notre fichier de section ici, il n'a pas de sections modifiables, mais il a été lié. Maintenant, ce n'est pas la leçon la plus excitante parce que nous n'avons pas ajouté de nouvelles fonctionnalités, sauf le fait que nous pouvons maintenant ajouter d'autres sections et les réorganiser. Parce qu'il s'agit d'un projet bare-bones sans autres sections, nous n'avons pas réellement la possibilité d'ajouter une autre section ici parce qu'il n'y a littéralement aucune autre section. Mais en utilisant le système Online Store 2.0, si nous utilisions un thème moderne, nous pourrions réellement déplacer cela, ajouter de nouvelles sections si nous le voulions. Cela a été essentiellement ce que cette vidéo a été, adaptation à la boutique en ligne 2.0. Vous pouvez utiliser un thème plus récent qui a tous ses modèles comme JSON. Dans ce cas, nous devons adapter un peu nos pratiques pour nous adapter à ce nouveau changement. Tout ce que nous avons fait ici est juste de déplacer le code Liquid dans un fichier de section, et d'inclure ce fichier de section dans notre modèle de produit JSON. Nous pouvons toujours le faire à l'ancienne, nous pouvons toujours jeter ou garder ce code dans un modèle de produit.liquid, mais maintenant nous allons dans cette direction avec Online Store 2.0. Je voulais juste jeter cette vidéo ici pour ceux d'entre vous qui travaillent avec des thèmes modernes, ou qui ont ouvert un thème moderne, et qui se sont demandé ce que l'enfer. Espérons que cette vidéo vous a fourni un contexte. Toutes les questions, comme toujours, hésitez pas à les laisser dans la boîte de discussion ci-dessous, et je vous verrai dans la vidéo finale pour la conclusion. 11. Conclusion et projet de cours: Ceci conclut cette classe sur l'utilisation de Vue.js dans les thèmes Shopify. Pour votre projet de classe, je vous encourage à intégrer Vue.js dans n'importe quel thème Shopify sur lequel vous travaillez actuellement. Gardez à l'esprit que la plupart des thèmes de niveau production utilisent déjà une bonne quantité de JavaScript, donc vous devrez probablement refactoriser une partie de ce JavaScript afin de faire de la place pour Vue.js. Comme je l'ai mentionné tout au long de cette classe, ce sujet est tout à fait spécifique dans le développement du thème Shopify, donc si vous n'êtes pas sûr de quoi que ce soit concernant les sujets fondamentaux de HTML, CSS, JavaScript, Shopify liquide, vous pouvez trouver beaucoup de leçons sur tout cela ici sur ma chaîne Skillshare. Tout ce que vous avez à faire est de cliquer sur mon nom , puis de consulter mes autres classes de développement web. Comme toujours, si vous souhaitez en savoir plus sur programmation et le développement 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 couvert 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 sur mes autres cours.