Shopify Hydrogen : comment créer un Storefront de commerce électronique sans tête avec React

1. Introduction: Bonjour, étudiants et bienvenue à ce cours sur Shopify Hydrogen. framework React de Shopify pour créer des vitrines personnalisées. Je suis Christopher Dodd. Je suis un développeur Web indépendant et professeur de haut niveau sur skillshare.com. Spécialisé dans le développement web frontal sur la plateforme Shopify au cours des trois à quatre dernières années, j'ai passé beaucoup de temps à personnaliser les vitrines avec l'un d'entre eux, un thème Shopify. Mais à la mi-2022, Shopify a lancé un nouveau canal de vente sur la plateforme Shopify, permettant aux commerçants d'héberger un projet React sur leur boutique Shopify. Ce nouveau canal de vente Hydrogen associé au framework Hydrogen de React Hooks, composants et à des utilitaires conçus spécifiquement pour les vitrines Shopify, offre une toute nouvelle façon de personnaliser le une expérience de magasin pour les clients et une nouvelle façon de développer pour les développeurs. Dans le cours d'aujourd'hui, nous allons passer en revue le framework Shopify Hydrogen, découvrir les principaux concepts environnants créer notre propre vitrine simple à l'aide du système. Je vais vous montrer comment installer votre nouvelle application dans la boutique Shopify. Pour ceux d'entre vous qui sont prêts à apprendre ce paradigme de nouvelle génération pour créer des vitrines sur Shopify, cliquez sur la vidéo suivante et je vous verrai de l'autre côté. 2. Concepts clés: Avant de commencer à créer notre propre vitrine Hydrogen, il est important que nous comprenions un ensemble de concepts clés qui entrent tous en jeu lors de la création d'une vitrine personnalisée en utilisant Hydrogène. Tout d'abord, lorsque je parle d'hydrogène, je pourrais faire référence à deux choses. La plupart du temps, je parlerai du framework Hydrogen React. Mais lorsque nous commençons à déployer notre application Hydrogen dans notre boutique, le nom du canal de vente sur Shopify s'appelle également Hydrogen. Techniquement, le nom de la solution d'hébergement fournie par Shopify pour les vitrines Hydrogen s'appelle Oxygen, mais elle apparaît sur l'interface administrateur Shopify sous le nom Hydrogen pour une raison quelconque. Alors, gardez cela à l'esprit. Quant au framework Shopify Hydrogen lui-même, il est conçu pour s'appuyer sur une technologie existante appelée React. Certains d'entre vous sont peut-être déjà familiers et/ou doués avec React, mais quoi qu'il en soit, nous allons brièvement passer en revue React dans la vidéo suivante. Ce cours n'abordera certainement pas React en profondeur, mais il est important de comprendre les bases de React afin d'utiliser l'hydrogène. L'autre aspect qu'il est également important de comprendre est manière dont nous allons récupérer les données depuis le back-end de Shopify. Cela se fait par le biais de ce que l' on appelle l'API Storefront, une API fournie par Shopify pour la récupération de données relatives aux expériences destinées aux clients. L'API est ce que l' on appelle une API GraphQL, ce qui signifie qu' au lieu d'atteindre différents points de terminaison pour obtenir différents bits de données, il existe un point de terminaison d'API unique auquel notre projet se connectera et demandera les données spécifiques dont nous avons besoin via ce que l'on appelle une requête, qui ressemble un peu à ceci. Ces concepts à eux seuls pourraient constituer un tout autre cours. Dans les deux prochaines vidéos nous examinerons chacune individuellement puis je parlerai un peu l'ensemble de crochets, de composants et d'utilitaires Hydrogen qui jouent un rôle dans cette configuration. 3. Réagir: Dans cette leçon très importante, nous allons passer en revue certaines des bases de React. Si vous avez déjà utilisé Reacts, n'hésitez pas à ignorer cette vidéo. Mais pour le reste d'entre vous, permettez-moi de dire que vous ne devriez pas avoir besoin de suivre un cours complet sur React pour travailler avec de l'hydrogène. Avant de me lancer dans le développement de l' hydrogène, j'avais étudié un peu la réaction pendant quelques années, mais ce n'est pas un domaine dans lequel je suis particulièrement expert à l'heure actuelle et pourtant j'ai quand même pu le comprendre développement de l'hydrogène assez facilement. Non, vous n'avez pas besoin d'être un développeur React inexpérimenté pour créer des vitrines d'hydrogène. Mais si vous ne savez pas quand il s'agit de réagir, écoutez bien ce que je vais vous dire. Réagissez. Qu'est-ce que c'est ? React est une bibliothèque JavaScript pour créer des interfaces utilisateur, mais elle est souvent appelée framework car c'est une alternative légitime aux frameworks JavaScript tels que Angular ou View, two des frameworks très populaires vous n' avez peut-être pas entendu parler auparavant. Vous vous demandez peut-être quelle est la différence entre une bibliothèque et un framework. En gros, je dirais que les cadres sont beaucoup plus opiniâtres. Ils vous obligent à créer des applications de certaines manières. Bien qu'il s'agisse d'une bibliothèque, vous pouvez simplement importer les modules de votre choix et les utiliser comme vous le souhaitez. Prenons l'exemple de React. Voici un exemple qui montre à quel point une réaction peut être simple. J'ai un terrain de jeu Reacts ouvert ici sur playcode.io/react. Il s'agit simplement d'un IDE en ligne pour tester du code Reacts. Je n'ai fait que me rendre à cette adresse et maintenant j'ai une application React de base. J'ai mon fichier index.html ici, qui apporte essentiellement le fichier index.jsx via les balises de script. Ensuite, cela se connecte à ce div racine ici. Si nous regardons notre index.jsx, vous pouvez voir ici que nous utilisons create route on React DOM pour nous connecter à cet élément de route et afficher notre application, qui se trouve ici. Voici quelques points sur lesquels je voudrais attirer votre attention. Vous pouvez voir ici les packages que nous utilisons. Vous pouvez voir ici que nous utilisons react et react DOM. Il est important de le noter ici car React est une bibliothèque qui peut être utilisée sur de nombreuses applications différentes. Il ne doit pas nécessairement s'agir d'un développement Web frontal. Il n'est pas nécessaire qu'il s'agisse d'une application Web ou d'un site Web. Il peut également s'agir d'une application téléphonique native. Dans le cas de React Native. C'est pourquoi React est un package autonome, mais vous pouvez ensuite utiliser quelque chose appelé react DOM. C'est ce que vous utilisez pour créer des applications Web et des sites Web. Il applique toutes les fonctionnalités de base de React à l'environnement de notre développement Web frontal. La première chose que vous remarquerez est qu'au début de pratiquement tous ces fichiers JSX se trouvent les instructions d'importation. Comme je l'ai dit, React est très modulaire et donc tout ce que nous avons à faire pour l'utiliser est de nous assurer de l'importer. Dans ces deux fichiers, vous verrez que vous importez React à partir de React. Cela peut sembler évident ici, mais là où cela se trouve dans les modules de votre nœud, voir ici. Vous ne pouvez pas vraiment le voir dans ce navigateur de fichiers ici. Mais lorsque vous installez React sur votre ordinateur et créez un fichier package.json, vous verrez qu'il créera également un dossier de modules de nœuds, qui installera tous vos modules de nœuds. Nous verrons cela un peu plus tard si vous n'êtes pas habitué créer du JavaScript ou des projets basés sur des nœuds. Tout d'abord, nous allons importer React. Ensuite, un schéma courant que vous verrez est que nous allons créer un composant fonctionnel ici. Vous verrez que cela commence comme une fonction, puis nous renverrons ce contenu d' apparence HTML. Maintenant, c'est quoi ce truc HTML ? Cela s'appelle en fait JSX. Cela ressemble à du HTML, mais ce n'est pas vraiment du HTML. Ce qui se passe, c'est que cela est compilé en HTML et affiché à l'écran ici. Vous pouvez voir ici que nous avons un Hello React H1 et commencer à le modifier pour voir la magie opérer. Cela ressemble exactement au HTML, et ça produit du HTML ici. Mais ce n'est pas du HTML. Faisons une petite pause sur JSX car c'est important et abordons certaines choses avec JSX. Ce que je vais faire et il y en a assez pour l'application. Mais juste pour démontrer JSX, je vais juste créer un autre fichier JSX ici. Nous pouvons l'appeler script.jsx. Je voudrais te montrer certaines choses. Plus précisément, je veux vous montrer certaines choses où JSX diffère de la syntaxe HTML. Cela ressemble beaucoup à ce que je disais, mais ce n'est pas la même chose. Voici quelques différences. L'une des différences est qu'il n'y a pas de trait d' union en JavaScript. Si nous disons par exemple, je vais simplement coller du code SVG ici. Vous pouvez voir ici que ce n'est pas très courant, mais sur certains éléments HTML, vous pouvez avoir un tiret entre deux mots pour le nom d'un attribut. Maintenant, cela ne fonctionnera pas dans JSX. Lorsque vous voyez quelque chose comme ça, il vous suffit de le convertir en CamelCase. Je vais simplement supprimer le tiret et mettre la largeur en majuscule. Maintenant, si nous l'exécutons, je ne sais pas si nous pouvons exécuter notre JSX autonome, laissez-moi simplement le copier dans notre application ici. Si je mets ça ici, tu peux voir que ça marche. Mais si nous utilisions un trait d'union, nous obtiendrons une propriété DOM non valide. ce que tu voulais dire ? C'est parce que nous ne pouvons pas avoir tirets dans les noms d'attributs dans JSX. C'est une différence. L'autre différence que vous verrez ici, au lieu d'utiliser class, nous devons à nouveau utiliser ClassName dans ce format CamelCase. La raison en est que class est un mot clé réservé en JavaScript. On ne peut pas utiliser la classe ici. C'est une autre différence. La troisième différence est que si nous revenons ici, vous pouvez voir que nous avons quelques chiffres ici. Nous pouvons placer des expressions JavaScript dans ces attributs dans JSX. Si je devais enlever ça, c'est 100 en ce moment. En fait, nous voulons voir ce rendu sur notre écran. n'est probablement pas une bonne idée de le mettre dans un fichier séparé. Remettons cela ici pour que nous puissions réellement le voir s' afficher sur notre écran. Indentez un peu ici. Nous pouvons en fait mettre des expressions JavaScript ici. Ce que nous pouvons faire, c'est au lieu de 100, une autre solution très simple pour vous sera mise entre crochets ici. Qu'est-ce que 100 ? C'est 50 fois par 2. Ici, vous pouvez voir que vous obtenez le même résultat. Nous pouvons mettre une expression JavaScript ici. Évidemment, nous pouvons ajouter une variable pour cela. Si je devais aller const x est égal à 50 fois 2, et alors nous pouvons simplement insérer x ici. Alors, si je le multipliais par 4, tu pourras voir notre cercle. Est-ce que ça grossit ? La hauteur devrait augmenter, mais nous devons peut-être créer une plus grande largeur aussi. Je ne sais pas ce qui se passe là-bas. Mais vous pouvez voir si nous vérifions ce code, si je l'inspecte, vous verrez le résultat. C'est un peu serré ici. On y va. Vous verrez que le résultat obtenu est en effet de 500 pour la hauteur, soit 5 fois 10. Nous allons voir cela assez souvent dans ce cours. Lorsque nous utilisons React, nous allons intégrer des expressions et des variables JavaScript dans des attributs, des props. C'est une différence par rapport au HTML lorsque nous le comparons à JSX. Une autre chose que je voulais montrer dans cette vidéo était comment ce code JSX finit par être compilé dans fonctions React qui génèrent ensuite le code HTML. Ce n'est pas particulièrement important, mais j'aimerais que vous compreniez ce qui se passe dans les coulisses. Malheureusement, je ne peux pas vous le montrer dans cet environnement. Peut-être plus tard dans la classe, lorsque nous confierons ce projet ou notre propre projet à un hôte local. Mais si nous passons à JSX en profondeur, sur la documentation de React, vous pouvez voir si nous en apprenons plus à ce sujet. En fait, ce code sera compilé dans React.CreateElement, et ensuite vous verrez tout ce code. Ce que nous pouvons faire si nous le voulions, c'est qu'au lieu d'utiliser JSX, nous pourrions écrire du code comme celui-ci. De cette façon, nous n'avons pas besoin de compiler JSX. Mais évidemment, c'est beaucoup plus agréable que d'écrire un tas de méthodes React comme celle-ci, et surtout lorsque vous faites de l'imbrication. Si nous imbriquons tout un tas d'éléments dans des éléments, cela deviendrait très compliqué et presque impossible à utiliser. C'est très pratique d'utiliser JSX. Mais je voulais juste noter que ce n' est pas vraiment ce qui arrive à votre navigateur. C'est ce qui arrive dans votre navigateur, et c'est ce qui crée ces éléments dans votre environnement React. Vous pouvez également en savoir plus sur l' introduction de JSX ici. Vous pouvez tout savoir sur JSX dans la documentation officielle de React. Encore une fois, je vous encourage à le faire comme nous l'avons vu, JSX est aussi une expression. Cela va nous montrer comment insérer des valeurs dans notre JSX, en spécifiant des attributs, utilisant des variables et d'autres données plutôt que de simplement les mettre sous forme de chaîne, comme nous le ferions en HTML. un zoom arrière depuis JSX maintenant pour en savoir plus sur React en général, je vais supprimer cette variable car nous ne l'utilisons plus. Nous avons déjà parlé des entrées. Nous allons importer React selon nos besoins dans ces deux fichiers JSX. Mais ensuite, pour créer le DOM virtuel, nous allons utiliser le DOM React ici. Dans nos projets particuliers utilisant de l'hydrogène, nous n'avons pas besoin d'utiliser React DOM. Je crois que c'est grâce à l'hydrogène que nous pouvons y remédier. Mais comme vous pouvez le voir ici, nous allons toujours importer des éléments depuis React ou depuis une autre bibliothèque React, qui pour cette classe sera React. Ensuite, vous allez nous voir importer des produits à partir de l'hydrogène. Ensuite, ce que vous obtenez, ce sont vos exportations. Comme vous pouvez le voir ici, j' importe React, puis j'exporte ce composant fonctionnel. Maintenant, pourquoi est-ce que je l'exporte ? Eh bien, je l'utilise en fait dans ce fichier index.jsx. Vous pouvez voir ici que j'importe ce composant d' application à partir de ce fichier d'application. Si je l'utilise dans ce fichier, je n'ai pas besoin de l'exporter. Mais si je veux l' utiliser dans un autre fichier , je vais devoir l'exporter. Maintenant, si je fais juste une exportation sans mettre par défaut après. Je peux en exporter plusieurs ici. Je dois spécifier celui que j'importe et mettre ces crochets frisés de chaque côté. Ces crochets bouclés font ce que l'on appelle la déstructuration. Si j'exporte plusieurs composants dans un même fichier, même si je n'en exporte qu'un seul ici, je ne dis pas par défaut. Par conséquent, je dois entrer ici et le sortir entre ces bretelles bouclées. Pour vous montrer la différence, si je vais juste ici et parce que nous n' avons qu'une seule exportation, je peux simplement mettre la valeur par défaut ici. Ensuite, à l'intérieur, je peux les supprimer, et cela fonctionne de la même manière. Mais si je voulais dire, par exemple, créer un autre composant ici, alors je ne peux pas simplement le faire par défaut. Disons que je crée une application 2, et puis, oups, mauvais onglet. Je vais ici et ensuite je peux faire app2. Je peux en importer plusieurs à partir d'un seul fichier. Mais si vous n'en exportez qu'un, n'hésitez pas à les supprimer, débarrassons-nous de celui-ci maintenant, puis mettons la valeur par défaut ici. Il est important de le noter. Vous verrez les valeurs par défaut et non les valeurs par défaut utilisées. Vous verrez que les crochets bouclés et les crochets bouclés ne sont pas utilisés. C'est pourquoi parfois vous êtes déstructurer et parfois de ne pas déstructurer. Ce sont les importations et les exportations. Évidemment, nous avons vu à l'intérieur de ce retour que voici JSX. Si je devais créer une autre fonction comme je l'ai vu auparavant, supprimons cette fonction par défaut ici. Disons simplement que c'est un bouton personnalisé. Je peux accéder aux accessoires de ce bouton personnalisé via l'argument ici. Ce que je vais faire, c'est que dans ce retour, je vais mettre un bouton, même syntaxe que le HTML car c'est un élément HTML. Ensuite, je vais simplement dire, cliquez sur moi, disons. Ensuite, ici, au lieu de ce SVG, insérons notre bouton personnalisé dans Camel Case. Comme vous pouvez le voir ici, nous avons notre petit click me here. Maintenant, peut-être voulons-nous dynamiser ce domaine. Ce que nous pouvons faire, c'est mettre le texte ici. Ensuite, quand j'ai besoin de faire, c'est de retirer les accessoires aux enfants. Cela va extraire tout ce qui se trouve entre ces deux balises. Je peux aller avec des accessoires, des enfants. Tu y vas. Vous pouvez le voir ici, cliquer ici ou cliquer maintenant, tout ce que je mets ici concerne les enfants de ce composant, et je peux donc y accéder via ses accessoires. Maintenant, vous ne verrez pas cela d'habitude, vous verrez que la déstructuration est à nouveau utilisée. Au lieu de props.children, ce que je peux faire, c'est déstructurer et retirer les enfants directement des accessoires de cette section ici même. Au lieu de props.children, je vais retirer les enfants des accessoires et ensuite je pourrai les y mettre. Ensuite, vous pouvez cliquer ici. Ensuite, vous pourriez transmettre d'autres données. Je vais juste mettre un attribut ici, appelons-le simplement message, et je dis que je suis votre message. Maintenant, nous avons cet accessoire auquel nous pouvons accéder à partir d'ici, et tout ce que nous avons à faire est de le retirer également. Nous sortons des enfants, envoyons un message, et ensuite je vais juste faire un simple OnClick. Ensuite, mettons un ClickHandler pour trouver mon ClickHandler ici, ClickHandler. Ensuite, je vais faire une simple alerte avec le message qui a été transmis. Maintenant, si je clique ici, vous verrez que nous recevons une alerte là-haut, je suis votre message, et cela est transmis via notre composant ici. Les deux accessoires, nous avons nos enfants que nous pouvons transmettre, puis nous pouvons transmettre tous les accessoires que nous définissons également. Nous avons juste besoin de le retirer de notre objet d'accessoires ici, puis nous pouvons l'utiliser comme nous voulons dans notre propre composant personnalisé. Nous y sommes allés pas mal de temps, mais j'espère que vous avez compris l'essentiel. Encore une fois, nous n'avons pas besoin de suivre un cours complet dans React pour en comprendre suffisamment pour commencer à travailler avec Hydrogen. Mais si vous éprouvez des difficultés, vous pouvez bien sûr rechercher tout ce qui n'a pas de sens en consultant la documentation de React ou en le recherchant simplement sur Google. Honnêtement, React est un framework très populaire. Il y a tellement d'informations. Si vous rencontrez des problèmes, commencez simplement à rechercher sur Google, à regarder la documentation spécifiquement avec React, et bien sûr, si vous le faites et que cela échoue, vous pouvez toujours laisser un commentaire ci-dessous avec tout ce que vous rencontrez. Avant de passer aux autres que vous devez comprendre, avant de commencer à travailler spécifiquement avec l'hydrogène, je voudrais simplement vous expliquer les points que vous devez comprendre, avant de commencer à travailler spécifiquement avec l'hydrogène, je voudrais simplement vous expliquer les trois principaux objectifs que nous allons suivre à importer et à utiliser depuis React. Comme vous pouvez le voir ici, nous avons créé des composants, mais nous pouvons également importer des composants de certaines bibliothèques. C'est ce que nous allons voir lorsque nous commencerons à importer des composants déjà créés par Shopify pour nous sur Shopify Hydrogen. Tu verras ça très bientôt. Mais ensuite, bien sûr, nous pouvons créer nos propres composants comme nous l'avons fait ici. Une autre chose que nous allons importer depuis React et depuis Shopify Hydrogen est ce qu'on appelle un hook. Si vous souhaitez accéder à la documentation, trouverez une introduction aux hooks, quelque part ici. Hooks, on y va. Il y a toute une section ici, et vous pouvez en savoir plus sur les crochets. En termes simples, les hooks vous permettent d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe. Cela peut être difficile à comprendre pour vous, pour ceux d'entre vous qui n'ont pas utilisé React depuis un moment. Mais comme vous pouvez le voir ici, nous pouvons importer un hook commun appelé UseSate depuis React. Regardons en fait cet exemple. Si j'entre ici, vous pouvez combiner la déstructuration avec l'ensemble de l'objet lui-même. On y va. Je vais juste récupérer UseState, et maintenant j'importe ce Hook depuis React. Ce que nous pouvons faire, c'est de nouveau déstructurer, nous pouvons récupérer la variable d'état puis la fonction qui la définit, puis la récupérer à partir de useState en transmettant une valeur par défaut de zéro. Prenons d'abord cette partie. Maintenant, dans notre composant, nous pouvons récupérer un compte et une méthode setCount. C'est tout ce dont nous avons besoin pour créer ce bouton. Je remplace mon bouton par celui-ci ici même. Maintenant que nous cliquons dessus , le décompte augmente, mais vous ne pouvez pas le voir, donc ce que je vais faire, c'est mettre ici le décompte. Je vais juste le mettre directement dans le bouton, pas dans un autre élément, et si je clique dessus, le compte augmente. Je veux juste introduire le concept d'un hook très tôt dans ce cours, car nous allons utiliser certains hooks dans Shopify Hydrogen. La plus courante est UseShopQuery, que nous allons utiliser pour importer des données de notre API Shopify Storefront et les utiliser dans notre projet. Nous avons vu des composants ici, et nous avons vu des crochets. La seule autre chose concerne les utilitaires, qui sont essentiellement toutes les autres fonctions que nous utiliserons pour nous faciliter la vie lors de la construction de vitrines. Je vais donner un exemple, j'ai trouvé cet utilitaire quelque part en ligne. Il s'agit simplement d'une fonction de formatage de la monnaie. Nous avons déjà cet utilitaire dans Shopify Hydrogen, nous ne devrions donc pas avoir besoin d' utiliser quelque chose comme ça. Mais comme vous pouvez le voir ici, nous pouvons récupérer cet utilitaire. Il suffit de le coller directement dans notre code ici. Je vais me débarrasser du code de ce composant. Ceci est écrit en TypeScript, donc j'ai juste besoin de supprimer la définition de type ici. Vous pouvez maintenant voir que cela fonctionne. Disons simplement si nous devions établir un prix. Encore une fois, je peux ajouter une expression ici, et disons simplement FormatCurrency et ajouter 110.10. Maintenant, vous pouvez voir ici parce que nous utilisons la devise USD et le style de devise, vous pouvez voir maintenant que la devise est bien formatée. Si nous devions ajouter quelques décimales supplémentaires ici, seraient quand même arrondies au centime le plus proche ici, puis nous plaçons le signe $ devant. Si nous devions faire en sorte que cela ressemble à la livre sterling, par exemple, vous pouvez voir que c'est désormais le symbole de la livre sterling à la place. C'est ce que fera un utilitaire. C'est juste une fonction qui nous facilite la vie. Comme vous pouvez le voir ici, nous l'avons importé ou nous l'avons simplement récupéré. Nous pourrions, bien sûr, créer un nouveau fichier, puis l'exporter, puis l'utiliser n'importe où dans notre projet, ce qui serait le scénario le plus probable. Mais je voulais juste vous montrer ce qu'est un utilitaire, car nous pouvons également utiliser certaines fonctions utilitaires dans notre boutique Shopify Hydrogen . C'est vraiment ça, les gars. Vous pouvez, bien sûr, approfondir React, mais pour ce cours, c'est tout ce dont nous avons vraiment besoin pour commencer. Tous ces concepts dont nous venons de parler vont nous aider à générer l'interface utilisateur de notre nouvelle application de vitrine personnalisée. Mais l'autre aspect sera la façon dont nous connecterons cette interface utilisateur à l'API Storefront. C'est exactement ce que nous allons aborder dans la prochaine vidéo. 4. API Storefront: Dans cette leçon, nous allons parler de l'API StoreFront, qui est celle que nous utiliserions pour récupérer les données nécessaires pour alimenter notre vitrine avec tous les produits, pages et articles de blog les informations que nous voulons montrer à l'utilisateur. Pour fournir un peu de contexte, l'API Shopify est l'une des rares API fournies par Shopify. Les deux plus courantes, je dirais, sont l'API storefront et l'API Admin. L'API d'administration est celle que vous utiliseriez pour exécuter les fonctions d'administration. Alors que l' API Storefront est l'API permettant récupérer les informations destinées aux clients. J'ai parlé de l'API Storefront dans quelques-unes de mes autres vidéos, vous m'avez peut-être vu me connecter à l'API et à moins de 11 % de ma classe de programmation de thème Shopify et pendant une minute, 1820 dans ma vidéo YouTube en utilisant JavaScript dans le développement de thèmes. Cependant, comme je l'ai mentionné dans ces vidéos, l'API de vitrine n'a pas été conçue pour les thèmes Shopify Elle est plutôt destinée à tous les autres scénarios dans lesquels vous auriez besoin d'accéder aux données de la boutique. Comme l'indique Shopify dans sa documentation, il peut être utilisé partout où se trouvent vos clients, exemple sur un site Web, une application ou un jeu vidéo Cela inclut désormais les applications Shopify Hydrogen. Comment fonctionne-t-il dans Shopify Hydrogen ? Eh bien, la bonne nouvelle est que l'hydrogène possède un hook intégré qui vous permet de vous connecter facilement aux données et de les interroger. C'est ce qu'on appelle le hook use sharp query . Plus tard dans cette classe, nous allons configurer nos informations d'accès dans le fichier de configuration Hydrogen nos informations d'accès dans le fichier de configuration Hydrogen, puis utiliser le hook pour extraire les données dont nous avons besoin. Pour l'instant, je voudrais aborder brièvement la syntaxe de GraphQL, qui est le langage que nous utilisons pour interroger l'API StoreFront. Ici, c'est ce que l' on appelle graphique. Il s'agit d'un IDE graphique GraphQL intégré au navigateur. Cela peut sembler très technique, mais en gros, tout cela est un moyen pour nous de créer et de tester des requêtes avant de les exécuter dans une application. Je vous montrerai comment configurer cela pour votre projet particulier plus tard, mais pour l'instant, vous pouvez voir que j' utilise un serveur local. Il s'agit en fait d'un projet d'hydrogène et heureusement pour nous, l' une des caractéristiques est ce graphique. Il s'agit essentiellement de GraphQL avec un i entre le graphe et le QL. Graphiql, je suppose que c'est comme ça qu'on pourrait le dire. Cet outil est intégré et tout ce que nous avons à faire, c'est que s'il s'agit de notre hôte local 3 000 de domaine racine, nous avons juste besoin de mettre graph iQL après celui-ci, et ensuite nous aurons accès à ce petit outil qui nous permet de des requêtes GraphQL sur n'importe quel projet d'API Storefront Hydrogen auquel est connecté. Celui-ci est en fait connecté au magasin de prévisualisation de l'hydrogène. Il s'agit de la boutique standard qui chargera paramètres de configuration de l'API de votre vitrine lorsque vous créerez votre première vitrine hydrogène Vous pouvez mettre à jour ces paramètres, verrez dans une vidéo ultérieure, mais dans cette classe, nous allons simplement utiliser le magasin de prévisualisation de l'hydrogène qui contient déjà de nombreuses données, donc nous n'avons même pas à créer des échantillons de données pour cette classe, nous pouvons simplement utiliser ce qui est fourni pour nous par Shopify. Nous avons déjà une requête ici, si je clique sur « Exécuter » ici, vous pouvez voir que nous obtenons une structure de données qui imite ce que nous écrivons ici. J'aime utiliser l'indentation, donc je vais juste le mettre ici. Ce que nous obtenons en retour, c'est du JSON qui imite la structure de notre requête. C'est ce qui est cool avec GraphQL, il imite ce que nous obtenons en termes de JSON. Pour expliquer cela un peu, nous avons juste une requête de base ici, nous prenons la racine de la requête de sharp, puis nous ouvrons une sélection ici puis nous définissons les champs que nous voulons renvoyer. Tout ce que nous faisons, c'est renvoyer le nom du tranchant, qui est hydrogène. Mais je pourrais aussi ajouter la description de ce champ, et si je l'exécute, vous verrez que lorsque notre requête reviendra, nous aurons également notre description , d'accord ? Nous pouvons ajouter tous les champs qui existent sur l'objet pointu ici Si je devais supprimer complètement la sélection et essayer de l'exécuter, cela ne marchera pas, cela dit le champ doit contenir des sélections. Certains champs de votre API nécessiteront des sélections, et la boutique en fait partie. Cela ne fonctionnera donc pas comme une Cela ne fonctionnera donc pas comme demande de l'objet complet, nous allons devoir demander les champs spécifiques de cet objet. Comment déterminer les champs auxquels nous pouvons accéder sur l'objet ? Passons à la documentation. Si je recherche simplement l'API Storefront dans Google, je devrais être en mesure de la trouver. Voici la page sur la documentation, l'API GraphQL Storefront de Shopify et honnêtement leur navigation est un peu difficile à naviguer, mais je voudrais entrer dans les objets Comment, allez ici et si nous faisons défiler la page vers le bas, ce n'est pas ce que je recherche, la boutique en ligne est la catégorie que je recherche, je vais vers les objets, nous pouvons voir ici l'objet de la boutique, donc nous pouvons voir que la boutique représente un collection de paramètres généraux et d'informations sur la boutique et voici les champs, nous accédons donc au nom de la boutique, la description, nous pouvons également y avoir des champs Meta. Nous pouvons obtenir le domaine principal, donc si je voulais ajouter ce domaine principal, l'avantage d' utiliser cette interface est qu'elle est saisie automatiquement. Je peux y ajouter le domaine principal et cela nécessite des sélections. Si nous voulions l'utiliser, il suffit de vérifier ce type de données. Comme vous pouvez le constater, il y a aussi une gamme de sélections ici, donc je vais devoir ouvrir une sélection sur celle-ci , puis l'URL est l'un des champs correspondants. Je peux l'exécuter et maintenant nous pouvons obtenir l'URL du domaine principal. Maintenant, l'une des choses les plus délicates à propos de GraphQL, c'est assez simple jusqu'à présent. Mais si nous commençons à travailler avec des connexions relationnelles, nous allons commencer à voir ce on appelle des arêtes et des nœuds. Ce que je veux dire par là, c'est que si nous entrons ici et que nous saisissons quelque chose au pluriel, nous ne pouvons pas le faire sur un objet de boutique, mais revenons à notre parcours ici et si je tape des collections, comme vous pouvez le voir ici, la connexion à la collection sera rétablie. Ici, nous pouvons cibler une collection spécifique, mais si je vais ici et que je fais des collections, je vais maintenant devoir utiliser des arêtes et des nœuds, d'accord ? Je vais devoir accéder aux bords de cette liste de collections , puis récupérer les données que je veux sur chaque collection dans cette liste de collections ici sous le nœud. Je peux le saisir, disons le nom avec le manche en caoutchouc, et ensuite si je clique sur Run here, je devrai probablement le mettre dans le périmètre ici. Comme il est indiqué ici, vous devez fournir le premier ou le dernier, donc cela signifie que je dois spécifier nombre d' objets de collection que je souhaite renvoyer, afin de pouvoir demander les 10 premiers. moi qui gère ça. Vous pouvez voir ici que je récupère un objet qui ressemble à la structure ici, je récupère dix collections ou dix collections au maximum, il n'y en a que 1, 2, 3, 4, 5, 6, je crois, collections dans notre boutique au total, nous obtenons donc les 10 premières. S'il n'en existe que six, nous en récupérons six et comme nous n'avons demandé que le handle, nous ne le retrouvons que sur chaque nœud. Maintenant, cette histoire de bords et de nœuds est un peu confuse mais vous allez vous y habituer, d'après ce que j'aime à y penser, nous pouvons récupérer plus que les bords d'une liste de collection en particulier, n'importe quelle liste d'ailleurs. Si je passe sous les bords ici, je peux aussi obtenir un objet appelé information sur la page, qui est une sélection et ensuite je peux voir s' il y a une page suivante. Si je vais ici et que je l'exécute à nouveau, non seulement j'obtiens les données que je recherche, mais j'obtiens également les informations pour la pagination, ce qui me dit s'il y a une page suivante, ce n'est pas le cas. Si je le mets à trois, il ne me montrera que les trois premiers et les trois seconds et je recommence. Maintenant, si nous regardons vers le bas, nous n'obtenons que les trois premiers résultats et nous obtenons la réalité maintenant pour la page suivante. De même avec le nœud, nous pouvons passer sous le nœud et taper quelque chose appelé curseur. Allons-y et voyons ce qui va revenir. Comme vous pouvez le constater, nous avons maintenant ce petit identifiant sur chaque nœud, qui nous donne une adresse pour ce nœud en particulier. Cela peut sembler assez compliqué, pourquoi ne pouvons-nous pas simplement renvoyer une liste, mais cela revient aux liens relationnels entre ces différentes ressources. Parce que ces différents nœuds sont eux-mêmes des ressources et que nous leur renvoyons une connexion. Il ne s'agit pas uniquement de données au sein d'une collection. Ce sont aussi des données de produits qui peuvent faire partie de plusieurs collections, ce qui semble compliqué, mais tout ce que nous devons retenir ici c'est que même si nous n' utilisons pas de pagination, donc si je les supprime, assurez-vous simplement d'utiliser des arêtes et des nœuds lorsque nous gérons les connexions de cette façon. Avant de passer à la discussion sur le framework Hydrogen, je voulais juste vous montrer quelques exemples supplémentaires de ce à quoi vous pourriez faire face en termes de GraphQL lors création de vitrines utilisant de l'hydrogène. Quelques exemples que vous pouvez trouver dans ce tutoriel fourni par Shopify. En substance, cette classe est une version vidéo de celle-ci de toute façon, nous utiliserons une grande partie de ce dont il est question dans ce tutoriel, mais nous n'en utiliserons pas non plus une tonne. Je vais essayer de rester très simple. Une grande partie de ce tutoriel que j'ai trouvé prend vraiment avance en termes d' ajout de code, ce qui n'a peut-être pas beaucoup de sens. Le cours a été conçu pour le parcourir un peu plus lentement pour vous les gars. Mais je tiens à attirer votre attention sur quelques requêtes GraphQL que vous pourriez finir par utiliser. Comme vous pouvez le constater, nous avons cette requête que nous avons vue auparavant, où accéder au nom et à la description de la boutique, donc c'est une requête très basique. Si je fais défiler l'écran un peu plus vers le bas, je ne suis pas sûr que ce soit sur cette page ou sur la page suivante. Passons à la création d'une page de collection, défilons vers le bas. Ici, vous pouvez voir que nous avons des collections ici. Nous pouvons en fait ignorer la partie des arêtes, sorte que nous pouvons simplement écrire des nœuds au lieu d'écrire des arêtes, puis un nœud singulier. Si je voulais supprimer les arêtes ici et l'exécuter, vous verrez que nous récupérons les nœuds sans avoir à mettre les bords de ce mot, donc c'est aussi une option. Ensuite, comme vous pouvez le voir ici, nous avons le paramètre permettant de gagner les huit premiers, d'une collection particulière, passant par un handle, que nous verrons plus loin dans cette classe, et puis nous retirons la première variante de chaque produit. Encore une fois, nous allons faire quelque chose de similaire dans la classe. Je voulais juste passer en revue quelques exemples, voir s'il y a quelque chose de théorique à vous dire avant de commencer, bien que cela soit assez similaire si je passe à la page suivante. Voici quelque chose que je voulais vous montrer avant de commencer, c'est l'utilisation de ces fragments. Les fragments sont comme si vous étiez habitué au développement de thèmes Shopify, vous pouvez les considérer presque comme un extrait de code. Il s'agit d'un bout de code réutilisable que nous pouvons intégrer à d'autres parties de notre requête GraphQL. Nous définissons ce fragment ici, qui indique les champs que nous voulons voir apparaître sur les médias. Ce fragment entier nous indique sélection de champs que nous voulons , puis nous pouvons l' intégrer là où nous en avons besoin en utilisant ce point, point, point. Au lieu d'écrire tous les champs médiatiques ici, nous pouvons simplement développer le fragment que nous avons créé ici. C'est pratique lorsque nous voulons réutiliser cette sélection dans plusieurs zones de notre requête. L'autre chose ici que je veux que vous remarquiez est ce point, point, point, et ainsi de suite. Ici, cela semble similaire dans la mesure où vous avez les trois points, mais tout aussi différent dans le sens où cela ne renverra cette sélection que lorsque le type est image multimédia. Il va renvoyer cette sélection lorsque le champ multimédia qui revient est une image multimédia. Il renverra cette sélection s'il s'agit d'une vidéo. Il va renvoyer cette sélection lorsqu'il s'agit d'un modèle 3D et cette sélection lorsqu' il s'agit d'une vidéo externe. Je suppose que c'est pour cela qu'il a été créé dans un fragment afin que nous n'imbriquions pas tout ce code dans notre sélection ici. Je ne suis pas sûr que nous utiliserons nécessairement des fragments dans cette classe. Nous allons faire en sorte que les choses restent très simples. Mais j'ai juste pensé à le mentionner pendant que vous parcourez des exemples de Shopify, en dehors de ce cours, vous vous demandez peut-être ce qui se passe ici. Recherchez certainement des fragments de GraphQL si vous souhaitez en savoir plus à ce sujet. Laissez-moi y aller, voir s'il y a autre chose que je voudrais partager avec vous. Comme vous pouvez le voir ici, les gars, ce tutoriel introduit beaucoup de code très rapidement, c'est pourquoi je ne le suis pas exactement pour cette classe Skillshare. Je pense qu'ils sautent dans certaines parties un peu trop vite. Bien que je n'aime pas être trop longue, j'aime aborder un grand nombre de sujets dans une séquence étape par étape qui vous permet de comprendre ce qui se passe à chaque étape, donc je pense que c'est mieux pour aller plus lentement et vraiment comprendre en profondeur ce qui se passe plutôt que de prendre autant d'avance. À mon avis, je pense qu'ils prennent un peu trop d'avance, surtout pour quelqu'un qui n'a jamais utilisé React auparavant ou qui est nouveau dans React Ce tutoriel va directement dans le vif du sujet, contient beaucoup de détails. De toute évidence, une grande partie de cela n' est que du code React. C'est l'essentiel que je voulais vous montrer. Je voulais vous montrer, si je revenais ici, les fragments. Laissez-moi trouver cela dans la documentation pour vous, si vous voulez y jeter un œil plus tard. Vous pouvez voir ici la documentation de GraphQL, la documentation officielle sur graphql.org. Si nous regardons la section sur les fragments, vous pouvez entrer plus en détail ici sur ce que sont les fragments. C'est le seul exemple complexe que j'ai vu dans les exemples Shopify de GraphQL. Nous n'allons probablement pas utiliser de fragments dans cette classe, mais juste au cas où vous verrez cela sur un exemple comme documentation de Shopify et que vous vous demandez ce qui s'y passe. Mais nous allons essayer de rester aussi simple que possible , puis essayer de l'étendre à partir de là. Mais il est important de comprendre GraphQL au moins à un niveau de base Avant de nous lancer dans la création de nos projets, nous devons savoir comment nous allons interroger l'API StoreFront dans afin d'obtenir les données nécessaires à la création de vitrines personnalisées. C'est pourquoi nous devons faire une petite leçon sur GraphQL. Dans la vidéo suivante, nous allons aborder le framework Shopify Hydrogen. 5. Le cadre d'hydrogène Shopify: Dans cette leçon, nous allons maintenant parler du framework Hydrogen, c'est-à-dire de l'ensemble de crochets, composants et d'utilitaires fournis par Shopify nous aider à créer des vitrines personnalisées. Pendant la majeure partie de ce cours, j'expliquerai les crochets et les composants Hydrogen alors que nous travaillons sur notre propre projet Hydrogen. Mais il y a quelques concepts concernant l'hydrogène que j' aimerais que vous compreniez avant que nous ne nous y attachions. Tout d'abord, si nous nous dirigeons vers le fichier App.Server.jsx ici, vous remarquerez que ce fichier aura une apparence assez similaire quel que soit le projet Hydrogen que vous recherchez. Vous avez ici cette fonction RenderHydrogen, qui est responsable de l'hydratation. Dans ce cas, l'hydratation est liée au rendu côté serveur. En gros, il s'agit de la fonction qui configure votre projet en tant qu'application Hydrogen. Après avoir importé RenderHydrogen ici, les autres composants de haut niveau que vous remarquerez probablement concernent le routage et la fourniture. Dans un projet React classique, vous pouvez utiliser quelque chose comme React Router, qui est une autre bibliothèque pour gérer le routage, mais Hydrogen propose un routage intégré. En utilisant la combinaison du composant Router et du composant FileRoutes, nous pouvons facilement configurer un routage de base au sein notre application qui imite la structure de fichiers de notre projet. Par exemple, dans notre dossier d'itinéraires, si je clique ici, si je crée un catalogue. C'est ce que nous ferons dans la classe plus tard, mais juste pour vous montrer d'emblée, si je crée un fichier catalog.server.jsx, je peux y accéder en tapant catalog après le domaine de route de notre application. Si je l'exécute, il n'est pas en cours d'exécution pour le moment, mais si je lance la commande yarn dev ou npm run dev, nous l' exécuterons sur localhost 3001. Je gère un autre magasin en ce moment, est pourquoi il est à 3001 et non à 3000. Si je commande, cliquez dessus, vous verrez Hello World ici. Si je retourne dans mon éditeur de code et que je mets simplement quelque chose dans catalog.server.jsx. Reprenons ce que nous avons dans index.server.jsx et remplacons-le par Catalog et remplacez-le ici par Catalog avec une majuscule. Cliquez sur « Enregistrer » dessus. Revenez à notre application dans le navigateur. Comme vous pouvez le voir ici, il exécute la route d'index, qui, si nous regardons, crée simplement un div avec Hello World pour que cela corresponde. Ensuite, si je vais ici et après notre catalogue de mise en ligne de domaines d'itinéraires, vous pouvez maintenant voir le catalogue de mots à venir. C'est ainsi que nous intégrons le routage dans notre application. Nous insérons simplement un routeur et l' enveloppons dans FileRoutes, afin que notre routage imite tout ce que nous avons mis dans ce dossier de routes. Nous pouvons faire de l'imbrication via des dossiers imbriqués. Il est en fait assez facile de configurer l'imbrication avec Shopify Hydrogen. Je peux également créer une valeur dynamique. Disons que j'avais un itinéraire imbriqué pour les collections. Je vais créer un dossier de collections ici. Ensuite, je peux également créer un itinéraire dynamique. Je peux utiliser handle en tant que variable, server.jsx, puis nous n' allons pas le faire dans cette vidéo car nous devrons introduire le hook de requête use shop et commencer à interroger l'API, ce que nous verrons plus tard vidéo. Mais en gros, maintenant, je vais juste changer cela en Collection. Si nous avions accès à la collection, nous pouvons commencer à prendre dynamiquement la collection que nous examinons et peut-être à publier son titre ou quelque chose comme ça. Nous pouvons également créer ces itinéraires dynamiques. Cela vivra, disons simplement que notre collection s'appelait chaussures, donc nous suivons simplement cette voie, collections-chaussures, puis cette partie des chaussures deviendra le manche, et donc cela nous servirait fichier par cette route. Je peux également utiliser le composant routes. Il n'est pas importé actuellement, mais nous pouvons importer le composant d'itinéraire depuis Shopify Hydrogen. Cela nous permet de définir un itinéraire jusqu'ici. C'est pratique pour créer un itinéraire fourre-tout pour 404 pages complètes par exemple. Si je crée un composant NotFound, je peux le charger dedans. Ensuite, si l'URL ne passe pas par FileRoutes, elle peut passer par cette route de sauvegarde à la place. que nous verrons également dans ce cours. Ensuite, les autres composants que vous allez voir sont les composants Provider. Comme vous pouvez le voir ici, Shopify Provider est le composant fournisseur de premier niveau de Shopify Hydrogen. Nous l'avons placé sur le routeur afin d'avoir accès sur chaque page aux fonctions de base de Shopify, telles que le hook de requête Use chaque page aux fonctions de base Shop, que nous utiliserons dans pratiquement tous les itinéraires. Ce modèle d'utilisation d'un composant Provider avec des composants et des hooks associés est susceptible de se produire dans différentes parties de votre application. Les exemples incluent le CartProvider pour fournir la fonctionnalité du panier, le ProductOptionsProvider pour configurer les états afin de suivre la variante actuellement sélectionnée et l'option sélectionnée sur une page de produit. et CartLineProvider, qui permet d'accéder facilement aux données relatives à un CartLine individuel. Ce ne sont là que quelques exemples de certains des composants disponibles dans le framework Shopify Hydrogen, dont vous trouverez la liste complète ici dans la documentation officielle de Shopify. À titre de conseil, si vous vous sentez perdu le rôle d'un composant ou d'un hook en particulier, vous pouvez simplement rechercher sur Google Shopify Hydrogen, suivi du nom du hook ou du composant, et cela devrait vous dirige généralement vers la page correspondante de la documentation de Shopify Hydrogen. N'oubliez pas que les crochets ressemblent généralement à ceci avec une première lettre minuscule tandis que les composants commencent tous par une majuscule. Cela permet de les différencier des balises HTML classiques. 6. Commencez avec l'hydrogène: Sans plus attendre, commençons à construire notre vitrine d'hydrogène. Nous avons beaucoup parlé de théorie, il est temps de passer à la pratique. Il y a deux manières de commencer. Numéro 1, vous pouvez le faire comme je l'ai fait suivant cette documentation ici, shopify.dev/custom-storefronts/hydrogen/ getting-started/quickstart. En gros, il suffit de rechercher cela dans la navigation. Ici, vous pouvez voir à l'étape 1 que nous pouvons créer une application Hydrogen. J'utilisais NPM jusqu'à ce que je rencontre ce problème de mise en cache qui m' a forcé à utiliser Yarn. Nous en reparlerons un peu dans une seconde. Maintenant, j'utilise Yarn, mais vous pouvez aussi utiliser NPM. Il est important de noter ici que lorsque nous utilisons ces outils, vous devez les installer. Vous devez également vous assurer que la dernière version du nœud est également installée. Cela se produira à chaque fois que nous utiliserons des gestionnaires de paquets. Si vous n'êtes pas familier, node.js est l'environnement d'exécution JavaScript, nous en avons besoin, c' est au cœur de NPM et de tout ce que nous allons faire dans ce projet. Assurez-vous de disposer de la dernière version. Ensuite, NPM est le gestionnaire de packages de nœuds, il se trouve au-dessus de cela et vous aide à installer et à exécuter des packages de nœuds. Nous devons nous assurer d'en avoir les dernières versions. Si vous souhaitez utiliser Yarn, vous pouvez également installer Yarn. Les détails relatifs à l'installation de tous ces outils d' interface de ligne de commande se trouvent sur leurs sites Web respectifs. Je vais d'abord vous montrer comment procéder de cette façon. Je vais ouvrir mon application de terminal préférée, elle s'appelle iterm. Je vais optimiser cela pour vous, afin que vous puissiez voir plus facilement. Efface tout ça là-bas. Je vais simplement accéder à mon bureau pour cela, donc je vais sur CD Desktop. Exécutons ensuite ces commandes. Lancez simplement NPM init, Shopify Hydrogen. Il indique que vous devrez installer les packages suivants. Oui. J'ai juste besoin de lui donner un peu de temps pour le traiter ici. Maintenant, ici, vous aurez la possibilité de faire Demo Store ou Hello World. Demo Store est un projet d'hydrogène plus complet. Je ne recommande pas d'installer Demo Store pour apprendre l'hydrogène, car il contient beaucoup de code et de configuration. Si vous apprenez simplement à utiliser l'hydrogène, il vaut mieux rester simple. J'aime bien choisir Hello World. Alors, voici une question de préférence, si vous ne savez pas ce qu' est TypeScript ou si vous n'utilisez pas TypeScript, choisissez simplement JavaScript. Je vais appeler cette vitrine personnalisée. Il va maintenant télécharger le code depuis le dépôt d'hydrogène. Maintenant, après un certain temps, l'installation est terminée. Maintenant, je vais ouvrir une nouvelle fenêtre ou Visual Studio Code, et nous pouvons commencer à exécuter ce projet. Je vais ouvrir une nouvelle fenêtre, vais juste la redimensionner pour l'adapter à votre écran. Ensuite, je cliquerai sur « Ouvrir », je me rendrai sur notre bureau et j' ouvrirai ce dossier de vitrine personnalisé. Ici, si nous exécutons un terminal dans ce projet, nous pouvons le faire depuis le projet sur le code Visual Studio, ou nous pouvons le faire en utilisant notre autre application de terminal. C'est tout simplement plus facile dans notre éditeur de code car nous avons déjà accédé à ce dossier. Maintenant, tout ce que j'ai besoin de faire pour exécuter ceci, c'est npm run dev. Comme vous pouvez le voir ici, cela va dire que nous utilisons maintenant localhost 3 000. Je vais cliquer dessus en maintenant la touche Commande enfoncée. Comme vous pouvez le voir, il ne dit que Hello World. La raison pour laquelle il est écrit Hello World est que nous allons dans notre dossier src ici et que nous nous dirigeons vers notre route d'index. Juste ici, dans l'index des routes, vous verrez Hello World. N'oubliez pas que nous avons déjà parlé un peu dans la dernière vidéo de ce qui se passe dans le fichier app.server.jsx ici, donc je ne vais pas m'étendre là-dessus, mais c'est le cœur de votre application ici même. Nous avons notre fournisseur Shopify, qui fournit pratiquement toutes les fonctionnalités dont nous aurons besoin pour notre application hydrogène. Ensuite, bien sûr, nous lui extrayons les routes du routeur et des fichiers, pour notre routage. Cet autre composant que nous importons depuis React est actuellement une fonctionnalité expérimentale de React. Si nous regardons la page réservée au suspense sur le site Web de Reacts, vous pouvez voir qu' il y a beaucoup de rouge ici. Fondamentalement, il s'agit d'un composant en suspens , qui vous permet d' attendre le chargement du code et de spécifier un état de chargement de manière déclarative. Cela nous permet d' effectuer un chargement asynchrone au sein de ces deux balises. Nous pourrions à la place, et laissez-moi le faire tout de suite au lieu d'avoir un back complet nul, juste au chargement. Maintenant, ce que j'ai fait pour nous aider à démarrer et ne pas perdre de temps ici, c'est que j'ai créé tout le CSS pour vous, afin que nous n'écrivions pas CSS pendant que nous codons dans le cadre de ce projet. J'ai également mis à jour la route index.server.jsx, afin que nous puissions voir le schéma qui va se produire dans de nombreuses routes, où nous saisissons un tas de composants et de hooks, nous exportons un composant particulier, puis en dessous, nous écrivons notre requête. Ce que vous pouvez faire, c'est la deuxième option, c'est cloner le projet Storefront, que j'ai téléchargé sur mon GitHub, c'est un dépôt public. C'est à peu près la même chose que si vous deviez faire ce que nous avons fait ici, dans notre terminal , en créant un nouveau projet d'hydrogène et en choisissant Hello World, sauf que j'ai mis à jour ce fichier index.server.jsx, pour démontrer le schéma continu que nous allons voir dans de nombreuses routes. J'ai également ajouté un tas de CSS ici. Je vais également mettre à jour les branches au fur et à mesure, afin que vous puissiez également voir le point final. Je vous encourage, au lieu de le faire de cette façon, à cloner ce projet, à exécuter npm, installer, puis à poursuivre ensemble, en utilisant exactement le même projet. Ce que je vais faire, c'est laisser ça, et ensuite je vais le faire, finissons-en. Ensuite, dans mon iterm, je vais accéder à mon dossier de code, aller dans mon dossier Skillshare, où je place mes projets Skillshare, et lançons git clone ici. Je vais aller cloner git, en copiant cette URL. Tout ce que j'ai à faire est de cliquer sur le bouton de l'écran, puis de copier l'adresse HTTPS, et maintenant il va télécharger ce dépôt sur mon ordinateur. Passons à la vitrine de la classe hydrogène. Ensuite, à partir de là, nous lançons simplement npm install, pour installer tous nos modules de nœuds. C'est quelque chose qui se produit automatiquement lorsque nous exécutons la commande précédente de npm init Shopify hydrogen. Il exécute npm install pour vous. Lorsque nous téléchargeons un dépôt GitHub contenant un projet de nœud, il va ignorer le fichier des modules du nœud, car ce n'est pas du code spécifique à ce projet, et il stocke simplement les références du fichier package.json. Ensuite, lorsque vous exécutez npm install, il installera toutes les dépendances. Juste un peu de contexte supplémentaire pour ceux qui ne sont pas trop familiers avec les projets de nœuds. Voilà, nous avons installé nos dépendances. Maintenant, je vais ouvrir à nouveau Visual Studio Code. Ajoutez cela à notre taille d'écran pour vous les gars. Ensuite, je vais ouvrir ce dossier. Entrer dans le code, Skillshare, la vitrine des cours sur l'hydrogène. Supprimer cet onglet. Vous pouvez voir si nous allons dans le dossier SRC, dans index.css, nous avons tous les CSS que j'ai déjà écrits pour ce projet et ensuite si nous passons à notre route index.server.jsx, nous avons tout cela ici. Allons-y et gérons un nouveau terminal directement dans notre projet. Nous allons effacer tout ce code ennuyeux qui apparaît. C'est juste un truc pour moi. Ne t'inquiète pas pour ça. Exécutons ensuite notre commande pour exécuter le serveur, npm run dev, puis nous ouvrirons localhost:3000. Je vais me débarrasser de ces autres onglets. Maintenant que nous avons déjà reçu notre projet localement, vous pouvez voir ici que nous avons un titre et une description. Maintenant, d'où est-ce que ça vient ? Je voulais mettre à jour le fichier index.server.jsx pour vous montrer un modèle que nous allons utiliser sur pratiquement tous nos itinéraires. Pour mener à bien ce projet, nous allons créer une section à la fois. Nous allons faire la page du catalogue. nous allons faire la page de collecte. Nous allons créer la page du produit, puis activer la fonctionnalité du code. En gros, le modèle que nous allons utiliser, et si vous pouvez comprendre comment faire du développement dans Shopify, alors vous êtes sur la bonne voie pour coder tout type de projet. Le schéma est le suivant. Nous allons importer ce dont nous avons besoin depuis Shopify Hydrogen, nous allons exporter un composant, puis nous allons créer notre requête. Maintenant, cela ne fonctionne plus car nous utilisons la requête ici dans notre hook UseShopQuery. Mais quelle que soit la raison dans les exemples, Shopify met la définition de sa requête à la fin, donc je vais suivre cette séquence. Je vais juste minimiser cela pendant une seconde. Attends, ça l'a maximisé. Laissez-moi voir si je peux juste créer un peu plus d'espace ici pour que nous puissions, non, cela crée un nouvel onglet. Peut-être que je vais mettre ça de côté pendant un certain temps parce que je veux que vous regardiez ce qui se passe ici dans son intégralité. Supprimons cela pour pouvoir l'examiner de plus près. Ce qui se passe ici, c'est que si vous vous souvenez que dans le précédent fichier index.server.jsx, il y avait juste un composant simple contenant un div contenant Hello World. Maintenant, cela ne sera pas particulièrement utile car il ne s'agit pas du tout de contenu dynamique. Mais ce que nous allons faire dans ce cours, c'est intégrer du contenu dynamique provenant de votre boutique. Je ne vais pas recharger la page ici parce que je l'ai déjà éteinte, mais ici, vous pouvez voir que nous avons de l'hydrogène, puis nous avons une vitrine personnalisée alimentée à l'hydrogène, basée sur des réactifs de Shopify cadre pour construire sans tête. D'où est-ce que ça vient ? Parce que si nous regardons à l'intérieur, vous pouvez voir qu'il s' agit de deux valeurs dynamiques. En fait, nous extrayons ces informations de l'API Storefront. Les trois éléments que nous importons ici depuis Shopify Hydrogen sont le très important hook UseShopQuery, qui est celui que nous utilisons pour interroger l'API de la boutique. Nous introduisons ici cet objet appelé CacheLong. Il s'agit simplement d'une stratégie de mise en cache, donc rien de trop complexe ne se passe ici. Nous pouvons facilement remplacer cela en écrivant la stratégie de mise en cache. Cela nous permet simplement de gagner du temps en tirant parti de cette petite utilité de l'hydrogène. Ensuite, voici un utilitaire qui nous aide à mettre en évidence la syntaxe avec nos requêtes GraphQL, même si cela ne semble pas vraiment fonctionner dans ma configuration particulière, mais c'est très bien. Nous n'en avons pas vraiment besoin, c' est juste agréable à avoir. Ce que nous faisons ici, donc nous avons notre composant d'origine qui fonctionne sur la route de l'indice, et dans notre déclaration de retour ici, nous renvoyons JSX que nous avons vu plus tôt dans la théorie. J'ai déjà organisé un cours ici. Encore une fois, ce ne sera pas un cours de CSS, donc je vais simplement ajouter noms de classe qui correspondent au CSS que j'ai construit afin que nous puissions obtenir un style dès le départ. Tout ce que nous avons à faire est de faire en sorte que cela corresponde à notre fichier CSS ici. Mais encore une fois, vous pouvez totalement le modifier comme vous le souhaitez. Je ne voulais juste pas me laisser emporter par un CSS dans cette classe parce que ce n' est pas une classe CSS. en revenir à notre fichier index.server.jsx, nous passons par un objet pour utiliser ShopQuery avec notre stratégie d' allocation de requêtes GraphQL , puis nous disons preload : true. Il s'agit simplement d'une configuration par défaut de base que vous pouvez voir dans les exemples de Shopify. La principale chose à comprendre ici est que nous écrivons notre requête ici dans GraphQL , puis que nous la plaçons dans UseShopQuery. Maintenant, dans les exemples, vous verrez que la déstructuration d'objets se produit ici même. Il n'y a pas cette ligne, mais j'aime bien la ventiler, ou du moins pour ce cours parce que cela rend les choses un peu moins compliquées. Vous pouvez démonter un peu les marches. Ce que nous faisons, c'est que les données qui seront renvoyées par l'API vont entrer dans cet objet de données ici, puis nous allons déstructurer afin d'obtenir les données renvoyées. Maintenant, voici quelque chose que vous pouvez faire tout au long ce cours pour vous aider à déterminer ce qui revient de l'API. Vous pouvez accéder à console.log (données). Maintenant, où trouvons-nous ces informations ? Eh bien, nous sommes en fait sur un composant côté serveur. Comme vous pouvez le voir ici, je ne crois pas que nous ayons encore de composants côté client, mais comme vous pouvez le voir ici, tous nos composants contiennent jusqu'à présent .server. Si nous l'exécutons, le journal de la console apparaîtra dans notre terminal mais pas dans notre navigateur. Ouvrons à nouveau notre terminal, éliminons tout cela, puis lançons npm run dev. Maintenant, il ne nous reste plus qu' à y aller. Je vais rafraîchir la page et si nous revenons à notre console ici, je vais l'ouvrir et vous pourrez voir les données qui reviennent. En fait, il revient deux fois ici. Vous pouvez voir que nous obtenons cet objet de données et à l'intérieur, nous obtenons l'objet pointu, puis à l'intérieur, nous obtenons le nom et la description. Cela nous permettra d' inspecter ce qu'il y a à l'intérieur. Comme vous pouvez le constater, cette déstructuration correspond à ce ressort de cet objet de données. Nous pouvons supprimer cela et au lieu d'avoir Shop ici, nous pouvons traiter des données. données. boutique. Rafraîchissez la page et vous verrez que nous obtenons le même résultat. Mais évidemment, c'est un peu plus moche. Cela peut sembler un peu plus compliqué, mais cela nous aide à extraire ces objets pointus afin de ne pas avoir à mettre des données, des données devant elles. C'est essentiellement ce qui se passe là-bas. Je supprime ce journal de console et vous pouvez voir que nous retirons l'objet de la boutique du retour aux données, puis nous pouvons accéder au nom et à la description, car c'est ce que nous demandé dans notre requête GraphQL. C'est la base de tout ce que nous allons faire dans ce cours, nous allons importer des composants, connecter utilitaires à partir du framework hydrogène. Nous allons utiliser ces crochets pour accéder à certaines données. Nous allons utiliser ces données ici dans nos composants, et si cela est nécessaire, nous allons écrire des requêtes que nous allons intégrer dans le cas de requête UseShop afin d'obtenir notre données. Si vous comprenez ce schéma, nous sommes sur la bonne voie pour coder notre toute première vitrine d'hydrogène. 7. Création d'un composant de mise en page: Dans la dernière leçon, nous avons commencé notre projet, nous l'avons configuré et exécuté sur notre ordinateur. Vous pouvez le voir ici. L'une des choses que j'ai oublié de mentionner dans la dernière vidéo est que ces données proviennent de la boutique d'aperçu de Shopify. Si nous allons dans notre explorateur ici, et que nous descendons vers, je crois que c'est hydrogen.config.js, vous pouvez voir que le StoreDomain est hydrogen-preview.myshopify.com, et que le StoreFrontToken est ce nous en avons besoin pour nous connecter à cela. C'est pourquoi nous avons obtenu ces données dès le départ. Dans cette classe, nous n'avons pas réellement besoin de créer une boutique ou de mettre à jour notre boutique avec des données de démonstration, car nous pouvons simplement utiliser cette boutique de démonstration dans son intégralité. Cependant, lorsque nous le déploierons notre boutique Shopify, nous souhaiterons remplacer ces informations par notre propre domaine de boutique et notre propre jeton d' accès à la vitrine, d'accord ? J'ai juste pensé le mentionner avant de commencer. Certains d'entre vous se demandent peut-être où proviennent ces informations. Eh bien, il est préchargé pour utiliser le magasin de prévisualisation de l'hydrogène, ce qui est très intéressant dans cette classe. Par exemple, nous ne voulons pas avoir à créer toutes ces données de démonstration, nous pouvons simplement nous connecter aux données de démonstration existantes, ce qui est très pratique. fois cela fait, ce que je veux faire dans cette vidéo, c'est créer un composant de mise en page. Notre composant de mise en page va couvrir l' ensemble de notre site Web et fournir essentiellement un en-tête et le référencement nécessaires qui s' exécuteront sur tous les itinéraires de notre vitrine d'hydrogène. Ce que je vais faire, c'est aller dans le dossier SRC ici, créer un nouveau dossier pour mes composants, puis dans ce dossier de composants, je vais créer un composant layout.server.jsx, d'accord ? Maintenant, ce composant va remplir deux fonctions : il va afficher un en-tête et également afficher des informations de référencement afin que chaque page de notre site Web ait déjà un référencement intégré, d'accord ? Pour nous faciliter la vie, je vais juste tout copier ici et le mettre ici, d'accord ? Maintenant, ce que je vais faire, c'est le supprimer, et nous allons simplement mettre un div ici pour commencer afin de ne pas avoir d'erreur, puis nous ne l'appellerons pas home, mais layout. Ensuite, comme je vous l'ai montré dans la vidéo théorique, je vais utiliser la déstructuration d'objets pour récupérer tous les enfants transmis ce composant de mise en page, d'accord ? Même requête ici, nous allons utiliser le nom et la description l'en-tête ainsi que les informations de référencement. Ensuite, ce que je vais faire, c'est que notre fichier index.server.js est très simplifié, nous n'allons pas utiliser ces données sur notre page d'accueil, donc je peux supprimer tout cela, je peux le supprimer ici, et nous allons juste retourner un composant très basique, et ici, je vais juste mettre la page d'accueil, d'accord ? Débarrasse-toi de ça. Ensuite, ce que je vais faire est d'apporter ce composant de mise en page. Je peux importer, et je crois que nous exportons par défaut ici, donc nous n'avons pas besoin d'utiliser les crochets, nous pouvons simplement faire la mise en page à partir des composants, puis nous allons simplement créer un chemin vers le composant de mise en page. Ensuite, ce que je veux faire, c'est passer tout cela entre les balises de nos nouveaux composants de mise en page, d'accord ? Maintenant, comme vous le voyez ici, nous accédons aux enfants, ce que je veux faire ici, c'est placer ces enfants entre ces plongées, d'accord ? Voyons si cela fonctionne maintenant pour nous. Si je vais ici, vous pouvez voir n'y a pas d'erreur, d'accord ? Pour en revenir à ici, ce que nous voulons intégrer à cette page d'accueil de base est un en-tête et des informations de référencement. Commençons à travailler sur le contenu de notre relevé de retour ici, notre JSX. Tout d'abord, je veux renvoyer tout ce passe par ces balises de mise en page. Ce que je vais faire, c'est appeler cela principal parce que ce sera partie principale de notre page, puis je vais envelopper les enfants dans quelques tags à suspense parce que nous ne savons pas quoi des données de tri peuvent arriver. Rappelez-vous que cela va couvrir toutes les routes, pas seulement la route index.server.jsx , d'accord ? Maintenant, nous allons avoir cette erreur ici et c'est parce que nous n'avons pas encore importé de suspense. Je vais importer du suspense depuis React. Comme vous pouvez le voir, il vient de le remplir pour nous. Maintenant, nous faisons venir tous les enfants qu'ils soient chargés de manière asynchrone ou non, d'accord ? Maintenant, il ne nous reste plus qu' à intégrer notre référencement et notre en-tête. Maintenant, la façon dont nous faisons du référencement dans Shopify Hydrogen consiste simplement à importer un composant SEO à partir du framework hydrogène, puis ce que nous pouvons faire est d' intégrer ce composant SEO ici. Nous n'avons pas besoin d'une étiquette de fin, mais nous devons la mettre dans ce tableau de bord pour le fermer. Ensuite, à l'intérieur, nous allons mettre le type de référencement par défaut. Ensuite, dans le champ de données, nous saisirons un objet pour le titre et la description, et c'est là que nous utiliserons le nom et la description de la boutique qui sont revenus de l'API de la boutique. Nous pouvons le mettre ici, le nom et la description de la boutique. Maintenant, ce que vous remarquerez ici une fois que nous aurons fait cela, c'est que nous obtenons toutes ces lignes ondulées rouges, et c'est parce que nous ne pouvons pas renvoyer plusieurs éléments au niveau supérieur avec JSX, donc nous sommes simplement il va falloir créer un élément de haut niveau, et nous pouvons créer un de ces éléments vierges, comme celui-ci, un petit truc, mais maintenant nous n'avons plus ces lignes ondulées rouges. Si je reviens ici, relancez notre page d'accueil et j'ouvre mes outils de développement. J'ai juste appuyé sur la commande Option I pour le faire, sinon vous devrez accéder à votre menu et ouvrir DevTools. Je fais ça dans tous les cours, alors j'espère que vous me suivez ici. Ensuite, si je passe en revue nos éléments ici, vous pouvez voir que si nous allons dans notre balise d'en-tête ici, vous pouvez voir que notre titre et notre description se retrouvent dans ces méta-propriétés, quelles sont nos balises SEO, d'accord ? Nous avons maintenant notre référencement. Maintenant, nous voulons simplement créer un en-tête. Encore une fois, je vais tirer parti de certaines des classes que j'ai déjà écrites dans le CSS, ce n'est pas une classe CSS donc je vais récupérer ce conteneur header-inner en tant que classe. Ensuite, ici, je vais créer un lien afin que nous puissions utiliser le composant lien dans Shopify, et je vais le lier à la page d'accueil en y insérant simplement une barre oblique. Ce lien sera essentiellement le logo de l'en-tête, c'est un schéma courant avec les en-têtes qui, si vous cliquez sur le logo, vous serez redirigé vers la page d'accueil, donc c'est exactement ce que nous faisons ici. Alors c'est ici que je vais mettre le nom de la boutique, d'accord ? Nous devons maintenant importer du lien depuis notre framework hydrogène, car nous ne l'avons pas encore fait. Ensuite, si je clique sur « Enregistrer » lors de cette actualisation ici, vous pouvez voir que nous avons cet en-tête maintenant. Ensuite, si je clique dessus, nous redirigerons vers la page d'accueil sur laquelle nous sommes déjà, d'accord ? Cela sera utile plus tard. Maintenant, je vais mettre une liste non ordonnée avec la classe de navigation d'en-tête. Cela va évidemment héberger notre navigation d'en-tête. Ensuite, je vais utiliser un peu d'Emmet ici pour mettre trois liens. Il y aura juste des liens vides à ce stade, lien 1, lien 2, parce que nous n' avons pas d'autres pages, donc je vais juste mettre quelques espaces réservés en gros. Enfin, nous aurons un endroit ici pour accéder à la page du panier. Nous ne l'avons pas encore, donc ce que je vais faire, c'est simplement mettre un espace réservé ici. Le nom de classe sera header-cart-link, donc je vais juste le mettre dedans, d'accord ? Je vais cliquer sur « Enregistrer » là-dessus. Si nous allons ici, vous pouvez voir que nous avons notre en-tête et que tout est bien centré. En gros, ce que nous allons faire, les gars c'est qu' au fur et à mesure de la classe, nous allons mettre à jour notre en-tête au fur et à mesure. fur et à mesure que nous créons de nouvelles pages, Au fur et à mesure que nous créons de nouvelles pages, nous pouvons ajouter des liens vers ces pages ici, puis ajouter l'icône de notre panier ici avec le nombre d'articles dans notre panier également. Nous y reviendrons plus tard dans le cours. Mais maintenant que nous avons créé ce composant de mise en page, vous allez encapsuler tous vos itinéraires avec cette balise de composant de mise en page ici, et cela garantira que l'en-tête et informations de référencement apparaîtront sur tous les itinéraires. fois cela terminé, créons une page de catalogue pour visualiser tous nos produits sur notre vitrine d'hydrogène Shopify. 8. Construire une page de catalogue: Dans la dernière vidéo, nous avons créé ce composant de mise en page, nous allons utiliser comme disposition standard sur tous nos itinéraires. Nous avons mis à jour notre itinéraire d'index et nous avons maintenant notre page d'accueil super basique intégrée à notre mise en page, qui nous donne ensuite notre en-tête et notre référencement, comme nous l'avons vu dans la dernière vidéo. Dans cette vidéo, nous allons créer un nouvel itinéraire. Je vais l'appeler les itinéraires du catalogue, désolé, ce n'est pas le bon dossier, juste ici dans notre dossier d'itinéraires, catalog.server.jsx. donner un peu de contexte, la raison pour laquelle il s'agit d'un fichier .server.jsx est que nous allons interroger l'API StoreFront. C'est une bonne idée de le faire chaque fois que vous interrogez l'API Storefront dans chaque composant du routeur. Vous voulez le faire en tant que composant basé sur le serveur ou côté serveur, ne pas exposer ce que nous interrogeons, essentiellement une base de données, à l'utilisateur final. Commençons par exporter un composant fonctionnel ici. Ce sera notre page de catalogue, qui hébergera tous les produits qui existent sur notre boutique. Je vais ensuite mettre une instruction de retour ici, puis nous allons, bien sûr, commencer par le composant de mise en page. Nous allons devoir l'importer, sinon nous allons recevoir une erreur. Importez donc la mise en page de navigation vers le chemin, vers notre mise en page. Juste pour que vous sachiez, les gars, ce point signifie qu'il faut en retourner un dans le dossier SRC, et ensuite nous pouvons regarder dans les composants et trouver la mise en page. Si vous n'êtes pas familier avec cela ici, c'est ce que cela signifie. Nous allons dessiner contenu asynchrone ici, donc je vais mettre un suspense juste après ma mise en page. Nous allons également devoir importer du suspense depuis React. Ensuite, un peu de structure que j'ai déjà mise en place, j'ai créé du CSS pour les classes de page de catalogue et de conteneur. Nous allons simplement mettre notre page dans un joli contenant. Ensuite, nous allons créer une division avec la grille des classes de produits et qui hébergera tous nos petits éléments de la grille de produits. Si je clique sur « Enregistrer », nous n' extrayons aucune donnée pour le moment, mais si je passe ici à la page du catalogue, nous avons une page quasiment blanche. Si nous allons inspecter cela, vous verrez cependant que nous avons les plongées que nous avons configurées, la page du catalogue et la grille de produits. C'est fondamentalement inutile tant que nous n'avons pas apporté certaines données. Écrivons notre requête ci-dessous ici. Je vais créer une constante appelée requête, puis je vais utiliser le modèle de chaîne GQL et mettre notre requête ici. Comme je l'utilise, je vais devoir l' importer depuis Hydrogen, donc je vais le faire ici. Importez GQL depuis Shopify Hydrogen. En fait, nous allons le faire dans notre interface graphique. Ensuite, une fois que nous l'avons testé que nous savons qu'il fonctionne, nous pouvons l'intégrer à notre projet. Je pense que c'est un peu mieux. Je vais passer au graphique ici. Nous pouvons fermer nos DevTools. Je vais me débarrasser de cette requête standard ici, ouvrez-la. Ensuite, ce que je vais faire, c'est que nous pouvons d'abord nommer notre requête. C'est une bonne convention pour le faire, donc je vais simplement créer une requête nommée. Je vais l'appeler produits de requête. C'est alors que nous commençons réellement à demander certaines données. Je vais demander des produits. Il y aura une erreur à moins que je ne détermine combien je veux. Je vais demander les neuf premiers. Ensuite, je vais ouvrir une sélection ici et je vais récupérer tous les nœuds et les éléments que je veux y figurer. Commençons par le titre et le pseudonyme. Allons-y. Il indique que la requête n'existe pas sur le type de route de requête. C'est parce que je dois déplacer ça. Je ne devrais pas l'imbriquer dans un objet. Comme vous pouvez le voir, maintenant ça a l'air beaucoup plus joli, il y a une mise en évidence de la syntaxe, donc je pense que nous avons résolu ce problème. Découvrons-le simplement. Voilà, nous l'avons. Nous sommes en mesure de récupérer les neuf premiers produits de la boutique à laquelle nous accédons, qui n'est que la boutique Hydrogen Preview, et nous pouvons récupérer le titre et pseudo de tous ces produits produits. Commençons par cela. Reprenons cela dans notre projet. Essaie de bien l'indenter ici, comme ça. Ensuite, nous devons utiliser des requêtes pointues. Nous l'importons depuis Hydrogen, bien sûr. Ensuite, nous voulons entrer dans notre composant ici. Nous pouvons simplement copier la même chose, mais utiliser une requête précise. Maintenant, on le fait ici. À partir du fichier layout.server.jsx, placez-le ici. Au lieu d'une requête précise, ce sera juste une requête. On peut le nommer comme on veut. Nous pourrions nommer cette requête de catalogue, mais je vais juste l' appeler requête pour l'instant. Ensuite, ce que je vais faire, c' est simplement enregistrer sur la console les données qui reviennent afin savoir comment les structurer en D. Jetons un coup d'œil ici. Nous avons une petite erreur. CacheLong n'est pas défini, nous devons donc nous assurer de l'importer également depuis Shopify Hydrogen. CacheLong. Voyons si cela fonctionne maintenant. Revenons en arrière. Ouvrez localhost 3,000 dans un nouvel onglet et ouvrons nouveau nos outils de développement pour voir s'il y a erreurs côté client. Nous avons une erreur ici. Il indique que la connexion à l'API Storefront a échoué. Cela peut être dû à ma connexion Internet. J'ai oublié d'y mettre un C, donc c'est probablement le problème. Rafraîchissons-nous ici. Il ne nous reste plus qu'à suivre la route du catalogue, et il n'y a plus d'erreurs. Il y a une erreur ici. Mais avant de voir cette erreur, vous pouvez le voir ici, cela peut être un peu difficile à voir, mais nous sommes en train de déconnecter par la console l'objet de données qui revient de l'utilisation de requêtes pointues. Vous pouvez le voir ici, nous pouvons l'utiliser comme format pour la structuration en D, nous pouvons saisir des nœuds au sein des produits dans les données ici. que je vais faire. Permettez-moi de revenir sur ce point afin que nous puissions copier ce que nous avons ici. Tout comme nous l'avons fait ici lorsque nous avons structuré en D et que nous sommes arrivés à ces objets pointus, ce que nous pouvons faire ici , si je copie cela, nous allons à nouveau entrer dans les données, nous allons à nouveau entrer dans les données, mais au lieu de Sharp, nous allons entrer dans les produits. Ensuite, dans les produits , les nœuds seront retirés. Ensuite, si je lance des nœuds dans le journal de ma console, actualisons notre page de catalogue, actualisons notre page de catalogue, puis si je regarde ici, vous pouvez voir tous les nœuds revenir. Ce sont nos produits. Vous pouvez voir qu'il revient plusieurs fois, mais vous pouvez voir un tableau de nœuds. Nous allons récupérer le titre et le nom de chacun de ces produits. Alors, ce que nous pouvons faire, c'est l'utiliser ici. Je pourrais faire des nœuds. C'est ici qu'au lieu de faire une boucle, nous allons faire une carte. Je vais vous expliquer pourquoi nous faisons cela en une seconde. Nous allons exécuter la carte. Ensuite, nous allons passer en revue chaque produit via un JSX. Je vais juste mettre un div de base ici et ensuite ce que je peux faire est de lancer une expression JavaScript dans ce JSX. Je peux écrire le titre du produit ici. En fait, nous allons faire de cette liste une liste, donc je vais faire une liste non ordonnée. Ce ne sera pas le formulaire final, mais il sera simplement plus beau pour cet exemple de base. Ensuite, je vais appuyer sur « Enter » dessus. Il y a une erreur de syntaxe ici. Je pense que nous avons besoin d' une autre fourchette. Parfois, lorsqu'il y a une erreur de syntaxe , cela arrête complètement votre serveur Nous devons donc réexécuter le serveur, npm run dev. Maintenant, si nous allons sur la page de notre catalogue, vous verrez que nous avons une liste non ordonnée avec tous nos différents produits. Eh bien, au moins les neuf premiers, c'est ce que nous avons demandé ici. Maintenant, pour expliquer ce truc de carte ici, en gros, nous voulons renvoyer tous les nœuds, mais nous devons envelopper chacun de ces nœuds dans un JSX, où la raison pour laquelle nous utilisons map. Si nous avons juste créé des nœuds par eux-mêmes sans aucun JSX, voyons si cela renvoie quelque chose. Nous ne pouvons pas simplement renvoyer un tableau aléatoire. Nous devons réellement convertir ce tableau en JSX, c'est pourquoi nous utilisons map here, qui va essentiellement créer un tableau de JSX. Cette expression sera insérée entre ces balises de liste non ordonnées. J'espère que cela explique l'utilisation de la fonction map en JavaScript. Vous trouverez ci-dessous une liste de base de tous les titres de nos produits. Les neuf premiers, du moins, pour le moment. Mais ce que nous voulons faire, c'est développer ce point. Présentez le prix, présentez l'image dans une jolie petite grille comme vous pouvez vous y attendre sur n'importe quel site de commerce électronique. Ce que nous allons faire, c'est créer un composant pour cet élément de la grille de produits. Ce que je vais faire, c'est aller dans mon fichier de composants ici et créer, je vais l'appeler, ProductGridItem.Server.jsx. Ensuite, ce que je vais faire est l'export habituel, une fonction par défaut, et donc notre composant. Je vais le simplifier à l'intérieur du composant lui-même et l'appeler ProductCard. Alors évidemment, nous avons besoin d'une déclaration de retour pour le JSX. Soyons très simples pour le moment et déplaçons cet élément de liste dans notre composant ici. Maintenant, nous allons essayer d'accéder au produit, ce qui signifie que nous devons l' analyser comme un accessoire. Je vais extraire l'objet produit du support de ce composant, puis de ce côté, nous devons importer ce ProductGridItem ou ProductCard, comme nous l'avons appelé ici. Je vais d'abord le taper ici, ProductCard et cliquer sur « Enregistrer » dessus. Parfois, il l'importe automatiquement pour vous, mais il semble que nous allons devoir le faire nous-mêmes cette fois-ci. Je vais importer cette ProductCard. Comme vous pouvez le constater, le reste a été rempli pour nous, ce qui est très agréable. Essayons de réorganiser cela un peu plus joliment. Je mettrai les composants que je crée moi-même après mes importations à partir de React et d'hydrogène, comme ceci. Ensuite, nous allons créer un accessoire appelé produit et analyser les objets de ce produit. Maintenant, si nous allons ici et que nous actualisons, vous verrez que nous obtiendrons exactement le même résultat. Maintenant, nous allons simplement encapsuler ce code dans son propre composant. Bien sûr, nous devons l'exporter, puis l' importer ici, puis nous pouvons l'utiliser ici, en analysant chaque produit dans ses accessoires. Il y a beaucoup de choses que nous allons faire dans cette ProductCard. Supprimons cette URL car nous allons la créer sous forme de grille, et non sous forme de liste. Je vais donc me débarrasser de ce composant UL, mettre à jour l'imbrication, puis ici, ce que je vais faire est de créer un div avec la classe product-grid-item, qui encore une fois, est un CSS existant qui correspond à ce que j'ai créé ici. Ensuite, ce que je veux faire une fois à l'intérieur , c'est évidemment apporter le titre, mais je veux aussi apporter l'image et le prix. Maintenant, en ce qui concerne les images dans Shopify Hydrogen, Shopify dispose de cet incroyable composant appelé image. Si j'importe simplement le composant image depuis Shopify Hydrogen, puis si j'ajoute le champ image ici, en fait, refaisons cette requête dans une interface graphique ici. Ensuite, si je trouve le champ que je recherche, c'est la partie pratique de l'utilisation du graphique. J'ai la saisie automatique ici. Si j'oublie le nom du champ d'image sur ce nœud en particulier, il va le compléter automatiquement pour moi. Ensuite, si j'essaie de l'exécuter, vous verrez que c'est une erreur parce que je dois avoir des sélections ici. Cela va renvoyer une connexion d' image, je crois. Si je le survole, il renverra une image. Ce que nous pouvons faire, c'est consulter la documentation pour voir quels champs se trouvent sur l'objet image. Je suis ici à la référence de l'API Storefront. Allons dans la boutique en ligne, entrons dans les objets. Maintenant, je crois que c'est dans des objets courants. Voici le dernier endroit où tu regardes. Ici, vous pouvez voir l'objet de l'image, puis ici vous pouvez voir, pour obtenir l'URL de l'image, nous pouvons y accéder comme ça. Nous pouvons obtenir l'AltText, nous pouvons obtenir la largeur. Ce que nous pourrions faire, c'est entrer ici, récupérer l'URL, puis créer notre propre image HTML de base et ajouter ce SRC. Mais dans ce cas, nous ne bénéficierions pas d'images réactives. Ce que nous pouvons faire à la place, c'est utiliser le composant image, si je passe ici, à partir du framework Shopify Hydrogen. Je vais vous montrer comment cela fonctionne en une seconde. Mais d'abord, nous devons résoudre cette question ici. Je vais aussi récupérer l'AltText. Je vais saisir la hauteur et la largeur. Lancez-le, assurez-vous qu'il n'y a pas d'erreur. Nous avons l'identifiant du titre et les données relatives à l'image en vedette. Je vais le récupérer et le coller ici dans notre requête. On y va. La nidification est un peu décalée. Appuyez dessus comme ça. Alors, ce que je vais faire ici, c'est ouvrir un composant d'image ici. Cela fonctionne, c'est que nous pouvons placer dans Alt, accéder aux objets d'image présentés sur le produit , puis récupérer l'AltText. Mais ensuite, pour le reste des données d'image, nous pouvons simplement les analyser via cet accessoire de données, l'objet image lui-même. J'ai juste besoin de fermer ça. Ensuite, si je clique sur « Enregistrer » et que nous actualisons ici dans notre application hydrogène, vous pouvez voir toutes nos images apparaître. Si je clique avec le bouton droit de la souris et que je les inspecte, vous pouvez voir que le chargement différé est intégré et que nous avons toutes ces différentes tailles réactives fonction de la largeur de l'écran. Dans Shopify Liquid, vous pouvez effectuer cette optimisation en créant un extrait de code et en utilisant le filtre d'URL de l'image pour créer différentes URL d'images à diffuser en fonction des dimensions de l'image dans votre Shopify boutique. Mais ici, il ne nous reste plus qu'à utiliser le composant image dans Shopify. Pour vous montrer l' alternative, par exemple, si nous faisions simplement une balise d'image avec SRC et que nous pouvions simplement analyser Product.FeaturedImage.url, l' enregistrer, l'actualiser ici, vous obtenez le même résultat, mais vous voyez comment il se charge un peu plus lentement. Ensuite, si nous entrons ici, nous verrons que nous n' avons qu'un seul SRC. Pour les images réactives, nous n'avons pas à parcourir et écrire tout le code nous-mêmes, nous devons simplement utiliser ce composant d'image pratique fourni par Shopify Hydrogen. Comme vous pouvez le voir, il est déjà rechargé et vous pouvez constater maintenant que le chargement différé est activé et que toutes ces différentes URL automatiquement générées pour nous. C'est la puissance de l'utilisation de certains de ces composants qui proviennent de l'hydrogène. Certains d'entre eux sont inutiles et d'autres nous simplifient la vie. Nous verrons cela lorsque nous proposerons options de produits et que nous couperons également. Peut-être pourrions-nous le faire sans ces composants, mais ils nous simplifient la vie et j'espère que vous commencez à le constater maintenant. Ce que je vais faire, c'est l'envelopper dans un conteneur d'images. Ce n'est qu'un peu de CSS pour qu'il apparaisse exactement comme nous le voulons. Il n'y a plus de place ici, donc je vais ouvrir ça. Ensuite, sous le conteneur d'images, je vais mettre un div ici avec la classe product-grid-item-title. Ensuite, je peux saisir le fichier product.title, puis appuyer sur « Enregistrer » dessus, rafraîchir ici et vous verrez que nous avons le titre du produit et l'image. Mais généralement, sur une grille de produits, vous souhaitez également voir le prix, alors allons-y ensuite. Nous allons avoir besoin de quelques données supplémentaires pour cela, car actuellement, nous ne disposons que du pseudonyme et de l'image en vedette. Revenons au graphisme. Ensuite, sous l'image de fond, si nous saisissons quelque chose comme le prix, qui donnera la fourchette de prix et le compareAtPriceRange. Ce qui est un peu plus précis, c'est de plonger dans le produit et de saisir sa variante. Vous verrez que nous pouvons accéder à gamme de prix et à CompareAtPriceRange. Mais si nous voulons obtenir un prix précis, nous pouvons examiner les variantes. Ce que je vais faire, c'est chercher la toute première variante. Bien entendu, il s'agit d'une sélection contenant des nœuds Nous allons donc devoir ouvrir des nœuds. Ensuite, dans la limite de la variance, je vais saisir, voyons ce qui se passera pour le prix. Nous avons PriceV2, et c'est en fait une sélection en soi, donc nous devons entrer et saisir le montant et le code de la devise. Ensuite, si nous voulons également avoir le CompareAtPrice, nous devrons faire exactement la même chose pour ce code de devise. Si je clique sur « Enregistrer » dessus, cela ne sauvegardera pas mais fonctionnera dessus. Nous regardons en bas. Vous pouvez voir que pour ce snowboard à hydrogène, le prix est de 600$, mais il a en fait un CompareAtPrice de près de 650$. Évidemment, cela fonctionne, je vais le copier. Collez-le à nouveau dans notre projet. Malheureusement, je pense que nous allons perdre notre nid. Je ne suis pas vraiment d'accord avec la nidification. Cliquez sur « Enregistrer » dessus , puis ici, ce que je peux faire est de créer un nouveau div ici. Je vais utiliser la classe des prix de la grille de produits et ici, je peux faire Product.PricEv2.Amount pour le rendre très simple au départ. Qu'est-ce que j'ai fait de mal ici ? Cela ne correspond pas à ce que j'ai ici produits. J'ai oublié d'entrer dans la variante. Nous allons examiner la variance et les nœuds, saisir le premier nœud. C'est une faute d'orthographe, variants.nodes , prix/montant. Vous pouvez voir que le prix arrive, mais qu'il n'est pas formaté. Qu'allons-nous faire ? Eh bien, dans Shopify Liquid, il y a un filtre pour cela, qui formate bien le prix pour nous. Nous avons un élément similaire dans Shopify Hydrogen, appelé la composante monétaire. Je vais importer la composante monétaire ici , puis nous allons la supprimer et ouvrir une composante monétaire ici. Ensuite, comme nous l'avons fait pour l'image, je peux mettre dans la préparation des données le même prix, mais je ne veux pas entrer spécifiquement dans le montant. Ce composant va déterminer quel est le montant et la devise et le formater correctement en fonction de ces deux. J'ai fait une erreur ici. J'ai deux crochets bouclés, et cela a arrêté mon serveur. Exécutons à nouveau le serveur, lançons npm run dev, puis réexécutons notre page de catalogue ici. Vous pouvez maintenant voir que nous avons le symbole de la devise et que ces prix sont formatés en tant que devise. Nous avons une monnaie joliment formatée ici. Maintenant, par souci d'exhaustivité , intégrons également la comparaison du prix. Ce que je peux faire ici, c'est de le faire pour commencer, et ensuite nous allons nettoyer tout ça. Je vais entrer ici et je vais ce que c'était, comparer. Revenons-en ici. Comparez au prix V2, mettez-le ici et fermez-le comme celui-ci. Nous allons maintenant obtenir les deux prix côte à côte. Peut-être pas. Nous avons une erreur ici, qui est intéressante, qui semble correspondre à ce que nous renvoyons ici. Utilisons simplement un journal de console pour déboguer ici. Je vais accéder à l'objet des produits du journal de la console ici. Nous pouvons voir ce qui est retourné. Vous avez le titre, gérez l'image en vedette. Passons aux variantes, aux nœuds et à la réexécution. Je fais défiler la page vers le haut si on y va. Je vois. Parfois, comparer le prix V2 est nul et c'est pourquoi il y a une erreur. Parfois, il y a une comparaison au prix V2, mais parfois c'est nul. Ce que la composante monétaire essaie de faire, c'est d'accéder à un objet qui existe maintenant et de l'attribuer à celui-ci. Nous devons nous assurer que nous vérifions si c'est réellement nul. Nous pouvons le faire ici, c'est que s'il renvoie une valeur véridique, alors nous pouvons mettre cette déclaration de retour ici et ensuite exécuter cette comparaison de prix. Ici, vous pouvez voir sur ceux-ci où il n'y a pas de comparaison de prix, il suffit d'afficher un prix. Lorsqu'il y a une comparaison de prix , elle indique les deux prix. Maintenant, c'est désordonné, évidemment. Regarde ça, ce n' est pas très beau. Ce que nous allons faire, c'est nettoyer ça ici et y mettre quelque chose d'un peu plus beau. Je vais me débarrasser de ce journal de console. Ce que je vais faire, c'est utiliser la déstructuration des objets pour supprimer ces attributs de ce nœud ici même. Ce que je vais faire, c'est prendre le prix V2, et je vais le présenter comme un simple prix. Ensuite, je vais prendre la comparaison au prix et je vais juste faire comme une comparaison au prix, pas une comparaison au prix V2. Nous n'avons pas vraiment besoin de cette V2. Je pense que c'est juste la gestion des versions de l'API. Ensuite, nous allons récupérer cela de ce que nous avons ici, product.variants.nodes, puis récupérer le premier de ce tableau. Mais nous avons besoin d'une solution de repli au cas où l'une d'entre elles serait nulle. Nous allons mettre un point d' interrogation ici. S'il est nul ou indéfini, nous allons simplement passer par un objet vide. Ensuite, au lieu de vérifier si c'est ce que nous allons faire maintenant, qui est un peu plus sophistiqué et un peu plus agréable, nous allons simplement vérifier si le montant de la comparaison au prix est supérieur au prix de celui-ci. Je dirais que c'est à prix réduit. Ensuite, nous allons saisir un booléen ici, comparer au point d' interrogation du prix s'il renvoie nul, montant est supérieur interrogation du prix au cas où il renvoie un montant nul. Alors, donc ici, je vais les changer ici aussi, c'est à prix réduit. S'il est à prix réduit, il le retournera. Au lieu d'avoir le prix représenté très longtemps ici, nous pouvons simplement utiliser le prix que nous avons obtenu ici, prix, puis le comparer au prix. Si je clique sur « Enregistrer » dessus et que je rafraîchissais ici, vous verrez que nous obtiendrons le même résultat, mais c'est un peu plus propre et dans notre JSX, c'est beaucoup plus agréable à lire. Je vais également donner à celui-ci un nom de classe de produits à comparer au prix. Ensuite, si je clique sur « Enregistrer » et que je recharge, vous pouvez maintenant voir que la comparaison au prix est clairement le prix de démarcation visuellement parce nous avons un peu de CSS qui s'applique maintenant. Une autre chose que je vais vous montrer avant terminer est que, comme vous pouvez le constater, certains d'entre eux ont ,00, ce que vous ne voudrez peut-être pas afficher sur le front end. Évidemment, s'il y a une valeur entre ces décimales, vous ne voudrez probablement pas arrondir. Mais quand il y a quelque chose comme 600, nous n'avons pas vraiment besoin de passer à deux décimales. Ce que nous pouvons utiliser est similaire dans Shopify Liquid avec le formatage des prix, nous pouvons y mettre quelque chose comme sans zéros de fin. Ensuite, si je clique sur « Enregistrer » dessus et que je reviens en arrière, vous pouvez voir que tous les produits qui avaient .00 seront supprimés. C'est une autre petite option de formatage intéressante. Je vais le laisser là pour la page du catalogue. Ce que nous ferons à l'avenir, c'est de les rendre connectables. Mais comme nous n'avons pas encore créé d'itinéraire produit, se traduira simplement par un renvoi à une page 404. Nous allons le garder comme ça pour l'instant. Dans la vidéo suivante, nous allons apprendre à envoyer via un identifiant de collection dans l'URL et interroger l'API de notre boutique pour renvoyer uniquement les produits de cette collection. Essentiellement, nous allons créer une page de collection dans la prochaine vidéo. 9. Construire une page de collection: Dans la dernière vidéo, nous avons donc créé un itinéraire de catalogue, qui montre tous les produits de notre boutique. Il ne s'agit pas de filtrer en fonction d'une collection particulière. En fait, correction, cela ne montre les neuf premiers parce que nous n'avons interrogé que les neuf premiers. Mais si nous étendons ce nombre à 100 ou quoi que ce soit d'autre, nous obtiendrons les 100 premiers ou jusqu'à autant que ce qui se trouve dans notre magasin au départ. Si nous en mettons 100 ici et que je clique sur « Enregistrer » et que je le relance, nous n'en obtiendrons pas 100 parce qu' il n'y en a pas 100 au total, mais nous obtiendrons jusqu'à 100. Je crois donc qu'il y a 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 planches à neige dans cet aperçu de l'hydrogène. Je vais le ramener à neuf. Notez que notre site fonctionne plus rapidement, mais nous pouvons toujours le mettre à jour selon nos besoins. Dans cette vidéo, nous allons créer quelque chose de très similaire Nous allons donc créer une autre grille de produits, mais avec cette route en particulier, ce sera un itinéraire dynamique. Nous serons donc en mesure d'accéder aux collections/à quelque chose comme les chaussures, je l'ai pré-rempli ici, puis nous pourrons examiner une grille de produits qui ne filtre que cette collection. Ce que nous allons faire pour cela, c'est retourner dans notre éditeur de code ici et nous allons examiner les itinéraires ici, et comme il s'agit d'un itinéraire imbriqué, il y aura donc des collections et ensuite il va notre éditeur de code ici et nous allons examiner les itinéraires ici, et comme il s'agit d'un itinéraire imbriqué, il y aura donc des collections et ensuite il va avoir le nom de la collection ou le pseudonyme de la collection. Nous devons créer un dossier dans notre dossier routes ici, l' appeler collections, puis ici nous allons faire quelque chose d' un peu intéressant. Nous allons mettre une route dynamique, nous allons mettre le handle en tant que variable, puis taper server.jsx. Maintenant, ce que je vais faire ici, c'est que je vais extraire toutes ces informations, en gros, copier et coller tout ce qui se trouve ici , ici même, et puis, bien sûr, je vais avoir besoin de mettre à jour Cela du catalogue à la collection, et c'est tout ce que je vais faire pour l'instant. Voyons voir, nous avons un problème. Nous devons mettre à jour les bouffées qui mènent à nos composants car nous sommes maintenant imbriqués, comme vous pouvez le voir ici, dans comme vous pouvez le voir ici, un autre dossier au sein de notre itinéraire. Nous allons donc devoir ajouter des points, des tirets, un autre ensemble de ces deux, les deux pour que nous puissions naviguer au bon endroit ou exécuter npm, lancez dev à nouveau. Alors, si on se rafraîchit ici, tout devrait bien se passer. C'était une chose que nous devions également mettre à jour avant de pouvoir fonctionner. La seule différence entre cet itinéraire l' itinéraire de notre catalogue est que nous allons passer par la poignée et que nous allons donc évidemment avoir besoin d'utiliser ces informations. Nous allons devoir transmettre cela à notre requête ci-dessous, puis la requête ne renverra que les produits provenant de cette collection. Mais essentiellement, ici, dans notre JSX, il n'y a pratiquement rien à mettre à jour. Ce que nous allons faire pour utiliser les paramètres de l'itinéraire, c'est saisir un nouveau hook depuis Shopify Hydrogen, peut-être le mettre ici. UserOuteParams, est le nom du composant puis nous pouvons utiliser ce crochet pour extraire la poignée des paramètres de route, donc je vais utiliser la structuration ici, saisir la poignée, qui viendra de UserouteParams. Maintenant, pour transmettre cette variable, ce handle à notre requête à l'aide du hook UseShopQuery, je vais devoir ajouter mes variables ici. Je vais ouvrir un objet et ensuite je vais juste passer à travers la poignée. Maintenant, si je fais défiler la page vers le bas, je peux utiliser ce pseudo dans notre requête. Comment faisons-nous cela ? Tout d'abord, je vais renommer cette requête quelque chose de plus approprié. Je vais l'appeler CollectionDetails puis dans notre titre, nous voulons spécifier que nous allons passer par une chaîne comme handle. Ensuite, au lieu de chercher des produits, je vais utiliser la commande X pour y accéder, donc en le supprimant de notre requête pour commencer , puis je vais le coller à nouveau plus tard. Maintenant, ce que nous devons faire, c'est rechercher une collection, et la façon dont nous allons le faire est par son handle, comme ceci. Ensuite, à l'intérieur, nous allons récupérer quelques détails sur cette collection, son nom , son titre, sa description. Reprenons également quelques informations sur le référencement. C'est une sélection, donc dans cette sélection, nous devons saisir la description et le titre. Nous pourrions prendre l'image de la collection. Nous n'allons pas l'utiliser dans cette classe en particulier, n'est qu'un exemple. Mais nous pouvons extraire toutes les informations dont nous avons besoin de cet objet de collection, puis je vais coller code que nous avions auparavant. Nous pouvons ensuite nous occuper de cette collection en particulier. Trouvez les neuf premiers produits , puis utilisez les mêmes informations. Essayons juste de corriger un peu l'indentation ici , c'était futile. Si je clique sur « Enregistrer » dessus, partons maintenant. En fait, nous avons besoin de savoir ce qu'est une collection dans notre boutique . Pour ce faire, je vais juste aller ici et interroger notre boutique ici pour les neuf premières collections, puis je vais taper dans les nœuds pour accéder à chaque nœud, puis je vais chercher le handle. C'est juste pour voir quelles poignées sont disponibles sur le magasin à l'heure actuelle. Voici donc toutes les différentes collections via leurs poignées. Les neuf premiers au moins, mais il n'y en a que 1, 2, 3, 4, 5, 6. Voici toutes les collections de ce magasin en particulier. Je peux maintenant aller ici, accéder aux collections, puis suivre cette route dynamique en passant par la poignée de la collection, je vais appuyer sur Entrée dessus accéder aux collections, puis suivre cette route dynamique en passant par la poignée de la collection, . Nous avons une erreur, alors qu'avons-nous ? chaîne n'est pas un type d'entrée défini, donc revenons à notre requête ici et je l'ai mal saisie. Je dois le mettre sous forme de chaîne avec un point d'exclamation. C'est juste une erreur de syntaxe de ma part et si je rafraîchis ici, qu'avons-nous maintenant ? Nœuds de lecture non définis. Cela est lié à la configuration que j'ai trouvée ici, car maintenant nos nœuds sont imbriqués dans des produits, dans des collections, et pas seulement dans des produits. Commençons simplement cela une seconde et je vais enregistrer sur la console les données renvoyées par l'API. Ainsi, si je fais défiler la page vers le haut, vous verrez que nous avons la collecte en premier. Nous allons donc avoir besoin de le mettre à jour. Coupons ceci comme nous l'avons fait auparavant avec la requête, mettons-le dans la collection puis collez-le ensuite. Nous devons mettre une autre attelle bouclée, puis des nœuds de produits. Vous pouvez maintenant voir que cela fonctionne. Cela ressemble évidemment à la page du catalogue, donc si nous voulons confirmer qu'il s'agit bien de cette collection, je peux mettre un h1 ici et nous pouvons saisir un point de collecte de données. À quoi avons-nous accédé ? Titre ? J'ai accidentellement ouvert à nouveau deux crochets frisés ici. Nous en avons juste besoin d'un de chaque côté, et si je clique sur « Enregistrer » dessus, actualisez ici, j'ai une autre erreur ici. Je ne l'ai pas configuré correctement, donc collecte de données, je pense que nous devons y aller deux fois ici, data.data.collection.title, et ici vous pouvez voir Freestyle Collection. Alors, si je vais voir ce qui était l' un des autres ? arrière-pays, donc si je vais dans l'arrière-pays, nous pouvons maintenant constater que la liste des produits présentés est différente, cette fois, définitivement par rapport à la collection freestyle. Vous pouvez maintenant voir que nous pouvons transmettre le nom de la collection et ne renvoyer que cette collection. Maintenant c'est moche, alors nettoyons ça un peu. Faisons la collecte de données, collecte à partir de données, et ensuite nous devrions être en mesure de simplement extraire le titre de la collection comme ça, et nous pouvons probablement rendre cela encore plus agréable en le mettant ici . Puis cette structuration issue de la collection, oups. Maintenant, il ne nous reste plus qu'à fouetter. Voyons voir si cela fonctionne. C'est donc un peu plus agréable aussi. Je suis passé par là un peu vite, mais en gros, je suis en train de structurer suffisamment à partir de l'objet de données pour obtenir la collection et ensuite, j' ai cet objet de collection maintenant. Je suis en train de retirer les nœuds de produit à partir de là. Cela se traduit par une déstructuration moins imbriquée et nous permet de récupérer des éléments tels que collection.title et des nœuds de ces objets ici même. Comme nous avons déjà créé notre article de la grille de produits et que nous l'avons recyclé, il n'y a pas beaucoup de travail à faire ici. Ce que nous avons fait dans cette vidéo par rapport à la précédente, c'est de passer par ce pseudo , donc évidemment, celui-ci n'avait aucun identifiant et nous avons simplement accédé aux produits sur notre racine de requête. Nous accédons maintenant aux produits de notre collection et, bien entendu, nous devons spécifier la collection que nous recherchons. Nous le faisons via la poignée et nous déterminons la poignée via les paramètres de route, ce qui signifie simplement que nous avons un niveau d' imbrication plus profond parce que nous regardons à l'intérieur d'une collection, donc cela nous a obligés à mettre à jour déstructuration de nos objets là-haut. Mais sinon, nous avons maintenant mis place des pages de collection sur notre boutique. Donc, dans la vidéo suivante, nous allons créer notre page produit maintenant, afin que nous puissions réellement, lorsque nous cliquons sur ces articles, accéder à chacun de ces produits. 10. Construire une page de produit: Dans les deux dernières vidéos, nous avons configuré notre grille de produits sur cette page de catalogue, qui renvoie tous les produits de notre boutique. Ensuite, notre itinéraire de collecte individuel, qui est un itinéraire dynamique que nous pouvons parcourir à travers le manche de n'importe quelle collection que nous voulons charger. Je m'excuse pour la lenteur de la connexion. Mais tu y vas. Voici notre collection freestyle. Mais comme vous pouvez le constater lorsque nous cliquons sur l'une d'entre elles, elles ne renvoient à aucune page de produit individuelle, car nous ne l'avons pas encore créée. C'est ce que nous allons faire dans cette vidéo. Dans la vidéo qui suit, nous allons créer la fonctionnalité du panier. Dans les deux vidéos suivantes, nous verrons peut-être la complexité augmente légèrement car les deux principaux éléments de l'interactivité, pourrait-on dire, au sein d'un site Web Shopify sont souvent la sélection de variantes et fonctionnalité du panier. Il s'agit des zones de notre site Shopify que nous souhaitons généralement mettre à jour instantanément en gérant l'état sur le front-end. Heureusement pour nous, nous utilisons React et nous utilisons Shopify Hydrogen. Toutes ces fonctionnalités asynchrones apparaîtront naturellement sur cette plate-forme. C'est l'un des avantages de l' utilisation de React et d'Hydrogen. Mais cela signifiera que nous allons utiliser quelques fournisseurs supplémentaires et quelques hooks supplémentaires afin de faire fonctionner cette fonctionnalité. Mais comme vous le verrez, après avoir parcouru tout cela, vous commencerez à constater qu'il y a tellement de composants et crochets dans l'hydrogène qui nous permettent de le faire. Ce sera assez simple une fois que vous aurez compris. Avant de créer cette page produit, je vais mettre à jour nos liens ici, car nous avons maintenant une page de catalogue et une page de collection. Je vais passer à notre composant de mise en page, puis dans le premier lien, je vais le lier à notre catalogue. Le deuxième lien, je vais le relier aux collections Freestyle. Autant faire celui-ci, Freestyle. Si je clique sur « Enregistrer » dessus et que tout sera actualisé ici, vous verrez maintenant que nous pouvons accéder à notre catalogue via notre barre de navigation d'en-tête, et que nous pouvons accéder directement à cette collection Freestyle via notre navigation d'en-tête également. Créons cette route pour les produits. Comme nous l'avons fait pour les collections, nous allons créer un itinéraire dynamique, mais nous devons l'intégrer dans notre dossier de produits. Ensuite, ici, je vais faire le même titre qu'avant, handle.server.jsx. Ensuite, comme d'habitude, exportons un composant tout de suite. Je vais juste appeler ce produit , puis un relevé de retour ici pour notre jsx. Ça ne me plaît pas de faire ça. Tu dois toujours mettre du jsx entre les deux, sinon ça flippe. Mettons juste un peu de jsx ici. De cette façon, cela n' empêchera pas notre serveur d'exécuter npm run dev. Parce qu'avant de commencer à développer ce composant, je veux commencer à tester certaines requêtes GraphQL ici. Au lieu de produits de requête, créons un produit de requête. Ensuite, afin de cibler un produit spécifique, nous allons faire la même chose qu' auparavant avec les collections. Je vais préciser que nous allons passer un handle et que le type sera une chaîne. Mettons fin à tout ça ici. Ensuite, ce que je vais faire, c'est saisir un produit par le biais de sa poignée. Le handle sera transmis dans les variables de notre hook UseShopQuery, comme nous l'avons fait pour la collection. Maintenant, une fois que nous avons déterminé le produit, je vais renvoyer le titre du produit. De quoi d'autre avons-nous besoin ? Description, HTML, puis nous voudrons renvoyer l'image du produit. Nous pouvons passer par les médias. Les médias peuvent être des modèles 3D , des images, des vidéos. Mais pour que ce cours reste très simple, nous allons simplement gérer les images. Je vais ouvrir les médias ici. De plus, pour simplifier les choses, nous allons simplement afficher une image du produit. Je ne vais sélectionner que la première partie du média. Dans cette boutique Shopify en particulier, nous pouvons attester que le premier média sera une image du produit. Sinon, nous voudrions peut-être rechercher plusieurs médias et nous assurer ensuite trouver une image à partir de cette liste de médias. Mais je pense qu'il est assez prudent de supposer que le premier média sera une image. En poursuivant cette hypothèse, je vais ouvrir des nœuds ici. Ensuite, pour les champs multimédia, encore une fois, cela suppose qu'il s'agit d'une image. Si vous vouliez que cela fonctionne avec tous les types de médias, vous devez faire ce que je vous ai montré dans l'une des leçons théoriques, savoir ajouter ces trois points et dire sur MediaImage. En fait, faisons-le toujours. S'il s'agit d'un MediaImage, il renverra cette sélection, identifiant, puis l'image elle-même avec l'URL, la largeur et la hauteur. Encore une fois, nous ne traiterons que des images médiatiques dans cette classe particulière. Mais si nous voulions avoir une sélection différente selon qu'il s'agit d'une vidéo, nous pouvons simplement aller sur Vidéo, puis mettre notre sélection de vidéos. Vous le faites sur les sources. C'est exactement comme l' exemple que nous avons vu plus tôt dans la documentation Shopify. Mais pour que ce cours soit simple, je suppose que nous ne regardons que des images, ce à quoi je crois en cette vitrine d'hydrogène en particulier. Je ne sais pas s'il existe des modèles 3D ou des vidéos de toute façon. C'est une supposition assez sûre à faire ici. Alors exécutons-le pour commencer. En fait, nous devons passer par une variable ici, donc cela ne fonctionnera probablement pas. Nous n'avons pas de variable. Peut-être que je veux jouer avec cela ici parce que nous n'avons pas vraiment la maîtrise du travail, mais saisissons-le et mettons-le dans une requête ici. S'il tombe en panne, il se cassera dans notre application et nous allons simplement le tester ici. Nous allons faire gql pour héberger notre requête. Ensuite, nous allons le mettre là. Ensuite, bien sûr, nous devons importer, utiliser ShopQuery, tous les crochets importants de Hydrogen. Nous avons également besoin de gql. Ensuite, si nous voulons utiliser CacheLong, prenez également CacheLong. Ensuite, ici, nous allons simplement faire une const data. Nous ne le déstructurerons pas tout de suite. Ensuite, nous utiliserons ShopQuery. Nous ferons la requête en tant que requête constante que nous avons répertoriée ci-dessous. Le cache sera CacheLong, comme avant. Ensuite, nous allons transmettre les variables de handle. Comme nous allons passer dans la poignée, nous allons devoir à nouveau utiliser les paramètres de route. Je vais chercher UseRouteParams. Je suis en train de le parcourir assez rapidement car c'est le même modèle que nous avons utilisé pour la collection également. Nous allons simplement extraire le handle const du hook UserOuteParams. Ensuite, si nous ne spécifions pas handle ici, nous pouvons écrire la forme abrégée de just handle. De toute évidence, nous avons eu une petite erreur qui a provoqué l'arrêt de notre serveur. Mais enregistrons simplement ces données sur la console et voyons si nous avons un problème avec notre code pour le moment. Ça a l'air bien. Maintenant, nous allons encore avoir besoin de passer par une poignée, alors intégrons-la dans notre ProductsGridItem. Je vais entrer un autre composant ici à partir de l'hydrogène, le composant lien, et je vais le transformer d'un div en un composant de lien Shopify. Ensuite, ici, je vais faire pour récupérer le produit et accéder à son URL. En fait, avant de le faire, je vais devoir intégrer les produits précédents à cette étape. Faisons des économies là-dessus. Si nous revenons ici, et passons à cette collection freestyle ou à toute page de collection ou catalogue sur laquelle ProductGridItem est utilisé. Maintenant, nos images sont actuellement liées. Si nous inspectons l'un d'entre eux, vous pouvez voir qu'il est en train de devenir indéfini. Cela ne marchera pas [RIRES] sans définition. Nous devons déterminer quel est le problème. URL du produit. Peut-être ne l'avons-nous pas demandé. Passons au catalogue. Nous n'allons pas utiliser l'URL, nous allons utiliser le handle. C'est ainsi que nous allons construire l'URL. Rafraîchissez-vous ici , puis jetez un œil ici. Vous pouvez voir que le snowboard est le manche de celui-ci. La poignée de celui-ci est mail-it-in-freestyle-snowboard ». Des noms intéressants ici. Si nous allons ici, nous pouvons emprunter cette route en particulier. Actuellement, il n'y a rien à voir sur le front-end. Revenons à notre code ici, et bien sûr, nous enregistrons les données sur la console. Vous pouvez voir ici, et je vais développer cela pour que vous y voyiez plus facilement, nous voyons ce qui est renvoyé par l'API Storefront. Il semble que notre requête ait fonctionné, que nous ayons transmis le handle et que nous avons récupéré le titre et le code HTML de la description, ainsi qu'un objet contenant le média. Nous devrons approfondir cet objet si nous voulons voir ce qu'il contient. Maintenant, je vais simplement ajouter informations sur les variantes à cette requête, car nous allons certainement avoir besoin de les utiliser pour sélectionner les variantes une fois que nous y serons. Je vais essayer de saisir toutes les variantes. Je pense que le nombre total de variantes que vous pouvez faire dans une boutique Shopify est de 100 de toute façon. Je vais essayer de saisir toute la variance en utilisant l'argument des 100 premiers. Ensuite, cela va évidemment renvoyer une liste de nœuds. À l'intérieur des nœuds, je vais récupérer l'identifiant de la variante et un tas d'autres propriétés qui vont nous aider. Nous allons avoir besoin du PriceV2. Alors, bien sûr, il s'agit d'une sélection, nous allons donc devoir récupérer le montant et le CurrencyCode. Prenons également le CompareAtPriceV2. Encore la même chose, montant, CurrencyCode. Si nous le voulions, nous pouvons récupérer l'image de la variante, mais nous allons simplement utiliser la seule image qui existe sur le produit pour cette classe particulière. Mais une chose que nous devons apporter qui sera essentielle pour déterminer quelle variante est sélectionnée est SelectedOptions, afin que nous puissions saisir le nom et la valeur. Je pense que c'est tout pour le moment. Si nous rechargons ici, comme vous pouvez le voir, cela indique simplement objet. Jetons un coup d'œil à la variance des données. Tout ce que nous faisons, nous avons besoin de nicher. Nous devons maintenant passer aux produits de données. variants. Rafraîchissons la page ici. Nous avons une erreur non définie sur les variantes ici. Jetons un coup d'œil. Données, produit, variance. Le produit revient indéfini, ce qui est intéressant. Revenez aux données de connexion à la console. Je laisse ça en classe pour que vous puissiez voir comment le déboguer. Si vous ne savez pas ce qui se passe dans les données, vous pouvez toujours simplement les enregistrer sur la console puis vous pouvez déterminer comment procéder à votre déstructuration et accéder aux différentes parties des données qui obtiennent retourné. Comme vous pouvez le voir ici, nous avons un objet de données. Je pense que j'ai besoin de saisir à nouveau des données. Données, données, produits, variantes. Ici, vous pouvez voir que c'est ce que je devais faire. On y va. Si nous descendons ici, nous pouvons voir la liste des nœuds de variantes et vous pouvez voir l' ID Storefront de cette variante, le prix en tant qu'objet et les options sélectionnées sous forme de tableau. Si nous voulions aller encore plus loin, passez à la première variante, donc nous allons voir les nœuds, le premier nœud qui passe par ce tableau de variantes, puis nous allons dans SelectedOptions Juste pour jeter un œil à l'intérieur. Comme vous pouvez le voir ici, pour cette variante particulière, la taille de 154 cm et la couleur de la syntaxe. C'est ce que nous allons avoir besoin de savoir pour déterminer la variante. En gros, ce que nous devons faire ici, c' est extraire le produit de ces données ici même. Je peux soit déstructurer ici comme je l'ai fait auparavant et le faire à partir des données. Ou je peux économiser de l'espace et le déplacer ici, ce qui le rend un peu plus compliqué, mais c'est un peu plus propre. C'est ainsi que vous le verrez également dans les exemples de Shopify. Nous devrions maintenant avoir accès à ce produit si nous utilisons la bonne poignée. Alors ce que je peux faire ici est product.title. Alors, si on se rafraîchit ici, ne passe toujours pas. Que faisons-nous de mal ici ? Rien ne passe dans cette division, ce qui est intéressant. Jetons un coup d'œil aux objets de nos produits. Si je rafraîchis, vous pouvez voir le titre du produit ici. Je pense qu'il est peut-être imbriqué. Produit.Product.Title. Oui, et ça marche. C'est un peu drôle, n'est-ce pas ? Faisons des données. Oups. Nous allons nettoyer ça un peu. Données, produit de données. Nous devrions maintenant être en mesure de retirer l'un de ces produits. Non, il n'aime pas ça non plus. Je vais faire des produits, et voilà. Nous avons dû mettre à jour notre déstructuration ici afin d'obtenir cet objet produit. Mais maintenant que nous avons cet objet produit, nous pouvons commencer à l'utiliser ici. Maintenant, vous remarquerez que nous avons perdu notre mise en page, alors mettons-la à jour. Nous voulons insérer notre composant de mise en page ici et l'imbriquer à l'intérieur. Donnons également à cette page de produit des informations de référencement. Je vais m'occuper du composant SEO. À l'intérieur de la mise en page, parce que nous interrogeons la base de données ou que nous interrogeons l'API Storefront afin d'obtenir des informations de référencement, je vais tout mettre en suspens. Nous devons importer du suspense depuis React. Ensuite, à l'intérieur, le composant SEO. Pour cela, il suffit de saisir le type de produit , puis de transmettre le produit en tant qu'objet de données. Le composant SEO se chargera du reste du travail pour nous. Ensuite, ici, je vais lui donner un nom de classe de page de produit et de conteneur qui correspond à notre CSS prédéterminé. Autre domaine ici, la mise en page n'est pas définie. Cool. En fait, mettons-le ici parce que c'est notre propre composant. Importez la mise en page et le reste est déjà pré-rempli pour nous. Magnifique. Tu y vas. Nous avons maintenant retrouvé notre mise en page d'en-tête, donc si je vais sur l'un des produits de l'une des collections et que je clique dessus, vous verrez qu'il ira sur cette poignée, puis il chargera ce produit informations. instant, nous utilisons uniquement le titre. Développons un peu plus cette page produit. Pour ce faire, afin de découpler cette requête de l'API Storefront au sein du composant serveur, je vais créer un composant client pour héberger notre page produit. Cette vidéo sera probablement un peu plus longue car il y a beaucoup de code à parcourir ici. Mais nettoyons un peu tout ça ici. Je vais certainement vouloir y jeter un œil, mais nous allons également vouloir créer notre composant ProductDetails ici, Client.jsx. Encore une fois, comme je le fais lorsque je démarre chaque composant, exporte la fonction par défaut, le nom du composant, nous l'appellerons détails du produit. Nous allons bien entendu transmettre les données du produit comme l'une de ses instructions. Ensuite, bien sûr, nous allons renvoyer une forme de jsx. Assurez-vous de ne pas enregistrer sans rien ici, sinon cela risque de provoquer une erreur. Sur cette note, créons simplement un div pour éviter cette situation. Comme nous l'avons fait auparavant, je vais y mettre le titre du produit. Ensuite, au lieu de cela, je vais importer ProductDetails à partir de cette adresse. Ensuite, je vais le remplacer par ProductDetails, puis je transmettrai le produit en tant qu'accessoire. On y va. Si je clique sur Enregistrer là-dessus, rafraîchissez ici. Encore une erreur. Nous avons cette erreur d'absence de contexte de localisation disponible ici, qui est difficile à déboguer. Ce que j'ai découvert, c'est que je devais simplement utiliser Yarn pour vider le cache. C'est ce que je mentionnais plus tôt à propos de Yarn. Au départ, j'utilisais npm run dev à chaque fois, mais j'ai ensuite installé Yarn parce que c'était finalement le seul moyen de contourner ce problème et donc à la place, nous allons fermer le serveur que j'ai Je viens de le faire et ensuite je vais lancer yarn dev —force. Cela va relancer notre serveur et, comme vous pouvez le voir maintenant, il fonctionne. C'est juste une étrange bizarrerie dans le développement de Shopify Hydrogen. Si jamais vous rencontrez nouveau une erreur étrange comme celle-ci et que vous n'arrivez pas à comprendre ce qui se passe, envoyez cette commande il y a longtemps, yarn dev —force. Dans ce cas, cela a évidemment fonctionné et nous pouvons passer à autre chose. Ce que j'essayais de vous montrer avant que cette erreur ne se produise, c'est que nous avons maintenant déplacé ce développement avec le titre du produit dans son propre composant , puis l'avons remplacé par la référence aux composants. Maintenant, si nous le regardons dans notre navigateur, il a exactement la même apparence. Mais la raison pour laquelle nous voulons transférer cela dans son propre composant est liée au rendu côté serveur et côté client. Comme indiqué dans la documentation, si je regarde ici la vue d'ensemble des composants du serveur React dans la documentation et que je fais défiler la page vers le bas, vous pouvez voir ici que nous devons utiliser composants serveur lorsque en faisant des appels à l'API Storefront et nous devons généralement utiliser des composants clients lorsque nous effectuons une interactivité dynamique côté client. C'est pourquoi nous allons maintenant détailler les détails du produit. Nous devrions de toute façon, juste pour rendre le code plus propre, mais cela explique peut-être davantage pourquoi nous utilisons un composant côté client ici. Nous voyons notre premier volet côté client dans la classe à ce jour. Allons-y par ici. Afin d'élargir cette page de produit, je vais importer beaucoup de choses depuis Shopify Hydrogen, alors commençons tout de suite. Je vais importer ici quelques fournisseurs et des hooks qui nous permettront de sélectionner des variantes beaucoup plus facilement. Je vais d'abord mettre en place le chemin vers l'hydrogène ici, puis je vais briser les crochets comme ceci parce qu'il va y avoir une petite liste ici que nous allons importation. Tout d'abord, vous voulez le ProductOptionsProvider, puis à l'intérieur de celui-ci, nous allons utiliser le hook UseProductOptions et ensuite nous allons rendre une image, évidemment ; ProductPrice, qui est très similaire à la composante monétaire mais spécifiquement liée à ProductPrice. Ensuite, le bouton Ajouter au panier que nous n'utiliserons peut-être pas dans cette leçon, mais probablement dans la leçon suivante lorsque nous commencerons à intégrer la fonctionnalité du panier. Maintenant, au lieu de ce que nous avons ici, je vais intégrer tous les détails du produit dans le ProductOptionsProvider. Ce fournisseur va nous fournir certaines fonctionnalités clés concernant le changement de variante, et comme cela peut tout affecter, y compris l'image du produit, en théorie, je vais le définir comme composant de niveau supérieur. Pour que cela fonctionne, il suffit de transmettre le produit en tant que support de données. Ici, je vais créer une image et nous avons juste besoin de transmettre les données exactement là où se trouve cette image. allons voir console.log ici afin que nous puissions déterminer comment accéder à l'emplacement de ces informations d' image. Je vais vers console.log l'objet produit qui passe et vers ProductDetails. ici, je vais le supprimer sinon il y aura probablement une erreur. Passons maintenant à notre côté client afin de lire notre fichier console.log. Comme il s'agit d'un composant côté client, nous voyons désormais les journaux de la console dans notre navigateur côté client plutôt qu' ici dans notre terminal côté service, donc c'est quelque chose à noter. Si nous travaillons avec des composants côté serveur, tous les journaux de console apparaîtront ici. Si nous utilisons des composants côté client, tous les journaux de console apparaîtront dans notre côté client, dans notre navigateur. Nous avons une erreur ici parce que nous ne mettons rien dans l'image, mais en gros, nous avons toujours le journal de la console qui passe. Si nous allons dans les nœuds multimédia puis dans cette image ici, cet objet devrait suffire pour que l'image fonctionne. Jetons un coup d'œil. Nous allons créer des nœuds multimédia ; le premier nœud, puis l'image. Allons-y, data= {products.media nodes [0] ; nous allons récupérer le premier nœud, puis .image}. Je vais cliquer sur « Enregistrer » lors de cette actualisation ici et voyons ce qui se passe. La propriété data prop doit avoir la propriété alt texts. Ça n'aime pas ça, jetons un coup d'œil. Peut-être que nous avons juste besoin de passer l'alt comme indiqué ici, alors revenons à notre image et faisons du texte alternatif ici. Jetons un coup d'œil à l'image principale de nos éléments. C'est du rendu, mais c'est sacrément géant. Il semblait que cela n'apparaissait pas, mais il apparaît réellement. Je dois juste mettre un nom de classe ici pour qu'elle se comporte, donc je vais faire ClassName. Encore une fois, en faisant référence au CSS que j'ai déjà créé pour vous, ce sera une image de page de produit, et maintenant vous pouvez voir que c'est bien sur le côté. Encore une fois, cela suppose que nous utilisons uniquement des images pour le support de nos produits. Cela tomberait essentiellement en panne si quelqu'un utilisait des vidéos ou des modèles 3D dans le support de son produit. Gardez cela à l'esprit qu'il s'agit d'une version simplifiée aux fins de ce cours de base sur Shopify Hydrogen. Passons maintenant à l'intérieur de ce composant ProductOptionsProvide à un second composant, et c'est là que je vais mettre dans ma forme de produit. Créons-le d'abord. C'est la première fois que nous allons voir deux composants dans un même fichier. Nous n'avons pas besoin de l'exporter car nous l' utilisons directement dans ce fichier Je vais donc appeler ce formulaire de produit unique. Faisons un retour avec un div ici afin que l'ensemble de l'application ne se brise pas simplement comme un espace réservé. Ensuite, ce que je veux faire , c'est m' assurer que je passe en revue un produit en tant qu'accessoire, puis je pourrai récupérer composants ProductForm que nous venons de définir là-bas. Faisons en sorte qu'il se ferme automatiquement comme ceci, puis je pourrai passer revue ce produit en tant qu'accessoire du produit. Ensuite, comme avant, je vais simplement mettre products.title ici. Allons-y, voyons si cela fonctionne. Vous avez maintenant l' image et le titre des produits ici. UseProductOptions sera désormais imbriqué dans ce composant ProductForm hook UseProductOptions sera désormais imbriqué dans ce composant ProductForm. C'est ici que nous allons commencer à créer notre fonctionnalité de sélection de variantes. Juste ici ; et c'est probablement la partie la plus compliquée de la vidéo, alors soyez indulgents, les gars, je vais tirer certaines choses de ce hook ; UseProductOptions, et ceci UseProductOptions est le hook permettant de gérer l'état des options sélectionnées et, par conséquent , la variante sélectionnée parmi ces options. Ce que nous pouvons faire, c'est extraire les options, nous pouvons extraire le SelectedVariant, nous pouvons extraire les SelectedOptions et nous pouvons extraire la méthode SetSelectedOption. C'est plus facile à lire pour vous, va l'imbriquer comme ça. Nous récupérons tout cela à partir du hook UseProductOptions, puis ici, je vais commencer par un div, mais je vais mettre le titre sous forme de h1, puis en dessous je suis Je vais utiliser ce composant ProductPrice, donc je vais récupérer le ProductPrice, lui donner un nom de classe product-page-price. Pour le CSS, je vais passer sans zéros, comme nous le faisions auparavant. Décomposons cela en plusieurs lignes pour vous les gars. Sans zéros de fin, je vais transmettre l'objet du produit en tant que prop de données, puis je vais également transmettre l'identifiant de la variante. Ceci est important car le ProductPrice peut changer en fonction l' identifiant de variante sélectionné et nous pouvons en fait saisir l'identifiant de variante sélectionné de la manière suivante. C'est vraiment cool. Nous saisissons cette variable sur cet objet d'état, donc elle sera mise à jour au fur et à mesure de sa mise à jour en fonction de notre sélection. C'est la puissance de l'utilisation de ce hook, et c'est l'état dont nous parlions dans ce composant particulier que nous allons utiliser. Vous allez commencer à voir cela fonctionner dans une seconde. Si je me rafraîchis ici, vous pouvez voir que nous avons un prix à venir. Il n'y a pas réellement de zéros de fin, sorte que sans zéros de fin, cela ne fonctionne pas sur cette page en particulier, mais pour toute page contenant deux zéros ; deux zéros de fin, il supprimera ceux-là, mais comme vous pouvez le voir ici, le prix se fait sentir. Encore une fois, ma mauvaise connexion Internet fait ce chargement lentement. La situation sur Internet est réglée pour le moment, désolé pour cela. Tu y vas. Notre prix est juste là. Une bonne idée serait évidemment créer un autre ProductPrice ici et de faire comme nous l'avons fait sur ProductGridItem en termes de fait sur ProductGridItem en termes de réduction, en affichant également la comparaison au prix. Mais je t'ai déjà montré comment faire, donc tu devrais être capable de le découvrir toi-même. gagner du temps et pour que cette leçon ne soit pas trop longue, passons partie la plus importante, à savoir le ProductForm lui-même. Ce que vous allez voir ici, c'est que je vais imbriquer une autre instruction de retour, donc celle-ci sera basée sur un tableau et cette section que nous allons héberger dans un div avec la classe de Options du produit. Ensuite, ici, nous allons accéder à toutes les options afin de créer notre formulaire de produit. Nous allons utiliser à nouveau la carte, nous allons prendre chacune des options. Nous allons utiliser la structuration pour extraire le nom et les valeurs de chaque option. Ensuite, nous allons créer un dos complet ici, suffira d'y ajouter un crochet. Donc, cela ne casse pas et ne supprime pas cela. Il suffit de le déplacer ici pour corriger cette erreur. On y va. Les lignes ondulées rouges ont disparu. Ensuite, nous allons mettre une instruction if ici au cas où il n' y aurait qu'une seule valeur, auquel cas il n'y a aucune option de sélection. S'il y en a un, nous allons simplement renvoyer la valeur null. s'agit simplement d'une solution de rechange au cas où il n'y aurait pas plusieurs valeurs, auquel cas il ne sert à rien de sélectionner parmi les options s'il n'y a qu'une seule option. Ensuite, si ce n'est pas le cas, nous allons renvoyer un autre ensemble de JSX. Je vais essayer de le faire étape par étape autant que possible. Nous allons donc d'abord créer un groupe d'options de produits pour chaque groupe de groupes d'options de produits. Je vais mettre une clé ici parce que c'est une exigence de réaction. Nous pouvons utiliser le nom ici comme clé, puis je vais mettre éléments d'élégance ici avec le nom du tiret de l' option de classe de produits, puis je peux saisir le nom de l'option. Laissons-y pour l' instant et jetons un coup d'œil. Comme vous pouvez le constater, nous allons récupérer la liste des différentes options. Si je vais dans mon catalogue ici et que je vais sur, je crois que c'est celui-ci qui offre le plus d'options. Vous pouvez le voir en listant maintenant toutes les différentes options. Mais ce que nous ne listons pas encore, ce sont les valeurs. Passons en revue cela maintenant. Dans la prochaine étape, nous allons ajouter une autre déclaration de retour. C'est là que je dis que ça commence à avoir l'air un peu génial ici. Il y a beaucoup de nidification ici. Malheureusement, c'est juste la nature de la bête. Nous allons utiliser une autre carte ici pour transmettre nos valeurs dans un JSX à afficher. Je vais récupérer la valeur, l'ouvrir, puis je mettrai du code avant l'instruction return. Mais pour commencer, juste pour mettre quelque chose sur la page, je vais ouvrir mes déclarations immédiatement. C'est ici que je vais mettre un div avec une valeur d'option de classe de produits, et à l'intérieur, je vais mettre un bouton radio. Nous allons faire un type de radio. Le nom sera égal au nom de l'option. Ensuite, nous voulons bien sûr enregistrer la valeur. Nous sommes en train de parcourir toutes les valeurs afin de pouvoir transmettre la valeur que nous examinons actuellement, puis nous allons passer par la méthode OnChange. C'est à ce moment-là que nous commençons à utiliser la méthode des options enseignées par sets que nous avons récupérée dans le hook Utiliser les options du produit. Maintenant, je vais mettre dans un ensemble de fonctions anonyme l'option sélectionnée, analyse, le nom et la valeur et fermer cet élément d'entrée. Voyons maintenant s'il y a des erreurs. Ce n'est pas complètement terminé, mais je voulais vous montrer ce que nous avons fait jusqu'à présent. Nous avons de la place ici, mais rien ne passe. Jetons un coup d'œil. Nous avons la légende , puis nous avons une entrée pour chacune d'elles. Oh, j'ai oublié de mettre l'étiquette ici. La raison pour laquelle j'ai imbriqué ces entrées dans ces divs est que nous pouvons y mettre une étiquette, ce qui est un meilleur aspect pour l'entrée plutôt que d'avoir ces vilains boutons radio. C'est juste un truc HTML ici. Je vais créer cette étiquette, puis mettre la valeur ici afin que nous puissions réellement voir quelle valeur nous sélectionnons. Comme vous pouvez le constater, les valeurs se font sentir maintenant. Lorsque je survole chaque option, une ligne apparaît en dessous. Comme je clique dessus en ce moment, l'option de sélection définie devrait fonctionner. Nous ne recevons tout simplement pas de commentaires visuels sur notre formulaire. Pour y parvenir, nous allons créer une variable ici appelée checked et accéder à l'objet auquel nous n' avons pas encore accédé. Nous allons accéder à ce que nous n'avons pas encore utilisé, aux options sélectionnées. Si, lorsque nous transmettons le nom aux options sélectionnées, il est égal à la valeur que nous examinons actuellement, case cochée sera vraie. Il ne nous reste plus qu'à le transmettre à notre contribution ici. case cochée est égale à la valeur de celle-ci. Cliquez sur « Enregistrer » dessus. Maintenant, vous pouvez voir que cela ne fonctionne toujours pas parce que nous avons encore une chose à faire ici, et c'est la création de notre identifiant. Nous allons faire const ID. Créons ici une petite chaîne avec le nom et la valeur. Ensuite, nous pouvons le mettre à la fois ici et aussi dans l'étiquette, mettre du HTML pour ID, et cela liera notre étiquette à notre entrée. Cela devrait être tout ce dont vous avez besoin pour fonctionner. Maintenant, si je clique sur l'un d'entre eux, d'accord. Il ne fonctionne toujours pas. Qu'est-ce qu'il se passe ici ? Chaque enfant de la liste doit avoir un accessoire clé unique. est peut-être le problème que nous avons ici. Ici, utilisons cet identifiant nouvellement créé comme accessoire clé ici. Cliquez sur « Enregistrer » dessus. Rafraîchissez-vous ici. Nous ne sommes toujours pas en mesure de changer nos options ici. Nous avons une erreur liée à ce que nous avons rencontré deux enfants avec la même clé. Jetons un coup d'œil. J'ai oublié de mettre mes crochets ici. C'est littéralement entrer la valeur du signe du dollar. Ce n'est pas une valeur dynamique. Comme vous pouvez le voir ici, vous pouvez déjà voir qu'il enregistre une autre sélection. J'espère que cela n'a pas été trop difficile à suivre. Comme vous pouvez le voir ici lorsque je change de variance, l'image ne change pas, mais le prix est tel que l'utilisation des options de produit accroche ici, gère réellement notre état pour nous, ce qui est vraiment cool. Chaque fois que nous créons une nouvelle sélection ici, nous sélectionnons une nouvelle variante qui met automatiquement à jour notre prix et tout ce qui est lié à la variation sur notre page. La seule chose qui nous manque ici, juste pour terminer avant de passer à la page du panier, c'est la description ici. Ce que je vais faire, c'est créer un div avec la classe de description du produit. Au lieu d'y insérer du HTML, ce que je vais faire est de taper cet accessoire très étrange appelé dangereusement défini dans un code HTML, puis ici pour souligner, souligner le HTML, puis mettre dans notre description HTML du produit. Description HTML. Fermons ça pour que nous puissions y jeter un œil. Alors, comme vous pouvez le constater, voici notre description. Maintenant, pourquoi l'avons-nous mis dans cet accessoire et pas simplement, supprimons tout cela et jetons-le ici. Eh bien, voyons ce qui se passe lorsque nous faisons cela. Je vais cliquer sur « Enregistrer » et comme vous pouvez le voir, cela fait passer le code HTML littéral. Nous devons réellement insérer ce code HTML via un prop pour le rendu. La raison pour laquelle le prop est appelé dangereusement défini en HTML, plutôt que simplement dans un HTML, est que c'est un rappel de React de faire très attention lorsque vous insérez du HTML dans un élément qui arrive à partir d'une base de données ou d'une source externe. La raison en est ce qu' on appelle l'injection HTML. Quelqu'un pourrait en fait casser votre page en insérant un code HTML incorrect ici. C'est donc un avertissement de React pour vous faire savoir que c'est un peu dangereux. Mais dans notre cas, lorsque nous insérons du code HTML de description de produit, tant que nous, les utilisateurs ou les administrateurs ne saisissons aucun code HTML cassé dans notre champ de description de produit, cela devrait fonctionner. Mais si le client, l'administrateur ou la personne qui ajoute des descriptions aux produits insère du code HTML cassé, alors cela va tomber en panne. Tout cela a le potentiel de se briser. C'est pourquoi il est dit dangereusement défini en HTML. C'est quelque chose à noter ici. C'est un peu risqué. Celui-ci a été important. J'espère que vous avez suivi. Si vous êtes bloqué à tout moment, laissez évidemment un commentaire. Mais maintenant, si nous allons voir n'importe quel produit dans un magasin, certains d'entre eux sont moins compliqués. Celui-ci n'a qu'une seule option. Nous ne pouvons sélectionner qu'une taille. Mais celui-ci, le snowboard à hydrogène, est, je crois, le plus complexe. Il a une taille, un support de fixation et un matériau. Nous verrons dans la vidéo suivante lorsque nous ajouterons le bouton « Ajouter au panier », que lorsque nous cliquons sur ce bouton « Ajouter au panier », la variante est déjà déterminée à partir de notre sélection, et donc cette variante obtiendra ajouté au panier. Merci donc de nous avoir suivi dans cette vidéo. Dans la vidéo suivante, nous allons utiliser la plus grande partie de notre application, savoir la fonctionnalité du panier. En gros, le magasin ne fonctionne pas tant que nous n'avons pas de fonctionnalité de panier ce sera donc la dernière partie du fonctionnement de notre magasin. Peut-être faire une pause, vous préparer et revenir pour la dernière leçon avant de déployer notre application sur notre boutique Shopify. 11. Fonctionnalité de panier pt. 1: Très bien les gars, c'est l'heure de passer à la partie finale et essentielle pour faire fonctionner ce magasin. Cette boutique simple, il y a évidemment tout un tas d'améliorations que vous pouvez apporter ici, mais pour obtenir une boutique fonctionnelle de base, il y a encore une chose à faire c'est d'activer le panier fonctionnalité. Dans cette vidéo, nous allons aborder un grand nombre de composants différents. Nous allons mettre à jour notre composant d'application, mettre à jour nos composants de mise en page pour ajouter un bouton de panier ici, mettre à jour notre page produit ici pour ajouter un bouton d'ajout au panier et créer une page de panier. Sans plus attendre, allons-y. Il se peut que nous devions le diviser en deux vidéos en fonction de la durée. Mais la première chose, comme je l' ai mentionné, je vais ouvrir notre fichier app.server.js ici. Afin d'obtenir la fonctionnalité du panier dans notre application, nous devons récupérer le composant du fournisseur de panier , puis nous voulons y intégrer notre routeur. Je vais le transporter. Il est toujours dans le presse-papiers, insérez-le dans notre fournisseur de panier, puis collez-le dans ce routeur entre les balises du fournisseur de panier. Je vais cliquer sur « Enregistrer » là-dessus. Maintenant, juste comme ça, nous allons pouvoir utiliser les crochets et les fonctions du panier dans notre application. Passons à notre explorateur de fichiers ici et créons un nouvel itinéraire pour la page du panier. Voici maintenant le dossier des routes, cart.server.jsx. Dans le didacticiel officiel de Shopify, ils utilisent un tiroir pour cela, mais cela permet d'intégrer des bibliothèques externes et de coller beaucoup de code. Je recommande vivement d'avoir un tiroir comme élément de conception, termes d'expérience utilisateur, mais pour rester simple et nous concentrer sur ce dont nous avons besoin pour que cela fonctionne réellement, nous allons simplement faire un page séparée. Tout comme les détails du produit, nous allons ouvrir une voie ici , puis la proposer via des composants côté client. Ce fichier sera assez simple. Nous allons simplement exporter le panier de fonctions par défaut, puis revenir ici, et ensuite nous allons tout encapsuler dans un composant de mise en page. Je vais ouvrir un div avec une classe de conteneur, afin que tout soit contenu, puis je vais ajouter un composant côté client dans lequel je suis sur le point de créer une page de panier de code. C'est en gros ça. Tout ce dont nous avons besoin maintenant, ce sont nos importations. Nous allons importer la mise en page depuis les composants/le serveur de mise en page. Nous avons une mise en page, puis nous allons devoir créer ces composants, donc je vais créer un composant appelé CartPage.Client.JSX. Ensuite, nous pouvons créer un composant ici, exporter les carnets de fonctions par défaut, la page , le retourner, un div de base pour commencer, et ensuite nous pouvons l'importer. Importez la page du panier et le reste est prérempli pour nous à partir du code Visual Studio. Nous y avons écrit un tas de code, tous les éléments de base, tout ce que nous avons fait auparavant, voyons si cela fonctionne réellement. Si je vais sur le chemin de mon panier ici, si nous regardons à l'intérieur de nos éléments ici, allons dans le menu principal, nous pouvons voir qu'il y a un conteneur avec un div à l'intérieur. Nous pouvons deviner que cela fonctionne et que nous sommes sur cette voie particulière. C'est tout ce que nous devons faire pour notre itinéraire en charrette. Tout le travail que nous allons faire pour la page du panier se fera dans ce composant côté client. Tout comme pour le composant relatif aux détails du produit, nous allons devoir importer de nombreux composants et crochets différents à partir des hydrogènes de Shopify. Je vais faire ce que nous faisions auparavant, diviser en plusieurs lignes et mettre le formulaire prêt à l'emploi. Je vais juste passer en revue tous les crochets et composants que nous allons apporter, donc nous allons devoir utiliser le crochet d'utilisation du chariot. Nous allons utiliser un composant fournisseur appelé fournisseur de lignes de panier, nous allons intégrer le composant image pour afficher une image, nous allons introduire le crochet d'utilisation de la ligne de panier, nous sommes nous allons introduire la composante argent pour formater la monnaie, nous allons ajouter la composante lien pour créer un lien vers le produit, nous allons introduire la composante coûts du panier. Comme je l'ai dit les gars, il y a beaucoup de choses ici. Nous allons introduire le composant de quantité de ligne de panier, et enfin nous allons ajouter le composant et enfin nous allons ajouter bouton de réglage de la quantité de la ligne de panier. Je ne mentais pas quand j'ai dit qu'il existe une vaste gamme de composants dans Shopify Hydrogen, mais qu'ils ont aussi une utilité et nous facilitent la vie. Croyez-moi, vous serez heureux, une fois que nous aurons commencé à développer cette page, que tout cela existe. Maintenant, ce que je veux faire, c'est diviser cette page de panier en plusieurs composants. Ce que je vais faire, c'est créer un suspense ici. Vous pouvez voir qu'il est importé automatiquement depuis React pour nous, puis à l'intérieur, je vais sortir le tableau du panier, que nous n'avons pas encore créé. Créons-le maintenant. Je n'ai pas besoin de l'exporter car je l'utilise simplement dans le même fichier, et je vais simplement créer ce composant de table de panier. La raison pour laquelle je veux le mettre dans un composant séparé est que nous allons utiliser certaines variables d'état ici. Je vais supprimer les lignes, caisse et le statut de ce crochet d'utilisation du chariot. Alors évidemment, ils en font un composant. Nous devons effectuer un certain rendu, alors ouvrons et ajoutons simplement un élément HTML de tableau. heure actuelle, nous pouvons attester de manière fiable qu'il n'y a aucun article dans notre panier, et c'est parce que nous n'avons même pas encore de bouton Ajouter au panier sur notre page produit. Ce qui est une bonne solution de rechange à faire immédiatement, c'est que si lines.length est égal à zéro, ce qui signifie qu'il n'y a actuellement aucune ligne dans notre panier, il n'y a aucun article dans notre panier, alors nous pouvons retourner des JSX ici et dites quelque chose comme si aucun article ne se trouve actuellement dans le panier. Il y a maintenant un certain problème, et je veux vous montrer de quoi il s'agit. Ce que je vais faire, c'est mettre dans un journal de console ici, et disons qu'il n'y a pas de lignes. Si nous l'exécutons, cela indiquera qu'il n'y a aucun article actuellement dans le panier. Maintenant, nous y reviendrons dans une seconde. Ce que nous allons faire, c'est lequel devons-nous faire en premier ? Passons au composant de mise en page ici et remplissons-le. Je vais le mettre dans une icône ici à partir d'une bibliothèque d'icônes recommandée lors de l'utilisation de tailwind. Dans le didacticiel officiel de Shopify, ils utilisent ce que l' on appelle le vent arrière et une bibliothèque d' icônes de vent arrière associée. En fait, nous pouvons toujours utiliser la bibliothèque d'icônes même si nous n' utilisons pas Tailwind. J'ai oublié comment ça s'appelle, mais si nous tapons simplement dans bibliothèque d'icônes Tailwind, elle devrait apparaître. Des icônes de héros, c'est comme ça que ça s'appelle. Ces icônes de héros sont une bibliothèque d'icônes SVG, dont SVG est probablement le meilleur moyen d'implémenter des icônes dans n'importe quel projet moderne. Nous pouvons le faire sous forme de solide, plan ou de mini. J'aime bien le plan et je vais juste taper cart ici. Vous pouvez le personnaliser si vous le souhaitez. Vous pouvez utiliser ce panier. J'aime bien le panier, et nous pouvons copier le SVG ou le JSX. Nous l'utilisons dans un projet React, donc nous pouvons copier le JSX, c'est bon, et ensuite je peux le coller ici. En fait, il vaut mieux utiliser le JSX car ici, vous pouvez voir quelque chose dont j'ai parlé dans les leçons théoriques. Ici, c'est un lien vers des vents arrière, donc je vais le supprimer. Mais ici, vous pouvez voir s'il s' agissait d'un SVG standard en HTML, ce serait un trait, une ligne, jointure, ou en fait je pense que c'est un mot, mais il y aura un tiret dedans. N'oubliez pas que nous en avons parlé dans les leçons de théorie selon lesquelles nous pouvons avoir des tirets. C'est en fait une bonne idée que nous ayons saisi le JSX ici, je vais juste vous montrer que pour l'instant, si nous copions le SVG, il y aura des tirets dans les noms d' attributs, ce que nous ne voulons pas. Certainement une copie du JSX si vous utilisez JSX, ce que nous faisons actuellement. Je vais l'indenter un peu, et comme vous pouvez le voir ici, vous pouvez également mettre une expression JavaScript dans certains de ces attributs, puis, bien sûr, je vais transformer ceci dans un lien. Avons-nous importé ? Oui, nous avons importé le lien ici et nous l'utilisons ailleurs. Je peux juste y aller comme ça. Ensuite, j'ai juste besoin de créer un lien vers l'itinéraire, qui sera juste -cart. Ici, nous allons bientôt mettre un indicateur sur le nombre d' articles dans le panier, mais nous y reviendrons dans une seconde. Si je retourne à notre application, vous pouvez voir que nous avons cette icône de panier ici, et si je suis sur une autre page, si je clique sur cette icône de panier, vous verrez qu'elle nous ramène à la page du panier. Passons à la page d'un produit. Passons à la première que nous avons vue une fois notre application chargée. Voilà, le snowboard à hydrogène, et ajoutons le bouton «  Ajouter au panier ». Ouvrez notre section consacrée aux détails du produit ici. Nous sommes déjà en train d'importer notre bouton Ajouter au panier ici. Je vais passer à, allons-y après les options mais avant la description, et créons un bouton d'ajout au panier ici. En fait, nous ne voulons pas que cela se ferme d'elle-même parce que nous allons y ajouter des enfants. Nous allons mettre ici l'ajout au panier. Ensuite, afin de lui donner un peu de style, en fonction du CSS existant, je vais le mettre, l' ajouter au panier comme nom de classe. Passons à notre application ici et vous verrez que le bouton Ajouter au panier existe. Je viens de le rafraîchir, mais là, vous pouvez voir que nous avons notre bouton Ajouter au panier. Maintenant, une chose que nous voulons faire avant cliquer sur ce bouton d'ajout au panier ou de laisser l'utilisateur cliquer sur ce bouton est de le restreindre s' il est en rupture de stock. Nous ne voulons pas afficher le bouton Ajouter au panier ou nous voulons au moins indiquer à l'utilisateur qu'il est en rupture de stock s'il est en rupture de stock. Défilons jusqu'au formulaire du produit ici et créons une valeur booléenne ici. Je vais créer une configuration en rupture de stock et cela reviendra à vrai si la variante sélectionnée n' est pas disponible à la vente. Si cela ne se produit pas, nous aurons une solution de repli sur le faux. Maintenant, je pense que nous ne l'avons pas réellement récupéré à partir de notre requête GraphQL, nous allons donc devoir le faire. Revenons au handle.server.js x qui se trouve dans notre dossier de produits. Nous devons juste nous assurer que sur le nœud variant, nous allons vérifier s' il est disponible à la vente. Nous avons juste besoin de le mettre à jour, puis nous avons ce drapeau booléen qui sera vrai si la variante sélectionnée n'est pas disponible à la vente. Ce que je vais faire ici est un opérateur ternaire, qui va le décomposer en une nouvelle ligne, puis mettre une expression JavaScript ici, nous avons un opérateur ternaire. S'il est en rupture de stock, nous allons dire en rupture de stock, et s'il n'est pas en rupture de stock, nous allons simplement dire ajouter au panier. Alors ça devrait aussi marcher, je vais le mettre dedans. S'il est en rupture de stock, il devrait également être désactivé, donc je vais le mettre dans un accessoire désactivé. Cela devrait fonctionner. Je ne crois pas qu'aucun de ces produits soit en rupture de stock, donc nous ne pouvons pas vraiment le tester, mais celui-ci est définitivement en stock. Si je clique sur « Ajouter au panier » maintenant, vous verrez qu'il y a un peu d'état de chargement, mais à la fin, cela devrait être maintenant dans le panier, et si je clique sur cette carte ici, maintenant nous allons un message d'erreur s'affiche car nous traitons en fait certaines informations relatives au panier. Qu'est-ce que cela rend ? N'est pas défini dans le tableau du panier. Jetons un coup d'œil à ce qui se passe ici. J'ai mis render ici au lieu de return. Je suis tellement idiote. Vous êtes probablement en train de crier de l'autre côté de l'ordinateur en me disant que je me suis trompé. Je suis désolée pour ça. Si nous actualisons la page, cela indiquera toujours qu'il n'y a aucun article dans le panier, mais il disparaîtra. Intéressant. Si je rafraîchis à nouveau, aucun article ne se trouve actuellement dans le panier et après un certain temps, il disparaît. C'est le problème auquel j'ai fait allusion tout à l'heure. J'ai dit que nous allions devoir venir ici et régler ça. En gros, je ne sais pas s'il s' agit d'un bogue ou quelque chose comme ça, mais en gros, le panier reviendra sans lignes au départ, puis il découvrira les lignes plus tard. Lorsque nous le chargeons pour la première fois, il indiquera qu'il n'y a aucun article dans le panier, puis il disparaîtra s' il y a des articles dans le panier. Ce que j'ai fait ici, c'est que j'ai retiré statut de l' objet renvoyé depuis le panier d'utilisation. Voyons ici quel est le statut. Si j'actualise l'état du journal de la console et que je l'actualise ici, vous pouvez voir que trois états apparaissent en cours de récupération, récupération non initialisée, en fait ce n'est que deux, n'est-ce pas ? Mais il y en a trois qui apparaissent. Permettez-moi de mettre cela de l' autre côté pour que nous puissions obtenir le statut, que les lignes soient nulles ou non, puis rafraîchissons ici. Ici, vous pouvez voir que nous obtenons la récupération, récupération non initialisée, puis l'inactivité. Maintenant, la raison pour laquelle cela est utile, c'est qu'avant que l'idole n'apparaisse, elle pense que les éléments de la ligne sont nuls. Mais quand idle apparaît, il se rend compte que ce n'est pas vrai et montre l'alternative, qui n'est actuellement qu'une table vide. Si nous regardons ici et que nous inspectons, vous verrez qu'une table vide est en train d'être affichée. Mais bien sûr, cette table est la table qui abritera tous nos articles. Ce que je vais faire ici, c'est qu'en plus de vérifier la longueur des lignes, je vais également vérifier l' état et je ne vais afficher aucun article actuellement dans le panier que si le statut est inactif. Dans le cas contraire, il se pourrait qu'il soit en cours de chargement. Si je rafraîchis la page, s'il y a des articles dans le panier maintenant, aucun article ne sera affiché dans le panier. C'est ma petite solution à ce problème. Nous sommes déjà très avancés dans la vidéo et nous n' avons même pas de liste des articles du panier qui s'affichent. Regardons-y maintenant. Je vais donner à cette table une classe de table de panier, encore une fois juste pour le formatage CSS, puis je vais ouvrir une balise t body ici, et puis c'est là que nous allons commencer à intégrer nos lignes. Nous utiliserons à nouveau cette fonction cartographique familière, et nous allons récupérer chaque ligne, et pour chaque ligne, nous allons renvoyer du JSX. C'est ici que nous allons placer le fournisseur de la gamme de chariots. Nous devons lui donner une clé, donc saisissez l'identifiant de ligne comme clé, puis nous transmettrons la ligne dans la propriété de la ligne. Encore une fois, je ne peux pas vraiment entrer dans les détails sur la raison pour laquelle cela fonctionne, car c'est simplement la nature du composant. Ces composants fournisseurs fournissent des fonctionnalités et sont configurés par les bibliothèques que nous utilisons. Vous allez bientôt commencer à découvrir les fonctionnalités proposées. Nous allons utiliser un autre hook à l'intérieur, mais ce que je vais faire, c'est créer un autre composant appelé cart line item. Alors allons-y à nouveau, fonction CartLineItem. Ici, ce que je vais faire, c'est renvoyer un peu de JSX, évidemment, je vais renvoyer une ligne de table. Ce que je vais utiliser pour cela sera renvoyé d' un autre hook ici. Nous avons un autre hook de la structure, certaines choses issues de ce hook, mais le hook que nous allons utiliser ici est UseCartline, et ce que nous allons faire est de récupérer l'identifiant de la ligne, ce que l'on appelle une marchandise, et le coût de cet objet. Ici, c'est là que nous pouvons utiliser l'ID de ligne, puis chacune de ces lignes aura, je crois, quatre colonnes. Je l'ai mis en place. Ici, dans le premier, c'est là que nous allons mettre notre image. Supposons simplement que l'image soit utilisée pour commencer. Ensuite, nous aurons le titre de notre produit. Je vais juste entrer de fausses valeurs pour commencer, afin que nous sachions ce qui va se passer ici, sélection des variantes et le prix individuel, puis la suivante aura notre sélecteur de quantité. Ensuite, le dernier aura le total de notre ligne et un bouton de suppression. Si je rafraîchis ici, vous pouvez voir que nous avons une ligne qui affiche toutes ces valeurs d'espace réservé. Ce n'est pas particulièrement pratique, alors essayons de les rendre dynamiques. Je vais supprimer ces espaces réservés, et ici, je vais utiliser le composant image que je pense avoir déjà importé. Oui, je l'ai fait. Très bon travail, Chris. Allons-y et donnons-lui un nom de classe LineItemImage pour le style, et ensuite tout ce que j'ai à faire est de transmettre l'image, qui se trouve en fait dans les objets dérivés. Je peux faire un journal de console ici pour que vous le prouviez. Si vous voulez voir ce qu'il y a dans l'objet de la marchandise, vous pouvez simplement l' enregistrer vous-même sur la console, mais croyez-moi, quand je dis pour le moment, pour gagner du temps, l'image se trouve dans ce champ de marchandise. Si nous passons par là et que je clique sur « Enregistrer », vous pouvez maintenant voir que le support a été remplacé par l'image du produit de notre seul produit qui se trouve dans le panier. Nous voulons maintenant insérer le titre du produit, la sélection des variantes et le prix individuel. Faisons-le maintenant. Je vais mettre un lien pour que lorsque nous cliquons dessus, il soit dirigé vers le produit. Ici, je vais faire des produits/ puis les mettre dans la poignée des produits dérivés. Sur les objets de la marchandise, nous avons accès au produit, et sur cet objet, nous avons accès à la poignée de ce produit. Ensuite, je vais lui donner un nom de classe pour le style de line-item-product-title. Ensuite, entre ces balises de liens, je vais récupérer de la marchandise, des produits, des titres. Nous utilisons beaucoup de marchandises ici, donc nous pourrions procéder à une restructuration pour nous faciliter la vie. Peut-être allons-y maintenant. Débarrassons-nous de la marchandise. Nous pouvons saisir, j'aime mettre dans le meilleur espace, l' image et le produit ici, afin que nous puissions simplement en retirer de la marchandise , c'est l'avantage de la restructuration, que nous avons vue à plusieurs reprises tout au long de ce cours. J'ai mis ce lien , voyons juste si cela fonctionne toujours. Nous avons le snowboard à hydrogène là-bas, et si je clique dessus, je vais accéder à ce produit un peu lentement, mais là, vous pouvez voir qu'il passe. Ensuite, nous voulons placer la sélection des variantes en dessous . Nous allons devoir parcourir les options sélectionnées, qui seront relatives à la marchandise. Je vais y parvenir en utilisant la structuration , puis je vais sélectionner les options. Il se peut qu'aucune option n'ait été sélectionnée, donc je vais faire une sauvegarde d'un tableau vide, puis je vais exécuter la carte. Ensuite, pour chaque option, un peu de JSX est généré. Désolé, c'est un gâchis quand il s'agit de tous ces supports différents. Peut-être que c'est juste parce que je n'ai pas saisi mon expression JSX ici, qui sera, encore une fois, nous allons utiliser une clé parce que nous parcourons saisi mon expression JSX ici, qui sera, encore une fois, nous allons utiliser une clé parce que nous choses en boucle, et je vais utiliser le nom de l' option comme clé, puis je vais simplement entrer le nom de l'option et la valeur de l'option sur cette sélection de variante particulière. Cliquons sur « Enregistrer » là-dessus et voyons comment cela fonctionne. Tu y vas. Il s'agit de la sélection des variantes. Le formatage est un peu décalé. Je ne l'ai pas mis dans un div avec le nom de classe de la variante d'élément de ligne afin d'obtenir le formatage que j'ai déjà configuré. On y va. Ensuite, pour le reste, je pourrais le faire dans une vidéo séparée pour vous, parce que celle-ci devient assez longue et Skillshare aime que je garde mes vidéos en dessous de 30 à 20 minutes chacune. Nous allons faire la deuxième partie de celui-ci, je vous verrai dans la prochaine vidéo. 12. Fonctionnalité de panier pt. 2: C'est bon. Bon retour. J'espère que vous êtes prêt à utiliser cette fonctionnalité de panier et donc évidemment la plus grande fonctionnalité que nous allons intégrer à notre petite application. Il méritait donc deux vidéos afin de tout couvrir. Ces espaces réservés sont donc toujours là, de ce côté de la table de notre panier. Juste pour récapituler ce que nous avons fait dans la dernière vidéo, nous avons activé la fonctionnalité de panier sur l'ensemble de l'application enveloppant notre routeur dans le fournisseur de panier , puis nous avons créé un itinéraire de panier qui renvoie vers une page de panier et Ensuite, nous avons également ajouté un lien vers le panier ici et, bien sûr, nous avons ajouté un bouton Ajouter au panier, qui nous permet d' ajouter des articles à notre panier. Revenons à la création de notre page de panier. Ici, nous allons utiliser d' autres composants que nous avons introduits ou que nous avons importés ici, bouton de réglage de la quantité de ligne de panier et de réglage de la quantité de la ligne de panier. C'est probablement l'un des plus grands noms des composants que nous proposons, mais ces boutons sont très utiles, comme vous le verrez bientôt. Maintenant, pour celui-ci, il est important que vous utilisiez les classes sinon ça va ressembler à de la foutaise. Je vais donc emballer tout cela dans le sélecteur de quantité du panier, puis pour commencer, ajoutons simplement la quantité de la ligne de panier et si je la mets simplement dedans, tant que c'est dans une ligne de panier fournisseur, vérifiez ceci, vous verrez que la quantité est la bonne. Donc, si je devais aller sur ce snowboard et en ajouter un autre au panier. Je pense que ce doit être exactement la même variante et cela prend du temps. Maintenant, revenons au chariot et vous pouvez voir qu'il y en a jusqu'à deux, alors est-ce que c'est bien ? Nous sommes déjà en de déterminer la quantité cet article en utilisant simplement ce composant de Shopify Hydrogen. Mais bien sûr, nous voulons pouvoir mettre à jour la quantité. Donc, de chaque côté, nous allons placer un bouton de réglage de la quantité de la ligne de panier , puis sur le côté gauche pour le paramètre de réglage, nous allons le faire diminuer. Je vais ouvrir celui-ci et à l'intérieur je vais mettre un SVG qui est un symbole moins. Je vais donc revenir aux icônes des héros ici, trouver moins copier le JSX, le jeter ici. Nous avons donc notre diminution, puis l'autre côté de la ligne de panier. Je vais mettre dans une autre ligne de panier un bouton de réglage de la quantité et comme l' accessoire de réglage va être augmenté, puis le SVG et ensuite je vais le mettre ici, ce sera bien sûr le contraire, ce qui est un plus. Je vais donc copier le JSX pour cette icône, coller ici, puis appuyer sur « Enregistrer » dessus. Voyons maintenant ce qui se passe lorsque nous actualisons notre page ici. Vous pouvez voir que je peux maintenant le réduire à un, ou je peux l'augmenter jusqu'à trois ou combien je veux en fabriquer. Ce sont donc des composants très pratiques de Shopify Hydrogen. Nous obtenons une fonctionnalité de réglage de la quantité dès la sortie de la boîte. Ici, pour le total de la ligne, je vais remplacer cet espace réservé par une composante monétaire. Je vais le mettre sans drapeau des zéros, puis je vais passer le montant total par points de coût pour formater le montant total dans un format convivial et agréable. Donc, voici où nous obtenons le coût du crochet d'utilisation du chariot. Vous devez comprendre maintenant que si nous le mettions simplement en place, il ne serait pas bien formaté. Nous voulons donc intégrer cela dans une composante monétaire, comme nous pouvons le voir ici. Si nous en obtenons trois, le total finit par être de 1 800, puis le bouton de suppression est un autre bouton de réglage de la quantité de la ligne de panier. Je vais le mettre comme ceci comme prop, je vais le faire apparaître sous forme de div, vais lui donner le nom de classe cart remove, puis le prop adjust de remove. Cela indiquera au composant du bouton de réglage de la quantité de la ligne de panier que je souhaite qu'il supprime toute la quantité de cet article. Il suffit donc de supprimer complètement l'élément de ligne et pour cela, je vais utiliser une icône de corbeille. Je vais donc entrer ici, taper dans la corbeille, copier le JSX, revenir ici comme nous l'avons fait auparavant, et réparer l'imbrication. Donc, si nous avons écrit correctement tous nos noms de classe et que nous revenons ici, vous verrez qu'ils apparaîtront dans le coin supérieur droit. Nous pouvons donc simplement cliquer dessus et supprimer l'élément de ligne complètement. Vous verrez maintenant que lorsque nous actualisons la page, cela n'indique pas qu' il n'y a aucun article actuellement dans le panier tant que nous n' arrivons pas à l'état inactif. permet d'éviter que cela n'apparaisse avant que nous ne sachions vraiment s'il y a des articles dans notre panier. OK, donc revenons en arrière et ajoutons cet article dans notre panier. Faisons une sélection différente ici. Polycarbonate, modèle de boulon classique 160, ajouter au panier. Revenons ensuite à notre panier et je pense que je voulais mettre le prix de chacun en dessous, alors ajoutons cela également. Nous avons déjà accès à notre composante monétaire ici. Je vais taper de l'argent sans suivre de zéros parce que c'est ma préférence, puis dans les données, prop, saisir le prix de la marchandise, v2, appuyer sur « Enregistrer » sur cette actualisation et vous pouvez voir l'individu le prix est 610 et si je l' augmente ici, le prix par pièce restera le même, mais le coût total de cette ligne augmentera. Laissez-moi vous montrer ce qui se passe si j'ajoute un autre produit au panier, ajoutons une pile complète de snowboards au panier, puis je cliquerai dessus pour m'amener à la page du panier. Vous verrez que nous en avons deux ici. Maintenant, nous avons un petit problème. L'un d'eux apparaît en gras et l' autre n'apparaît pas en gras, ce qui pose problème, mais nous n'avons pas non plus de pied de page ici pour le total, et évidemment nous avons besoin d'un bouton pour passer à la commande. Nous allons donc développer ce point. Je veux sortir de cet article de la ligne de panier, le sauvegarder un peu ici, puis en dessous, mettre un div avec le pied de page du panier et évidemment nous allons avoir tout cela en rouge lignes car nous avons besoin d'un seul élément racine dans notre retour. Donc, je vais juste faire ce hack que nous utilisons avant d'ouvrir un élément vide et retrait ici, puis dans le pied de page de notre panier, je vais mettre un lien. Le lien redirigera vers l'URL de paiement, que nous avons retirée du panier d'utilisation. Cela va nous générer automatiquement l'URL de paiement. Je vais lui donner un nom de classe de Checkout Button, qui est configuré dans notre CSS. Cool, donc je vais fermer ça et ensuite, ici, je vais juste avoir le mot checkout et fermer cette balise de lien. Si je rafraîchis la page, vous avez le bouton Commander, mais je n'ai toujours pas indiqué le total du panier. Je pense que je vais le mettre dans le corps. Donc, juste après, là où nous renverrons toutes ces lignes, nous pouvons mettre une dernière ligne et les deux premières colonnes, je vais faire un intervalle d'appels de deux. Nous n'aurons rien et ensuite nous aurons le mot total, puis pour la dernière cellule, nous ajouterons le coût du panier. Ce qui nous donne le coût total du panier sans zéros et nous n'avons pas besoin de transmettre d'informations ici tant que c'est dans le fournisseur, qui est, je suppose, le fournisseur du panier, tout c'est dans le fournisseur, qui est, ira bien . Alors rafraîchissez-vous ici et vous verrez que ces deux éléments ajoutés ensemble sont égaux à cela et je crois que le gras était dû au fait que mon CSS a mis la dernière ligne en gras. La dernière ligne aurait donc dû être le total. Alors maintenant, ce problème de style est réglé. C'est bon. Nous avons donc deux de cette variante particulière. Dans l'une de ces variantes, si je clique sur le bouton « Commander », voyons ce qui se passe. C'est un peu lent. Désolé à cause de mon mauvais Internet. Mais vous verrez bientôt que nous allons sur la page de paiement de la boutique Hydrogen. Si nous affichons le récapitulatif de la commande, il doit correspondre à la sélection dans notre panier. Vous y voilà, les gars. C'est aussi simple ou pas simple. C'est beaucoup de code à écrire, mais le framework Shopify Hydrogen prend en charge de nombreuses fonctionnalités pour nous. Nous n'avons pas besoin de saisir code spécial sur notre bouton de paiement. Nous pouvons simplement saisir l'URL de paiement. Nous pouvons utiliser de tels composants. Tout ce que nous avons à faire est de mettre CartCost et il se charge du reste pour nous. Ces incroyables boutons CartLineQuantityAdjust, le CartQuantity lui-même, c'est vraiment impressionnant fonctionnalités que certains de ces composants nous offrent dès leur sortie de la boîte. L'une des dernières choses que je veux faire ici est de mettre un indicateur du nombre d'articles dans le panier ici. Ce que je vais faire, c'est dans nos composants de mise en page, où se trouve-t-il ? Juste ici. Je vais insérer quelque chose appelé CartBubble. Ce sera un composant que j'ai construit moi-même. Ensuite, je vais, ci-dessous, créer ce composant CartBubble. En fait, comme nous allons utiliser use cart, je vais le déplacer dans son propre fichier de composants clients. Je vais aller dans un nouveau fichier, CartBubble.Client.jsx ; mettez-le ici, faites une exportation par défaut. Ensuite, pour en revenir au fichier layout.server.jsx, je vais importer ce composant, CartBubble et le reste sera rempli automatiquement pour moi. Si je reviens à CartBubble.Client.jsx, évidemment, nous devons renvoyer quelque chose ici ; renvoyer un peu de jsx. Tout ce que nous recherchons ici, c'est la quantité. C'est tout ce que cela fait. Je vais importer le hook UseCart depuis le framework Hydrogen. Je vais extraire la quantité totale de l' objet renvoyé par ce crochet. C'est un moyen facile d' obtenir notre quantité totale. Si la quantité totale est inférieure à un, ce qui est fondamentalement zéro, je vais renvoyer null, donc en gros, ne rien renvoyer. Mais si cela dépasse cela, nous retournerons une plage, et à l'intérieur de la plage, nous ferons des crochets, et à l'intérieur de ces crochets, nous renverrons simplement la quantité totale. Si je l'enregistre, actualisez-le ici ou actualisez-le n'importe où sur notre application. Nous avons une petite erreur, DOM ColSpan non valide. Nous devons utiliser CamelCase pour le ColSpan ici. Où étais-je ? Panier/Page. Il faut mettre un S majuscule ici. C'est un truc bizarre avec JSX. Qu'avons-nous d'autre ici ? Si nous lisons le message d'erreur, il semble provenir de notre composant CartPage. Permettez-moi de passer à une autre page notre site Web et de confirmer qu'elle est isolée de la page CartPage. Oui, ça l'est. Si nous regardons ici, à côté de cette icône du panier, cela devrait indiquer le nombre d' articles dans le panier. Laissez-moi aller à CartBubble. S'il n'y a aucun article dans le panier, il doit renvoyer la valeur null, donc rien ne s'affichera. Cela suggère donc qu' il n'y a aucun article dans le panier. Cliquons à nouveau sur le panier, et il revient simplement, aucun article ne se trouve actuellement dans le panier. Si je rafraîchis, est-ce que j' obtiens la même erreur ? Oui. Si je navigue dans le CartPage à partir d'une autre page, tout ira bien. Mais si j'arrive directement sur la page du panier, je recevrai cette erreur. Je pense que le problème ici remonte à la question de savoir si nous allons sur la page du panier. Ce rendu sans que la demande asynchrone à l' API Storefront ne soit encore renvoyée. fait d'avoir Suspense ici devrait permettre de le vérifier. Mais dans ce cas, cela ne fonctionne pas. Je vais mettre cette déclaration de retour. C'est peut-être une solution de piratage, mais cela devrait fonctionner. Je vais le coller ici. Si lines.length est supérieur à zéro, affichons le panier. Si je me rafraîchis ici, cela résoudra notre problème. D'une manière ou d'une autre, nous avons perdu nos articles dans le panier, mais tout va bien. Revenons à notre catalogue ou à n'importe quelle collection. Faites une sélection de produits, puis je cliquerai pour l' ajouter au panier. Maintenant, vous pouvez voir que notre CartBubble fonctionne. Nous avons un article dans notre panier, et si je clique dessus, vous verrez qu'il s' agit de notre snowboard Hydrogen. Si j'en ajoute un deuxième, vous verrez que ce nombre augmentera également. Si j'ajoute un autre snowboard, peut-être celui-ci complet, cliquez sur « Ajouter au panier », vous verrez qu'il sera également ajouté. Si nous entrons ici, vous pourrez voir les trois snowboards que nous avons dans notre chariot. Voilà, les gars. Si nous parcourons nos projets jusqu'à présent, nous avons notre page d'accueil. De toute évidence, nous n'avons rien construit ici. C'est à vous de savoir ce que vous voulez mettre sur votre page d'accueil. Vous pouvez apporter une certaine collection et la présenter de toutes les manières possibles. Nous avons ensuite notre page de catalogue ici, qui répertorie les neuf premiers produits notre boutique, quelle que soit la collection dans laquelle ils se trouvent. Si nous cliquons sur l'un d'entre eux, le produit sera redirigé vers ce produit. De même, si nous accédons à une collection spécifique comme la collection freestyle, puis que nous cliquons sur l'une de ces pages de produits, nous pouvons faire une sélection de variantes, l' ajouter au panier. Accédez au chariot ici. Comme vous pouvez le voir, cette sélection a été enregistrée. Je peux augmenter la sélection. Je peux le retirer du panier en le ramenant à zéro, puis je dirais qu'il n'y a aucun article actuellement dans le panier, ou si je dois ajouter un autre produit au panier à nouveau, ajouter ce 154 centimètres un et augmentez la quantité, vous verrez qu' elle augmente également ici. Une amélioration pour cette application serait de travailler sur les états de chargement et intégrer quelque chose d'un peu plus agréable pour le suspense. heure actuelle, nous n' avons pas de solutions de repli, mais vous pouvez intégrer des états de chargement assez intéressants ici. Bien entendu, nous pouvons également passer commande en cliquant sur ce bouton ici, et notre sélection sera directement transférée au paiement. À ce stade, nous quittons notre application pour accéder directement à la page de paiement hébergée sur la boutique Shopify. On y va. Nous pouvons également supprimer cet article en appuyant sur ce bouton. Comme vous pouvez le voir ici, la création de CartPage prend un peu de temps, mais les fonctions du panier sont assez bien gérées par tous ces composants et hooks disponibles dans Shopify Bibliothèque d'hydrogène. Pour résumer tout ce que nous avons fait dans le cadre de ce projet, je tiens à souligner les thèmes que j'ai soulignés au début de ce cours avant même de passer à l'aspect pratique. Si nous revenons à ce qui est simple ici, tous ces éléments se sont finalement révélés très élaborés. Mais par exemple, nous avons un élément de la grille de produits, par exemple, un composant côté client que nous transmettons dans un produit. Si nous examinons nos itinéraires de collecte, nous envoyons une requête à l'API Storefront, saisissons toutes les informations dont nous avons besoin via une requête, transmettant à chacun de ces composants de la carte produit, et en utilisant des crochets en cours de route. Si jamais vous êtes perdu ou confus, vous pouvez rechercher l' un de ces crochets ou composants dans la documentation. Si vous importez depuis React, vous pouvez consulter la documentation de React. Si vous importez depuis Hydrogen, vous pouvez consulter la documentation Hydrogen. Vous pouvez littéralement accéder à la documentation sur l'hydrogène. Il s'agit de l'API StoreFront. Mais je devrais pouvoir faire une recherche à partir d'ici, UserOuteParams, accéder à API Hydrogen, cliquer ici, et vous pourrez en savoir plus sur les différents hooks et composants que nous avons utilisés dans cette classe. Dans la vidéo suivante, je vais vous montrer comment déployer cette application sur votre boutique Shopify. Cela impliquera de se connecter à l'API Storefront. Je vais donc mettre à jour nos informations d'identification ici, puis nous les publierons en direct sur votre boutique Shopify. De toute évidence, nous pouvons apporter de nombreuses améliorations ici. J'ai laissé ce troisième lien ici, et ce sera pour la vidéo bonus que nous allons ajouter à un blog. Mais pour l'instant, ce sont les principaux composants dont vous avez besoin pour avoir une vitrine Shopify fonctionnelle. Dans la vidéo suivante, nous allons le déployer sur notre boutique Shopify. Je te verrai dans celui-ci. 13. Déployer notre Storefront personnalisé: Bienvenue les gars. Dans cette leçon, nous allons apprendre à déployer notre vitrine d'hydrogène Shopify sur Oxygen, qui est la plateforme d'hébergement fournie par Shopify, laquelle nous pouvons accéder directement sur notre Boutique Shopify via le canal de vente d'hydrogène. Malheureusement, au moment de l'enregistrement, l'oxygène n'est disponible que pour les forfaits Shopify Plus. Mais si vous regardez cela dans le futur, il se peut qu'il soit déjà disponible pour d'autres forfaits Shopify. s'agit d'une toute nouvelle fonctionnalité, donc je suppose qu'ils ne font que la déployer dans les boutiques Shopify Plus, car il s' agit du niveau de rémunération le plus élevé, nous aurons la priorité sur cette toute nouvelle fonctionnalité. Malheureusement, si vous arrivez sur cette page documentation et que cet avertissement est toujours là, si vous êtes sur quelque chose sous Shopify Plus, alors malheureusement nous le sommes, cela ne s'appliquera pas à vous. Vous devez utiliser une solution d' hébergement différente si vous décidez de déployer une vitrine d'hydrogène. Heureusement pour moi, Shopify m'a permis de créer une boutique avec des canaux de vente à hydrogène, ce qui me permet de démontrer cette fonctionnalité. Mais je veux juste vous montrer que dans certains magasins, vous ne pourrez pas y accéder. Par exemple, sur mon atelier de test d'origine, l'atelier test Chris. Si je vais ici dans les canaux de vente et que je clique ensuite sur tous les canaux de vente recommandés. C'est ici que se trouverait le bouton pour installer l' hydrogène si j'étais sur Shopify Plus ou, dans le cas de cette boutique, l' avais activé par Shopify. Malheureusement, je ne peux pas l'ajouter sur ce magasin, mais comme je l'ai mentionné ici sur Chris testing shop 2 , un magasin que j'ai créé spécifiquement pour l'hydrogène. Si je clique sur les canaux de vente et que je passe dans les canaux de vente recommandés, n'apparaîtront plus ici car ils sont déjà installés. Mais avant de l'installer, il était possible de l'ajouter ici. Vous pouvez maintenant voir que j'ai un canal de vente d'hydrogène ici. Si vous êtes sur Shopify Plus, vous devriez pouvoir accéder aux canaux de vente, aux canaux vente recommandés et les ajouter ici, puis vous aurez cet élément de menu ici. Malheureusement, si vous êtes tout le monde au moment de l'enregistrement, vous ne pourrez pas le faire. Je vais fermer celui-ci, on ne peut pas y faire d'hydrogène. Permettez-moi d'aborder le canal de vente d'hydrogène. Maintenant, ce que nous pouvons faire, c'est retourner à la documentation et suivre. Je l'ai fait et j'ai eu quelques problèmes. Ce que j'ai fait, c' est découvrir ce qui fonctionne et je vais juste vous le montrer dans cette vidéo. Si je retourne ici pour accéder à mon canal de vente d'hydrogène, vous pouvez voir que j'ai fait un test d'hydrogène ici, mais ce que nous allons faire, c'est créer une nouvelle vitrine. Tout d'abord, je souhaite revenir à mon éditeur de code ici, et je souhaite apporter quelques modifications. Tout d'abord, je veux créer une branche de production, et c'est la branche que nous allons déployer dans notre boutique Shopify. Je vais entrer ici, créer une nouvelle branche, appeler cette branche production. Ensuite, la prochaine chose que nous allons vouloir faire est de modifier ces informations d'identification pour notre véritable vitrine d'hydrogène Shopify. La méthode habituelle consiste à examiner nos applications privées, qui se trouvent actuellement dans les paramètres, les applications et les canaux de vente. Ensuite, ici pour développer des applications. Comme vous pouvez le voir ici, j'ai accès à l'API Storefront en tant qu'application personnalisée. Je vais juste le démontrer rapidement, je vais créer une application et je dirais l'accès à l'API Storefront. Ensuite, je vais simplement mettre Skillshare ici pour le différencier. Cliquez sur « Créer une application ». Ensuite, il me suffira de cliquer ici pour configurer les étendues de l'API StoreFront. Je vais juste cocher toutes les cases ici. Ensuite, je peux cliquer sur le bouton vert de sauvegarde. Après cela, je peux cliquer sur « Installer l'application », puis sur « Installer ». Ensuite, sous les informations d'identification de l'API, j'aurai mon jeton d'accès à l' API Storefront pour pouvoir le prendre et le mettre ici. Mais ce qui se passera lorsque nous déploierons notre canal de vente d'hydrogène c'est que nous obtiendrons automatiquement un jeton d'accès à l'API de vitrine. Je vais vous montrer que dès maintenant, si nous passons au canal de vente d'hydrogène, cliquez sur « Créer une vitrine ». C'est ici que nous pouvons créer un tout nouveau dépôt d'hydrogène. Je ne vais pas faire ça. Je vais connecter un dépôt existant car nous avons, bien sûr, déjà installé notre projet sur GitHub. Je vais cliquer sur « Connecter » un dépôt existant, sélectionner « Mon compte », puis trouver ce référentiel sous la catégorie Hydrogen Class Storefront. Maintenant, il convient de noter que vous devrez configurer l' intégration à GitHub. Je l'ai déjà fait, donc cela apparaît sans avertissement. Mais si ce n'est pas le cas, je vais mettre une capture d'écran sur votre écran tout de suite pour que vous puissiez voir qu'une boîte d'avertissement s'affiche pour vous demander des autorisations. Vous devrez installer l'application Shopify GitHub sur votre compte GitHub , puis activer certaines autorisations pour les personnes qui ont utilisé l'intégration de GitHub pour le développement de thèmes, c'est exactement la même application Shopify GitHub. Cela ne nécessite que quelques autorisations supplémentaires. Une fois que vous aurez activé l'application et accordé ces autorisations, vous pourrez consulter votre dépôt et cliquer sur ce bouton vert pour vous connecter. Avant de faire cela, je tiens simplement à souligner que la branche de production doit être principale ou principale. C'est vraiment embêtant pour moi parce que j'aime la branche de production soit une branche distincte appelée production. Mais par défaut, ici sur l'hydrogène et ils ne vous permettent pas de le modifier pour le moment, il sélectionnera automatiquement la branche principale ou je pense que la branche principale si vous n'avez pas de branche principale comme branche branche de production. Si vous avez la version de production de votre application sur votre branche principale ou principale, ce sera très facile pour vous. Mais si j'aime bien ma branche de production, une branche distincte appelée production, il y aura quelques étapes supplémentaires . Prenez note de cela. Je vais maintenant appuyer sur le bouton vert Connect et cela va charger cette nouvelle vitrine d'hydrogène. Comme vous pouvez le voir ici, nous venons d'avoir une nouvelle vitrine. C'est ce qu'on appelle simplement une vitrine de classe hydrogène. Comme vous pouvez le voir ci-dessous, une branche d'aperçu est en cours de déploiement. Je vais juste attendre que ça se termine et ensuite nous y jetterons un œil. C'est terminé maintenant, et si je clique sur cette URL d'aperçu, vous verrez que la branche principale est déploiement et qu'elle extrait les en cours de déploiement et qu'elle extrait les informations d'identification de ma vitrine. Le nom réel de cette boutique, et non le nom de l'aperçu de Shopify. Maintenant, certaines choses se passent dans les coulisses de cette région et je tiens à les mentionner ici. Si nous abordons cela ici, vous pouvez voir qu'il a ajouté un fichier spécial appelé fichier flux de travail de déploiement d'oxygène de Shopify. Il l'a fait via le dossier .github slash workflows. C'est important car cela est nécessaire au déploiement de ces branches. Si nous revenons ici et que nous examinons la production, il n'y a aucun déploiement. Si je passe en revue tous les déploiements ici, vous verrez qu'il n'y a rien en production, il y a quelque chose en version préliminaire. Ensuite, si je vais dans les paramètres de la vitrine, vous pouvez voir qu'il y a une branche de production ici, mais si je clique dessus, nous allons obtenir une page 404. Maintenant, comme je l'ai dit, je n'aime pas que ma branche de production soit sur master, donc je vais créer un autre environnement de production. Mais tout d'abord, je vais mettre à jour et publier cette branche de production notre compte GitHub afin que nous puissions réellement la connecter. Maintenant, comme je l'ai déjà mentionné, cette vitrine d'hydrogène va nous générer un jeton d'API de vitrine. Nous pouvons l'utiliser plutôt que de créer une application privée. Ce que je vais faire, c'est remplacer le jeton de vitrine ici par celui qui se trouve dans les paramètres de notre vitrine. Ensuite, bien entendu, le domaine de la boutique sera Chris-Testing-Shop-2.myshopify.com. Malheureusement, je ne peux pas le copier directement, donc je vais juste le taper. Je vais juste le copier et m' assurer que cela fonctionne. Oui, c'est la bonne adresse. Super, nous avons donc mis à jour nos autorisations ici, et je vais cliquer sur « Enregistrer » là-dessus , puis je vais valider ces modifications, évidemment. Étape, le fichier de configuration Update Hydrogen sera le message de validation, puis je cliquerai sur « Commit ». Ensuite, je cliquerai ici pour publier. Maintenant que j'ai poussé cette branche et qu' elle se trouve sur notre compte GitHub, je peux aller dans « Ajouter un environnement ». Je vais sélectionner la branche de production. Voilà et je vais appeler cette production, production, juste pour la différencier de l'autre branche de production. Malheureusement, je ne peux pas renommer les autres. Celui-ci sera simplement la production et entre parenthèses la production parce que c'est le nom de la branche elle-même. Je vais le rendre public et je vais cliquer sur « Enregistrer ». Maintenant, si j'y retourne, vous pouvez voir que nous avons un deuxième environnement ici. Mais si je clique sur l'URL, nous allons avoir le même problème, cette erreur 404. La raison en est qu'il ne se déploie pas réellement. Si je reviens ici et que je passe en revue tous les déploiements, vous verrez en avant-première que nous avons un déploiement. En production, pas de déploiement, et dans le cadre de notre déploiement ou environnement de production personnalisé , il n'y a pas de déploiement. Maintenant, la différence entre ceux-ci et celui-ci est que Shopify a ajouté ce fichier de flux de travail de déploiement d'Oxygen. Nous allons le faire pour nous-mêmes également. Ce que je vais faire, c'est me diriger vers mon dépôt GitHub. La voici, la devanture de Christopherdodd/ Hydrogen Class. Pour être clair, les gars, c'est mon dépôt, donc j'y ai accès et je suis capable créer une branche de production ici pour vous, vous voudrez créer un fork ou autre dépôt et une branche de production à ce sujet. ne s'agit pas du projet GitHub littéral que vous allez déployer sur votre boutique. Je voulais juste que cela soit clair. Mais si nous regardons à l'intérieur et que nous utilisons la mienne comme exemple, si je vais ici pour regarder les différentes branches, je peux en voir une plus bas, elles ont ajouté une nouvelle branche, et voici notre branche d'aperçu. Si je regarde à l'intérieur, tu peux voir que c'est basé sur Master. Mais ce qu'ils ont fait, c'est qu'ils ont ajouté un fichier de flux ici et voici nos paramètres de déploiement ici. C'est ce qui est affiché dans cette URL d'aperçu ici. Shopify ne le dit pas très clairement, mais c'est essentiellement ce qui se passe. Ce que nous allons faire, c'est prendre ce dossier. Nous avons juste besoin de prendre note du chemin parcouru. C'est .Gitthub/Workflows , puis nous y avons mis ce fichier. Je vais cliquer ici pour obtenir le fichier brut. Ce que je vais faire est légèrement hors écran. Je vais aller dans le menu Fichier. Cliquez sur « Enregistrer la page sous ». Ensuite, dans notre projet de vitrine, je vais copier le chemin qui devait créer un dossier .gitthub. Cela va nous avertir que les points sont réservés au système, ce qui signifie que nous ne pourrons pas voir ce dossier dans notre Finder, ou je suppose que c'est Windows Explorer sous Windows. Mais nous pourrons le voir dans notre éditeur de code. Ensuite, je vais créer le dossier des flux de travail et y enregistrer ce fichier de déploiement. Je vais m'en sortir. Revenons à cela et si je vais dans mon éditeur de code ici, vous pourrez voir ce changement se produire. Si je passe à l'explorateur, vous pouvez voir que nous avons ajouté ce fichier à ce chemin. Tout ce que nous avons à faire c'est de nous y engager. Je vais passer à l'étape qui ajoute un fichier de déploiement d'oxygène. Je vais appuyer sur « Commit ». Je vais appliquer ce changement au secteur de la production. Une fois que c'est fait, si nous revenons à nos déploiements et que nous passons à la production en production, vous pouvez constater que quelque chose est en train de se déployer en ce moment. Si j'examine l'ensemble, vous pouvez voir que nous ajoutons notre fichier de déploiement d'oxygène à notre branche de production, ici même. Je vais juste attendre la fin déploiement et maintenant vous pouvez voir qu'il a été déployé avec succès . Si je clique sur cette URL ici, voici notre application. Si je vais sur la page du catalogue, vous pouvez voir que cela fonctionne exactement comme nous l'avions fait localement. Je peux plutôt me lancer dans n'importe laquelle de ces planches de surf ou snowboards, ajouter au panier, aller sur la page de mon panier et vérifier. Cela nous mènera à la caisse de nos magasins. Que vous souhaitiez le déployer sur la branche principale ou non, vous devrez tout de même ajouter ce fichier de déploiement d'oxygène afin de pouvoir déployer cette branche. Ici, vous pouvez voir que j'ai créé un environnement personnalisé en utilisant maintenant la branche de production et que nous pouvons accéder à cette URL publique, ce qui est vraiment cool. Si c'est ce que nous voulons pour la branche principale, nous pouvons le faire également. Sinon, nous avons cette URL d'aperçu ici et cela nous montre exactement ce dont Shopify a besoin pour le déployer correctement. Comme vous pouvez le constater, cela ne figure pas dans la rubrique production car cela suppose que la branche principale va entrer dans l'environnement de production. Mais pour moi, je préfère avoir une succursale séparée, car la succursale principale peut être déployée dans différents magasins. J'ai donc souvent des succursales de production différentes pour différents magasins. Mais il existe bien sûr un code commun qui passe entre les magasins lorsque je travaille avec des clients. C'est pourquoi j'aime avoir la branche principale comme code commun à toutes les branches de production, puis avoir une branche de production distincte pour chaque magasin. C'est une petite explication de la raison pour laquelle j' utilise la production comme branche de production. Mais pour une raison quelconque, Shopify considère que le master est la branche de production. Tu y vas. Nous avons maintenant notre environnement de production et notre URL publique pour notre vitrine Hydrogen. Maintenant que nous savons comment déployer notre vitrine vers Oxygen, si nous utilisons Shopify Plus ou tout autre plan, nous espérons qu' il sera disponible à l'avenir. Passons maintenant à la leçon bonus. Nous allons prendre du recul, appuyer sur ce que nous avons déjà créé et ajouter à un blog. Je te verrai dans la prochaine vidéo. 14. Bonus : ajout d'une section Blog: Très bien, comme je le fais souvent dans mes cours Skillshare, j'ai ajouté une dernière vidéo bonus, ce qui n'est pas essentiel, car nous l'avons vu précédemment, nous avons déjà créé des collections, produits et activé le panier fonctionnalité, ce qui est vraiment tout ce dont nous avons besoin pour créer un magasin fonctionnel de base. Mais pour vous familiariser davantage avec le flux de travail dans Hydrogen, je vais vous montrer comment créer une configuration de blog ici afin que nous puissions également extraire les articles de blog de la boutique. Ce que j'ai fait, c'est j'ai créé une branche de production la dernière fois, mais je suis revenu à l'ancienne configuration Hydrogen, donc nous utilisons à nouveau les articles de blog de la version préliminaire d'Hydrogen, ce sera après deux vidéos d'il y a deux, pas la dernière j'avais juste besoin d'y faire référence. Nous utilisons Hydrogen Preview, et ne nous connectons pas à mon magasin en particulier. Ce que nous voulons faire, c'est le numéro 1, créer une mise en page de blog, puis le numéro 2, créer un itinéraire pour tous les différents articles de ce billet de blog. Permettez-moi d'ouvrir à nouveau GraphiQL parce que je veux juste vérifier que nous avons des blogs sur cette boutique Shopify en particulier Je vais donc créer des blogs, répertorier nos blogs et créer des nœuds et des identifiants. Si je lance cela, vous devez fournir au moins le premier ou le dernier, donc disons simplement que les cinq premiers blogs, il ne devrait sûrement pas y avoir plus de cinq blogs. Il y a deux blogs sur la boutique d'exemples d'hydrogène de Shopify, et il s'agit d'actualités et de journaux. Cela fonctionnera, donc si nous revenons ici, je vais revenir à notre projet je vais revenir à notre projet ici et créer un itinéraire de blog. Dans notre dossier de routes ici, nouveau serveur point de blog de fichiers, vraiment désolé, je dois en faire un serveur point de blog capital point JSX. Ensuite, nous allons exporter le blog des fonctions par défaut, puis renvoyer un peu de JSX. Ne cliquez pas encore sur « Enregistrer » car il y a une erreur car nous n'avons pas de JSX dedans. Importons ensuite certaines des choses que nous allons avoir besoin d'utiliser, nous devrons, bien sûr, utiliser la requête use shop, car nous allons interroger l'API Storefront pour obtenir des informations sur l'article de blog. Je vais importer CacheLong et GQL, encore une fois, ne cliquez pas encore sur « Enregistrer » parce que ça va casser, puis j'importerai suspense depuis React, j'importerai la mise en page depuis notre serveur de points de mise en page de composants et c'est ce que je vais faire pour l'instant. Ce que je vais faire, c'est simplement tester une requête ici dans notre GraphiQL, donc je vais accéder au blog de la revue. Créons donc une requête nommée Je vais nommer cette requête articles, et alors nous pouvons accéder au blog via son pseudo qui, comme nous pouvons le voir ici, nous avons le choix entre deux options, journal ou actualités, faisons un journal et puis ici, accédons désolé, aux articles, en sautant un peu d'avance. Nous devons mettre le paramètre ici, donc passons aux neuf premiers, et saisissons des nœuds ici, puis sur nœuds, nous pouvons sélectionner le titre de chaque article, le handle de chaque article dont nous aurons besoin la navigation, puis l'image, donc l'URL et le texte alternatif. C'est tout ce dont nous aurions besoin si je clique sur « Exécuter » dessus, vous verrez que nous récupérerons les 1, 2, 3, 4 premiers donc il n'y a que quatre articles, même si nous en avons spécifié neuf s'il y en a moins de neuf, c'est ce que nous obtenons. Mais la bonne nouvelle est que tout a fonctionné alors revenons à notre projet ici, et je vais créer cette requête, la requête const est égale à GQL puis collons la requête ici, je vais juste laissez l'indentation comme ça et j'ai été idiot et j'ai cliqué sur « Enregistrer » sans rien mettre dans notre relevé de retour Nous allons donc devoir redémarrer notre serveur, ce n'est pas grave. Avant cela, cependant, je vais utiliser le hook de requête use shop Je vais donc récupérer les données de la requête use shop, analyser la requête comme telle, utiliser cachelong, comme nous l'avons fait précédemment, preload true et puis en dessous, je vais faire const. En fait, avant de faire cela, avant de structurer , faisons ce que nous faisons habituellement et examinons cet objet de données. J'ai juste besoin de mettre une forme de JSX ici sinon, le serveur ne fonctionnera pas, donc je vais juste le faire et ensuite faisons npm run dev ici, donc c'est opérationnel maintenant, allons-y actualisez et passons à notre blog, nous avons un problème ici, aucun contexte Shopify n'a trouvé cela ressemble à une de ces erreurs étranges que nous pouvons corriger en utilisant yarn dev, dash dash force, refresh et comme vous peut voir que toutes les erreurs ont été supprimées. Ce que nous recherchons cependant, c' est ce qu'il y a dans l' objet de données et, comme vous pouvez le voir ici, à l'intérieur des objets de données, nous avons à nouveau des données, nous avons à nouveau un blog, puis nous avons des articles qui contiennent un objet. donc nous allons procéder à la déstructuration ici, afin d'aller à partir des données que nous allons entrer, accéder aux données, puis à l'intérieur des données, accéder au blog en tant que blog. Ensuite, ce que nous pouvons faire est de simplement bloguer le journal de la console, pour nous assurer que nous avons trouvé le bon. Si nous regardons à l'intérieur, vous pouvez voir que nous avons des articles et à l'intérieur des articles, nous avons une liste de nœuds sympas. Ce que nous allons faire, c'est entrer ici et mettre le titre du blog, mais nous n' allons pas le faire dans cette vidéo en particulier, en fait, nous l' utilisons simplement pour récupérer les articles, donc je vais y aller un pas de plus dans la structuration et la saisie des articles, en fait, je ne pense pas que nous ayons besoin de mettre les deux-points là-dedans et puis si je me contente de refaire le journal de la console, vous n'avez pas besoin de faire ces journaux de console , je suis juste que j'ai les bonnes données ici. Ici, vous pouvez voir que oui, vous avez la liste des nœuds ici. En fait, entrons et sortons des articles sur les nœuds, actualisons ici et maintenant cela supprime les nœuds du premier plan, donc nous n'avons que des articles, nous avons un tableau de simples objets d'article. C'est tout ce que nous recherchons, allons-y et insérons ici en tant que composant parent, la mise en page dont nous l'avons déjà importée, puis parce que nous accédons à des données asynchrones, mettons un suspense, je vais mettre tout cela dans un conteneur, puis j'ai déjà créé une classe pour la grille d'articles qui sera très similaire à la grille des produits et puis très similaire à la grille des produits, je vais parcourir tous les articles, exécuter une carte là-dessus, puis pour chaque article, ouvrir ce retour et nous n'avons pas besoin de mettre le retour ici, Je pense que nous pouvons simplement mettre un div ici, ajouter du JSX ici, et retournons le titre de l'article. parti et nous avons accès au titre de l'article ici, donc si je clique sur « Enregistrer » dessus, rafraîchissons-le ici, rien ne passe pour le moment, jetons un coup d'œil. La grille des articles arrive, mais pas le titre de l'article ici, et peut-être que je n' aurais pas dû le mettre là. Allons-y pour voir ce qui se passera, oui, donc voilà, nous avons quatre plongées avec tous les titres. Nous pourrions faire cette liste comme je vous l'ai déjà montrée, mais nous allons les transformer en grilles très bientôt, alors laissez-les comme des plongeurs. Je peux créer un composant séparé dans mon dossier de composants ici, mais je ne vais l'utiliser que sur cette route de blog en particulier, donc je vais juste le mettre ci-dessous, et je vais pour l' appeler article grid item et je vais passer en revue l' article en tant qu'accessoire, puis retournons exactement le même JSX que celui que nous avons ici, et ensuite je vais le remplacer ici avec élément de la grille d'articles. Ensuite, la seule chose que nous devons faire est passer l'article en tant qu'accessoire et cela le transmettra directement ici, que nous pourrons ensuite utiliser dans notre JSX ici. Cliquez sur Enregistrer dessus et nous devrions obtenir le même résultat, ce que nous faisons. Ce que je vais faire, c'est ajouter cette classe ici pour lui permettre d'utiliser notre élément de grille d'articles CSS est le nom de la classe. Ensuite, nous allons insérer deux liens ici. L'un est un lien vers l'image et l'autre un lien vers le titre. Avons-nous importé le lien et l'image ? Non, nous ne l'avons pas fait. Importons un lien et une image à partir de l'hydrogène. Ensuite, je vais mettre un composant de lien ici. Je vais ajouter une chaîne ici. Nous allons imbriquer l' article dans un parcours de blog. Comme nous l'avons fait pour les produits, utilisez le nom de l'article comme URL. Nous allons configurer cet itinéraire dans une seconde. Je vais lui donner un nom de classe du conteneur d'images. Ensuite, à l'intérieur, configurons notre composant image. Tout ce que nous avons à faire est de passer par l'image de l'article et le composant image de Shopify gérera le reste, à l'exception de alt , que nous devons placer ici, article, image, alt, texte. Cool. Nous ne voulons pas qu'il se ferme comme ça, nous voulons qu'il se ferme automatiquement. Balayer. Voyons voir si cela fonctionne. Oui, nous avons reçu ces images. Magnifique. Ici, je vais créer un autre composant de lien, renvoyant au même endroit. Je vais lui donner un nom de classe pour le CSS de article-grid-item-title. Fermons ça pour que nous puissions voir. Fermez-le, puis placez le titre de l' article entre ces balises de lien. Gardez ça et alléluia, nous avons notre grille d'articles ici. Si je clique sur l'un d'entre eux, il va simplement apparaître une page blanche parce que nous n'avons pas encore défini cet itinéraire. Configurons-le dès maintenant. Tout comme nous l'avons fait pour les collections et les produits, nous suffit de créer un nouveau dossier appelé blog. Ensuite, comme nous l'avons fait pour les collections et les produits, configurez une route dynamique [handle] .server.jsx. C'est ici que nous allons effectuer l'essentiel de notre travail pour cette leçon. Exportons une fonction par défaut. Nous allons appeler cet article composant et nous allons le parcourir en tant qu'accessoire. Dans notre déclaration de retour, je vais juste sortir notre fichier de mise en page, puis notre fichier de mise en page, puis nous verrons ce qu'il faut y mettre dans un instant. Nous devons importer certaines choses ici. Je vais étendre cela à plusieurs lignes, comme nous l'avons fait tout au long de ce cours et importer quelques éléments de la bibliothèque d'hydrogène de Shopify. Je vais avoir besoin d' utiliser ShopQuery. Je vais avoir besoin de UseLocalization. Je vais m'intéresser au composant SEO car à quoi avoir un bon article s'il n'est pas optimisé pour les moteurs de recherche. Je vais récupérer le GQL et je vais récupérer le composant image. Je vais également importer du suspense depuis React et importer les composants des mises en page, bien sûr. Je pense que nous devons revenir deux fois en arrière, en accédant aux composants puis à layout.server. On y va. Ensuite, nous allons créer la requête. Faisons-le dans l'interface graphique, afin de pouvoir corriger les erreurs avant de l'exécuter. Nous profitons également de la saisie automatique de cette façon. Je vais me débarrasser de cet ancien article et appelons simplement cet article de requête au singulier. Avant d'ouvrir cela, en fait, nous devons transmettre quelle variable nous allons transmettre ? Nous devons dire que nous allons transmettre une variable appelée handle, qui est le type de chaîne. Ensuite, nous allons cibler le blog ou le journal en question. Ensuite, nous devons spécifier un article par poignée. Il ne s'appelle pas article pour une raison quelconque, il s'appelle ArticleByHandle. C'est assez précis, mais il est évident que nous allons saisir comme paramètre notre handle. Ouvrez-le, puis ici, quels sont les éléments que nous allons avoir besoin de récupérer dans chaque article. Évidemment, le titre, la date à laquelle il a été publié, l'auteur qui est maintenant AuthorV2. Ce qui est en fait une sélection, il suffit de spécifier ce que nous voulons sur cette sélection. Je veux juste le nom puis l'image, qui est évidemment une sélection. Nous allons récupérer l'URL et le texte alternatif, puis le contenu HTML, qui est le contenu de l'article. Évidemment, cela ne fonctionnera pas car nous n'avons pas spécifié la valeur du handle, mais au moins nous avons utilisé un graphique pour nous aider à remplir automatiquement certains de ces champs. Revenons ici. Je vais juste écrire la requête ici sous forme de GQL constant, ouvrir et puis c'est parti. Nous avons codé en dur le fait que nous regardons dans le journal, mais le handle que nous allons transmettre sous forme de variable. À l'intérieur, nous pouvons saisir la poignée que nous recherchons à travers les paramètres, via les accessoires de ce composant. Je vais récupérer le pseudo de l'article et ensuite utiliser ShopQuery, donc const data est égal à UseShopQuery. Cette fois, je vais juste mettre la requête et les variables. Les variables que nous allons parcourir sont simplement le handle. Comme je le fais toujours, je vais enregistrer sur la console les données renvoyées par notre requête. Lorsque nous passons à l'un d'entre eux, nous avons une erreur, nous ne pouvons pas déstructurer le descripteur de propriété de l'article car il n'est pas défini. Nous n'avons pas réellement accès à un objet d'article ici. Jetons un coup d'œil. Nous n'utilisons pas la bonne chose ici. Nous devons utiliser RouteParams. Je suis désolée pour ça. Utilisez RouteParams. Nous n' allons pas le transmettre, nous allons simplement utiliser les RouteParams. Je vais utiliser RouteParams ici et retirer la poignée. Rafraîchissons. Oups. Revenons à notre blog. Cliquez sur l'un d'entre eux. Maintenant, nous avons une erreur de l'API Storefront, le descripteur de variable n'a pas été fourni. C'est probablement parce que je n'ai pas utilisé les crochets ici pour l'invoquer. Rafraîchissons-nous ici. Oui. Maintenant, nous n'obtenons aucune erreur. Laissez-moi y jeter un œil. Nous faisons défiler vers le bas. On y va. Nous obtenons le journal des données de la console ici et il nous renvoie les données article par identifiant, puis objet à l'intérieur. En fait, nous pouvons simplement le copier et l'utiliser pour notre déstructuration. Évidemment, nous n'avons pas besoin d'utiliser object ici, mais nous pouvons extraire l'article par handle , puis notre console enregistrer l'article par handle. Rafraîchissez-vous ici. Si je l'ouvre, vous verrez que cet objet provient du titre, de PublishedAt, de l'AuthorV2, l'image et de son contenu. Très cool. Cela fonctionne maintenant, notre requête d'API Storefront. Maintenant, nous avons ce truc appelé ArticleByHandle. Je n'aime pas vraiment ArticleByHandles, donc je vais juste l'échanger. Je vais juste appeler ça un article. Je ne sais pas pourquoi ce doit être ArticleByHandle. Ensuite, nous utiliserons l'article ici. Ce que je vais faire, c'est ouvrir un suspens pour le composant SEO, disons taper un article et ensuite les données ne seront que l'article. Je veux en faire une étiquette à fermeture automatique. Ensuite, nous allons créer cette page d'article, donc je vais créer un développement avec la classe de l'article, de page et du conteneur. Ensuite, je vais aborder cette question en deux parties. Je vais avoir l'en-tête de la page de l'article, puis l'article lui-même, en-tête de la page d' article est le nom de la classe. Je vais passer par H1, le titre de l'article. Je vais créer une plage ici pour la date dont nous avons encore besoin pour la formater. Mais disons simplement que c'est un article. Passons à la version non formatée pour l'instant. PublishedAt, nous allons séparer cela par un point et placer l'article AuthorV2.name ici pour le nom de l'auteur, puis après l' en-tête, nous allons créer, ouvrir une balise HTML d'article ici, c'est là que nous allons mettre l'image de notre article principal. Je vais passer en revue l'article.image, puis dans les textes alternatifs, l' image de l'article, le texte alternatif. Balise à fermeture automatique pour l'image, puis nous allons faire le div pour introduire le code HTML. Nous allons voir à nouveau cet attribut DangerouslySetInnerHtml, et nous avons juste besoin de souligner, de souligner HTML est égal et ensuite pas égal à deux-points. Ensuite, insérez le contenu HTML provenant de l'objet de l'article, puis je vais lui donner un nom de classe pour mise en forme du corps de l'article. Cool. Terminons cette division et voyons ce qui se passe maintenant lorsque nous exécutons cette page. Regarde ça. Nous avons le titre, nous avons la date que nous devons encore formater. Nous avons le nom complet de l'auteur, puis nous avons cette image ici, qui est l'image principale. Si je ferme, vous pouvez voir qu'il s'agit de la première partie, puis du contenu de l'article. C'est à peu près terminé. La seule chose que nous devons vraiment faire est de corriger cet horodatage ici. C'est sacrément moche. Évidemment, nous ne pouvons pas le laisser comme ça à l'utilisateur, et au cas où il n'y aurait pas d'article, je voudrais également mettre en place une solution de rechange. Laissez-moi le faire d'abord. Je vais juste le mettre dans une solution de repli. S'il n'y a pas d'article, revenons avec nos composants de mise en page. J'utilise toujours le récipient. Nous allons simplement mettre un div avec l'article introuvable, et cela me rappelle également d'intégrer quelque chose à notre composant d'application que j'ai mentionné dans les leçons théoriques, mais que je n'ai pas implémenté dans ce domaine en particulier projet qui introduit le composant routes et crée une route NotFound. Nous pouvons utiliser ce caractère générique sélectionné ici. Tout ce qui passe par les routes des fichiers et arrive ici, nous allons simplement apporter un composant NotFound. Désolé, c'est une tangente, mais j'y ai juste pensé quand j'ai créé cette solution de repli pour la page de l'article, et puis en dessous, faisons-le ici. Fonction introuvable. s'agit juste d'un petit retour de page 404 sans mise en page, que je crois que nous devrons importer la mise en page à partir des composants, layout.server. Ensuite, comme nous l'avons fait pour la page de l'article, un conteneur avec un div à l'intérieur qui indique simplement que la page n'a pas été trouvée. Maintenant, si je passe à un article qui n'est pas trouvé, alors bonjour, ajoutons quelque chose de aléatoire comme ça. Il reviendra article introuvable. Si nous suivons la route racine et que nous saisissons quelque chose aléatoire, comme bonjour, cela indiquera que la page n'a pas été trouvée. C'est un petit bonus pour vous. Mettons à jour le lien 3. Je suis en train de rebondir un peu, mais c'est la vidéo bonus. Donnez-moi un peu de mou, les gars. Dans layout.server, nous allons mettre un lien vers le blog. Débarrasse-toi de ce vilain lien 3, et si je clique sur « Blog », ça nous mènera au blog, et ensuite si je clique ici, nous arriverons à l'un de nos articles, et donc oui. Comme je le disais avant de passer à cette tangente, nous devons formater cette date, qui est un peu plus compliqué que nous ne le souhaiterions, mais nous introduisons, utilisons la localisation ici, qui est un crochet à hydrogène. Nous pouvons utiliser la structuration pour extraire certaines choses du hook d'utilisation de la localisation. Ce que nous allons obtenir, c'est du langage, de l'ISOcode. LanguageCode est ainsi que nous allons l'appeler, puis country va extraire l'ISOcode du pays et l'intégrer dans sa propre variable appelée CountryCode. Ce sera pour la prochaine fonction que nous utiliserons. Nous allons créer une date formatée, et nous allons créer nouveaux objets internationaux au format date-heure. Il s'agit d'une spécification au sein de JavaScript. ne s'agit pas de réaction ou d'hydrogène. Ensuite, nous allons ouvrir une chaîne ici, en insérant les deux variables que nous venons créer et que nous venons de retirer de la localisation des utilisateurs. Le premier LanguageCode, puis le tiret CountryCode, puis le prochain argument ira et placera un objet numérique pour l'année, le mois et le jour. Tout dépend de vos préférences personnelles. Mais nous allons avoir une année numérique, un long affichage pour le mois, ce qui, je pense, fonctionne comme si c'était janvier, cela produirait complètement janvier, et puis le jour sera numérique aussi, ce qui est logique. Ensuite, nous allons exécuter des formats sur cet objet nouvellement créé, puis l'exécuter via un nouvel objet, Article.PublishedAt. Cela semble assez mouvementé, mais en gros, nous ne faisons que convertir cette date PublishedAt en ce format de date international. Maintenant que nous avons cette date formatée, nous pouvons simplement descendre ici et remplacer l'article PublishedAt par la date formatée, et à moins que nous n'ayons fait quelques erreurs ici, ce qui semble être le cas. Qu'avons-nous fait ? Impossible d'accéder à l'article avant l'initialisation. J'ai créé la variable article après avoir écrit tout ce code, donc j'avais juste besoin de la déplacer avant, et puis si je clique sur Enregistrer lors de cette actualisation ici, vous pouvez voir le nom en forme longue du mois qui date du 3 juin 2022 de Ben cell ou de la façon dont vous prononcez son nom, et voici votre article. Si nous consultons d'autres articles de ce blog, vous verrez que cela fonctionne tout aussi bien. C'est un petit bonus pour vous. La page du blog, je pense que cette leçon devrait être une bonne pratique pour vous, parce que, comme je l'ai mentionné plus tôt, nous parcourons comme une séquence de construction encore et encore ces composants, extraient des données de l'API Storefront à l'aide de requêtes pointues utilisées pour récupérer les données que nous voulons dans ces données renvoyées , puis les utiliser dans notre composant. Ensuite, en intégrant certains de ces autres composants et crochets de Shopify, qui nous facilitent la vie. Cela conclut en gros ce cours, les gars. J'espère que cela vous a plu. toutes vos questions, comme toujours, laissez-les ci-dessous, mais passons maintenant à la conclusion où nous parlerons de votre projet de classe. Je t'y verrai. 15. Conclusion et projet de cours: Ceci conclut ce cours sur Shopify Hydrogen. Pour votre projet de classe, je vous encourage à créer votre propre vitrine personnalisée en utilisant de l'hydrogène. Pour vous inspirer, vous pouvez vous inspirer de ce que nous avons fait jusqu' à présent dans ce cours et le développer. Vous pouvez créer une galerie de produits pour intégrer davantage de photos de produits depuis le backend, créer un tiroir pour accueillir le panier de l'utilisateur sans qu'il quitte la page produit, ou créer des sections personnalisées pour mettre en valeur les meilleures fonctionnalités de votre produit. Le choix vous appartient. Comme toujours, si vous avez des questions ou des préoccupations, laissez 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, de m'avoir écouté et j'espère vous revoir dans certains de mes autres cours.