Shopify hidrógeno: cómo crear un Storefront de comercio electrónico sin cabeza con React

1. Introducción: Hola, alumnos y bienvenidos a esta clase de Shopify Hydrogen. Marco basado en React de Shopify para crear escaparates personalizados. Soy Christopher Dodd. Soy desarrollador web freelance y top teacher aquí en skillshare.com. Habiéndome especializado en el desarrollo web front-end en la plataforma Shopify durante los últimos tres a cuatro años, he pasado mucho tiempo personalizando escaparates con uno de estos, un tema de Shopify. Pero a mediados de 2022, Shopify lanzó un nuevo canal de ventas en la plataforma Shopify, permitiendo a los comerciantes albergar un proyecto React en su tienda Shopify. Este nuevo canal de ventas de Hydrogen emparejado con el marco de Hydrogen de React Hooks, componentes y utilidades construidos específicamente para Shopify escaparates ofrece una nueva forma de personalizar el online experiencia de tienda para los clientes y una nueva forma de desarrollo para desarrolladores. En la clase de hoy, vamos a pasar por el marco de Shopify Hydrogen, aprender sobre los conceptos clave del entorno, construir nuestro propio escaparate simple usando el sistema. Te mostraré cómo puedes instalar tu nueva app en la tienda Shopify. Para aquellos de ustedes que estén listos para aprender este paradigma de próxima generación para construir escaparates en Shopify, haga clic en el siguiente video y los veré del otro lado. 2. Conceptos clave: Antes de comenzar a construir nuestro propio escaparate de Hydrogen, es importante que comprendamos un montón de conceptos clave que entran en juego al construir un escaparate personalizado usando Hidrógeno. En primer lugar, cuando digo Hidrógeno, podría estar refiriéndome a dos cosas. La mayor parte del tiempo voy a estar hablando del marco Hydrogen React. Pero cuando en realidad comenzamos a implementar nuestra aplicación Hydrogen en nuestra tienda, el nombre del canal de ventas en Shopify también se llama Hydrogen. Técnicamente el nombre de la solución de alojamiento que Shopify proporciona para los escaparates de hidrógeno se llama Oxígeno, pero aparece en el panel de control de Shopify como Hidrógeno por cualquier razón. Así que tenlo en mente. En cuanto al propio marco de Shopify Hydrogen, está diseñado para situarse encima de una tecnología existente llamada React. Algunos de ustedes ya pueden estar familiarizados y/o hábiles en React, pero independientemente, vamos a repasar brevemente React en el siguiente video. Definitivamente no va a ser una inmersión profunda en React en este curso, pero es importante entender los conceptos básicos de React para poder usar Hidrógeno. El otro aspecto que también es importante entender es cómo vamos a recuperar datos del back-end de Shopify. Esto se hace a través de lo que se llama la API de Storefront, una API que Shopify proporciona para la recuperación de datos relacionados con experiencias orientadas al cliente. La API es lo que se llama una API GraphQL, lo que significa que en lugar de golpear diferentes puntos finales para obtener diferentes bits de datos, hay un único punto final de API al que nuestro proyecto se conectará y solicitaremos los datos específicos que requerimos a través de lo que se llama una consulta, que se parece un poco a esto. Estos conceptos por sí solos podrían ser un curso completamente distinto. Así que en los próximos dos videos echaremos un vistazo a cada uno individualmente y luego hablaré un poco sobre el conjunto de ganchos, componentes y utilidades de Hydrogen que juegan en esta configuración. 3. Reacción: En esta lección muy importante, vamos a repasar algunos de los conceptos básicos de reaccionar. Si ya tienes experiencia con reacciona, puedes sentirte libre de saltarte este video. Pero para el resto de ustedes, permítanme decirles que no deberían tener que hacer un curso completo sobre reaccionar para poder trabajar con hidrógeno. Antes de recoger el desarrollo de hidrógeno, había estudiado un poco de reacción a lo largo de algunos años, pero no es algo en lo que sea particularmente experto en este momento y todavía pude recoger desarrollo de hidrógeno con bastante facilidad. No, no necesitas ser desarrollador reaccione sin experiencia para construir escaparates de hidrógeno. Pero si tienes poca idea a la hora de reaccionar, definitivamente escucha lo que estoy a punto de decirte. Reacciona. ¿Qué es? React es una biblioteca JavaScript para construir interfaces de usuario, pero a menudo se la conoce como framework porque es una alternativa legítima a los frameworks JavaScript como Angular o view, dos marcos muy populares que quizás no hayas oído hablar antes. Quizás se esté preguntando cuál es la diferencia entre una biblioteca y un framework. Básicamente, yo diría que los frameworks son mucho más obstinados. Te obligan a construir aplicaciones de ciertas maneras. Mientras que una biblioteca, solo puedes importar los módulos que te gusten y simplemente usarlos como necesites. Tomemos reaccionar, por ejemplo. Aquí hay un ejemplo de lo simple que puede ser reaccionar. Tengo un patio de juegos reacciona abierto aquí en playcode.io/react. Esto es solo un IDE en línea para probar algunos códigos de React. Todo lo que hice fue ir a esta dirección y ahora tengo una app básica de React. Tengo mi archivo index.html aquí, que esencialmente solo trae el archivo index.jsx a través de las etiquetas de script. Entonces eso se conecta a este div raíz aquí. Si miramos nuestro index.jsx, puedes ver aquí que estamos usando create route on react DOM para conectarlo a ese elemento route y renderizar nuestra app, que está aquí mismo. Algunas cosas sobre las que quiero llamar su atención aquí. Puedes ver aquí qué paquetes estamos usando. Puedes ver aquí estamos usando react y react DOM. Eso es importante tener en cuenta aquí porque react es una biblioteca que se puede usar en una variedad de aplicaciones diferentes. No necesariamente tiene que ser una cosa de desarrollo web front-end. No tiene que ser una aplicación web o un sitio web. También podría ser una aplicación de teléfono nativa. En el caso de React Native. Es por eso que react es un paquete independiente, pero luego puedes usar algo llamado react DOM. Eso es lo que usas para crear aplicaciones web y sitios web. Aplica toda la funcionalidad central de reaccionar con el entorno de nuestro desarrollo web front-end. Lo primero que notarás es que al inicio de prácticamente todos estos archivos JSX son las declaraciones de importación. Como dije, react es muy modular y entonces todo lo que tenemos que hacer para poder usarlo es asegurarnos de que lo estamos importando. En ambos archivos, verás que importas react from react. Eso puede sonar obvio aquí, pero donde esto está buscando es dentro de sus módulos de nodo, vea aquí. Realmente no se puede ver en este navegador de archivos aquí. Pero cuando instalas react en tu computadora y creas un archivo package.json, verás que también creará una carpeta de módulos de nodo, que instalará todos tus módulos de nodo. Veremos eso un poco más tarde si no estás familiarizado con creación de JavaScript o proyectos basados en nodos. Primero lo primero vamos a importar reaccionar. Entonces un patrón común que verás es que vamos a crear un componente funcional aquí mismo. Verás que comienza como una función y luego devolvemos estas cosas con aspecto HTML. Ahora bien, ¿qué es esto de HTML? Esto en realidad se llama JSX. Parece HTML, pero en realidad no es HTML. Lo que está sucediendo es que esto se está compilando en HTML y renderizando en la pantalla aquí. Puedes ver aquí tenemos un H1 Hello React y empezar a editar para ver pasar algo de magia. Esto se ve exactamente como HTML, y está produciendo HTML por aquí. Pero esto no es HTML. Tomemos una pausa rápida en JSX porque es importante y cubrimos algunas cosas con JSX. Lo que voy a hacer y hay suficiente para la app. Pero solo para demostrar JSX, solo voy a crear otro archivo JSX aquí. Podemos llamarlo script.jsx. Quiero mostrarte algunas cosas. Específicamente, quiero mostrarte algunas cosas donde JSX difiere de la sintaxis de HTML. Se ve muy similar como dije, pero no es lo mismo. Aquí hay algunas diferencias. Una de las diferencias es que no hay guiones en JavaScript. Si decimos por ejemplo, sólo voy a pegar en algún código SVG aquí. Puedes ver aquí que no es muy común, pero en algunos elementos HTML podrías tener un guión entre dos palabras para un nombre de atributo. Ahora bien, esto no va a funcionar en JSX. Cuando veas algo como esto, todo lo que necesitas hacer es convertirlo a CamelCase. Voy a simplemente quitar el guión y capitalizar ancho. Ahora bien, si ejecutamos esto, no sé si podemos ejecutar nuestro JSX independiente, déjame copiarlo en nuestra aplicación aquí. Si pongo eso aquí, puedes ver que funciona. Pero si tuviéramos que usar un guión, vamos a obtener una propiedad DOM no válida. ¿Quiso decir esto? Eso es porque no podemos tener guiones en los nombres de atributos en JSX. Esa es una diferencia. La otra diferencia que verás aquí mismo, en lugar de usar class, tenemos que usar className nuevamente en este formato CamelCase. La razón por la cual, es class es una palabra clave reservada en JavaScript. Aquí no podemos usar la clase. Esa es otra diferencia. La tercera diferencia es que si volvemos aquí, puedes ver que aquí tenemos algunos números. Podemos poner expresiones JavaScript en estos atributos en JSX. Si tuviera que quitarle esto, ya son 100. En realidad, queremos ver este renderizado en nuestra pantalla. Probablemente no sea buena idea poner eso como un archivo separado. Vamos a poner esto de nuevo aquí para que podamos verlo renderizado en nuestra pantalla. Sangría un poco aquí. De hecho, podemos poner algunas expresiones JavaScript aquí. Lo que podemos hacer es en vez de 100, otra realmente sencilla para ti la pondremos entre paréntesis aquí. ¿Qué es 100? Es 50 veces por 2. Aquí puedes ver que obtienes el mismo resultado. Podemos poner una expresión de JavaScript aquí. Obviamente, podemos poner en una variable para esto. Si tuviera que ir const x es igual a 50 veces 2, y entonces podemos simplemente meter x aquí. Entonces si yo fuera a veces por 4, puedes ver nuestro círculo. ¿Se está haciendo más grande? La altura debería ser cada vez más grande, pero necesitamos tal vez crear un ancho más grande también. No estoy seguro de lo que está pasando ahí. Pero puedes ver si revisamos ese código, si lo inspecciono, verás que el resultado que viene a través. Aquí está un poco apretado. Aquí vamos. Verás que el resultado que viene a través es de hecho 500 para la altura, que es 5 veces 10. Vamos a ver esto muy a menudo en esta clase. Cuando estamos usando React, vamos a poner a través de expresiones JavaScript y variables en atributos, en props. Esa es una diferencia en comparación con HTML cuando lo estamos comparando con JSX. Otra cosa que quería demostrar en este video era cómo este código JSX termina siendo compilado en funciones de React que luego generan el HTML. No es particularmente importante, pero me gusta que ustedes entiendan lo que sucede detrás de escena. Desafortunadamente, no puedo mostrarte en este ambiente. Tal vez más tarde en la clase cuando ponemos este proyecto o nuestro propio proyecto en un anfitrión local. Pero si pasamos a JSX en profundidad, en la documentación de React, puedes ver si aprendemos más al respecto, lo que realmente está sucediendo es que este código de aquí mismo se compilará en React.createElement, y luego verás todo este código. Lo que podemos hacer si quisiéramos es en lugar de usar JSX, podríamos escribir código así. De esa manera no necesitamos compilar JSX. Pero obviamente, esto es mucho más agradable que escribir un montón de métodos de React como este, y especialmente cuando haces anidación. Si lo anidamos todo un montón de elementos dentro de los elementos, esto se volvería súper desordenado y casi imposible trabajar con él. Es muy útil usar JSX. Pero solo quería hacer nota de que esto no es en realidad lo que hace que llegue a tu navegador. Esto es lo que hace que llegue a tu navegador, y eso es lo que crea estos elementos en tu entorno React. También puedes leer sobre la introducción de JSX aquí. Puedes conocer todo sobre JSX en la documentación oficial de React. Nuevamente, te animo a que hagas esto como vimos, JSX también es una expresión. Esto nos va a mostrar cómo podemos insertar valores dentro de nuestro JSX, especificando atributos, podemos usar variables y otros datos en lugar de simplemente ponerlos como una cadena más bien como lo haríamos en HTML. Al alejar de JSX ahora para hablar más sobre React en general, eliminaré esa variable porque ya no la estamos usando. Hablamos de los insumos antes. Vamos a estar importando React como necesitemos en ambos archivos JSX. Pero luego para crear el DOM virtual, aquí vamos a usar React DOM. En nuestros proyectos particulares que utilizan hidrógeno, no necesitamos usar React DOM. Yo creo que eso es atendido por el hidrógeno para nosotros. Pero como puedes ver aquí, siempre vamos a estar importando cosas de React o de otra biblioteca de React, que para esta clase va a ser React. Entonces, nos van a ver importar cosas del hidrógeno. Entonces lo que obtuviste son tus exportaciones. Como puedes ver aquí, estoy importando React y luego estoy exportando este componente funcional. Ahora bien, ¿por qué lo estoy exportando? Bueno, en realidad lo estoy usando en este archivo index.jsx. Puedes ver aquí que estoy importando ese componente de app desde ese archivo de app. Si lo estoy usando en este archivo, entonces no necesito exportarlo. Pero si quiero usarlo en un archivo diferente entonces voy a necesitar exportarlo. Ahora bien si acabo de exportar sin poner default después de él. Puedo exportar múltiples diferentes aquí. Necesito especificar cuál estoy importando, y poner estos corchetes a cada lado. Estos corchetes aquí están haciendo lo que se llama desestructuración. Si estoy exportando varios componentes dentro de un archivo, que aunque solo exporte uno aquí, no estoy diciendo default. Por lo tanto, tengo que entrar aquí y sacar eso entre estos tirantes. Para mostrarte la diferencia, si solo voy por aquí y porque solo tenemos una exportación, solo puedo poner default aquí. Entonces dentro de aquí, puedo quitar estos, y funciona de la misma manera. Pero si quisiera decir, por ejemplo, crear otro componente aquí, entonces no puedo simplemente hacer default. Digamos que creo una app2, y luego así, gritos, ficha equivocada. Voy por aquí y luego puedo hacer app2. Puedo importar múltiples desde un archivo. Pero si solo estás exportando uno, entonces siéntete libre de eliminar estos, vamos a deshacernos de este ahora, y luego pongamos por defecto aquí. Eso es importante tener en cuenta. Verás los valores predeterminados y no los usados por defecto. Verás que los corchetes y los corchetes no están siendo utilizados. Por eso a veces estás desestructurando y a veces no estás desestructurando. Esas son las importaciones y exportaciones. Obviamente, vimos dentro de este regreso aquí está JSX. Si tuviera que crear otra función como la vi antes, eliminemos ese valor predeterminado aquí. Vamos a llamar a esto un botón personalizado. Puedo acceder a los apoyos de este botón personalizado a través del argumento aquí. Lo que voy a hacer es dentro de este retorno, voy a poner en un botón, misma sintaxis que HTML porque es un elemento HTML. Entonces sólo voy a decir, haga clic en mí, digamos. Entonces aquí arriba, en lugar de este SVG, pongamos en nuestro botón personalizado en Camel Case. Como puedes ver aquí, tenemos nuestro pequeño click me aquí. Ahora, a lo mejor queremos hacer dinámico este campo. Lo que podemos hacer es que puedo poner el texto aquí. Entonces cuando tengo que hacer es jalar a los hijos de los apoyos. Eso va a tirar lo que sea que esté entre estas dos etiquetas. Puedo ir de utilería, niños. Ahí vas. Puedes ver aquí, dar click aquí, o dar click ahora, cualquier cosa que ponga aquí son los hijos de este componente, y así puedo acceder a él a través de sus apoyos. Ahora no vas a ver esto normalmente, lo que verás es la desestructuración utilizada de nuevo. En lugar de props.children, lo que puedo hacer es desestructurar y sacar a los niños inmediato de los apoyos dentro de esta sección de aquí mismo. En lugar de props.children, voy a sacar a los niños de apoyos y luego lo puedo poner ahí. Entonces puedes hacer click aquí. Entonces podrías pasar algunos otros datos. Yo sólo voy a poner aquí un atributo, vamos a llamarlo mensaje, y digo, soy tu mensaje. Ahora tenemos este accesorio al que podemos acceder desde aquí, y todo lo que tenemos que hacer es sacarlo también. Estamos sacando a los niños, vamos a sacar mensaje, y luego solo voy a hacer un simple OnClick. Entonces pongamos un ClickHandler para encontrar mi ClickHandler aquí, ClickHandler. Entonces voy a hacer una simple alerta con el mensaje que pasa por ahí. Ahora si hago clic aquí, verás que recibimos una alerta aquí arriba soy tu mensaje, y eso se pasa por nuestro componente aquí. Los dos accesorios, tenemos nuestros hijos que podemos pasar, y luego podemos pasar cualquier utilería que definamos también. Solo necesitamos sacar eso de nuestro objeto props aquí arriba, y luego podemos usarlo como queramos en nuestro propio componente personalizado. Pasamos bastante por ahí, pero ojalá, ustedes entendieron la esencia. Nuevamente, no necesitamos pasar por toda una clase en React para entender lo suficiente como para comenzar a trabajar con Hydrogen. Pero si estás luchando, claro, puedes investigar cualquiera de estas cosas que no tenga sentido yendo a la documentación de React, o simplemente buscándolo en Google. Honestamente, React es un marco muy popular. Hay tanta información por ahí. Si tienes algún problema, solo empieza a buscar en Google, solo empieza a mirar la documentación específicamente con React, y claro, si haces eso y falla, siempre puedes dejar un comentario abajo con cualquier cosa con la que estés luchando. Antes de pasar a las otras partes que hay que entender antes de empezar a trabajar específicamente con Hidrógeno es, sólo quiero desglosar las tres cosas principales que vamos para importar y usar desde React. Como puedes ver aquí, hemos hecho componentes, pero también podemos importar componentes de ciertas bibliotecas. Eso es lo que vamos a ver cuando empecemos a importar componentes que ya son creados por Shopify para nosotros en Shopify Hydrogen. Eso lo verás muy pronto. Pero entonces, por supuesto, podemos crear nuestros propios componentes como acabamos de hacer aquí. Otra cosa que vamos a importar de React y de Shopify Hydrogen es algo que se llama gancho. Si quieres ir a la documentación, hay una introducción a los ganchos, en algún lugar de aquí. Ganchos, aquí vamos. Aquí hay una sección completa, y puedes leer sobre ganchos. En pocas palabras, los ganchos le permiten usar state y otras características de React sin escribir una clase. Eso puede ser difícil de entender para ustedes, para aquellos de ustedes que no han usado React desde hace tiempo. Pero como puedes ver aquí, podemos importar un gancho común llamado UseSate de React. Veamos en realidad este ejemplo. Si entro aquí, puedes combinar la desestructuración con el objeto total mismo. Aquí vamos. Sólo voy a agarrar UseState, y ahora estoy importando ese Hook de React. Lo que podemos hacer es volver a desestructurar, podemos agarrar la variable de estado y luego la función que la establece, y luego agarrarla de useState pasando en un valor predeterminado de cero. Vamos a agarrar primero esta parte. Ahora dentro de nuestro componente, podemos agarrar un count y un método setCount. Eso es todo lo que necesitamos para crear este botón. Yo reemplazo mi botón por este de aquí. Ahora como estamos haciendo clic en esto, el conteo va subiendo, pero no se puede ver, así que lo que voy a hacer es poner aquí el conteo. Sólo voy a ponerlo recto en el botón, no ponerlo en otro elemento, y si hago clic en esto, el recuento sube. Solo quiero introducir el concepto de anzuelo muy temprano en esta clase, porque vamos a usar ciertos ganchos dentro de Shopify Hydrogen. El más común de los cuales es el UseShopQuery, que es lo que vamos a utilizar para traer datos de nuestra API de Shopify Storefront y utilizarlos en nuestro proyecto. Hemos visto componentes aquí, y hemos visto ganchos. La única otra cosa son las utilidades, que son básicamente cualquier otra función que usaremos para facilitarnos la vida a la hora de construir escaparates. Voy a dar un ejemplo, encontré esta utilidad en algún lugar en línea. Es solo una función para formatear moneda. Ya tenemos esta utilidad en Shopify Hydrogen, así que no deberíamos necesitar usar algo como esto. Pero como puedes ver aquí, podemos agarrar esta utilidad. Vamos a pegarlo directamente en nuestro código aquí. Voy a deshacerme de este código componente. Esto está escrito en TypeScript, así que solo necesito eliminar la definición de tipo ahí. Ahora puedes ver que funciona. Digamos que si tuviéramos que hacer un precio. De nuevo, puedo lanzar una expresión aquí, y digamos simplemente FormatCurrency y tirar 110.10. Ahora puedes ver aquí porque estamos usando la moneda USD y el estilo de moneda, puedes ver ahora que la moneda se formatea muy bien. Si tuviéramos que agregar algunos puntos decimales extra aquí, todavía se redondea a los centavos más cercanos aquí, y luego ponemos el signo $ al frente. Si tuviéramos que hacer de esto algo así como las Grandes Libras Esterlinas, por ejemplo, se puede ver que ahora es el símbolo de la libra en su lugar. Esto es lo que hará una utilidad. Es sólo una función que nos hace la vida más fácil. Como puedes ver aquí lo hemos importado o simplemente lo agarramos. Podríamos, por supuesto, crear un nuevo archivo, y luego exportarlo, y luego usarlo en cualquier parte de nuestro proyecto, que sería el escenario más probable. Pero solo quería demostrar lo que es una utilidad, porque también podríamos usar algunas funciones de utilidad en nuestro escaparate de Shopify Hydrogen. Eso es realmente, chicos. Puedes, por supuesto, profundizar en React, pero para este curso, eso es todo lo que realmente necesitamos para comenzar. Todos estos conceptos que acabamos de discutir nos van a ayudar a generar la interfaz de usuario para nuestra nueva app de escaparate personalizada. Pero el otro lado de esto va a ser cómo conectamos realmente esta interfaz de usuario a la API de escaparate. Esto es exactamente lo que vamos a cubrir en el siguiente video. 4. API de Storefront: En esta lección, vamos a hablar sobre la API de escaparate, que es lo que usaríamos para recuperar los datos necesarios para rellenar nuestro escaparate con todo el producto, página y entrada de blog información que queremos mostrar al usuario. Para proporcionar un poco de contexto aquí, la API de Shopify es una de las pocas API proporcionadas por Shopify. Los dos más comunes, diría yo, son la API de escaparate y la API de administración. La API de administración es lo que usarías para completar las funciones de administración. Mientras que la API de escaparate es la API para recuperar información orientada al cliente. He hablado de la API de escaparate en algunos de mis otros videos, es posible que me hayas visto conectarme a la API y menos de 11 de mi clase de programación de temas Shopify y por un minuto, 1820 en mi video de YouTube usando JavaScript en el desarrollo de temas. Sin embargo, como mencioné en esos videos, la API de escaparate no fue construida para temas de Shopify, sino que está pensada para cualquier otro escenario en el que necesitarías acceder a los datos del escaparate. Como dice Shopify en su documentación, se puede usar en cualquier lugar donde estén tus clientes, como una aplicación de sitio web o un videojuego y ahora esto incluye las aplicaciones de hidrógeno de Shopify. ¿Cómo funciona en Shopify hidrógeno? Bueno, la buena noticia es que el hidrógeno tiene un gancho incorporado que te ayuda a conectarte y consultar datos fácilmente. Se llama use sharp query hook y más adelante en esta clase configuraremos nuestros datos de acceso en el archivo de configuración de hidrógeno y luego usaremos el gancho para extraer los datos que necesitemos. Por ahora, lo que quiero cubrir brevemente es la sintaxis de GraphQL, que es el lenguaje que usamos para consultar la API de escaparate. Esto de aquí mismo se llama gráfico. Es un IDE gráfico en el navegador GraphQL. Eso puede sonar súper técnico, pero básicamente todo esto es, es una forma de crear y probar consultas antes de ejecutarlas en una app. Te voy a mostrar cómo configurar esto para tu proyecto en particular más adelante, pero por ahora puedes ver que estoy ejecutando un servidor local. Este es en realidad un proyecto de hidrógeno y por suerte para nosotros, una de las características es este graphiql. Básicamente es GraphQL con una i entre la gráfica y la QL. Graphiql, supongo que así es como se podría decir. Tenemos esta herramienta incorporada y todo lo que tenemos que hacer es, si este es nuestro dominio raíz host local 3,000, solo necesitamos poner graph iQL después de él, y luego obtenemos acceso a esta pequeña herramienta que nos permite consultas GraphQL a cualquier proyecto de hidrógeno de la API de escaparate que esté conectado. Este en realidad está conectado a la tienda de previsualización de hidrógeno. Esta es la tienda estándar que se cargará en configuración de la API de su tienda al crear su primer escaparate de hidrógeno, puede actualizar estos ajustes, verá que en un video posterior, pero en esta clase solo vamos a usar la tienda de previsualización de hidrógeno y eso ya tiene una gran cantidad de datos así que ni siquiera tenemos que crear datos de muestra para esta clase, solo podemos usar lo que es nos proporcionó desde Shopify. Ya tenemos una consulta aquí, si hago clic en “Ejecutar” aquí, puedes ver que recuperamos una estructura de datos que imita lo que escribimos aquí. Me gusta usar sangría, así que sólo voy a poner esto por aquí. Lo que recuperamos es algún JSON que imita la estructura de nuestra consulta. Eso es lo genial de GraphQL, imita lo que recuperamos en términos de JSON. Para explicar esto un poco, aquí solo tenemos una consulta básica, estamos tomando la raíz de la consulta de sharp, y luego estamos abriendo una selección aquí y luego estamos definiendo qué campos queremos devolver. Todo lo que estamos haciendo es devolver el nombre del agudo, que es hidrógeno. Pero también podría agregar en este campo la descripción, y luego si ejecuto eso, verás que cuando vuelva nuestra consulta, ya tenemos nuestra descripción llegando también, ¿de acuerdo? Podemos agregar en cualquier campo que exista en el objeto sharp aquí, si tuviera que quitar la selección por completo y tratar de ejecutar eso, no va a funcionar, dice que campo debe tener selecciones. Hay ciertos campos en tu API que van a requerir selecciones y shop es uno de ellos, así que no va a funcionar como solicitar todo el objeto, vamos a tener que solicitarlo los campos específicos dentro de ese objeto. ¿Cómo averiguamos a qué campos podemos acceder en el objeto? Vamos a la documentación. Si simplemente busco la API de escaparate en Google, debería poder encontrarla. Aquí está la página de la documentación, la API de escaparate GraphQL de Shopify y honestamente su navegación es un poco difícil navegar pero quiero entrar en Comentar objetos, entrar aquí y si nos desplazamos hacia abajo, esto no es lo que estoy buscando, tienda online es la categoría que estoy buscando, voy a objetos, podemos ver aquí el objeto tienda, así podemos ver que la tienda representa una recopilación de configuraciones generales e información sobre la tienda y aquí están los campos, así accedemos al nombre de la tienda, la descripción, también podemos obtener campos Meta en ella. Podemos obtener el dominio primario, así que si quería agregar ese primario, lo bueno de usar esta interfaz es que tiene autocompletado. Puedo lanzar el dominio primario ahí y requiere selecciones. Si quisiéramos usar eso, solo necesitamos verificar este que es el tipo de datos. Como puede ver, aquí también hay un rango de selecciones así que tendré que abrir una selección en esa y luego URL es uno de los campos en eso. Puedo ejecutar eso y luego ahora podemos obtener la URL del dominio principal. Ahora, una de las cosas más complicadas de GraphQL, esto es bastante simple hasta este momento. Pero si empezamos a trabajar con conexiones relacionales, vamos a empezar a ver algo llamado bordes y nodos. Lo que quiero decir con eso es que si entramos aquí y escribimos algo que sea plural, no podemos hacerlo en un objeto de tienda, pero volvamos a nuestra ruta de consulta aquí y si escribo colecciones, como puedes ver aquí, va a devolver la conexión de colección. Aquí podemos apuntar a una colección específica, pero si voy aquí y hago colecciones, lo que ahora voy a necesitar hacer es usar bordes y nodos, ¿bien? Voy a tener que acceder a los bordes de esta lista de colecciones y luego tomar los datos que quiera cada colección dentro de esa lista de colecciones aquí bajo nodo. Puedo agarrar el, digamos el nombre con el mango de goma y luego si me golpeo correr aquí, probablemente tendré que ponerlo en el perímetro aquí. Como dice aquí, hay que proporcionar primero o último, entonces lo que eso significa es que tengo que especificar cuántos objetos de colección quiero devolver, para poder solicitar los primeros 10. Yo dirijo eso. Puedes ver aquí que me devuelvo un objeto que es similar a la estructura aquí, me devuelvo diez colecciones o máximo diez colecciones, solo hay 1, 2, 3, 4, 5, 6, creo, colecciones en nuestra tienda en total, por lo que obtenemos los primeros 10. Si solo hay seis, recuperamos seis y como solo hemos pedido el asa, solo recuperamos el asa en cada nodo. Ahora bien, esto de bordes, nodo es un poco confuso pero te vas a acostumbrar, la forma en que me gusta pensarlo es que podemos obtener más que solo los bordes de nuevo en una lista de colecciones en particular, cualquier lista para el caso. Si voy por debajo de los bordes aquí, también puedo obtener un objeto aquí llamado page info, que es una selección y luego puedo ver si tiene una página siguiente. Si voy por aquí y vuelvo a ejecutar eso, no sólo obtengo los datos que estoy buscando, también obtengo la información para la paginación, lo que me dice tiene una página siguiente, no la tiene. Si pongo esto a tres, entonces sólo me va a mostrar los tres primeros y los tres segundos y lo vuelvo a correr. Ahora, si miramos hacia abajo, solo obtenemos los tres primeros resultados y nos hacemos realidad ahora para tiene página siguiente. Algo similar con nodo, podemos ir por debajo del nodo y podemos escribir algo llamado cursor. Ejecutemos eso y veamos qué vuelve. Como puedes ver, ahora tenemos este pequeño id aquí en cada nodo, lo que nos da una dirección para ese nodo en particular. Puede sonar bastante complicado, ¿por qué no podemos simplemente devolver una lista, sino que se remonta a las conexiones relacionales entre estos diferentes recursos? Porque estos diferentes nodos son recursos sí mismos y lo que estamos haciendo es devolverles una conexión. No se trata solo de datos dentro de una colección. También son datos de productos que podrían formar parte de múltiples colecciones y así parece complicado, pero todo lo que necesitamos recordar aquí es incluso si no estamos usando paginación, así que si elimino estos, solo asegúrate de usar bordes y nodos cuando estemos manejando conexiones de esta manera de lista. Antes de pasar a hablar sobre el framework Hydrogen, solo quería mostrarte algunos ejemplos más de lo que podrías lidiar en términos de GraphQL mientras estás creando escaparates usando Hidrógeno. Algunos ejemplos los puedes encontrar dentro este tutorial que es proporcionado por Shopify, en esencia, esta clase es una versión en video de esto de todos modos, usaremos mucho de lo que se habla en este tutorial, pero tampoco usaremos una tonelada de ella también. Voy a tratar de que sea realmente simple. Gran parte de este tutorial que he encontrado realmente está saltando adelante en términos de agregar mucho código, lo que podría no tener mucho sentido. La clase ha sido diseñada para pasarla un poco más despacio para ustedes. Pero quiero llamar su atención sobre algunas consultas de GraphQL que puede terminar usando. Como puedes ver, tenemos esa consulta que vimos antes, donde accediendo nombre y descripción en tienda, así que ahí es una consulta muy básica. Si me desplazo un poco más hacia abajo, no estoy seguro de si está en esta página o en la página siguiente. Vamos a construir una página de colección, desplácese hacia abajo. Aquí, puedes ver que tenemos colecciones aquí. De hecho, podemos omitir la parte de bordes, así que podemos simplemente escribir nodos en lugar de escribir bordes y luego nodo singular. Si quería quitar bordes aquí y ejecutar eso, verás que recuperamos los nodos sin tener que poner en esa palabra bordes, así que esa es una opción también. Entonces como puedes ver aquí, tenemos el parámetro para obtener los ocho primeros ocho, de una colección en particular, pasando por un asa, que veremos más adelante en esta clase, y entonces estamos sacando la primera variante de cada producto. Nuevamente, haremos algo similar en la clase. Yo solo quería repasar algunos ejemplos, ver si hay algo teórico que tenga que decirles chicos antes de empezar, aunque esto es bastante similar si entro en la página siguiente. Aquí hay algo que quería mostrarles antes de que empecemos, es el uso de estos fragmentos. Los fragmentos son como si estás acostumbrado a Shopify desarrollo de temas, puedes pensarlo casi como un fragmento. Es un poco de código reutilizable que podemos conectar a otras partes de nuestra consulta GraphQL. Aquí definimos este fragmento, que dice qué campos vamos a querer en los medios. Todo este fragmento aquí nos dice qué selección de campos queremos y luego podemos conectarlo a donde lo necesitamos usando este punto, punto, punto. En lugar de escribir aquí todos los campos mediáticos, podemos simplemente expandir el fragmento que creamos aquí arriba. Eso es útil cuando queremos reutilizar esa selección en múltiples áreas de nuestra consulta. La otra cosa por aquí que quiero que noten es este punto, punto, punto, y luego encendido. Aquí, se ve similar en términos de que tienes los tres puntos, pero tan diferente en el sentido de que esto solo va a devolver esta selección cuando el tipo es imagen media. Va a devolver esta selección, cuando el campo mediático que regresa es una imagen mediática. Va a devolver esta selección cuando sea un video. Va a devolver esta selección cuando sea un modelo 3D y esta selección cuando sea un video externo. Supongo que por eso se crea en un fragmento para que no estemos anidando todo ese código dentro de nuestra selección aquí. No estoy seguro si vamos a usar necesariamente fragmentos en esta clase. Vamos a mantenerlo muy sencillo. Pero solo pensé en mencionar esto mientras miras a través de ejemplos de Shopify, fuera de esta clase, tal vez te estés preguntando qué está pasando aquí. Definitivamente busca fragmentos de GraphQL si te interesa conocer más sobre esto. Déjame bajar, ver si hay algo más que quiera compartir con ustedes. Como pueden ver aquí, chicos, este tutorial arroja mucho código muy rápido, razón por la cual no estoy siguiendo esto exactamente para esta clase de Skillshare. Creo que saltan a ciertas partes un poco demasiado rápido. Si bien no me gusta que me dibujen, sí me gusta cubrir muchas de las cosas en una secuencia paso a paso que les permita entender lo que está pasando en cada etapa, así que siento que es mejor ir más despacio y realmente entender profundamente lo que está pasando en lugar de saltar tanto adelante. En mi opinión, creo que están saltando un poco más adelante, especialmente para alguien que no ha usado React antes o es nuevo en React, este tutorial va y salta directo, tiene mucho detalle. Obviamente, mucho de esto es solo código React. Eso es lo principal que quería mostrarles chicos. Yo quería mostrarles chicos si vuelvo a aquí las cosas de fragmentos. Déjeme encontrar eso en la documentación para ustedes chicos, si quieren echarle un vistazo más tarde. Aquí puedes ver en la documentación de GraphQL, la oficial en graphql.org. Si nos fijamos en la sección sobre fragmentos, puedes entrar más en detalles aquí sobre qué son los fragmentos. Ese es el único ejemplo complejo que he visto en los ejemplos de Shopify de GraphQL. Probablemente no vamos a usar fragmentos en esta clase, pero por si acaso lo veas en un ejemplo como en documentación de Shopify y te estás preguntando qué está pasando ahí. Pero vamos a tratar de mantenerlo lo más simple posible y luego tratar de expandirnos a partir de ahí. Pero es importante entender GraphQL al menos en un nivel básico, antes de que nos quedemos atrapados en la creación de nuestros proyectos, necesitamos saber cómo vamos a consultar la API de escaparate en para obtener los datos necesarios para construir escaparates personalizados. Por eso necesitamos hacer una pequeña lección sobre GraphQL. En el siguiente video, vamos a cubrir el framework de Shopify Hydrogen. 5. El marco de Shopify de hidrógeno: En esta lección, ahora vamos a hablar sobre el framework Hydrogen, es decir, el conjunto de ganchos, componentes y utilidades que Shopify proporciona para ayudarnos a crear escaparates personalizados. Para la mayor parte de esta clase, voy a explicar los ganchos y componentes de Hidrógeno mientras trabajamos a través de nuestro propio proyecto de Hidrógeno. Pero hay algunos conceptos con respecto al Hidrógeno que me gustaría que ustedes entendieran antes de que nos quedemos atrapados. En primer lugar, si nos dirigimos al archivo App.server.jsx aquí, notarás que este archivo va a tener un aspecto bastante similar sin importar proyecto de Hidrógeno que estés viendo. Tienes esta función RenderHydrogen aquí mismo, que es responsable de la hidratación. La hidratación en este caso está relacionada con la renderización del lado del servidor. Básicamente, esta es la función que configura tu proyecto como una app de Hidrógeno. Después de importar RenderHydrogen aquí, los otros componentes de nivel superior que probablemente notará se relacionan con el enrutamiento y el suministro. En un proyecto típico de React, podrías usar algo como React Router, que es otra biblioteca para manejar el enrutamiento, pero Hydrogen viene con enrutamiento incorporado. Usando la combinación del componente Router y el componente FileRoutes, podemos configurar fácilmente el enrutamiento básico dentro nuestra aplicación que imita la estructura de archivos de nuestro proyecto. Por ejemplo, en nuestra carpeta de rutas, si hago clic por aquí, si creo un catálogo. Esto es lo que haremos en la clase más adelante, pero solo para mostrarte por adelantado, si creo un archivo catalog.server.jsx, entonces puedo acceder a él escribiendo catalog después del dominio de ruta de nuestra aplicación. Si ejecuto esto; actualmente no se está ejecutando en este momento, pero si ejecuto el comando yarn dev o npm run dev, vamos a estar ejecutándolo en localhost 3001. Estoy manejando otra tienda en este momento, razón por la cual está en 3001 y no 3000. Si mando, haz clic en eso, verás Hello World aquí. Si vuelvo a mi editor de código y vamos a poner algo en catalog.server.jsx. Vamos a agarrar lo que tenemos en index.server.jsx y solo reemplacemos esto a Catalog y reemplacemos esto aquí con Catalog con una mayúscula. Golpea “Guardar” en eso. a nuestra aplicación en el navegador. Como puedes ver aquí, está ejecutando la ruta índice, que si miramos, es solo crear un div con Hello World para que coincida. Entonces si voy por aquí y después de nuestra ruta dominio poner catálogo, ahora puedes ver la palabra catálogo que viene. Así es como obtenemos el enrutamiento incorporado en nuestra aplicación. Simplemente colocamos un router y lo envolvemos en FileRoutes, y así nuestro enrutamiento imitará lo que pongamos en esta carpeta de rutas. Podemos hacer anidamiento a través de carpetas anidadas. De hecho, es bastante fácil configurar el anidamiento con Shopify Hydrogen. También puedo hacer un valor dinámico. Digamos que tenía una ruta anidada para las colecciones. Voy a crear una carpeta de colecciones aquí. Entonces también puedo crear una ruta dinámica. Puedo usar handle como variable, server.jsx, y luego no lo vamos a hacer en este video porque tendremos que traer en el gancho de consulta use shop y comenzar a consultar API, que nos meteremos en un momento posterior video. Pero esencialmente ahora voy a cambiar esto a Collection. Si tuviéramos acceso a la colección, podemos empezar a tomar dinámicamente la Colección que estamos viendo y tal vez sacar su título o algo así. También podemos crear estas rutas dinámicas. Esto vivirá en, digamos que nuestra colección se llamaba zapatos, así que solo vamos a esta ruta, colecciones-zapatos, y entonces esa parte de zapatos se convierte en el asa, y así nos serviría esto archivo a través de esa ruta. También puedo usar el componente rutas. Actualmente no se importa pero podemos importar el componente de ruta desde Shopify Hydrogen. Lo que eso nos permite hacer es definir una ruta aquí abajo. Esto es útil para crear una ruta general para 404 páginas completas, por ejemplo. Si creo un componente NotFound, puedo cargarlo ahí. Entonces, si la URL no pasa por FileRoutes, puede pasar por esta ruta de respaldo en su lugar. Eso lo vamos a ver en esta clase también. Entonces los otros componentes, vas a ver son los componentes del proveedor. Como puedes ver aquí arriba, Shopify Provider es el componente de proveedor de nivel superior de Shopify Hydrogen. Ponemos eso alrededor del router para que tengamos acceso en cada página a funciones centrales de Shopify como el uso shop query hook, que usaremos en prácticamente todas las rutas. Este patrón de uso de un componente de proveedor con componentes y ganchos relacionados es algo que probablemente verá en varias partes de su aplicación. Los ejemplos incluyen CartProvider para proporcionar funcionalidad de carrito, ProductOptionsProvider para configurar estados para rastrear la variante seleccionada actualmente y la opción seleccionada en una página de producto y CartlineProvider, que proporciona un fácil acceso a los datos relacionados con una CartLine individual. Estos son solo algunos ejemplos de algunos de los componentes disponibles en el marco Shopify Hydrogen, cuya lista completa puedes encontrar aquí en la documentación oficial de Shopify. También como consejo, si alguna vez te sientes perdido en lo que hace un componente o gancho en particular, puedes simplemente Google Shopify Hydrogen, seguido del nombre del gancho o componente, y eso debería generalmente te dirigen a la página correspondiente de la documentación de Shopify Hydrogen. Recuerda que los ganchos generalmente se ven así con una primera letra minúscula mientras que todos los componentes comienzan con mayúscula. Esto es para diferenciarlos de las etiquetas HTML regulares. 6. Cómo comenzar con el hidrógeno: Sin más preámbulos, realmente entremos en la construcción de nuestro escaparate de hidrógeno. Hemos hablado mucho de teoría, es hora de entrar en lo práctico aquí. Hay dos formas en las que podemos empezar. Número 1, puedes hacerlo como lo hice que estaba siguiendo esta documentación aquí, shopify.dev/custom-storefronts/hydrogen/ getting-started/quickstart. Básicamente, solo busca esto en la navegación. Aquí, puedes ver en el Paso 1 podemos crear una app de Hidrógeno. Estaba usando NPM hasta que me encontré con este problema de almacenamiento en caché que me obligó a usar Yarn. Hablaremos un poco de eso en un segundo. Ahora utilizo Yarn, pero también puedes usar NPM. Es importante tener en cuenta aquí que cuando estamos usando estas herramientas, es necesario tenerlas instaladas. También debe asegurarse de tener instalada la última versión del nodo. Esto va a surgir cada vez que usemos gestores de paquetes. Si no estás familiarizado, node.js es el runtime de JavaScript, necesitamos esto, esto está en el núcleo de NPM y todo lo que haremos en este proyecto. Asegúrate de tener la última versión de eso. Entonces NPM es Node Package Manager, se sienta encima de eso y le ayuda a instalar y ejecutar paquetes de nodos. Tenemos que asegurarnos de que tenemos las últimas versiones de eso. Si quieres usar Yarn, también puedes instalar Yarn. Los detalles para instalar todas estas herramientas de interfaz de línea de comandos están en sus respectivos sitios web. Te voy a enseñar primero cómo hacerlo de esta manera. Voy a abrir mi aplicación de terminal favorita, se llama iterm. Voy a maximizar esto por ti, que veas más fácil. Despeja todas esas cosas ahí. Voy a simplemente navegar a mi escritorio para esto, así que voy a cd desktop. Entonces ejecutemos estos comandos. Vamos a ejecutar NPM init, Shopify hidrógeno. Dice que necesitarás instalar los siguientes paquetes. Sí. Solo hay que darle algo de tiempo para procesar aquí. Ahora aquí, te va a dar la opción de hacer Demo Store, o Hello World. Demo Store es un proyecto de hidrógeno más completo. No recomiendo instalar Demo Store para aprender hidrógeno, porque viene con mucho código y mucha configuración que si solo estás aprendiendo hidrógeno, es mejor mantenerlo simple. Me gusta ir con Hello World. Entonces, aquí hay una cuestión de preferencia, si no sabes qué es TypeScript o no usas TypeScript, entonces solo elige JavaScript. Voy a llamar a este escaparate personalizado. Ahora va a descargar el código del repositorio de hidrógeno. Ahora después de una buena cantidad de tiempo, ha terminado de instalar. Ahora, voy a abrir una nueva ventana o Visual Studio Code, y ya podemos empezar a ejecutar este proyecto. Voy a abrir una nueva ventana, solo voy a redimensionarla para que se ajuste a tu pantalla. Luego haré clic en “Abrir”, dirigiré a nuestro escritorio y abriré esa carpeta de escaparate personalizada. Aquí, si ejecutamos una terminal dentro de este proyecto, podemos hacerlo desde dentro del proyecto en código de Visual Studio, o podemos hacerlo usando nuestra otra aplicación de terminal. Simplemente es más fácil dentro de nuestro editor de código porque ya hemos navegado a esa carpeta. Ahora todo lo que necesito hacer para poder ejecutar esto, es npm run dev. Como puedes ver aquí, va a decir que ahora estamos funcionando en localhost 3,000. Voy a comando-clic para abrir eso. Como puedes ver, todo lo que dice es Hello World. La razón por la que dice Hello World es si entramos en nuestra carpeta src aquí mismo, y nos dirigimos a nuestra ruta de índice. Apenas aquí en índice de rutas, verás Hello World. Recuerda que ya hablamos un poco en el último video sobre lo que está pasando en el archivo app.server.jsx aquí, así que no voy a adentrarme en esto, pero este es el corazón de tu app aquí mismo. Tenemos nuestro proveedor de Shopify, que proporciona básicamente toda la funcionalidad que necesitaremos para nuestra aplicación de hidrógeno. Entonces por supuesto estamos tirando de él router y rutas de archivo, para nuestro enrutamiento. Este otro componente que estamos importando de react, es una característica experimental en reaccionar en este punto en el tiempo. Si miramos la página en busca de suspenso en el sitio web de Reacciona, puedes ver aquí que aquí hay mucho rojo. Básicamente un componente de suspenso, le permite esperar a que se cargue algún código y especificar declarativamente un estado de carga. Esto nos permite hacer carga asincrónica dentro de estas dos etiquetas. Podríamos en cambio, y dejarme hacer esto ahora mismo en lugar de tener un respaldo completo nulo, solo para cargar. Ahora lo que he hecho para que empecemos para que no estemos perdiendo el tiempo aquí, es que he creado todo el CSS para ti, que no estemos escribiendo CSS como codificamos a través de este proyecto. También he actualizado la ruta index.server.jsx, para que podamos ver el patrón que va a pasar en muchas de las rutas, donde ingresamos un montón de componentes y ganchos, exportamos un componente particular, y luego por debajo de eso, escribimos nuestra consulta. Lo que puedes hacer, esta es la segunda opción, es que puedes conseguir clonar el proyecto de escaparate, que he subido a mi GitHub, este es un repositorio público. Esto es básicamente lo mismo que si tuvieras que hacer lo que hicimos aquí en nuestra terminal con la creación de un nuevo proyecto de hidrógeno, y eligiendo Hello World, excepto que he actualizado esto index.server.jsx, para demostrar el patrón continuo que vamos a ver en muchas rutas. También he agregado un montón de CSS aquí. También voy a actualizar las sucursales a medida que avanzamos, para que también puedan ver el punto final. Te animo, en lugar de hacerlo de esta manera, te animo a que consigas clonar este proyecto, ejecutar npm , instalar, y luego sigamos juntos, usando exactamente el mismo proyecto. Lo que voy a hacer, dejar eso, y luego voy a hacerlo, vamos a cerrar esto. Entonces en mi iterm aquí, voy a navegar a mi carpeta de código, ir a mi carpeta Skillshare, que es donde pongo mis proyectos de Skillshare, y vamos a ejecutar git clone aquí. Voy a ir git clone, copiando esa URL. Todo lo que tengo que hacer es hacer clic en el botón de la pantalla, y luego copiar la dirección HTTPS, y luego ahora va a descargar ese repositorio a mi computadora. Naveguemos hacia la tienda de la clase hidrógeno. Entonces desde aquí, solo ejecutamos npm install, para instalar todos nuestros módulos de nodo. Esto es algo que está sucediendo automáticamente cuando ejecutamos ese comando anterior de npm init Shopify hydrogen. Ejecuta npm install por ti. Cuando estamos descargando un repositorio GitHub que dicho proyecto de nodo, va a conseguir ignorar el archivo de módulos de nodo, porque ese no es un código que es específico de este proyecto, y solo almacena las referencias en el archivo package.json. Entonces cuando ejecutes npm install , luego instalará todas las dependencias. Solo un poco de contexto extra ahí para esos tipos que no están muy familiarizados con los proyectos de nodo. Ahí vamos, hemos instalado nuestras dependencias. Ahora, voy a abrir de nuevo Visual Studio Code. Consigan esto a nuestro tamaño de pantalla para ustedes. Entonces voy a abrir esa carpeta. Entrando en código, Skillshare, escaparate de clase hidrógeno. Quitando esa pestaña ahí. Puedes ver si entramos en la carpeta SRC, en index.css, tenemos todo el CSS que ya escribí para este proyecto y luego si entramos en nuestra ruta index.server.jsx, tenemos esto justo aquí. Sigamos adelante y ejecutemos una nueva terminal directamente dentro de nuestro proyecto. Vamos a borrar todo este molesto código que surge. Eso es sólo una cosa de mí. No te preocupes por eso. Entonces ejecutemos nuestro comando para ejecutar el servidor, npm ejecutamos dev, y luego abriremos localhost:3000. Voy a deshacerme de estas otras pestañas. Ahora que ya tenemos nuestro proyecto a nivel local, y aquí puedes ver que tenemos un título y una descripción. Ahora, ¿de dónde viene eso? Quería actualizar el archivo index.server.jsx para mostrarte un patrón que vamos a usar en prácticamente todas nuestras rutas. forma en que vamos a ejecutar este proyecto es que vamos a crear una sección a la vez. Vamos a hacer la página del catálogo. vamos a hacer la página de colección. Vamos a hacer la página del producto, y luego vamos a habilitar la funcionalidad del código. Básicamente, el patrón que vamos a usar, y si puedes entender esto dentro de Shopify cómo hacer desarrollo, entonces estás bien encaminado a codificar cualquier tipo de proyecto. El patrón es éste. Vamos a importar lo que necesitamos de Shopify hidrógeno, vamos a exportar un componente, y luego vamos a crear nuestra consulta. Ahora bien, esto está fuera de servicio porque estamos usando la consulta aquí arriba en nuestro gancho UseShopQuery. Pero por cualquier razón en los ejemplos, Shopify pone al final la definición de su consulta, así que voy a seguir esa secuencia. Sólo voy a minimizar eso por un segundo. Aguanta, eso lo maximizó. Déjame ver si puedo simplemente crear algo más de espacio aquí para que podamos, no, eso crea una nueva pestaña. A lo mejor lo que voy a hacer es guardarlo por un periodo porque quiero que mires lo que está pasando aquí en su totalidad. Eliminemos eso para que podamos echar un vistazo más de cerca. Lo que está pasando aquí es que si recuerdas en el anterior index.server.jsx, solo tenía un componente simple que tenía un div con hello world en él. Ahora eso no va a ser particularmente útil porque eso no es contenido dinámico en absoluto. Pero lo que vamos a hacer en esta clase es que vamos a traer contenido dinámico de tu tienda. No voy a recargar la página aquí porque ya la apagué, pero aquí, puedes ver que tenemos hidrógeno y luego tenemos un escaparate personalizado impulsado por hidrógeno, Shopif's react-based marco para la construcción sin cabeza. ¿De dónde viene eso? Porque si miramos aquí dentro, se puede ver que ambos son valores dinámicos. Lo que realmente estamos haciendo es que estamos sacando esa información de la API de escaparate. Las tres cosas que importamos de Shopify hidrógeno aquí es el gancho UseShopQuery muy importante, que es lo que usamos para consultar la API de escaparate. Estamos trayendo aquí este objeto llamado Cachelong. Esto es solo una estrategia de almacenamiento en caché así que aquí no está pasando nada demasiado complejo. Podemos reemplazar esto fácilmente escribiendo la estrategia de almacenamiento en caché. Simplemente nos ayuda un poco a ahorrar tiempo al sacar esa poca utilidad del hidrógeno. Entonces esta de aquí es una utilidad que nos ayuda a hacer resaltado de sintaxis con nuestras consultas GraphQL aunque realmente no parece que esté funcionando en mi configuración particular, pero eso está bien. Realmente no necesariamente necesitamos eso, eso es simplemente un lindo tenerlo. Lo que estamos haciendo aquí, así que tenemos nuestro componente de hogar aquí mismo que se ejecuta en la ruta del índice, y en nuestra declaración de retorno aquí, estamos regresando JSX que vimos anteriormente en la teoría. Ya he establecido una clase aquí. Nuevamente, este no va a ser un curso CSS así que voy a simplemente poner nombres de clase que coincidan con el CSS que he construido para que podamos obtener un poco de estilo desde el principio. Todo lo que tenemos que hacer es hacer que coincida con nuestro archivo CSS aquí. Pero nuevamente, puedes editar esto totalmente a la manera que quieras. Simplemente no quería quedar atrapado en ningún CSS en esta clase porque esta no es una clase CSS. Volviendo a nuestro archivo index.server.jsx aquí, lo que estamos haciendo es que estamos pasando por un objeto a useShopQuery con nuestra estrategia de asignación de consultas GraphQL y luego estamos diciendo preload: true. Esta es solo una configuración básica predeterminada que puedes ver en los ejemplos de Shopify. Lo principal a entender aquí es que estamos escribiendo nuestra consulta aquí en GraphQL y luego la estamos poniendo en UseShopQuery. Ahora en los ejemplos, lo que verás es destrucción de objetos sucediendo aquí mismo. No tiene esta línea, pero me gusta romperla, o al menos para esta clase porque simplemente la hace un poco menos complicada. Puedes descomponer un poco los escalones. Lo que estamos haciendo es que los datos que van a ser devueltos de la API van a entrar en este objeto de datos aquí y luego lo vamos a desestructurar para obtener los datos devueltos. Ahora bien, aquí hay algo que puedes hacer a lo largo esta clase que te ayudará a determinar lo que regresa de la API. Se puede ir console.log (datos). Ahora bien, ¿dónde encontramos esta información? Bueno, en realidad estamos en un componente del lado del servidor aquí. Como pueden ver por aquí, no creo que todavía tengamos ningún componente del lado del cliente, pero como puede ver aquí, todos nuestros componentes hasta ahora tienen.server en ellos. Si ejecutamos esto, el registro de la consola va a suceder en nuestro terminal pero no en nuestro navegador. Volvamos a abrir nuestra terminal, deshacernos de todo eso, y luego ejecutemos npm run dev. Ahora sólo vamos a tener que darle a esto. Voy a refrescar la página y si volvemos a nuestra consola aquí, voy a abrir esto y se pueden ver los datos que vuelven. En realidad está regresando dos veces aquí. Se puede ver que obtenemos este objeto de datos y en su interior obtenemos el objeto filoso, y luego dentro de ese obtenemos el nombre y la descripción. Esto nos permitirá inspeccionar lo que hay dentro. Como puede ver, esta desestructuración coincide con lo regresa de ese objeto de datos. Podemos eliminar esto y en vez de tener Shop aquí, podemos hacer datos. datos. tienda. Refresca la página y verás que obtenemos el mismo resultado. Pero obviamente, eso es un poco más feo. Esto podría parecer un poco más complicado, pero nos ayuda a sacar esos objetos afilados para que no necesitemos poner datos, datos frente a él. Eso es esencialmente lo que está pasando ahí. Elimino ese registro de consola y se puede ver que estamos sacando el objeto shop fuera del retorno a los datos y luego podemos acceder al nombre y la descripción porque eso es lo solicitado en nuestra consulta GraphQL. Esa es la base de todo lo que vamos a hacer en esta clase, vamos a estar importando componentes, engancha utilidades del marco de hidrógeno. Vamos a estar usando esos ganchos para enchufar algunos datos. Vamos a estar usando esos datos aquí en nuestros componentes, y si lo requiere, vamos a escribir consultas a las que conectaremos en el caso de consulta UseShop para obtener nuestra datos. Si entiendes este patrón, entonces estamos en camino de codificar nuestro primer escaparate de hidrógeno. 7. Creación de un componente de diseño: En la última lección empezamos con nuestro proyecto, lo configuramos y ejecutamos en nuestra computadora. Se puede ver aquí. Una de las cosas que olvidé mencionar en el último video es que estos datos vienen de la tienda de vista previa de Shopify. Si entramos en nuestro explorador aquí, y bajamos a, creo que es hydrogen.cong.js, puedes ver que StoreDomain es hydrogen-preview.myshopify.com, y el StoreFrontToken es lo que necesitamos para conectarnos a eso. Por eso tenemos estos datos justo fuera de la puerta. En esta clase, en realidad no necesitamos crear una tienda o actualizar nuestra tienda con datos de demostración porque solo podemos usar esta tienda de demostración en la totalidad de esta clase. Sin embargo, cuando implementemos esto nuestra tienda Shopify real, vamos a querer reemplazar estos detalles con nuestro propio dominio de tienda y nuestro propio token de acceso a la tienda, ¿de acuerdo? Sólo pensé en mencionarlo antes de empezar. Algunos de ustedes se estarán preguntando, ¿de dónde obtenemos esta información? Bueno, está precargado para usar la tienda de avance de hidrógeno, lo cual creo que es muy agradable en esta clase. Por ejemplo, no queremos tener que crear todos estos datos de demostración, solo podemos conectarnos a los datos de demostración existentes, lo cual es muy conveniente. Con eso fuera del camino, lo que quiero hacer en este video es crear un componente de layout. Nuestro componente de diseño va a envolver todo nuestro sitio web y básicamente proporcionará un encabezado y un SEO necesario que se ejecutará en cada ruta en nuestra tienda de hidrógeno. Lo que voy a hacer es, voy a entrar en la carpeta SRC aquí, crear una nueva carpeta para mis componentes, y luego dentro de esta carpeta de componentes, voy a crear un componente layout.server.jsx, ¿bien? Ahora bien, este componente va a cumplir dos funciones; va a renderizar un encabezado, y también renderizar información de SEO para que cualquier página de nuestro sitio web ya tenga el SEO incorporado, ¿de acuerdo? Solo, para hacernos la vida más fácil, voy a copiar todo aquí y ponerlo aquí, ¿de acuerdo? Ahora lo que voy a hacer es, eliminar eso, y vamos a poner un div aquí para empezar para que no obtengamos un error, y luego vamos a nombrar esto no home, sino layout. Entonces como te mostré en el video de teoría, voy a usar la desestructuración de objetos para agarrar a los niños que pasen a este componente de diseño, ¿de acuerdo? misma consulta aquí, vamos a usar el nombre y la descripción para el encabezado y también la información de SEO. Entonces lo que voy a hacer es que en nuestro archivo index.server.js se simplifica como una tonelada, no vamos a usar estos datos en nuestra página de inicio, así puedo eliminar todo esto, puedo quitar esto aquí arriba, y sólo vamos a devolver un componente muy básico, y aquí dentro, voy a poner solo homepage, ¿de acuerdo? Deshazte de eso. Entonces lo que voy a hacer es traer ese componente de layout. Puedo importar, y creo que estamos exportando por defecto por aquí, así que no necesitamos usar los corchetes, solo podemos hacer layout desde componentes, y luego simplemente vamos a crear una ruta a el componente de diseño. Entonces lo que quiero hacer es pasar todo esto entre nuestras nuevas etiquetas de componentes de diseño, ¿de acuerdo? Ahora, como ve aquí, estamos accediendo a los niños, lo que quiero hacer aquí es poner a esos niños entre estos divs, ¿bien? A ver si eso está funcionando ahora para nosotros. Si voy por aquí, pueden ver, sí, no hay errores, ¿de acuerdo? Volviendo a aquí, lo que queremos envolver alrededor esta página básica es un encabezado e información SEO. Empecemos a trabajar en lo que hay dentro de nuestra declaración de devolución aquí, nuestro JSX. En primer lugar quiero devolver lo que sea que se pase a través de esas etiquetas de diseño. Lo que voy a hacer es llamar a esto principal porque esta va a ser nuestra parte principal de nuestra página, y luego voy a envolver a los niños en un par de etiquetas de suspenso porque no sabemos qué ordenar los datos podrían estar llegando a través. Recuerda que esto va a envolver cada ruta, no solo la ruta index.server.jsx, ¿de acuerdo? Ahora, vamos a obtener este error aquí y eso es porque aún no hemos importado suspenso. Voy a importar suspenso de react. Como pueden ver, solo llenó eso para nosotros. Ahora estamos trayendo a algún niño ya sea que esté cargado de forma asíncrona o no, ¿bien? Ahora todo lo que tenemos que hacer es traer nuestro SEO y nuestro encabezado. Ahora, la forma en que hacemos SEO en Shopify hidrógeno es simplemente importar un componente SEO del marco de hidrógeno, y entonces lo que podemos hacer es traer ese componente SEO de aquí. No necesitamos una etiqueta final, pero sí necesitamos ponerla en ese guión para cerrarla. Entonces dentro de aquí, pondremos en el tipo de SEO por defecto. Luego en el campo de datos, pondremos un objeto para título y descripción, y aquí es donde usaremos el nombre de la tienda y descripción que regresaron de la API de escaparate. Podemos poner eso aquí, nombre de la tienda y descripción de la tienda. Ahora, lo que notarás aquí después de que hayamos hecho esto es que estamos obteniendo todas estas líneas rojas onduladas, y eso es porque no podemos devolver múltiples elementos en el nivel superior con JSX, así que solo estamos va a tener que crear un elemento de nivel superior, y podemos crear uno de estos en blanco, así, un poco de un hack, pero ahora no obtenemos esas líneas rojas onduladas. Si vuelvo aquí, vuelva a ejecutar nuestra página de inicio y abro mis herramientas de desarrollo. Acabo de presionar Option Command I para hacer eso, lo contrario tendrás que entrar en tu menú y abrir DevTools. Hago esto en todas las clases, así que ojalá ustedes me estén siguiendo aquí. Entonces si entro en nuestros elementos aquí, puedes ver que si entramos en nuestra etiqueta de cabeza aquí, puedes ver que tenemos nuestro título y descripción llegando a través de estas metapropiedades, cuales son nuestras etiquetas SEO, ¿de acuerdo? Tenemos nuestro SEO llegando a través de ahora. Ahora solo queremos construir un encabezado. De nuevo, voy a aprovechar algunas de las clases que ya he escrito en el CSS, esta no es una clase CSS así que voy a agarrar este contenedor header-inner como clase. Entonces aquí voy a crear un enlace para que podamos usar el componente link en Shopify, y voy a enlazar eso a la página de inicio simplemente poniendo en slash ahí. Este enlace va a ser básicamente el logotipo del encabezado, es un patrón común con encabezados que si haces clic en el logotipo, te dirigirá de regreso a la página principal, así que eso es exactamente lo que estamos haciendo aquí. Entonces aquí es donde pondré el nombre de la tienda, ¿de acuerdo? Ahora necesitamos importar enlace de nuestro marco de hidrógeno porque aún no lo hemos hecho. Entonces si presiono “Guardar” en esa actualización de aquí, puedes ver que ya tenemos este encabezado. Entonces si hago clic en esto, nos llevará a la página de inicio en la que ya estamos , ¿de acuerdo? Eso va a ser útil después. Ahora lo que voy a poner es una lista desordenada con la clase de navegación de encabezado. Esto va a albergar nuestra navegación de cabecera obviamente. Entonces voy a usar algo de Emmet aquí para poner en tres enlaces. Simplemente vamos a tener enlaces vacíos en esta etapa, link 1, link 2, porque no tenemos otras páginas, así que solo voy a poner en algunos marcadores de posición básicamente. Entonces finalmente vamos a tener un spot aquí para enlazar a la página del carrito. Aún no tenemos eso, así que lo que voy a hacer es simplemente poner aquí un marcador de posición. El nombre de la clase va a ser header-cart-link, así que voy a poner eso ahí, ¿de acuerdo? Voy a golpear “Guardar” en eso. Si vamos por aquí, puedes ver que tenemos nuestro encabezado y todo es bonito y centrado. Básicamente, lo que vamos a hacer chicos es a medida que vayamos a lo largo de la clase, vamos a actualizar nuestro encabezado a medida que avanzamos. A medida que creamos nuevas páginas, podemos agregar enlaces a esas páginas aquí, y luego podemos agregar en nuestro ícono de carrito aquí con el número de artículos en nuestro carrito también. Llegaremos a eso más tarde en la clase. Pero ahora que hemos creado este componente de diseño, vas a envolver todas tus rutas con esta etiqueta de componente de diseño aquí, y eso asegurará que el encabezado y información de SEO aparezcan en cada ruta. Con eso fuera del camino, vamos a crear una página de catálogo para ver todos nuestros productos en nuestra tienda de hidrógeno Shopify. 8. Construyendo una página de catálogo: En el último video, creamos este componente de diseño, que es lo que vamos a usar como nuestro diseño estándar en todas nuestras rutas. Actualizamos nuestra ruta de índice y ahora tenemos nuestra página de inicio súper básica sentada dentro de nuestro diseño, que luego nos da nuestro encabezado y nuestro SEO, que vimos en el último video. En este video, lo que vamos a hacer es crear una nueva ruta. Voy a llamar a esto las rutas del catálogo, lo siento, esa es la carpeta equivocada, aquí mismo en nuestra carpeta de rutas, catalog.server.jsx. Así como un poco de contexto aquí, la razón por la que es un archivo.server.jsx aquí es porque vamos a estar consultando la API de escaparate. Es una buena idea que cada vez que consultes la API de escaparate en cada componente del router, que estés haciendo eso. Quieres estar haciendo eso como un componente basado en servidor o del lado del servidor, esa manera no estamos exponiendo lo que estamos consultando, esencialmente base de datos, al usuario final. Comencemos exportando un componente funcional aquí. Esta va a ser nuestra página de catálogo, que va a albergar todos los productos que existen en nuestra tienda. Entonces voy a poner una declaración de retorno aquí mismo y luego vamos, por supuesto, a comenzar con el componente de diseño. Vamos a tener que importar eso, lo contrario, vamos a obtener un error. Así que importa el diseño de navegar a la ruta, a nuestro diseño. Solo para que lo sepan, chicos, este punto-punto significa volver uno en la carpeta SRC, y luego podemos buscar en los componentes y luego encontrar el layout. Si no estás familiarizado con esto aquí mismo, eso es lo que eso significa. vamos a estar dibujando Aquí vamos a estar dibujando algún contenido asincrónico, así que voy a poner en suspenso justo después de mi maquetación. También vamos a tener que importar suspenso de React. Entonces un poco de estructura aquí que ya he configurado, he creado algunos CSS para las clases de página de catálogo y contenedor. Sólo vamos a poner nuestra página en un bonito contenedor. Entonces vamos a crear un div con la clase de grilla de productos y eso va a albergar todos nuestros pequeños artículos de cuadrícula de productos. Si presiono “Guardar” en eso, actualmente no estamos tirando ningún dato, pero si voy aquí a la página del catálogo, tenemos una página prácticamente en blanco. Si vamos a inspeccionar esto, verá, sin embargo, que tenemos esos divs que configuramos, la página del catálogo y la cuadrícula del producto. Esto es básicamente inútil hasta que traemos algunos datos. Escribamos nuestra consulta abajo aquí. Voy a crear una constante llamada query y luego voy a usar plantilla de cadena GQL y poner en nuestra consulta aquí. Porque estoy usando esto, voy a tener que importar eso de Hidrógeno, así que voy a hacer eso aquí arriba. Importar GQL de Shopify Hydrogen. En realidad, hagamos esto en nuestra interfaz gráfica. Entonces una vez que lo hayamos probado, sepa que funciona, podemos traerlo a nuestro proyecto. Creo que eso es un poco más agradable. Voy a ir a gráfica aquí. Podemos cerrar nuestras DevTools. Voy a deshacerme de esta consulta estándar aquí mismo, abre esto. Entonces lo que voy a hacer es que podemos nombrar primero a nuestra consulta. Es una buena convención para hacer eso, así que solo voy a crear una consulta con nombre. Voy a llamarlo productos de consulta. Entonces aquí es donde realmente empezamos a solicitar algunos datos. Voy a solicitar productos. Va a equivocarse a menos que determine cuántos quiero. Voy a pedir los primeros nueve. Entonces voy a abrir una selección aquí y voy a agarrar todos los nodos y los elementos que quiero en él. Empecemos con el título y el manejo. Vamos a correr eso. Dice que la consulta no existe en la ruta de consulta de tipo. Eso es porque tengo que mover esto. No debería estar anidando eso en un objeto ahí. Como pueden ver, ahora se ve mucho mejor, hay resaltado de sintaxis, así que creo que hemos resuelto ese tema. Vamos a averiguarlo. Ahí lo tenemos. Podemos recuperar los primeros nueve productos de la tienda a primeros nueve productos de la la que estamos accediendo, que es solo la tienda de vista previa de Hydrogen, y podemos recuperar el título y asa de todos estos productos. Empecemos con eso. Vamos a trasladar esto de nuevo a nuestro proyecto. Intenta sangrarlo muy bien aquí, así. Entonces necesitamos traer en uso la consulta aguda. Eso lo estamos importando de Hidrógeno, claro. Entonces queremos ir dentro de nuestro componente aquí. Básicamente podemos simplemente copiar lo mismo, pero usar una consulta nítida. Ahora lo hacemos por aquí. Del archivo layout.server.jsx, ponlo aquí. En lugar de una consulta nítida, solo va a ser consulta. Podemos nombrar a esto como queramos. Podríamos nombrar esta consulta de catálogo, pero por ahora solo la llamaré consulta. Entonces lo que voy a hacer es que solo consigamos en consola registrar los datos que regresen para que sepamos cómo estructurarlo en D. Echemos un vistazo aquí. Tenemos un poco de error. CacheLong no está definido, así que tenemos que asegurarnos de que estamos importando eso de Shopify Hydrogen también. CacheLong. A ver si esto funciona ahora. Volvamos. Abre localhost 3,000 en una nueva pestaña y volvamos a abrir nuestras herramientas de desarrollo para ver si hay algún error del lado del cliente. Aquí tenemos un error. Dice que no se pudo conectar a la API de escaparate. Esto podría deberse a mi conexión a Internet. Se me olvidó poner una C ahí, así que probablemente ese es el tema. Vamos a refrescarnos por aquí. Ahora solo necesitamos entrar en la ruta del catálogo, y ahora no hay errores. Aquí hay algún error. Pero antes de que viéramos ese error, puede ver aquí, podría ser un poco difícil de ver, pero en realidad estamos cerrando sesión en la consola el objeto de datos que vuelve de usar la consulta aguda. Puedes ver aquí, podemos usar esto como nuestro formato para la estructuración D, podemos agarrar nodos dentro de los productos dentro de los datos aquí. Yo voy a hacer eso. Déjame empujar esto de nuevo para que podamos copiar lo que tenemos aquí. Al igual que hicimos aquí cuando D-estructuramos y llegamos a esos objetos puntiagudos, qué podemos hacer aquí, si lo copio, vamos a entrar en datos una vez más, pero luego en vez de agudo vamos a entrar en productos. Entonces dentro de los productos se sacarán los nodos. Entonces si ejecuto nodos como mi consola registro aquí, vamos a refrescar nuestra página de catálogo, entonces si miro aquí puedes ver todos los nodos regresando. Estos son nuestros productos. Se puede ver que está regresando algunas veces, pero se puede ver una matriz de nodos. Estamos recuperando el título y el asa de cada uno de estos productos. Entonces lo que podemos hacer es que podamos usar eso aquí. Podría ir nodos. Aquí es donde en lugar de ejecutar un bucle, lo que vamos a hacer es ejecutar mapa. Te explicaré por qué lo hacemos en sólo un segundo. Vamos a correr mapa. Entonces lo que vamos a hacer es pasar por cada producto a través de alguna JSX. Solo voy a poner aquí un div básico y luego lo que puedo hacer es lanzar una expresión JavaScript en este JSX. Puedo hacer el título del producto aquí mismo. En realidad, lo que haremos es hacer de esto una lista, así haré una lista desordenada. Esta no va a ser la forma final, sino que simplemente se verá mejor para este ejemplo básico. Entonces le pegaré a “Enter” en eso. Aquí hay un error de sintaxis. Creo que ahí necesitamos otro soporte. A veces cuando hay un error de sintaxis detendrá su servidor por completo, así que necesitamos volver a ejecutar el servidor, npm ejecutar dev. Ahora si vamos a nuestra página de catálogo, verás que tenemos una lista desordenada con todos nuestros diferentes productos. Bueno, al menos los nueve primeros de ellos, que es lo que solicitamos aquí mismo. Ahora para explicar esta cosa del mapa aquí, básicamente, queremos devolver todos los nodos, pero necesitamos envolver cada uno de estos nodos en alguna JSX, ahí por qué estamos usando map. Si acabamos de hacer nodos por sí mismos sin ningún JSX, veamos si eso devuelve algo. No podemos simplemente devolver una matriz aleatoria. Necesitamos convertir esa matriz en JSX, así que es por eso que estamos usando map aquí, que básicamente va a crear una matriz de JSX. Esa expresión se insertará entre estas etiquetas de lista desordenadas. Ojalá, eso explica el uso de la función map ahí en JavaScript. Tenemos una lista básica de todos nuestros títulos de productos a continuación. Los primeros nueve, al menos, por el momento. Pero lo que queremos hacer es ampliar eso. Muestre el precio, exhiba la imagen en una pequeña grilla agradable como cabría esperar en cualquier sitio de comercio electrónico. Lo que vamos a hacer es crear un componente para este elemento de la cuadrícula del producto. Lo que voy a hacer es entrar en mi archivo de componentes aquí y crear, voy a llamarlo, ProductGridItem.server.jsx. Entonces lo que voy a hacer es la exportación habitual, una función por defecto, y así nuestro componente. Voy a simplificarlo dentro del propio componente real y llamarlo ProductCard. Entonces obviamente necesitamos una declaración return para el JSX. Seamos muy simples por el momento y movamos este elemento de la lista a nuestro componente aquí. Ahora vamos a intentar acceder al producto, lo que significa que necesitamos analizarlo como un prop. Voy a sacar el objeto producto del prop de este componente, y luego de este lado, necesitamos importar este productGridItem o ProductCard, como lo hemos llamado aquí. Primero voy a escribir aquí, ProductCard y presionar “Guardar” en eso. A veces lo importa automáticamente para ti, pero parece que esta vez vamos a tener que hacerlo nosotros mismos. Voy a importar esa ProductCard. Como pueden ver, el resto se llenó para nosotros, lo cual es muy agradable. Intentemos reorganizar esto un poco más agradable. Pondré mis componentes que yo mismo creo después mis importaciones de reaccionar e hidrógeno así. Entonces lo que vamos a hacer es crear un prop llamado product y analizar en ese producto objetos. Ahora si vamos por aquí y refrescamos, verás que obtenemos exactamente el mismo resultado. Ahora solo estamos encapsulando este código en su propio componente. Por supuesto, tenemos que exportar eso y luego importarlo aquí arriba y luego podemos usarlo aquí abajo, analizando cada producto en sus accesorios. Hay muchas cosas que vamos a hacer dentro de esta ProductCard. Eliminemos esta UL porque vamos a crear esto como una grilla, no como una lista. Así que voy a deshacerme de ese componente UL, actualizar el anidamiento, y luego por aquí lo que voy a hacer es crear un div con la clase de product-grid-item, que de nuevo, esto es CSS existente que coincide con lo que he creado aquí. Entonces lo que quiero hacer una vez que esté aquí adentro es obviamente traer el título, pero también quiero traer la imagen y el precio. Ahora cuando se trata de imágenes en Shopify Hydrogen, Shopify tienen este increíble componente que se acaba de llamar imagen. Si acabo de importar el componente de imagen de Shopify Hydrogen, y luego si agrego el campo de imagen por aquí, realidad, hagamos esta consulta de nuevo en una interfaz gráfica por aquí. Entonces si encuentro cuál es el campo que estoy buscando, esta es la parte práctica de usar gráficos. Aquí tengo autocompletar. Si olvido cuál es el nombre del campo de imagen en este nodo en particular, va a autocompletarlo por mí. Entonces si intento ejecutar eso, verás que se equivoca porque tengo que tener selecciones aquí. Esto va a devolver una conexión de imagen, creo. Si coloco el cursor sobre él, va a devolver una imagen. Lo que podemos hacer es buscar la documentación para ver qué campos hay en el objeto de imagen. Estoy aquí en la referencia de la API de escaparate. Vamos a la tienda en línea, a los objetos. Ahora creo que está en objetos comunes. Aquí está el último lugar en el que busques. Aquí puedes ver el objeto de imagen, y luego aquí puedes ver, para obtener la URL de la imagen, podemos acceder a él así. Podemos obtener el altText, podemos obtener el ancho. Lo que podríamos hacer es entrar aquí, tomar la URL, y luego podríamos crear nuestra propia imagen HTML básica y traer ese SRC. Pero entonces no obtendríamos el beneficio de las imágenes receptivas. Lo que realmente podemos hacer en cambio es usar el componente de imagen, si voy por aquí, desde el marco Shopify Hydrogen. Te voy a mostrar cómo funciona eso en sólo un segundo. Pero primero, necesitamos flashear esta consulta aquí mismo. Yo también voy a agarrar el AltText. Voy a agarrar la altura y voy a agarrar el ancho. Vamos a ejecutar esto, asegurarnos de que no haya errores. Tenemos el nombre de usuario y los datos relacionados con la imagen destacada. Voy a agarrar eso y pegar eso por aquí dentro de nuestra consulta. Ahí vamos. La anidación está un poco apagada. Dale un toque así. Entonces entonces lo que voy a hacer aquí es abrir un componente de imagen aquí mismo. Cómo funciona esto es que podemos poner dentro de Alt, podemos acceder a los objetos de imagen destacados en el producto y luego agarrar el AltText. Pero entonces para el resto de los datos de imagen, podemos simplemente analizar a través de este prop de datos, el objeto de imagen en sí. Sólo necesito cerrar eso. Entonces si presiono “Guardar” en eso y nos refrescamos por aquí en nuestra app de hidrógeno, puedes ver todas nuestras imágenes venir a través. Si hago clic con el botón derecho y los inspecciono, puedes ver que tenemos una carga perezosa incorporada, y tenemos todos estos diferentes tamaños de respuesta basados en el ancho de la pantalla. En Shopify Liquid, puedes hacer esta optimización creando un fragmento y usando el filtro de URL de imagen para crear diferentes URL de imagen para servir en función de las dimensiones de la imagen dentro de tu Shopify tienda. Pero aquí, todo lo que tenemos que hacer es usar el componente de imagen dentro de Shopify. Para mostrarte la alternativa, por ejemplo, si acabamos de hacer una etiqueta de imagen con SRC y luego podríamos simplemente analizar en product.featuredimage.url, guarda eso, actualiza por aquí, obtienes el mismo resultado, pero ya ves cómo se está cargando un poco más lento. Entonces si entramos aquí, vemos que sólo tenemos el único SRC. Para imágenes receptivas, no tenemos que pasar por y escribir todo el código nosotros mismos, solo necesitamos usar este práctico componente de imagen proporcionado por Shopify Hydrogen. Como puedes ver, ya está recargada y puedes ver ahora tenemos habilitada la carga perezosa y todas estas diferentes URL generadas automáticamente para nosotros. Ese es el poder de usar algunos de estos componentes que vienen a través del hidrógeno. Algunos de ellos innecesarios y algunos de ellos simplemente nos hacen la vida mucho más fácil. Veremos eso cuando hagamos opciones de productos y también cortamos. mejor podríamos hacer eso sin estos componentes, pero ellos simplemente nos hacen la vida mucho más fácil y espero que ustedes estén empezando a ver eso ahora. Lo que voy a hacer es envolver esto en un contenedor de imágenes. Esto es solo algunos CSS para que aparezca exactamente como lo queremos. Aquí nos estamos quedando sin espacio, así que voy a abrir esto. Entonces debajo del contenedor de imagen, voy a poner en un div aquí con la clase de product-grid-item-title. Entonces aquí puedo poner en el product.title, y luego vamos a golpear “Guardar” en eso, refrescar por aquí y se puede ver que tenemos el título del producto y la imagen. Pero generalmente en una grilla de productos también quieres ver el precio así que hagámoslo a continuación. Vamos a necesitar traer algunos datos adicionales para eso porque actualmente solo tenemos el identificador del título y la imagen destacada. Volvamos a pasar a la gráfica. Entonces debajo de la imagen destacada, si escribimos algo así como el precio, que va a obtener el rango de precios y el compareAtPriceRange. Algo que es un poco más preciso es sumergirse realmente en el producto y agarrar su variante. Verás que podemos acceder al rango de precios y compararRango de precios. Pero si queremos obtener un precio específico, lo que podemos hacer es indagar en las variantes. Lo que voy a hacer es que sólo voy a buscar la primera variante. Por supuesto, esta es una selección con nodos dentro de ella, así que vamos a tener que abrir nodos. Entonces dentro de varianza, voy a agarrar, veamos qué viene por precio. Tenemos PriceV2, y eso es en realidad una selección en sí, así que tenemos que entrar y agarrar la cantidad y el código de moneda. Entonces, si queremos tener el CompareatPrice también, tendremos que hacer exactamente lo mismo para eso, así como el código de moneda. Si le pego a “Guardar” en eso no se guardará sino que se ejecutará en eso. Miramos aquí abajo. Se puede ver que para este snowboard de hidrógeno, el precio es de 600 dólares, pero en realidad tiene un compareatPrice de casi 650 dólares. Obviamente esto funciona, voy a copiar eso. Péguela de nuevo en nuestro proyecto. Desafortunadamente, creo que vamos a perder nuestra anidación. No, en realidad, estar bien con el anidamiento. Pulsa “Guardar” en eso y luego por aquí lo que puedo hacer es crear un nuevo div aquí. Voy a usar la clase de producto-grid-prices y aquí, puedo hacer product.priceV2.amount para que sea realmente simple para empezar. ¿Qué he hecho mal aquí? Esto no está a la altura de lo que tengo aquí los productos. Se me olvidó entrar en la variante. Vamos a entrar en la varianza y entrar en nodos, agarrar el primer nodo. Eso es un error ortográfico, variantes.nodes , precio a cantidad. Ahí se puede ver que tenemos el precio entrando, pero no está formateado. ¿Qué vamos a hacer? Bueno en Shopify líquido hay un filtro para esto, que formatea muy bien el precio para nosotros. Tenemos algo similar dentro Shopify hidrógeno llamado el componente dinero. Voy a importar el componente de dinero aquí mismo y luego vamos a quitarle eso y luego abrir un componente de dinero aquí. Entonces igual que hicimos con la imagen, puedo poner en la preparación de datos ese mismo precio, pero no quiero entrar específicamente en la cantidad. Este componente va a averiguar cuál es la cantidad y cuál es la moneda y formatearla muy bien en base a esos dos. He cometido un error aquí. Tengo dos corchetes, y eso ha detenido mi servidor. Ejecutemos de nuevo el servidor, ejecutemos npm run dev, y luego volvamos a ejecutar nuestra página de catálogo aquí. Ahora puedes ver que tenemos el símbolo de moneda, y estos precios están formateados como moneda. Tenemos moneda muy bien formateada aquí. Ahora, por el bien de la integridad, vamos a construir en la comparación en el precio también. Lo que pueda hacer aquí abajo, hagamos esto para empezar, y luego limpiaremos esto. Voy a entrar aquí y voy a agarrar lo que fue comparar. Volvamos a aquí. Compara al precio V2, pon eso aquí, y ciérralo igual que ese. Ahora vamos a conseguir los dos precios uno al lado del otro. A lo mejor no. Aquí tenemos un error, que es interesante, que sí parece coincidir con lo que estamos regresando aquí. Vamos a usar un registro de consola para depurar aquí. Voy al objeto de productos de registro de consola aquí. Podemos ver lo que se está devolviendo. Tienes título, manejar imagen destacada. Vamos a entrar en variantes, nodos y volver a ejecutar. Desplazarse hacia arriba por aquí si vamos. Ya veo. A veces comparar precio V2 es nulo y por eso hay un error. A veces hay una comparación al precio V2, pero a veces es nulo. Lo que el componente de dinero está tratando de hacer es acceder y atribuir a un objeto que es ahora. Tenemos que asegurarnos de que estamos comprobando si esto es realmente nulo. Lo podemos hacer aquí es si está devolviendo un valor veraz, entonces podemos poner en esta básicamente declaración de retorno aquí y luego ejecutar ese precio de comparación. Aquí puedes ver en estos donde no hay una comparación de precio es solo mostrar un precio. Donde hay una comparación en el precio está mostrando ambos precios. Ahora bien, esto es desordenado obviamente. Mira esto, esto no es muy agradable. Lo que vamos a hacer es limpiar esto aquí arriba y luego poner algo un poco más agradable aquí abajo. Voy a deshacerme de este registro de la consola. Lo que voy a hacer es usar la desestructuración de objetos para quitar estos atributos de este nodo aquí mismo. Lo que voy a hacer es agarrar el precio V2, y lo voy a sacar como precio justo. Entonces voy a agarrar el comparar en precio y solo voy a lograr eso como comparar en precio, no el comparar en precio V2. Realmente no necesitamos ese V2. Creo que eso es solo el versionado de API ahí mismo. Entonces vamos a agarrar eso de lo que tenemos aquí abajo, product.variants.nodes, y luego agarrando el primero en esa matriz. Pero necesitamos algún respaldo en caso de que alguno de estos sea nulo. Aquí vamos a poner un signo de interrogación. Si es nulo o indefinido, simplemente pasaremos por un objeto vacío. Entonces en lugar de verificar si esto es ahora lo que haremos, que es un poco más sofisticado un poco más agradable, solo verificaremos si el monto de comparar al precio es mayor que el precio del mismo. Yo lo llamaré está descontado. Entonces pondremos aquí un booleano, compararemos al signo de interrogación de precio en caso de que devuelva nulo, cantidad es mayor que interrogación de precio en caso de que devuelva cantidad nula. Entonces, así que aquí, voy a cambiar estos aquí también, se descuenta. Si se descuenta, va a devolver esto. En lugar de tener el precio representado muy largo aquí, solo podemos usar el precio que sacamos aquí arriba, precio, y luego comparar al precio. Si le pego a “Guardar” en eso y vamos a refrescarnos por aquí, verás que obtenemos el mismo resultado, pero es un poco más limpio y en nuestro JSX, es mucho más agradable de leer. También le voy a dar a éste un nombre de clase de productos comparar a precio. Entonces si le pego a “Guardar” y recargar, ahora se puede ver que comparar al precio es claramente el precio de rebaja visualmente porque tenemos algunos CSS que se aplican en él ahora. Otra cosa que te mostraré antes de que terminemos es, como puedes ver, algunos de estos tienen.00, que quizás no quieras mostrar en la parte frontal. Obviamente, si hay un valor en estos decimales, probablemente no quieras redondear. Pero cuando hay algo como 600, realmente no necesitamos ir a dos decimales. Lo que podemos usar es similar en Shopify líquido con formato de precios, podemos poner algo así como sin ceros finales. Entonces si presiono “Guardar” en eso y volver atrás, puedes ver todos los productos que tenían.00 van a tener eso eliminado. Esa es otra pequeña y genial opción de formato ahí. Lo voy a dejar ahí para la página del catálogo. Lo que haremos en el futuro es que los haremos vinculables. Pero debido a que aún no tenemos una ruta de producto creada, solo va a resultar en dirigirse a una página 404. Lo mantendremos así por ahora. En el siguiente video, vamos a aprender a enviar a través de un gestor de colección en la URL y consultar nuestra API de escaparate para devolver solo los productos dentro de esa colección. Esencialmente, vamos a estar creando una página de colección en el siguiente video. 9. Construyendo una página de colección: Entonces en el último video, creamos una ruta de catálogo, que está mostrando todos los productos de nuestra tienda. No está filtrando por una colección en particular. En realidad corrección, sólo está mostrando los primeros nueve porque sólo hemos consultado a los nueve primeros. Pero si extendemos esto a 100 o lo que sea, obtendremos los primeros 100 o hasta cuantos sean los que estén en nuestra tienda para empezar. Si metemos 100 aquí y le pego a “Guardar” y vuelvo a ejecutar esto, no vamos a conseguir 100 porque no hay 100 en total, pero vamos a conseguir hasta 100. Entonces creo que hay 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12 tablas de snowboard dentro de esta previsualización de hidrógeno. Voy a poner eso a nueve. Aviso hacer que nuestro sitio funcione más rápido, pero siempre podemos actualizar eso a cuantos necesitemos. En este video, lo que vamos a hacer es crear algo muy parecido a esto, así que crearemos otra grilla de productos, pero con esta ruta en particular, será una ruta dinámica. Así podremos ir a colecciones/ algo así como zapatos, ya que aquí tengo prellenados, y luego podemos ir a mirar una cuadrícula de productos que está filtrando solo a esa colección. Lo que haremos para esto es que volveremos a nuestro editor de código aquí e iremos a rutas aquí, y porque va a ser una Ruta Anidada, entonces va a ser colecciones y luego va a tener el nombre de la colección o el asa de la colección. Necesitamos crear una carpeta dentro de nuestra carpeta rutas aquí, llamarla colecciones, y luego aquí vamos a hacer algo que es un poco interesante. Vamos a poner en una ruta dinámica, vamos a poner en el mango como una variable y luego escribir server.jsx. Ahora lo que voy a hacer aquí es que voy a sacar toda esta información, básicamente copiar y pegar todo de esto de aquí a esto de aquí mismo, y luego por supuesto, voy a necesitar actualizar esto de catálogo a colección, y eso es todo lo que voy a hacer por ahora. A ver, aquí tenemos un problema. Tenemos que actualizar las bocanadas aquí arriba que llevan a nuestros componentes porque ahora estamos anidados en, como puedes ver aquí, otra carpeta dentro de nuestra ruta así que vamos a necesitar agregar punto, punto dash, otro conjunto de esos dos, ambos de estos para que podamos navegar al lugar correcto o ejecutar npm, ejecutar dev nuevamente. Entonces si nos refrescamos por aquí, deberíamos estar todos bien. Esa era una cosa que necesitábamos actualizar también antes de que pueda ejecutarse. Realmente la única diferencia aquí en esta ruta comparación con nuestra ruta de catálogo es que vamos a pasar por el asa y así obviamente vamos a necesitar usar esa información. Vamos a necesitar pasar eso a nuestra consulta aquí abajo y luego la consulta va a devolver solo los productos que son de esa colección. Pero esencialmente aquí en nuestro JSX, prácticamente no hay nada que actualizar. Lo que vamos a hacer para poder utilizar los parámetros de ruta, es introducir un nuevo gancho de Shopify hidrógeno, podría ponerlo aquí. UserOuteParams, es el nombre del componente y luego podemos usar este gancho para sacar el asa de los params de ruta, así que voy a usar la estructuración aquí, agarra el asa, que vendrá de UserOuteParams. Ahora para poder pasar esa variable, que maneja a través nuestra consulta usando el gancho UseShopQuery, voy a tener que agregar en mis variables aquí. Voy a abrir un objeto y después sólo voy a pasar por el mango. Ahora si me desplazo hacia abajo, puedo usar ese identificador dentro de nuestra consulta. ¿Cómo lo hacemos? En primer lugar, voy a cambiar el nombre de esta consulta a algo más apropiado. Voy a llamarlo collectionDetails y luego en nuestro título, queremos especificar que vamos a pasar por una cadena como identificador. Entonces en lugar de buscar productos, voy a usar el Comando X para cortar a eso, así eliminándolo de nuestra consulta para empezar, pero luego lo voy a pegar de nuevo más tarde. Ahora lo que tenemos que hacer es en realidad consultar para encontrar una colección, y la forma en que vamos a hacer eso es por su mango, así como esto. Entonces dentro de aquí, vamos a agarrar algunos detalles sobre esta colección, ld, título, descripción. Tomemos algo de información SEO también. Esa es una selección, así que dentro de esa selección, necesitamos agarrar la descripción y el título. Podríamos agarrar la imagen de la colección. No lo vamos a usar en esta clase en particular, eso es sólo un ejemplo. Pero podemos sacar cualquier información que necesitemos de ese objeto de colección, y luego voy a pegar ese código que teníamos antes. Podemos entonces sobre esa colección en particular. Encuentra los primeros nueve productos y luego usa esa misma información. Vamos a tratar de arreglar la sangría aquí un poco, eso fue inútil. Si le pego a “Guardar” en eso, corramos ahora. En realidad necesitamos saber qué es una colección en nuestra tienda así que para poder hacer eso, solo voy a entrar aquí y consultar nuestra tienda aquí mismo por las primeras nueve colecciones, y luego voy a escribir en nodos para acceder a cada nodo, y luego voy a buscar el asa. Esto es solo para ver qué asas están disponibles en la tienda en este momento. Así que aquí están todas las diferentes colecciones a través de sus asas. El primero nueve por lo menos, pero sólo hay 1, 2, 3, 4, 5, 6. Se trata de todas las colecciones dentro de esta tienda en particular. Ahora puedo ir por aquí, ir a colecciones, y luego poner en esa ruta dinámica pasando en el asa de la colección, voy a golpear enter en eso. Tenemos un error, entonces, ¿qué tenemos? cadena no es un tipo de entrada definido, así que volvamos a nuestra consulta por aquí y he escrito mal esto. Necesito poner esto como cadena con un signo de exclamación. Esto es solo un error de sintaxis de mi parte y luego si me refresco por aquí, ¿qué tenemos ahora? Nodos de lectura indefinidos. Esto está relacionado con la configuración que tengo aquí arriba, porque ahora nuestros nodos están anidados dentro de los productos, dentro de las colecciones, no solo de los productos. Vamos a comentar esto por un segundo y voy a registrar en consola los datos que se están devolviendo de la API, así que si me desplazo hasta aquí, verás que tenemos colección primero. Entonces vamos a necesitar actualizar eso. Cortemos esto como hicimos antes con la consulta, pongamos en colección y luego peguemos después de eso. Tenemos que poner en otro llaves rizadas y luego productos nodos. Ahora puedes ver que funciona. Esto obviamente se ve bastante similar a la página del catálogo, así que si queremos confirmar que esta es en realidad esa colección, lo que puedo hacer es ponernos en un h1 aquí y podemos agarrar el punto de recolección de datos. ¿A qué accedimos? ¿Título? Accidentalmente he vuelto a abrir dos llaves aquí. Solo necesitamos uno a cada lado, y luego si presiono “Guardar” en eso, refrescar por aquí, tengo otro error aquí. No lo he configurado correctamente, así que recopilación de datos, creo que tenemos que ir datos dos veces aquí, data.data.collection.title, y aquí puedes ver Colección Freestyle. Entonces si entro en ¿cuál era uno de los otros? De vuelta al país, así que si entro en el backcountry, ahora definitivamente podemos ver que la lista de productos que aparecen diferente, esta vez, definitivamente comparada con la colección freestyle. Ahora puedes ver que podemos pasar en el asa de recogida y devolver solo esa colección. Ahora esto es feo, así que vamos a limpiarlo un poco. Hagamos recopilación de datos, recolección de datos, y luego deberíamos poder simplemente sacar el título de la colección así, y probablemente podamos hacerlo aún más agradable poniendo eso aquí . Entonces esta estructuración a partir de la colección, gritos. Ahora solo necesitamos gritos, colección. A ver si eso funciona. Así que eso es un poco más agradable también. Pasé por eso un poco rápido, pero básicamente solo estoy estructurando lo suficiente a partir del objeto de datos para obtener la colección y luego verme, tengo ese objeto de colección ahora. Entonces estoy sacando los nodos de producto de eso ahora. Eso resulta en una desestructuración menos anidada y nos permite agarrar cosas como collection.title, y nodos de estos objetos aquí mismo. Entonces, debido a que ya creamos nuestro artículo de cuadrícula de productos y lo reciclamos , no hay mucho trabajo aquí por hacer. Lo que hemos hecho en este video comparado con el último es pasar por ese identificador así que obviamente este no tenía ningún identificador viniendo y acabamos de acceder a los productos en nuestra raíz de consulta. Ahora estamos accediendo a los productos de nuestra colección, y por supuesto necesitamos especificar qué colección buscamos. Lo hacemos a través del asa y averiguamos el mango a través de los parámetros de ruta, y solo significa que tenemos un nivel de anidación más profundo porque estamos buscando dentro de una colección, así que que nos obligó a actualizar nuestro objeto desestructurando aquí arriba. Pero por lo demás ahora tenemos las páginas de colección establecidas en nuestra tienda. Entonces en el siguiente video, lo que vamos a hacer es crear nuestra página de producto ahora, para que en realidad podamos, cuando hacemos clic en estos artículos, entrar en cada uno de estos productos. 10. Construyendo una página de productos: En los dos últimos videos, configuramos nuestra cuadrícula de productos dentro de esta página del catálogo, que devuelve todos los productos dentro de nuestra tienda. Entonces nuestra ruta de recolección individual, que es una ruta dinámica que podemos pasar por el asa de cualquier colección que queramos cargar. Pido disculpas por la lenta velocidad de conexión aquí. Pero aquí tienes. Aquí está nuestra colección de estilo libre. Pero como puedes ver cuando hacemos clic en alguno de estos, no están enlazando a ninguna página de producto individual, porque aún no lo hemos construido. Eso es lo que haremos en este video. En el video siguiente, crearemos la funcionalidad del carrito. En los dos siguientes videos, podríamos ver aumentar un poco la complejidad porque las dos partes más grandes de la interactividad, se podría decir, dentro de un sitio web de Shopify suelen ser la selección de variantes y las funcionalidad de carrito. Estas son las áreas de nuestro sitio Shopify que solemos querer actualizar instantáneamente administrando el estado en el front end. Por suerte para nosotros estamos usando React y estamos usando Shopify Hydrogen. Toda esa funcionalidad asincrónica va a venir de forma natural a esta plataforma. Es uno de los beneficios de usar React e Hydrogen. Pero va a significar que vamos a usar algunos proveedores más y algunos ganchos más para que esa funcionalidad funcione. Pero como verás, después de que revisemos esto, comenzarás a ver que hay tantos componentes y ganchos en el Hidrógeno que nos están permitiendo hacer esto. Será bastante sencillo una vez que lo rodees de cabeza. Antes de que construyamos esta página de producto, voy a actualizar nuestros enlaces aquí arriba porque ahora tenemos una página de catálogo y una página de colección. Voy a repasar a nuestro componente de diseño, y luego en el primer enlace, lo voy a vincular a nuestro Catálogo. El segundo enlace, voy a vincular eso a colecciones Freestyle. Bien podría hacer éste, Freestyle. Si presiono “Guardar” en eso y se actualizará por aquí, ahora verá que podemos navegar a nuestro Catálogo a través de nuestra navegación de encabezado, y podemos navegar directamente a esa Colección Freestyle a través de nuestra navegación de cabecera también. Vamos a crear esta ruta de productos. Al igual que hicimos para las colecciones, vamos a crear una ruta dinámica, pero tenemos que anidarla dentro de nuestra carpeta de productos. Entonces aquí dentro, voy a hacer el mismo título que antes, handle.server.jsx. Entonces como suelo hacer, exportemos un componente de inmediato. Solo voy a llamar a este Producto y luego una declaración de devolución aquí para nuestro jsx. No le gusta que haga eso. Siempre tienes que poner algo de jsx en el medio aquí, lo contrario se asusta Vamos a poner algunos jsx aquí. De esa manera no impedirá que nuestro servidor ejecute npm run dev. Porque antes de comenzar a construir este componente, lo que quiero hacer es comenzar a probar algunas consultas GraphQL aquí mismo. En lugar de consultar productos, hagamos un producto de consulta. Entonces para apuntar a un producto específico, vamos a hacer lo mismo que antes con las colecciones. Voy a especificar que vamos a pasar en un identificador y el tipo va a ser una cadena. Vamos a noquear estas cosas de aquí. Entonces lo que voy a hacer es agarrar un producto a través de su asa. El identificador se va a pasar en las variables de nuestro gancho UseShopQuery, tal como lo hicimos para la recolección. Ahora una vez que determinemos el producto, voy a devolver el título del producto. ¿Qué más necesitamos? Descripción, HTML, y luego vamos a querer devolver la imagen del producto. Podemos pasar por los medios de comunicación. Los medios pueden ser modelos 3D , pueden ser imágenes, pueden ser videos. Pero para que sea realmente simple para esta clase, solo vamos a manejar imágenes. Voy a abrir los medios aquí. También para que sea simple, solo vamos a mostrar una imagen de producto. Sólo voy a seleccionar el primer bit de medios. En esta tienda Shopify en particular, podemos dar fe de que el primer medio va a ser una imagen de producto. De lo contrario, tal vez nos gustaría buscar múltiples medios y luego asegurarnos de que estamos encontrando una imagen fuera de esta lista de medios. Pero creo que es bastante seguro asumir que la primera parte de los medios va a ser una imagen. Continuando con esa suposición, voy a abrir nodos aquí. Entonces para los campos mediáticos, nuevamente, esto es asumir que es una imagen. Si quisieras que esto funcionara con todo tipo de medios, tendrías que hacer lo que te mostré en una de las lecciones de teoría, que era tener esos tres puntos y decir en MediaImage. En realidad sigamos haciendo eso. Si es un MediaImage, va a devolver esta selección, ID, y luego la propia imagen con la URL, ancho y alto. Nuevamente, sólo vamos a estar tratando con imágenes mediáticas en esta clase en particular. Pero si quisiéramos tener una selección diferente en función de si es video, solo podemos ir a Video y luego poner nuestra selección para videos. Lo haces en las fuentes. Esto es igual que el ejemplo que vimos anteriormente en la documentación de Shopify. Pero para que esta clase la mantenga simple, solo voy a asumir que solo estamos mirando imágenes, que creo en este escaparate de hidrógeno en particular. No sé si hay algún modelo 3D o videos de todos modos. Es una suposición bastante segura para hacer aquí. Entonces vamos a ejecutar eso para empezar. En realidad, tenemos que pasar por una variable aquí, así que probablemente no va a funcionar. No tenemos una variable. A lo mejor quiero jugar con eso aquí porque en realidad no tenemos un control del trabajo con, pero vamos a agarrar esto, y pongamos esto en una consulta aquí. Si se rompe, se romperá dentro nuestra aplicación y solo lo probaremos aquí. Haremos gql para albergar nuestra consulta. Entonces lo pondremos ahí. Entonces por supuesto tenemos que importar, useShopQuery que todo gancho importante de Hidrógeno. También necesitamos gql. Entonces si vamos a usar CacheLong, agarra también a CacheLong. Entonces aquí dentro, vamos a hacer un const data. No lo vamos a desestructurar todavía. Después usaremos ShopQuery. Haremos la consulta como la consulta constante que hemos enumerado aquí abajo. Cache será CacheLong, igual que antes. Después pasaremos en las variables de handle. Cómo vamos a pasar en el asa, vamos a tener que volver a usar los parámetros de ruta. Voy a agarrar UserOuteParams. Estoy corriendo por esto bastante rápido porque este es el mismo patrón que hicimos para la colección también. Sólo vamos a sacar el mango const del gancho de UserOuteParams. Entonces si no especificamos handle aquí, podemos escribir la forma corta de solo manejar. Obviamente tenemos un poco de error aquí que ha provocado que nuestro servidor se detenga. Pero vamos a registrar estos datos en la consola y ver si tenemos algún problema con nuestro código en este momento. Eso se ve bien. Ahora todavía vamos a necesitar pasar por un asa, así que vamos a construir eso en nuestros productosGridItem. Voy a introducir otro componente aquí arriba del hidrógeno, el componente de enlace, y voy a transformar esto de un div en un componente de enlace de Shopify. Entonces aquí dentro, voy a hacer para, agarrar el producto, e ir a su URL. En realidad, antes de hacer eso, voy a necesitar poner en los productos anteriores parte de ese camino. Vamos a pegarle a ahorrar en eso. Si volvemos a aquí, y vamos a ir a esa colección de estilo libre o cualquier página de colección o página catálogo donde ProductGridItem esté en uso. Ahora nuestras imágenes están actualmente enlazadas. Si inspeccionamos alguno de estos, se puede ver que se dirige a undefined. Eso no va a funcionar [Risas] indefinido. Tenemos que averiguar cuál es el tema ahí. URL del producto. Quizá no lo solicitamos. Vayamos al catálogo. No vamos a usar la URL, vamos a usar el identificador. Así es como vamos a construir la URL. Refresca por aquí y luego echa un vistazo aquí. Se puede ver que el snowboard es el asa de esa. El asa para este es mail-it-in-freestyle-snowboard. Nombres interesantes aquí. Si vamos aquí, podemos ir a esa ruta en particular. Actualmente, no hay nada que surja en la parte delantera. Volvamos a nuestro código por aquí, y por supuesto, nos registramos en consola a los datos. Aquí puedes ver, y voy a ampliar esto para que veas más fácil, vemos lo que se devuelve de la API de Storefront. Parece que nuestra consulta ha funcionado, hemos pasado en el identificador, y hemos vuelto el título y la descripción HTML, y un objeto que contiene los medios. Tendremos que profundizar en ese objeto si queremos ver qué hay dentro. Ahora solo voy a agregar también la información de variante a esta consulta porque definitivamente vamos a necesitar usarla para poder hacer la selección de variantes una vez que lleguemos a ella. Voy a intentar agarrar todas las variantes. Creo que el número total de variantes que puedes hacer en una tienda Shopify es de 100 de todos modos. Voy a intentar agarrar toda la varianza usando el argumento de los primeros 100. Entonces eso obviamente va a devolver una lista de nodos. Dentro de nodos, voy a agarrar el ID de variante y un montón de otras propiedades que nos van a ayudar. Vamos a necesitar agarrar el PriceV2. Entonces claro que es una selección, así que vamos a necesitar agarrar el monto y el CurrencyCode. Tomemos también el CompareAtPriceV2. Lo mismo otra vez, cantidad, CurrencyCode. Si quisiéramos, podemos tomar la imagen variante, pero solo vamos a usar la única imagen que existe en el producto para esta clase en particular. Pero una cosa que necesitamos traer en que va a ser esencial para averiguar qué variante se está seleccionando es SelectedOptions, para que podamos agarrar el nombre y el valor. Creo que eso es todo por ahora. Si recargamos por aquí, como pueden ver, solo dice objeto. Echemos un vistazo al interior de la varianza de datos. Todo lo que hacemos, tenemos que anidar. Ahora necesitamos entrar en el producto de datos.variantes. Actualicemos la página por aquí. Aquí tenemos un error indefinido en las variantes. Echemos un vistazo. Datos, producto, varianza. Producto está volviendo indefinido, lo cual es interesante. Volver a los datos de inicio de sesión de la consola. Voy a dejar esto en la clase para que ustedes vean cómo depurar. Si no sabe lo que está pasando en los datos, siempre puede simplemente registrarlo en la consola y luego puede averiguar cómo hacer su desestructuración y acceder a diferentes partes de los datos que obtienen regresaron. Como puedes ver aquí, tenemos un objeto de datos. Creo que necesito escribir de nuevo los datos. Datos, datos, producto.variantes. Aquí pueden ver eso es lo que necesitaba hacer. Aquí vamos. Si bajamos aquí, podemos ver la lista de nodos variantes y se puede ver el ID de escaparate de esa variante, el precio como un objeto, y las opciones seleccionadas como un array. Si quisiéramos profundizar aún más en eso, ir a la primera variante, así que vamos a los nodos, el primer nodo que viene a través de esa matriz de variantes, y luego entrar en selectedOptions sólo para echar un vistazo al interior. Como puedes ver aquí, para esta variante en particular, el tamaño de 154 cm, y el color de la sintaxis. Esto es lo que vamos a necesitar saber para poder determinar la variante. Básicamente lo que tenemos que hacer aquí chicos es sacar el producto de estos datos aquí mismo. O puedo desestructurar aquí abajo como lo hice antes y hacer esto fuera de los datos. O puedo ahorrar algo de espacio y mover esto aquí arriba, lo que hace que parezca un poco más complicado, pero es un poco más limpio. Así es como lo verás en los ejemplos de Shopify también. Ahora deberíamos tener acceso a ese producto si estamos pasando por un asa correcta. Entonces lo que puedo hacer aquí es product.title. Entonces si nos refrescamos por aquí, todavía no viene a través. ¿Qué estamos haciendo mal aquí? Nada está pasando en este div, lo cual es interesante. Echemos un vistazo a nuestros objetos de producto. Si actualizo, puedes ver el título del producto aquí. Yo creo que en realidad podría estar anidado. Product.product.title. Sí, y eso funciona. Eso es un poco funky, ¿no? Hagamos datos. Uy. Vamos a limpiar esto un poco. Datos, producto de datos. Entonces ahora deberíamos poder eliminar uno de esos productos. No, tampoco le gusta eso. Voy a hacer productos, y ahí lo tenemos. Necesitábamos actualizar nuestra desestructuración aquí para obtener ese objeto de producto. Pero ahora tenemos ese objeto producto, podemos empezar a usarlo aquí mismo. Ahora una cosa que notarás es que hemos perdido nuestro diseño, así que vamos a actualizar eso. Queremos poner en nuestro componente de diseño aquí y anidar esto dentro. Demos también a esta página de producto alguna información SEO. Voy a agarrar el componente SEO. Dentro del layout porque estamos consultando la base de datos o consultando la API de Storefront para obtener la información SEO, voy a envolverla en suspenso. Necesitamos importar suspenso de React. Entonces dentro de aquí, el componente SEO. Para ello, solo necesitamos escribir el tipo de producto y luego simplemente pasar el producto como el objeto de datos. El componente SEO hará el resto del trabajo por nosotros. Entonces aquí abajo, voy a darle a esto un nombre de clase de producto-página y contenedor que se alinearía con nuestro CSS predeterminado. Otra área aquí, el diseño no está definido. Fresco. En realidad, vamos a ponerlo aquí abajo porque es nuestro propio componente. Importe el diseño y ya está prellenado el resto para nosotros. Hermoso. Ahí vas. Ya tenemos nuestro diseño de encabezado, y así que si voy a cualquiera de los productos en alguna de las colecciones y hago clic en ellos, verás que irá a ese identificador, y luego cargará ese producto información. En este momento solo estamos usando el título. De hecho, construyamos esta página de producto un poco más. Para ello, con el fin de desacoplar esta consulta de la API de Storefront dentro del componente de servidor, voy a crear un componente cliente para mantener nuestra página de producto. Esto probablemente va a ser un video un poco más largo porque hay mucho código para pasar por aquí. Pero vamos a limpiar esto un poco aquí. Definitivamente vamos a querer echar un vistazo a esto, pero luego también vamos a querer crear nuestro componente productDetails aquí, client.jsx. Entonces otra vez, como hago cuando inicio cada componente, exportar función predeterminada, nombre del componente, lo llamaremos detalles del producto. Por supuesto vamos a pasar los datos del producto como una de sus indicaciones. Entonces claro que vamos a devolver alguna forma de jsx. Asegúrate de no guardar sin nada aquí de lo contrario, va a equivocarse. En esa nota, vamos a crear un div para evitar esa situación. Al igual que lo hicimos antes, ahí pondré el título del producto. Entonces en vez de esto, lo que voy a hacer es importar ProductDetails desde esa dirección. Entonces reemplazaré esto con productDetails y luego pasaré el producto como un prop. Ahí vamos. Si le pego a guardar en eso, refrescar por aquí. Otro error. este error sin contexto de localización disponible aquí, que es complicado de depurar. Lo que encontré fue que solo tenía que usar Yarn para borrar el caché. Esto es lo que mencionaba antes sobre Yarn. Inicialmente estaba usando npm run dev cada vez, pero luego instalé Yarn porque terminó siendo la única forma de sortear este problema y así que en su lugar vamos a cerrar el servidor que solo lo hice y luego voy a ejecutar yarn dev —force. Eso va a volver a ejecutar nuestro servidor, y como puedes ver ahora está funcionando. Eso es solo una extraña peculiaridad dentro del desarrollo de Shopify Hydrogen. Si alguna vez vuelves a tener un error extraño como ese y no puedes entender lo que está pasando da este comando hace, yarn dev —force. Obviamente en este caso ha funcionado y podemos seguir adelante. Lo que estaba tratando de mostrarte antes de que surgiera ese error es que ahora hemos movido ese dev con el título del producto a su propio componente y luego lo reemplazamos con la referencia a los componentes. Ahora bien, si le echamos un vistazo en nuestro navegador, se ve exactamente igual. Pero la razón por la que queremos trasladar esto a su propio componente está relacionada con la renderización del lado del servidor y del lado del cliente. Como dice en la documentación si miro por aquí a la descripción general de React Server Cponents en la documentación y me desplazo hacia abajo, puedes ver aquí que deberíamos usar componentes de servidor cuando haciendo llamadas a la API de escaparate y generalmente deberíamos usar componentes de cliente cuando estamos haciendo interactividad con estado del lado del cliente. Por eso ahora vamos a romper los detalles del producto. Deberíamos de todos modos, solo para que sea un código más limpio, pero esto quizás explique más por qué estamos usando un componente del lado del cliente aquí arriba. Estamos viendo nuestro primer componente del lado del cliente en la clase hasta el momento. Vayamos por aquí. Para ampliar esta página del producto voy a importar muchas cosas de Shopify Hydrogen, así que comencemos de inmediato. Voy a importar algunos proveedores y ganchos aquí eso nos va a permitir hacer selección de variantes mucho más fácilmente. Yo solo voy a poner en el camino al hidrógeno aquí primero, y luego voy a romper las llaves así porque va a haber un poco de una lista aquí que vamos a importar. Primero que nada quieres el ProductOptionsProvider, luego dentro de eso vamos a usar el gancho UseProductOptions y luego vamos a renderizar una imagen obviamente; ProductPrice que es muy similar al componente dinero pero está relacionado específicamente con ProductPrice. Luego el botón Agregar al carrito que quizás no utilicemos en esta lección, pero probablemente en la siguiente lección cuando comenzamos a incorporar la funcionalidad del carrito. Ahora en lugar de lo que tenemos aquí, voy a envolver todos los detalles del producto en el ProductoPtionsProvider. Este proveedor nos va a dar alguna funcionalidad clave respecto al cambio de variantes, y debido a que esto puede afectar a todo incluyendo la imagen del producto teóricamente voy a poner eso como el componente de nivel superior. Para que esto funcione, solo necesitamos pasar el producto como el prop de datos. Aquí voy a crear una imagen y solo necesitamos pasar los datos exactamente donde vive esa imagen. Vamos console.log aquí arriba para que podamos averiguar cómo navegar hasta donde vive esa información de imagen. Voy a console.log el objeto de producto que se pasa a través y a productDetails. aquí mismo voy a quitar eso de lo contrario probablemente va a haber un error. Ahora cambiemos a nuestro lado del cliente para poder leer nuestro console.log. Debido a que este es un componente del lado del cliente, ahora vemos los registros de la consola en nuestro navegador en el lado del cliente en lugar aquí en nuestra terminal en el lado del servicio, así que eso es algo a tener en cuenta. Si estamos trabajando con componentes del lado del servidor, cualquier registro de consola ocurrirá aquí. Si estamos en componentes del lado del cliente, cualquier registro de consola ocurrirá en nuestro lado del cliente, en nuestro navegador. Aquí tenemos un error porque no estamos poniendo nada en la imagen, pero esencialmente todavía tenemos el registro de la consola llegando a través. Si entramos en nodos de medios y luego entramos en esta imagen aquí, este objeto debería ser todo lo que requiere para que la imagen funcione. Echemos un vistazo. Vamos a los nodos de medios de producto; al primer nodo, y luego a la imagen. Hagamos eso, data= {products.media nodes [0]; tomaremos el primero de los nodos, y entonces.image}. Voy a presionar “Guardar” en esa actualización aquí y veamos qué pasa. El prop de datos debe tener la propiedad alt texts. Eso no me gusta, echemos un vistazo. A lo mejor solo necesitamos pasar el alt como dice aquí, así que bajemos a nuestra imagen y hagamos Alt Text aquí. Echemos un vistazo dentro de nuestra imagen principal de elementos. Se está renderizando, pero es un gigante enloqueciendo. Parecía que no estaba apareciendo, pero en realidad está apareciendo. Sólo tengo que poner aquí un nombre de clase para que se comporte, así que voy a hacer className. Nuevamente haciendo referencia al CSS que ya he creado para ti va a ser product-page-image, y luego ahora puedes ver que está muy bien en el lado ahí. Nuevamente, esto es asumir que solo estamos usando imágenes para nuestros medios de producto. Esto esencialmente se descompondría si alguien estuviera usando video o modelos 3D en sus medios de producto. Solo tenlo en cuenta, esta es una versión simplificada para el propósito de esta clase básica sobre Shopify Hydrogen. Vamos ahora dentro de este productoPtionsProvide componente puesto en un segundo componente, y aquí es donde voy a poner en mi formulario de producto. Vamos a crearlo primero. Esta es la primera vez que vamos a ver dos componentes en un archivo. No necesitamos exportarlo porque lo estamos usando directamente en este archivo, así que voy a llamar a este formulario de producto único. Hagamos un retorno con un div aquí para que toda la aplicación no se rompa solo como marcador de posición. Entonces lo que quiero hacer es en realidad quiero asegurarme de que estoy pasando por un producto como accesorio, y luego puedo agarrar componentes de ProductForm que acabamos de definir ahí abajo. Hagámoslo de cierre automático así, y luego puedo pasar por ese producto como el prop del producto. Entonces igual que antes, sólo voy a poner products.title aquí. Vamos a correr eso, a ver si funciona. Ahora tienes la imagen de los productos y el título aquí. Ahora anidado dentro de este componente ProductForm va a ser el gancho UseProductOptions. Dentro de aquí es donde vamos a empezar a crear nuestra funcionalidad de selección de variantes. Justo aquí; y esta es probablemente la parte más complicada del video así que tengan cuidado conmigo chicos, voy a sacar algunas cosas de este gancho; usoProductOptions, y este usoProductOptions es el gancho para administrar el estado de qué opciones se seleccionan y por lo tanto qué variante se selecciona de esas opciones. Lo que podemos hacer es sacar las opciones, podemos sacar el selectedVariant, podemos sacar las selectedOptions, y podemos sacar el método setSelectedOption. Es más fácil para ustedes leer, vamos a anidarlo así. Estamos agarrando todo esto desde el gancho useProductOptions, y luego aquí lo que voy a hacer es comenzar con un div pero voy a poner el título como h1 y luego debajo eso estoy va a utilizar ese componente ProductPrice, así que voy a agarrar el ProductPrice, darle un nombre de clase de producto-página-precio. Para CSS voy a pasar sin ceros finales como lo hicimos antes. Vamos a desglosar esto en múltiples líneas para ustedes. Sin ceros finales, voy a pasar en el objeto producto como el prop de datos y luego también voy a pasar en el ID de variante. Esto es importante porque el ProductPrice podría cambiar en función del ID de variante seleccionado y de hecho podemos tomar el ID de variante seleccionado de esta manera. Esto es realmente genial. Estamos agarrando esto que es una variable en este objeto de estado, así que esto en realidad se va a actualizar a medida que se actualiza en función de nuestra selección. Ese es el poder de usar este gancho, y ese es el estado del que estábamos hablando en este componente en particular que vamos a usar. Empezarás a ver esto funcionando en tan solo un segundo. Si me refresco por aquí, pueden ver que tenemos un precio subiendo por aquí. En realidad no tiene ceros finales, modo que sin ceros finales no está funcionando en esta página en particular sino para cualquier página que tenga dos ceros; dos ceros finales, eliminará esos pero como puedes ver aquí el precio sí viene a través. De nuevo, mi mala conexión a Internet está haciendo esta carga lentamente. Situación de Internet ordenada por el momento, perdón por eso. Ahí vas. Tenemos nuestro precio llegando justo ahí. Una buena idea sería obviamente crear otro productoPrice aquí y hacer lo que hicimos en ProductGridItem en términos de si es descontado mostrar el Comparar al precio también. Pero ya te he enseñado cómo hacer eso, así que deberías poder averiguarlo tú mismo. En aras del tiempo y asegurándonos de que esta lección no sea demasiado larga, sigamos adelante con la parte más importante que es el propio ProductForm. Lo que vas a ver aquí es que voy a anidar otra declaración return, así que esto va a estar basado en una matriz y esta sección vamos a alojar en un div con la clase de ProductOptions. Entonces aquí vamos a acceder a todas las opciones para crear nuestro formulario de producto. Vamos a usar mapa otra vez, vamos a tomar cada una de las opciones. Vamos a usar la estructuración para tomar el nombre y los valores de cada opción. Entonces vamos a crear una vuelta completa aquí, solo vamos a tener que añadir un soporte ahí. Entonces esto no se rompe y quita eso. Solo necesita mover esto aquí para abordar ese error. Ahí vamos. Las líneas onduladas rojas se han ido. Entonces lo que vamos a hacer es poner una declaración if aquí por si acaso solo hay un valor, en cuyo caso no hay opción para la selección. Si hay uno, sólo vamos a devolver nulo. Esto es solo un respaldo en caso de que no haya múltiples valores, en cuyo caso no tiene sentido seleccionar de opciones si solo hay una opción. Entonces si ese no es el caso, entonces vamos a devolver otro conjunto de JSX. Voy a tratar de hacer esto paso a paso como sea posible. Así que primero vamos a crear un grupo de opciones de producto para cada grupo de grupo de opciones de producto. Voy a poner aquí una llave porque es un requisito de reaccionar. Podemos usar el nombre aquí como la clave y luego voy a poner en un elementos de elegancia aquí con la clase de productos opción dash name, y luego puedo poner en el nombre de la opción. Dejémoslo ahí por ahora y echemos un vistazo. Como puedes ver, lo que vamos a recuperar es la lista de diferentes opciones. Si voy a mi catálogo aquí y voy a, creo que es este con la mayor cantidad de opciones. Puedes ver al momento de enumerar todas las diferentes opciones. Pero lo que aún no estamos enumerando son los valores. Vamos a pasar por eso ahora mismo. En este siguiente bit aquí, vamos a anidar otra declaración de retorno. Aquí es donde estoy diciendo que está empezando a verse un poco funky aquí. Aquí hay mucha anidación. Es solo la naturaleza de la bestia desafortunadamente. Vamos a usar otro mapa aquí para pasar nuestros valores a algunos JSX para mostrarlos. Voy a agarrar el valor, abrir esto, y luego pondré algún código antes de la declaración return. Pero solo para comenzar, solo para conseguir algo en la página, abriré mis devoluciones enseguida. Aquí es donde voy a poner en un div con una clase de productos valor de opción, y dentro de aquí es donde voy a poner un botón de radio. Haremos tipo de radio. Nombre va a ser igual al nombre de la opción. Entonces claro que queremos registrar el valor. Actualmente estamos recorriendo todos los valores para que podamos pasar el valor que estamos viendo actualmente y luego vamos a pasar por el método onChange. Esto es cuando comenzamos a usar el método de opción de conjuntos conferenciados que agarramos del gancho de opciones de productos de uso. Ahora voy a poner en un conjunto de funciones anónimas opción seleccionada, análisis, nombre y valor y cerrar ese elemento de entrada. Ahora veamos si obtenemos algún error. No está completamente completo, pero quería mostrarles lo que tenemos hasta ahora. Tenemos algo de espacio aquí, pero no pasa nada. Echemos un vistazo. Tenemos la leyenda y luego tenemos una entrada para cada una de ellas. Oh, se me olvidó poner la etiqueta aquí. La razón por la que estas entradas que he anidado dentro estos divs es para que podamos poner una etiqueta, que es una apariencia más agradable para la entrada en que es una apariencia más agradable para lugar de tener esos feos botones de radio. Aquí es solo una cosa HTML. Voy a crear esta etiqueta y luego voy a poner el valor aquí para que podamos ver realmente qué valor estamos seleccionando. Como puede ver, los valores se están cruzando ahora. Al pasar el cursor sobre cada opción, hay una línea que viene por debajo. Como estoy haciendo clic en estos ahora mismo, la opción de selección de conjunto debería estar funcionando. Simplemente no estamos recibiendo comentarios visuales en nuestro formulario. Para conseguirlo, lo que vamos a hacer es crear una variable aquí arriba llamada check y vamos a acceder al objeto al que aún no hemos accedido. Vamos a acceder a esto que aún no hemos usado, opciones seleccionadas. Si, cuando pasamos el nombre a Opciones seleccionadas, es igual al valor que estamos viendo actualmente, entonces comprobado será verdadero. Ahora solo tenemos que pasarlo a nuestra entrada aquí. Comprobado es igual al valor de ese. Golpea “Guardar” en eso. Ahora puedes ver en realidad todavía no funciona porque tenemos una cosa más que hacer aquí, y eso es lo que creó nuestro id Vamos a hacer const ID. Vamos a crear una pequeña cadena aquí con el nombre y el valor. Entonces podemos poner eso tanto aquí como luego también en la etiqueta, poner HTML para ID, y eso vinculará nuestra etiqueta a nuestra entrada. Esto debería ser todo lo que se requiere para funcionar. Ahora bien, si hago clic en alguno de estos, bien. No está funcionando todavía. ¿Qué tenemos pasando aquí? Cada niño en la lista debe tener un elemento clave único. A lo mejor ese es el problema que tenemos aquí. Aquí mismo, usemos ese id recién creado como nuestro prop clave aquí. Golpea “Guardar” en eso. Refresca por aquí. Todavía no podemos cambiar nuestras opciones aquí. Aquí tenemos un error relacionado con lo que nos encontramos dos niños con la misma clave. Echemos un vistazo. Se me olvidó poner entre mis corchetes aquí. Es literalmente poner en valor de signo de dólar. No es un valor dinámico. Como puedes ver aquí, ya puedes ver ahora que se está guardando una selección diferente. Ojalá eso no fuera demasiado difícil de seguir. Como pueden ver aquí como cambio varianza, la imagen no está cambiando, pero el precio es así que el uso de opciones de producto enganchar aquí, en realidad está administrando nuestro estado para nosotros, lo cual es realmente genial. Cada vez que estamos creando una nueva selección aquí, estamos seleccionando una nueva variante y que está actualizando automáticamente nuestro precio y cualquier otra cosa que esté relacionada con la varianza en nuestra página. Lo único que nos falta aquí, solo para rematarlo antes de pasar a la página del carrito es la descripción aquí. Lo que voy a hacer es crear un div con la clase de descripción del producto. En lugar de insertar HTML ahí, lo que voy a hacer es escribir este accesorio de aspecto muy extraño aquí llamado peligrosamente establecido en un HTML y luego aquí para subrayar, subrayar HTML y luego poner en nuestra descripción HTML para el producto. Descripción HTML. Cerremos esto para que podamos echar un vistazo. Entonces como pueden ver, aquí está nuestra descripción. Ahora bien, ¿por qué lo hemos puesto en este prop y no solo, vamos a eliminar todo eso y luego tirarlo aquí? Bueno, echemos un vistazo a lo que sucede cuando hacemos eso. Voy a presionar “Guardar” y como pueden ver, pone a través del HTML literal. Necesitamos realmente insertar ese HTML a través de un prop para renderizar. La razón por la que el prop se llama peligrosamente establecido en HTML en lugar de solo en un HTML, es que es un recordatorio de reaccionar para tener mucho cuidado al insertar HTML en un elemento que viene de una base de datos o de una fuente externa. La razón por la cual es algo llamado inyección HTML. Alguien podría romper tu página poniendo aquí HTML incorrecto. Entonces es una advertencia de React para hacerte saber que esto es un poco peligroso. Pero en nuestra situación cuando estamos insertando HTML de descripción del producto, siempre y cuando nosotros, los usuarios o los administradores no pongamos ningún HTML roto en ningún HTML roto en nuestro campo de descripción del producto, esto debería funcionar. Pero si el cliente o el administrador o quien esté agregando descripciones a los productos pone algún HTML roto, entonces esto se va a romper. Todo esto sí tiene el potencial de romperse. Por eso dice peligrosamente establecido en HTML. Eso es algo a tener en cuenta ahí. Eso es un poco de riesgo. Este ha sido uno grande. Espero que hayas seguido. Si te quedas atascado en algún momento, obviamente deja un comentario. Pero ahora si vamos a algún producto en una tienda, algunos de estos son menos complicados. Este solo tiene una opción. Podemos seleccionar solo una talla. Pero este de aquí mismo, los hidrógenos snowboard, creo que es el más complejo. Tiene tamaño, montura de encuadernación y material. Veremos en el siguiente video cuando agreguemos el botón “Agregar al carrito”, que al hacer clic en ese botón “Agregar al carrito”, la variante ya está determinada a partir de nuestra selección, y así esa variante obtendrá añadido al carrito. Así que gracias por seguir adelante en este video. En el siguiente video, vamos a hacer la mayor parte de nuestra aplicación, que es la funcionalidad del carrito. Básicamente la tienda no funciona hasta que tengamos una funcionalidad de carrito por lo que esta será la parte final de hacer que nuestra tienda funcione. Tal vez tómese un descanso, prepárese y regrese para la lección final antes de implementar nuestra aplicación en nuestra tienda Shopify. 11. Carrito Funcionalidad pt. 1: Muy bien chicos, es hora de la parte final y más esencial de conseguir que esta tienda funcione. Esta tienda simple, obviamente hay un montón de mejoras que puedes hacer aquí, pero para conseguir una tienda básica que funcione, hay una cosa más que tenemos que hacer y es habilitar el carrito funcionalidad. En este video vamos a extendernos a través de muchos componentes diferentes aquí. Vamos a actualizar nuestro componente de aplicación, actualizar nuestros componentes de diseño para poner en un botón de carrito aquí, actualizar nuestra página de producto aquí para poner en un botón de agregar al carrito y crear una página de carrito. Sin más preámbulos, comencemos. Tal vez tengamos que dividirlo en dos videos dependiendo de cuánto tiempo llegue esto. Pero lo primero, como mencioné, voy a abrir aquí nuestro archivo app.server.js. Para obtener la funcionalidad del carrito en nuestra aplicación, necesitamos agarrar el componente proveedor de carritos y luego queremos envolver nuestro enrutador en eso. Voy a ir a la cesta de eso. Todavía está en el portapapeles, colóquelo allí en nuestro proveedor de carritos y luego vuelva a pegar en ese enrutador entre las etiquetas del proveedor del carrito. Voy a golpear “Guardar” en eso. Ahora, así como así, vamos a poder usar los ganchos y funciones del carrito dentro de nuestra app. Vamos a entrar en nuestro explorador de archivos aquí y vamos a crear una nueva ruta para la página del carrito. Aquí ahora carpeta rutas, cart.server.jsx. En el tutorial oficial de Shopify, usan un cajón para esto, pero es traer bibliotecas externas y pegar mucho código. Definitivamente recomiendo tener un cajón como característica de diseño, experiencia de usuario sabia, pero para que sea simple y enfocarnos en lo que necesitamos para que esto funcione, solo vamos a hacer un página separada. Al igual que los detalles del producto, vamos a abrir una ruta aquí y luego servir a través de componentes del lado del cliente. Este archivo será bastante sencillo. Sólo vamos a exportar carrito de funciones por defecto, y luego aquí regresamos, y luego vamos a envolver todo en un componente de diseño. Voy a abrir un div con una clase de contenedor, así que todo está contenido, y luego voy a traer un componente del lado del cliente que estoy a punto de construir la página del carrito de código. Eso es básicamente. Todo lo que necesitamos ahora son nuestras importaciones. Vamos a importar layout desde componentes/servidor de layout. Tenemos un layout ahí, y luego vamos a tener que crear estos componentes, así que voy a crear un componente llamado CartPage.Client.jsx. Entonces podemos crear un componente aquí, exportar por defecto la función carritos página, return, un div básico para empezar, y luego podemos importar eso. Importar la página del carrito y el resto está prellenado para nosotros desde el código de Visual Studio. Escribimos un montón de código ahí, todas las cosas básicas, todas las cosas que hemos hecho antes, veamos si realmente funcionó. Si voy a mi ruta de carrito aquí, si miramos dentro de nuestros elementos aquí, vamos a principal, podemos ver hay un contenedor con un div dentro. Podemos adivinar que esto está funcionando y estamos en esta ruta en particular. Eso es todo lo que tenemos que hacer para nuestra ruta de carritos. Todo el trabajo que vamos a hacer para la página del carrito va a estar en este componente del lado del cliente. Al igual que el componente de detalles del producto, vamos a tener que importar muchos componentes y ganchos diferentes de hidrógenos Shopify. Voy a hacer lo que hicimos antes, dividirlo en múltiples líneas, y poner el de listo para comenzar. Sólo voy a pasar por todos los ganchos y componentes que vamos a estar trayendo, así que vamos a necesitar usar el gancho de carrito de uso. Vamos a usar un componente de proveedor llamado proveedor de línea de carrito, vamos a traer el componente de imagen para mostrar una imagen, vamos a traer el gancho de línea de carrito de uso, estamos va a traer el componente de dinero para formatear dinero, vamos a traer el componente de enlace para enlazar al producto, vamos a traer en el componente de costos de carrito. Como dije chicos, aquí hay mucho. Vamos a traer el componente de cantidad de línea de carrito, y finalmente vamos a traer el componente de botón de ajuste de cantidad de línea de carrito. No mentía cuando dije que hay una amplia gama de componentes dentro de Shopify hidrógeno, pero también tienen un propósito y nos hacen la vida más fácil. Confía en mí en eso, serás feliz una vez que empecemos a desarrollar esta página de que todo esto existe. Ahora, lo que quiero hacer es romper esta página de carrito en múltiples componentes. Lo que voy a hacer es que voy a crear un suspenso aquí. Se puede ver que se importa automáticamente de react para nosotros, y luego dentro de aquí, voy a dar salida a la tabla de carritos, que aún no hemos creado. Vamos a crear eso ahora. No necesito exportarlo porque solo lo estoy usando en el mismo archivo, y solo crearé este componente de tabla de carrito. La razón por la que quiero poner esto en un componente separado es porque vamos a estar usando algunas variables de estado aquí. Voy a estar tirando de líneas, checkouturl, y estado fuera de este gancho de carrito de uso. Entonces obviamente hacen de esto un componente. Tenemos que renderizar algún tipo, así que vamos a abrir y vamos a tirar en un elemento HTML tabla. Ahora, actualmente podemos dar fe de manera confiable que no hay artículos en nuestro carrito, y eso es porque aún no tenemos un botón de agregar al carrito en nuestra página de productos. Lo que es una buena alternativa para hacer de inmediato es si líneas.longitud es igual a cero como en, lo que significa que actualmente no hay líneas en nuestro carrito, no hay artículos en nuestro carrito, entonces podemos devolver algunos JSX aquí y decir algo así como no hay artículos actualmente en el carrito. Ahora hay cierto problema en esto, y quiero mostrarles lo que es eso. Lo que voy a hacer es poner aquí un registro de consola, y digamos que no hay líneas. Si ejecutamos eso, va a decir que actualmente no hay artículos en el carrito. Ahora, volveremos a esto en sólo un segundo. Lo que vamos a hacer es, cuál debemos hacer primero? Vamos a entrar en el componente de diseño aquí y rellenar esto. Lo voy a poner en un icono aquí de una biblioteca de iconos que se recomienda al usar tailwind. En el tutorial oficial de Shopify, usan algo llamado viento de cola y hay una biblioteca de iconos de viento de cola asociada. De hecho, todavía podemos usar la biblioteca de iconos incluso si no estamos usando viento de cola. Olvidé cómo se llama, pero si solo escribimos la biblioteca de iconos de viento de cola, debería aparecer. Íconos de héroes, así se llama. Este héroe iconos es una biblioteca de iconos SVG que SVG es ahora probablemente la mejor manera de implementar iconos en cualquier proyecto moderno. Podemos hacerlo como sólido, contorno o mini. Me gusta el esquema y solo voy a escribir carrito aquí. Puedes personalizarlo si quieres. Puedes usar este carrito de compras. Me gusta la bolsa de compras, y podemos o bien copiar el SVG o el JSX. Lo estamos usando en un proyecto react, así podemos copiar el JSX, está bien, y luego puedo pegarlo aquí. En realidad, es mejor que usemos el JSX porque aquí mismo puedes ver algo de lo que hablé en las lecciones de teoría. Esto de aquí mismo está enlazando a los vientos de cola, así que voy a quitar eso. Pero aquí puedes ver si esto era un SVG estándar en HTML, esto sería trazo, línea , join, o en realidad creo que es una palabra, pero ahí habrá un guión. Recuerden que hablamos de ello en las lecciones de teoría que podemos tener guiones. De hecho es una buena idea que agarramos el JSX aquí, solo te voy a mostrar eso ahora mismo, si copiamos el SVG, va a haber guiones en los nombres de atributos que no queremos. Definitivamente copia del JSX si estás usando JSX, que es lo que estamos haciendo ahora mismo. Voy a sangrarlo un poco, y como puedes ver aquí puedes poner una expresión JavaScript en algunos de estos atributos también, y luego por supuesto voy a transformar esto en un enlace. ¿Hemos importado? Sí, hemos importado el enlace aquí y lo estamos usando en otro lugar. Yo sólo puedo ir así. Entonces solo necesito enlazar a la ruta, que solo va a ser -cart. Aquí mismo vamos a poner en breve un indicador de cuántos artículos hay en el carrito, pero llegaremos a eso en solo un segundo. Si vuelvo a nuestra aplicación aquí puedes ver que tenemos este ícono de carrito aquí, y si estoy en cualquier otra página, si hago clic en este ícono de carrito, verás que nos trae de vuelta a la página del carrito. Vamos a entrar en una página de producto. Vamos a entrar en esa primera que vimos una vez que nuestra aplicación se carga. Aquí vamos, la tabla de snowboard de hidrógeno, y vamos a traer y agregar al botón del carrito. Abra nuestro componente de detalles del producto aquí mismo. Ya estamos importando nuestro botón añadir al carrito aquí arriba. Voy a bajar a, vamos a hacer después de las opciones pero antes de la descripción, y vamos a crear un botón de añadir al carrito aquí. En realidad no queremos que sea de cierre automático porque aquí vamos a agregar niños. Vamos a poner aquí añadir al carrito. Entonces para darle un poco de estilo, acuerdo con el CSS existente, voy a poner en, agregar al carrito como el nombre de la clase. Pasemos a nuestra aplicación aquí y verás que existe el botón de agregar al carrito. Acabo de refrescarlo, pero ahí puedes ver que tenemos nuestro botón de añadir al carrito. Ahora, una cosa que queremos hacer antes clic en este botón Agregar al carrito, o dejar que el usuario haga clic en este botón de agregar al carrito es restringirlo si está agotado. No queremos mostrar el botón agregar al carrito o al menos queremos decirle al usuario que está agotado si está agotado. Vamos a desplazarnos hacia arriba hasta el formulario del producto aquí y crear un booleano aquí. Voy a crear una const está agotada y eso va a devolver true si la variante seleccionada no está disponible para la venta. Si eso no sale , vamos a tener un respaldo aquí de falso. Ahora bien, creo que en realidad no hemos recuperado esto de nuestra consulta GraphQL, así que vamos a tener que hacer eso. Volvamos al handle.server.js x dentro de nuestra carpeta de productos ahí. Solo tenemos que asegurarnos de que en el nodo variante, vamos a comprobar si está disponible para la venta. Solo necesitamos actualizar eso, y luego tenemos esta bandera booleana aquí va a ser cierta si la variante seleccionada no está disponible para la venta. Lo que voy a hacer aquí es un operador ternario, va a romper esto en una nueva línea, y luego poner en una expresión JavaScript aquí tenemos un operador ternario. Si está agotado, vamos a decir agotado, y si no está agotado, solo vamos a decir agregar al carrito. Entonces también esto debería funcionar, lo voy a meter. Si está agotada, también debería estar deshabilitada, así que voy a poner eso en un utilería deshabilitada. Eso debería funcionar. No creo que ninguno de estos productos esté agotado, así que realmente no podemos probarlo, pero esto definitivamente está en stock. Si hago clic en “Agregar al carrito” ahora, verás que hay un poco de estado de carga ahí, pero como termina, entonces eso debería estar ahora en el carrito, y si hago clic en esta tarjeta aquí, ahora vamos obtener un error porque en realidad estamos tratando con cierta información del carrito. ¿Qué hace este renderizado? No está definido en la tabla del carrito. Echemos un vistazo a lo que estamos pasando aquí. Pongo render aquí en vez de retorno. Soy tan idiota. Ustedes probablemente estén gritando desde el otro lado de la computadora diciéndome que me equivoqué. Perdón por eso. Si refrescamos por aquí, seguirá diciendo que no hay artículos en el carrito, pero luego desaparece. Interesante. Si vuelvo a refrescar, actualmente no hay artículos en el carrito y al cabo de un tiempo desaparece. Este es el problema al que me refería antes. Dije que vamos a tener que entrar aquí y arreglar esto. Básicamente, no sé si esto es un error o algo así, pero esencialmente el carro regresará sin líneas para empezar, y luego descubrirá las líneas más adelante. Cuando lo carguemos por primera vez, va a decir que no hay artículos en el carrito, pero luego va a desaparecer si hay artículos en el carrito. Lo que he hecho aquí es que he sacado estado del objeto devuelto del carrito de uso. Aquí echemos un vistazo a qué es el estatus. Si me consola el estado del registro y luego me refresco por aquí, se puede ver que aparecen tres estados recuperando, sin inicializar la obtención, en realidad eso son solo dos; ¿no es así? Pero hay tres que surgen. Déjame poner esto del otro lado así vamos a obtener el estatus sin importar si las líneas son cero o no, y luego refrescarnos por aquí. Aquí puedes ver que obtenemos fetching, uninitialized fetching, y luego inactivo. Ahora bien, la razón por la que esto es útil es antes de que aparezca idol, piensa que las líneas de pedido son cero. Pero entonces cuando aparece inactivo, se da cuenta de que eso no es cierto y muestra la alternativa, que actualmente es solo una tabla vacía. Si realmente miramos aquí e inspeccionamos, verá que se está renderizando una tabla vacía. Pero claro esta mesa es la mesa que albergará todos nuestros artículos. Lo que voy a hacer aquí es además de verificar la longitud de las líneas, también voy a verificar el estado y solo voy a mostrar que actualmente no hay artículos en el carrito si el estado está inactivo. De lo contrario, podría estar en estado de carga. Si refresco por aquí, si hay artículos en el carrito ahora, no va a mostrar ningún artículo en el carrito. Esa es mi pequeña solución a ese problema. Ya estamos bastante metidos en el video y ni siquiera tenemos una lista de artículos del carrito que aparecen. Vamos a meternos en eso ahora mismo. Voy a darle a esta tabla una clase de tabla de carrito, nuevamente solo para formateo CSS, y luego voy a abrir una etiqueta t body aquí, y luego aquí es donde vamos a empezar a traer nuestras líneas. Usaremos de nuevo esa función de mapa familiar, y tomaremos cada línea, y con cada línea, vamos a devolver algunos JSX. Aquí es donde vamos a poner el proveedor de línea de carrito. Tenemos que darle una clave, así que ponle a través del ID de línea como clave, y luego pasaremos en la línea en la propiedad de línea. Nuevamente, realmente no puedo entrar en demasiados detalles sobre por qué funciona esto, porque es solo la naturaleza del componente. Estos componentes de proveedores proporcionan funcionalidad y son establecidos por las bibliotecas que estamos usando. Pronto empezarás a ver qué funcionalidades ofrece. Vamos a usar otro gancho dentro de aquí, pero lo que voy a hacer es crear otro componente llamado artículo de línea de carrito. Entonces así vamos de nuevo, función cartlineItem. Aquí, lo que voy a hacer es devolver algunos JSX, obviamente, voy a devolver una fila de mesa. Lo que voy a usar para eso va a ser devuelto de otro gancho aquí. Tenemos otro gancho aquí de la estructura algunas cosas fuera de este gancho, pero el gancho que vamos a usar aquí es UseCartline, y lo que vamos a hacer es agarrar el ID de línea, algo llamado mercancía, y el costo de este objeto. Aquí adentro, ahí es donde podemos usar ID de línea, y luego cada una de estas filas va a tener, creo, cuatro columnas. Yo lo configuré. Aquí, en la primera, ahí es donde vamos a poner nuestra imagen. Digamos solo imagen para comenzar como un lugaretero, la siguiente vamos a tener el título de nuestro producto. Solo voy a poner valores falsos para empezar, así sabemos lo que va a entrar aquí, selección de variantes y precio individual, y luego el siguiente va a tener nuestro selector de cantidad. Entonces el final va a tener nuestra línea total y un botón de eliminar. Si actualizo por aquí, puedes ver que tenemos una fila que muestra todos estos valores de marcador de posición. Eso no es particularmente útil, así que intentemos hacer que estos sean dinámicos. Voy a quitar estos marcadores de posición, y aquí, voy a usar el componente de imagen que creo que ya importé. Sí, lo hice. Muy buen trabajo, Chris. Entremos aquí y le demos un nombre de clase de LineItemImage para estilizar, y luego todo lo que tengo que hacer es pasar en la imagen, que en realidad está en los objetos de mercancía. Puedo hacer un registro de consola aquí para que ustedes lo demuestren. Si quieres ver lo que hay en el objeto mercancía, puedes simplemente consolar registrarlo tú mismo, pero solo confía en mí, cuando digo por el momento, para ahorrar tiempo, la imagen está dentro de este campo de mercancía. Si pasamos por eso y presiono “Guardar”, ahora puedes ver que el portalugares ha sido reemplazado por la imagen del producto de nuestro único producto que está en el carrito. Ahora queremos insertar selección de variantes de título de producto y precio individual. Hagámoslo ahora mismo. Voy a poner en un enlace para que cuando hagamos clic en este, vaya al producto. Aquí, voy a hacer productos/ y luego poner en el asa de productos de mercancía. En los objetos de mercancía tenemos acceso al producto, y en ese objeto tenemos acceso a ese manejo de productos. Entonces voy a darle a eso un nombre de clase para el estilo de line-item-product-title. Entonces entre estas etiquetas de enlace, voy a agarrar mercancía, productos, tittle. Estamos usando mucho la mercancía aquí así que podríamos hacer algunas reestructuraciones aquí para hacernos la vida más fácil. A lo mejor vamos a hacer eso ahora. Vamos a agarrar la mercancía. Podemos agarrar, me gusta poner en el mejor espacio, la imagen y el producto aquí, así que solo podemos sacar mercancía de estos es el beneficio de la reestructuración, que hemos visto varias veces a lo largo de esta clase. Yo he puesto ese enlace , vamos a comprobar si eso sigue funcionando. Ahí tenemos el snowboard de hidrógeno, y si hago clic en él, me llevará a ese producto un poco lento, pero ahí se puede ver que viene a través. Entonces queremos, debajo de esto, poner la selección de variantes. Vamos a tener que recorrer las opciones seleccionadas, que va a estar en la mercancía. Voy a sacar eso usando la estructuración y luego voy a ir a las opciones seleccionadas. Puede ser que no haya opciones seleccionadas, así que voy a hacer una reserva de una matriz vacía, y luego voy a ejecutar map. Entonces para cada opción renderiza algunos JSX. Lo siento, esto es un desastre cuando se trata de todos estos diferentes soportes. Tal vez sea solo porque no he pasado por mi expresión JSX aquí, que va a ser, de nuevo, vamos a usar una clave porque estamos recorriendo las cosas, y voy a usar el nombre de la opción como la clave, y luego solo voy a poner en bastante básicamente el nombre de la opción y el valor de la opción en esta selección de variante en particular. Vamos a golpear “Guardar” en eso y ver cómo funciona eso . Ahí vas. Esa es la selección de variantes. El formato está un poco apagado. En realidad no he puesto esto en un div con el nombre de clase variante de elemento de línea para obtener el formato que ya configuré. Ahí vamos. Entonces para el resto de esto, podría hacerlo en un video separado para ustedes porque este se está haciendo bastante largo y Skillshare le gusta que mantenga mis videos debajo de aproximadamente 30 min a 20 min cada uno. Vamos a hacer una segunda parte en esta, te veré en el siguiente video. 12. Carrito Funcionalidad pt. 2: Todo bien. Bienvenida de nuevo. Espero que estés listo para seguir adelante con esta funcionalidad de carrito y así , obviamente, la característica más importante que construiremos en nuestra pequeña aplicación. Por lo que merecía dos videos para poder cubrir todo. Así que tenemos estos marcadores de posición todavía aquí en este lado de nuestra mesa de carrito. Solo para recapitular lo que hicimos en el último video, habilitamos la funcionalidad del carrito en toda la aplicación envolviendo nuestro enrutador en el proveedor del carrito y luego creamos una ruta de carrito que enlaza con una página de carrito y luego también agregamos en un enlace al carrito aquí mismo y por supuesto agregamos un botón de agregar al carrito, que nos permite agregar artículos a nuestro carrito. Volvamos a construir nuestra página de carritos. Aquí vamos a usar algunos otros componentes que trajimos o que importamos aquí arriba, cantidad de línea de carrito y botón de ajuste de cantidad de línea de carrito. Ese es probablemente uno de los nombres más grandes de los componentes que estamos trayendo pero estos botones son bastante útiles como pronto verás. Ahora para esta, es importante que uses las clases de lo contrario va a parecer una porquería absoluta. Así que voy a envolver todo esto en el selector de cantidad del carrito y luego solo para comenzar, en realidad vamos a traer cantidad de la línea del carrito y si acabo de poner esto, siempre y cuando esto esté dentro de una línea de carrito proveedor, revisa esto, verás que la cantidad es la cantidad correcta. Entonces si iba a ir a este snowboard y agregar otro de estos al carrito. Creo que tiene que ser exactamente la misma variante y está tardando un tiempo. Ahora volvemos al carrito y ahora se puede ver que es hasta dos, entonces, ¿qué tan bueno es eso? Ya estamos trayendo el estado de cuál es la cantidad en esa línea de pedido con solo usar este componente de Shopify Hydrogen. Pero claro que queremos poder actualizar la cantidad. Así que de cada lado vamos a poner en un botón de ajuste de cantidad de línea de carrito y luego en el lado izquierdo para el parámetro de ajuste, vamos a hacer que disminuya. Voy a abrir ese hacia arriba y por dentro voy a poner en un SVG que es un símbolo menos. Así que voy a volver a los íconos de héroe aquí, encontrar menos copiar el JSX, tirarlo aquí. Entonces tenemos nuestra disminución y luego en el otro lado de la cantidad de la línea del carrito. Voy a poner en otra línea de carrito botón de ajuste de cantidad y como el prop de ajuste va a ser aumentar y luego el SVG y luego voy a poner aquí es por supuesto que va a ser lo contrario, que es plus. Entonces voy a copiar el JSX para ese icono, pegarlo aquí y luego presionar “Guardar” en eso. Ahora veamos qué pasa cuando refrescamos nuestra página por aquí. puede ver que ahora puedo reducirlo a uno, o puedo aumentarlo hasta tres o cuántos quiero hacerlo. Entonces esos son componentes muy útiles ahí de Shopify Hydrogen. Obtenemos algunas funciones de ajuste de cantidad de inmediato. Por aquí, para el total de la línea, voy a reemplazar ese marcador con un componente de dinero. Voy a poner en eso sin bandera de ceros al final y luego voy a pasar por el monto total del punto de costo para formatear la cantidad total en un formato agradable y fácil de usar. Entonces aquí arriba es donde estamos obteniendo el costo del uso del gancho de línea del carrito. Ya deberías entender que si acabamos de pasar eso, no estaría muy bien formateado. Entonces queremos poner eso en un componente de dinero, que podemos ver aquí. Si estamos obteniendo tres de ellos, el total termina siendo de 1,800 y luego el botón de eliminar es otro botón de ajuste de cantidad de línea de carrito. Voy a poner en como esto como prop, voy a hacer que se muestre como un div, voy a dar el nombre de clase de cart remove y luego el ajusta prop de remove. Esto va a decirle al componente del botón de ajuste de cantidad de la línea del carrito que quiero que que quiero que elimine toda la cantidad de este artículo. Entonces solo quita la línea de pedido por completo y para eso, voy a usar un ícono de papelera. Entonces entraré aquí, escribiré basura, copiaré el JSX, regresaré aquí tal como lo hicimos antes, y arreglaré el anidamiento. Entonces, si hemos escrito todos nuestros nombres de clase correctamente y volvemos aquí, verás que aparecerá en la esquina superior derecha aquí y así podemos simplemente hacer clic en eso y eliminar la línea de pedido completamente. Ahora verás que cuando actualicemos la página, no muestra que no hay líneas de pedido actualmente en el carrito hasta que lleguemos al estado inactivo. Eso es para evitar que esto aparezca antes de que sepamos con certeza si hay algún artículo en nuestro carrito. Bien, así que volvamos y agreguemos ese artículo en nuestro carrito. Hagamos una selección diferente aquí. Policarbonato, patrón de perno clásico 160, agregar al carrito. Entonces vuelve a nuestro carrito por aquí y creo que quería poner el precio de cada uno debajo de aquí, así que agreguemos eso también. Ya tenemos acceso a nuestro componente de dinero aquí. Voy a escribir dinero sin ceros finales porque esa es mi preferencia y luego dentro de los datos, prop, poner en precio de mercancía, v2, pulsa “Guardar” en esa actualización y podrás ver al individuo el precio es 610 y si lo aumento aquí arriba, el precio por cada uno se mantendrá igual, pero el costo total de esa línea de pedido subirá. Déjame mostrarte lo que pasa si agrego otro producto al carrito agreguemos unas tablas de snowboard full stack al carrito y luego haré clic en esto para llevarme a la página del carrito. Verás que tenemos dos aquí. Ahora, tenemos un pequeño problema. Uno de estos es aparecer en negrita y uno de estos no es aparecer en negrita, lo que tiene un problema, pero además no tenemos un pie de página aquí para el total, y obviamente necesitamos un botón para pagar. Entonces, vamos a ampliar esto. Quiero salir de esta línea de pedido del carrito, respaldarlo un poco aquí, y luego debajo de aquí, poner un div con el pie de página del carrito y obviamente vamos a obtener todos estos rojos líneas porque necesitamos un solo elemento raíz en nuestro retorno. Así que solo voy a hacer ese hack que usamos antes de abrir un elemento vacío y luego solo sangrar aquí y luego en nuestro pie de página del carrito, voy a poner en un enlace. El enlace va a ir a la URL de pago, que sacamos del carrito de uso. Nos va a generar automáticamente la URL de Checkout. Voy a darle un nombre de clase de botón Checkout, que está configurado en nuestro CSS. Genial, así que voy a cerrar eso y luego aquí voy a tener la palabra checkout y luego cerrar esa etiqueta de enlace. Si me refresco por aquí, tienes el botón Pagar, pero aún no he puesto en el carrito los totales. Creo que voy a poner eso en el cuerpo. Así que justo después de aquí, donde estamos regresando todas estas filas, podemos poner en una fila final y las dos primeras columnas, voy a hacer una llamada span de dos. Simplemente no vamos a tener nada y luego tendremos la palabra total y luego para la celda final, vamos a traer en costo de carrito. Lo que nos da un costo total del carrito sin ceros finales y no necesitamos pasar por ninguna información aquí siempre esté dentro del proveedor, que supongo que es el proveedor del carrito, esto va a estar bien . Así que refréscate por aquí y verás que esos dos sumados son iguales a eso y creo que la negrita se debió a que mi CSS hacía que la línea final fuera negrita. Entonces la línea final debió haber sido el total. Entonces ahora ese tema de estilismo está atendido. Todo bien. Así que tenemos dos de esta variante en particular. En una de esta variante en particular, si hago clic en el “botón Pagar”, echemos un vistazo a lo que sucede. Es un poco lento. Lo siento por mi pobre Internet. Pero pronto verás que vamos a la página de pago en la tienda Hydrogen. Si mostramos el resumen del pedido, este debe coincidir con la selección en nuestro carrito. Ahí van, chicos. Así de simple o no simple es. Es mucho código para escribir pero hay mucha funcionalidad que el marco Shopify Hydrogen se encarga de nosotros. No necesitamos poner ningún código especial en nuestro botón Pagar. Simplemente podemos traer la URL de pago. Podemos usar componentes como este. Todo lo que tenemos que hacer es meterlo en CartCost y nos da cuenta del resto. Estos increíbles botones CartLineQuantityAdjust, el CartQuantity en sí, en realidad es bastante impresionante la cantidad en realidad es bastante impresionante funcionalidad que algunos de estos componentes nos dan fuera de la caja. Una de las cosas finales que quiero hacer aquí es poner un indicador de cuántos artículos hay en el carrito aquí arriba. Lo que voy a hacer es en nuestros componentes de layouts, ¿dónde está? Justo aquí. Voy a insertar algo llamado CartBubble. Este va a ser un componente que construí yo mismo. Entonces voy a, debajo de aquí, crear este componente CartBubble. En realidad, porque vamos a estar usando carrito de uso, voy a mover esto a su propio archivo de componentes de clientes. Voy a entrar en un nuevo archivo, cartbubble.client.jsx; poner eso aquí, hacer una exportación por defecto. Después volviendo al archivo layout.server.jsx, voy a importar ese componente, cartBubble y el resto se rellena automáticamente para mí. Si vuelvo a cartbubble.client.jsx, obviamente tenemos que devolver algo aquí; devolver algunos jsx. Todo lo que estamos buscando aquí es la cantidad. Eso es todo lo que está haciendo. Voy a importar el gancho UseCart del framework Hydrogen. Voy a sacar la cantidad total del objeto que devuelve este gancho. Esta es una manera fácil de obtener nuestra cantidad total. Si la cantidad total es menor que uno, que es básicamente cero, voy a devolver null, así que básicamente no devuelvo nada. Pero si pasa de eso, devolveremos un span, y dentro del span haremos corchetes, y dentro de esos paréntesis simplemente devolveremos la cantidad total. Si guardo eso, refrescar por aquí o refrescar en cualquier parte de nuestra aplicación. Tenemos un poco de error, DOM ColSpan no válido. Necesitamos usar CamelCase para el ColSpan aquí. ¿Dónde estaba yo? CartPage. Tenemos que poner aquí una S mayúscula. Eso es algo raro de jsx. ¿Qué más tenemos aquí? Si leemos el mensaje de error, parece que viene de nuestro componente CartPage. Déjame simplemente ir a otra página nuestro sitio web y confirmar que está aislada al CartPage. Sí, lo es. Si miramos por aquí, junto a este icono de carrito, debería indicar cuántos artículos hay en el carrito. Déjame ir aquí a CartBubble. Si hay cero artículos en el carrito, debería devolver null, por lo que no aparecerá nada. Entonces esto está sugiriendo que no hay ningún artículo en el carrito. Volvamos a hacer clic en el carrito, y solo regresa, actualmente no hay artículos en el carrito. Si actualizo, ¿ obtengo el mismo error? Sí. Si navego por CartPage desde otra página, estará bien. Pero si llego directamente a la CartPage, obtendré este error. Creo que el tema aquí se remonta a si vamos a la CartPage. Esta representación sin la solicitud asíncrona a la API de escaparate devolviendo todavía. Tener Suspenso aquí debería comprobarlo. Pero en este caso, no está funcionando. Voy a poner esta declaración de retorno. Esto podría ser una solución un poco pirateo pero debería funcionar. Voy a pegarlo aquí. Si lines.length es más de cero, entonces vamos a renderizar el carrito. Si me refresco por aquí, eso resuelve nuestro problema. De alguna manera hemos perdido nuestros artículos en el carrito pero eso es todo bueno. Volvamos a nuestro catálogo o a cualquier colección. Haz una selección de producto, y luego voy a hacer clic, agregarlo al carrito. Ahora, puedes ver que nuestro cartBubble está funcionando. Tenemos un artículo en nuestro carrito, y si hago clic sobre él, verás que esta es nuestra tabla de snowboard Hydrogen. Si agrego un segundo, verás que este número sube también. Si agrego una tabla de snowboard diferente, tal vez esta de pila completa, haz clic en “Agregar al carrito” verás que eso también se agrega. Si entramos aquí, puedes ver las tres tablas de snowboard que tenemos en nuestro carrito. Ahí lo tienen, chicos. Si revisamos nuestros proyectos hasta el momento, tenemos nuestra página de inicio. Obviamente, aquí no hemos construido nada. Esto es para que ustedes averigüen lo que quieren poner en su página de inicio. Puedes traer una determinada colección y presentarla de todas las formas. Entonces tenemos aquí nuestra página de catálogo, que enumera los primeros nueve productos nuestra tienda independientemente de la colección en la que se encuentren. Si hacemos clic en alguno de estos, irá a ese producto. De igual manera, si vamos a una colección específica como la colección freestyle, y luego hacemos clic en una de estas páginas de productos, podemos hacer una selección de variantes, agregarla al carrito. Ve al carrito aquí. Como puedes ver, está guardada esa selección. Puedo incrementar la selección. Puedo sacarlo del carrito bajando esto hasta cero, y luego diré que no hay artículos actualmente en el carrito, o si voy a agregar otro producto al carrito nuevamente, agregue este 154 centímetros uno y aumentar la cantidad, verás que aumenta aquí también. Una mejora para esta aplicación sería trabajar en los estados de carga y construir algo un poco más agradable para un suspenso. este momento no tenemos ningún retroceso, pero podrías construir en algunos estados de carga bastante agradables aquí. También podemos, obviamente, pagar haciendo clic en este botón aquí mismo, y eso llevará nuestra selección directamente a la caja. En este punto, estamos dejando nuestra aplicación e yendo directamente a la página de pago como alojada en la tienda Shopify. Aquí vamos. También podemos eliminar ese artículo presionando ese botón. Como puedes ver aquí, lleva un poco de tiempo construir CartPage, pero las funciones del carrito están bastante bien manejadas por todos estos componentes y ganchos que están disponibles dentro del Shopify Biblioteca de hidrógeno. Para resumir todo lo que hemos hecho en este proyecto, quiero destacar los temas que resalté al inicio de esta clase antes incluso de entrar en el lado práctico de las cosas. Si volvemos a lo que aquí es sencillo, todos estos han resultado bastante construidos al final. Pero por ejemplo, tenemos un elemento de cuadrícula de productos, por ejemplo, es un componente del lado del cliente que pasamos en un producto. Si echamos un vistazo a nuestras rutas de recolección, estamos haciendo una solicitud a la API de escaparate, tomando toda la información que necesitamos a través de una consulta, pasándola a cada uno de estos componentes de la tarjeta de producto, y usando ganchos en el camino. Si alguna vez estás perdido o confundido, puedes buscar cualquiera de estos ganchos o componentes en la documentación. Si estás importando desde React, quieres buscar en la documentación de React. Si estás importando desde Hidrógeno, quieres ver la documentación de Hidrógeno. Literalmente puedes simplemente ir a la documentación de Hidrógeno. Esta es la API de escaparate. Pero debería poder buscar desde aquí, UserOuteParams, entrar en API Hydrogen, hacer clic aquí, y podrás conocer más sobre todos los diferentes hooks y componentes que usamos en esta clase. En el siguiente video, te voy a mostrar cómo implementar esta app en tu tienda Shopify. Eso va a implicar conectarse a la API de escaparate. Entonces actualizaré nuestras credenciales aquí, y luego publicaremos esto en vivo en tu tienda Shopify. Obviamente, muchas mejoras que podemos hacer aquí. He dejado aquí este tercer enlace, y eso va a ser para el video bonus donde vamos a agregar en un blog. Pero por ahora, estos son los componentes principales que necesitas para tener un escaparate Shopify que funcione. En el siguiente video, vamos a desplegar esto en nuestra tienda Shopify. Te veré en esa. 13. Despliegue nuestro Storefront personalizado: Bienvenidos de nuevo chicos en esta lección vamos a aprender a implementar nuestra tienda de hidrógeno Shopify en oxígeno, que es la plataforma de alojamiento proporcionada por Shopify, que podemos acceder directamente en nuestro Tienda Shopify a través del canal de ventas de hidrógeno. Desafortunadamente, al momento de grabar, oxígeno solo está disponible para los planes Shopify Plus. Pero si estás viendo esto en el futuro, es posible que ya esté disponible para otros planes de Shopify. Esta es una característica bastante nueva, así que supongo que solo la están implementando en las tiendas Shopify Plus ya que son el nivel de pago más alto, obtendremos prioridad en esta nueva función. Desafortunadamente, si vienes a esta página en la documentación y esta advertencia sigue aquí, si estás en algo bajo Shopify Plus, entonces desafortunadamente lo estamos, esto no te va a aplicar. Tienes que usar una solución de alojamiento diferente si decides implementar una tienda de hidrógeno. Ahora, por suerte para mí, Shopify me han habilitado una tienda con canales de venta de hidrógeno, así puedo demostrar esta característica. Pero solo quiero mostrarte en algunas tiendas, no vas a poder acceder a esto. Por ejemplo, en mi tienda de pruebas original, Chris testing shop. Si voy aquí a canales de ventas y luego hago clic en todos los canales de venta recomendados. Rondas aquí es donde viviría el botón para instalar hidrógeno si estuviera en Shopify Plus, o en el caso de esta tienda, tenerlo habilitado por Shopify. Desafortunadamente, en esta tienda, no puedo agregarla, pero como mencioné aquí en Chris testing shop 2, que es una tienda que configuré específicamente para hidrógeno. Si hago clic en los canales ventas y entro en los canales de venta recomendados, ya no aparecerá aquí porque ya está instalado. Pero antes de que lo instalara, estaba disponible para agregar aquí. Ahora pueden ver que tengo un canal de ventas de hidrógeno aquí mismo. Si estás en Shopify Plus, deberías poder ingresar a los canales de ventas, canales venta recomendados, y agregarlo aquí, entonces tendrás este elemento del menú aquí. Desafortunadamente, si eres todos los demás al momento de grabar, entonces no vas a poder hacer esto. Voy a cerrar este abajo no podemos hacer ningún hidrógeno ahí. Déjame entrar en el canal de ventas de hidrógeno. Ahora lo que podemos hacer es regresar a la documentación y seguir adelante. Yo hice esto y me encontré con algunos hipo. Lo que he hecho es que he averiguado qué funciona y solo te voy a mostrar eso en este video. Si vuelvo aquí a mi canal de ventas de hidrógeno aquí mismo, pueden ver que tengo una prueba de hidrógeno aquí, pero lo que vamos a hacer es crear una nueva tienda. En primer lugar, quiero volver a mi editor de código aquí, y quiero hacer algunos cambios. En primer lugar, quiero hacer una rama de producción, y esa es la sucursal que vamos a desplegar en nuestra tienda Shopify. Voy a entrar aquí, crear nueva sucursal, llamar a esta rama producción. Entonces lo siguiente que vamos a querer hacer es cambiar estas credenciales a nuestra tienda de hidrógeno Shopify real. La forma habitual de hacerlo es buscar en nuestras aplicaciones privadas, que actualmente se encuentran en configuraciones, aplicaciones y canales de ventas. Después por aquí para desarrollar apps. Como puedes ver aquí, tengo acceso a la API de escaparate como una aplicación personalizada. Simplemente demostraré esto rápidamente, crearé una aplicación y diré acceso a la API de escaparate. Entonces solo pondré aquí a Skillshare para diferenciarlo. Presiona “Crear aplicación”. Entonces solo necesitaré dar click aquí para configurar los alcances de la API de escaparate. Voy a marcar todas las casillas aquí. Entonces puedo hacer clic en el botón verde guardar. Después de hacer eso, puedo hacer clic en “instalar aplicación”, hacer clic en “Instalar”. Entonces aquí bajo credenciales API, voy a tener mi token de acceso a la API de escaparate para que pueda tomar eso y ponerlo aquí. Pero lo que va a suceder cuando implementemos nuestro canal de ventas de hidrógeno es que obtendrá automáticamente un token de acceso a la API de escaparate. Te voy a mostrar que ahora mismo si entramos en el canal de ventas de hidrógeno, haz clic en “Crear escaparate”. Aquí es donde podemos crear un nuevo repositorio de hidrógeno. Yo no voy a hacer eso. Voy a conectar un repositorio existente porque tenemos, por supuesto, ya tenemos nuestro proyecto en GitHub. Voy a hacer clic en “Conectar” un repositorio existente, seleccionar “Mi cuenta” y luego encontrar ese repositorio bajo la tienda de la clase hidrógeno. Ahora, algo a tener en cuenta aquí es que necesitarás configurar la integración a GitHub. Ya lo hice , por lo tanto, esto está apareciendo sin advertencias. Pero si no lo has hecho, y voy a poner una captura de pantalla en tu pantalla ahora mismo para que veas que hay un cuadro de advertencia que aparece pidiendo permisos. Tendrás que instalar la aplicación Shopify GitHub en tu cuenta de GitHub y luego habilitar ciertos permisos para aquellos tipos que han estado usando la integración de GitHub con el desarrollo de temas, es exactamente la misma aplicación Shopify GitHub. Solo requiere algunos permisos adicionales. Una vez que hayas habilitado la aplicación y dado esos permisos, podrás buscar tu repositorio y hacer clic en este botón verde para Conectar. Ahora antes de hacer eso, solo quiero tomar nota de la rama de producción tiene que ser maestra o principal. Es realmente molesto para mí porque me gusta que la rama de producción sea una rama separada llamada producción. Pero por defecto aquí en hidrógeno y no te dejan cambiarlo en la actualidad, va a seleccionar automáticamente la rama master o creo que la rama principal si no tienes una rama master como tu rama de producción. Si tienes la versión de producción de tu app en tu rama master o principal, entonces esto va a ser bastante fácil para ti. Pero para mí que me guste mi rama de producción, en una rama separada llamada producción, va a haber algunos pasos adicionales aquí va a haber algunos pasos adicionales. Toma nota de eso. Ahora voy a presionar el botón verde Conectar y va a cargar esta nueva tienda de hidrógeno. Como puedes ver aquí, acabamos de recibir un nuevo escaparate. Simplemente se llama escaparate de clase hidrógeno. Como puedes ver aquí abajo, está desplegando una rama de vista previa. Sólo voy a esperar a que eso termine y luego echaremos un vistazo. Eso ya está terminado, y si hago clic en esta URL de vista previa, verá que la rama maestra se está desplegando y está tirando mis credenciales reales de escaparate. El nombre real de esta tienda, no el nombre de la vista previa de Shopify. Ahora suceden algunas cosas detrás de escena ahí que quiero mencionar aquí. Si entramos en esto aquí mismo, puedes ver que agregó un archivo especial llamado archivo flujo de trabajo de implementación de oxígeno de Shopify. Eso lo hizo a través de la carpeta.github slash workflows. Esto es importante porque se requiere para que estas sucursales se desplieguen. Si volvemos aquí y buscamos en producción, no hay despliegues. Si entro en todas las implementaciones aquí, verás que no hay nada en producción, hay algo en vista previa. Entonces si entro en la configuración de escaparate, puedes ver que aquí hay una rama de producción, pero si hago clic en ella, vamos a obtener una página 404. Ahora, como dije, no me gusta tener mi rama de producción en master, así que voy a crear otro ambiente de producción. Pero antes que nada, voy a actualizar y publicar esta rama de producción nuestra cuenta de GitHub para que podamos conectarla realmente. Ahora, como mencioné antes, este escaparate de hidrógeno nos va a generar un token API de escaparate. Podemos usar eso en lugar de crear una aplicación privada. Lo que voy a hacer es reemplazar el token de escaparate aquí por el que está dentro de nuestra configuración de escaparate. Entonces, claro, el dominio de la tienda va a ser Chris-testing-shop-2.myshopify.com. Desafortunadamente, no puedo copiarlo directamente, así que solo lo voy a escribir. Yo sólo copiaré eso y me aseguraré de que funcione. Sí, esa es la dirección correcta. Dulce, así que hemos actualizado nuestros permisos aquí, y presionaré “Guardar” en eso y luego comprometeré esos cambios obviamente. Stage, Update Hydrogen config file será el mensaje de confirmación y luego presionaré “Commit”. Después voy a dar click aquí para publicar. Ahora que he empujado esa rama y está en nuestra cuenta de GitHub, puedo ir a “Agregar entorno”. Voy a seleccionar la rama de producción. Ahí vamos y voy a llamar a esta producción, producción solo para diferenciarla de la otra rama de producción. Desafortunadamente, no puedo cambiar el nombre de los otros. Esta sólo va a ser producción y entre paréntesis producción porque ese es el nombre de la rama real. Voy a hacer esto público y voy a darle a “Guardar”. Ahora si vuelvo, pueden ver que aquí tenemos un segundo ambiente. Pero si hago clic en la URL, vamos a obtener el mismo problema, este error 404. La razón por la cual es que en realidad no se está desplegando. Si vuelvo aquí y voy a todas las implementaciones, verás aquí en vista previa tenemos una implementación. En producción, sin implementación, y bajo nuestro despliegue o entorno de producción personalizado , no hay implementación. Ahora bien, cuál es la diferencia entre estos y éste es que Shopify agregó este archivo de flujo de trabajo de implementación de Oxygen. Nosotros también vamos a hacer eso por nosotros mismos. Lo que voy a hacer es dirigirme a mi repositorio GitHub. Aquí está, christopherdodd/ escaparate de clase hidrógeno. Solo para ser claros chicos, este es mi repositorio, así que tengo acceso a esto y puedo crear una rama de producción aquí para ustedes, querrán hacer una bifurcación u otro repositorio y una rama de producción sobre eso. Este no es el proyecto literal de GitHub que estarás implementando en tu tienda. Yo sólo quería dejar eso claro. Pero si miramos aquí dentro y usamos el mío como ejemplo, si voy aquí a mirar las diferentes ramas, puedo ver una aquí abajo, han agregado una nueva sucursal, y esta es nuestra rama de vista previa. Si miro dentro, puedes ver que está basado en maestro. Pero lo que han hecho es que han agregado un archivo de flujo aquí y esta es nuestra configuración de implementación aquí mismo. Eso es lo que se sirve en esta URL de vista previa aquí. Shopify no lo dejes muy claro, pero eso es esencialmente lo que está sucediendo. Lo que vamos a hacer es que vamos a tomar este archivo. Sólo tenemos que tomar nota del camino aquí. Es.Gitthub/flujos de trabajo y luego metemos este archivo en. Voy a dar click aquí para obtener el archivo raw. Lo que voy a hacer es un poco fuera de pantalla. Voy a entrar en el menú de archivos. Haga clic en “Guardar página como”. Entonces dentro de nuestro proyecto de escaparate aquí, voy a copiar la ruta que era crear una carpeta.gitthub. Nos va a advertir que puntos están reservados para el sistema, lo que significa que no podremos ver esta carpeta en nuestro buscador, o supongo que es el Explorador de Windows en Windows. Pero lo podremos ver en nuestro editor de código. Entonces voy a crear la carpeta de flujos de trabajo y luego aquí dentro puedo guardar ese archivo de despliegue. Voy a salir de eso. Volvamos a esto y luego si entro en mi editor de código aquí, puedes ver que ese cambio viene a través. Si voy aquí al Explorer, se puede ver que hemos agregado ese archivo a esta ruta. Todo lo que tenemos que hacer es comprometerlo. Voy a escenificar ese archivo de despliegue de oxígeno. Voy a presionar “Commit”. Empujaré ese cambio a la rama de producción. Una vez que eso es empujado, si volvemos aquí a nuestras implementaciones y pasamos a producción en producción, se puede ver que algo se está desplegando en este momento. Si entro en todo, puede ver que estamos agregando nuestro archivo de implementación de oxígeno a nuestra rama de producción aquí mismo. Solo voy a esperar a que eso termine desplegarse y ahora se puede ver que se ha desplegado con éxito y si hago clic en esta URL aquí, largo he aquí, aquí está nuestra aplicación. Si entro en la página del catálogo, puedes ver que esto está funcionando igual que lo teníamos localmente. Puedo entrar en cualquiera de estas tablas de surf o tablas de snowboard más bien, agregar al carrito, entrar en la página de mi carrito y check out. Eso nos llevará a la caja de nuestras tiendas reales. Independientemente de si quieres implementarlo en la rama maestra o no, todavía vas a necesitar agregar ese archivo de implementación de oxígeno para que esa rama se despliegue. Aquí puedes ver que he creado un entorno personalizado ahora usando la rama de producción y podemos acceder a esta URL pública, lo cual es realmente genial. Si queremos eso para la rama maestra, podemos hacerlo también. De lo contrario, tenemos aquí esta URL de vista previa y eso nos muestra qué es exactamente lo que requiere Shopify para que esto se despliegue correctamente. Como se puede ver, esto no viene por debajo del rubro de producción porque supone que la rama maestra va a entrar en el ambiente de producción. Pero para mí, prefiero tener una sucursal separada porque la rama maestra podría estar desplegándose en diferentes tiendas así que a menudo tengo diferentes sucursales de producción para diferentes tiendas. Pero, por supuesto, hay algún código común que va entre tiendas cuando estoy trabajando con clientes. Por eso me gusta tener rama maestra como el código común que recorre todas las ramas de producción y luego tener una rama de producción separada para cada tienda. Esa es una pequeña explicación de por qué uso la producción como mi rama de producción. Pero por alguna razón, Shopify asume master como la rama de producción. Ahí vas. Ahora tenemos nuestro entorno de producción y nuestra URL pública para nuestra tienda de hidrógeno. Ahora que sabemos cómo desplegar nuestro escaparate al oxígeno, si estamos en Shopify Plus o en cualquiera de los otros planes que ojalá esté disponible en el futuro. Ahora, pasemos a la lección extra. Daremos un paso atrás, construiremos sobre lo que ya hemos creado y agregaremos en un blog. Te veré en el siguiente video. 14. Bono: adición de una sección de blog: Bien, así como lo hago a menudo en mis clases de Skillshare, he tirado un video bonus final, que no es esencial como vimos antes ya hemos creado colecciones, productos y carrito habilitado funcionalidad, que es realmente todo lo que necesitamos para crear una tienda básica que funcione. Pero para ganar más práctica con el flujo de trabajo en Hidrógeno, te voy a mostrar cómo crear una configuración de blog aquí también para que podamos sacar entradas de blog de la tienda también. Lo que he hecho es creé una rama de producción la última vez, pero volví a la antigua configuración de Hydrogen, así que estamos usando nuevamente las entradas del blog de la vista previa de Hydrogen, esto va a ser siguiendo de hace dos videos, no el último video que solo necesitaba hacer referencia a eso. Estamos ejecutando la vista previa de Hidrógeno, no conectándonos a mi tienda en particular. Lo que queremos hacer es el número 1, crear un diseño de blog, y luego el número 2 es crear una ruta para todos los diferentes artículos dentro de esa entrada de blog. Déjame abrir nuevamente GraphiQL porque solo quiero verificar que sí tenemos blogs en esta tienda Shopify en particular, así que voy a hacer blogs, esto listará nuestros blogs y haré nodos y manejadores. Si ejecuto esto, debes proporcionar al menos primero o último, así que digamos los primeros cinco blogs, no debería haber más de cinco blogs seguramente. Hay dos blogs en la tienda de ejemplos de hidrógeno de Shopify, y eso es noticias y diario. Esto va a funcionar, así que si volvemos aquí, lo que voy a hacer es volver a nuestro proyecto aquí y vamos a crear una ruta de blog. Dentro de nuestra carpeta rutas aquí, nuevo archivo blog punto servidor, en realidad lo siento, necesito hacer eso un blog mayúscula punto servidor punto JSX. Entonces vamos a exportar los valores predeterminados del blog de la función, y luego devolver algunos JSX. No presione “Guardar” todavía porque tiene un error porque no tenemos ningún JSX ahí dentro. Entonces vamos a importar algunas de las cosas que vamos a necesitar usar, vamos a necesitar, por supuesto usar la consulta use shop, porque vamos a estar consultando la API de escaparate para obtener la información de la publicación del blog. Voy a importar CacheLong y GQL, otra vez no le pegues a “Guardar” todavía porque se romperá y luego voy a importar suspenso de react, voy a importar layout desde nuestro servidor de punto de layout de componentes y eso es lo que voy a hacer por ahora. Lo que voy a hacer es probar una consulta por aquí en nuestro GraphiQL, así que voy a acceder al blog de la revista así que vamos a crear una consulta con nombre Voy a nombrar a esta consulta artículos, y entonces podemos acceder al blog a través su identificador que como podemos ver aquí tenemos dos opciones para elegir, revista o noticias, hagamos diario y luego dentro de aquí, accedamos lo siento, artículos, saltando un poco ahí. Tenemos que poner en el parámetro aquí así que vamos a ir por los primeros nueve, y vamos a escribir en nodos aquí y luego en los nodos podemos seleccionar el título de cada artículo, el identificador de cada artículo vamos a necesitar eso navegación y luego la imagen, por lo que la URL y el texto alt. Eso es todo lo que deberíamos necesitar si le pego a “Ejecutar” en eso, verás que recuperamos los primeros 1,2,3,4 así que solo hay cuatro artículos, pesar de que especificamos nueve si hay menos de nueve, eso es lo que recuperamos. Pero la buena noticia es que todo funcionó así que volvamos a nuestro proyecto por aquí, y voy a crear esta consulta, const query es igual a GQL y luego vamos a pegar la consulta aquí, solo voy a dejar la sangría así y fui un idiota y presioné “Guardar” sin poner nada en nuestra declaración de retorno así que vamos a tener que reiniciar nuestro servidor eso no es gran cosa. Antes de hacer eso sin embargo, voy a usar el gancho de consulta de use shop así que voy a agarrar los datos de use shop query, analizando la consulta como tal, use cachelong, como lo hemos hecho anteriormente, preload true y luego debajo de aquí, voy a hacer const. En realidad antes de hacer eso, antes de hacer estructura hagamos lo que solemos hacer y echemos un vistazo a ese objeto de datos. Solo necesito poner alguna forma de JSX aquí de lo contrario, el servidor no se va a ejecutar, así que solo voy a hacer eso y luego vamos a hacer npm run dev aquí abajo, así que ya está funcionando, vamos actualizar y vamos a nuestra ruta de blog, tenemos un problema aquí, no Shopify contexto encontró esto suena como uno de esos errores extraños que podemos arreglar usando yarn dev dash dash force, refresh and as you puede ver que eliminó todos los errores. Sin embargo, lo que estamos buscando es lo que hay en el objeto de datos y como puedes ver aquí dentro de los objetos de datos, tenemos datos nuevamente , tenemos blog nuevamente, y luego tenemos artículos que contienen un objeto así que vamos a desestructurar aquí, así vamos a ir const a partir de los datos que vamos a entrar, acceder a los datos, luego dentro de los datos, acceder al blog como blog. Entonces lo que podemos hacer es dejar que solo consigamos el blog de registro de consola, asegurarnos de que tenemos el correcto. Si miramos por dentro aquí, puedes ver todavía tenemos artículos y dentro de los artículos tenemos una lista de nodos cool. Lo que vamos a hacer es que podríamos entrar aquí y poner el título del blog pero no vamos a hacerlo en este video en particular, realidad todo lo que estamos usando esto es para agarrar los artículos así que voy a ir un paso más profundo en la estructuración y agarrar los artículos, en realidad no creo que necesitemos poner los dos puntos ahí y luego si solo vuelvo a iniciar sesión en la consola, no necesitas hacer estos registros de consola , solo estoy verificando que tengo los datos correctos aquí. Aquí puedes ver si, tienes la lista de nodos aquí mismo. En realidad vamos a entrar e ir a los artículos de nodos, refrescar por aquí y ahora que elimina los nodos del frente, así que solo tenemos artículos, tenemos una matriz de solo objetos de artículo. Eso es todo lo que buscamos vamos y pongamos aquí como nuestro componente padre, el layout ya lo hemos importado desde donde existe y luego porque estamos accediendo a datos asincrónicos, vamos a poner en suspenso, voy a poner todo esto en un contenedor y luego ya configuré una clase para la grilla del artículo que va a ser muy similar a la grilla del producto y luego muy similar a la grilla del producto, voy a repasar todos los artículos, ejecutar mapa sobre eso y luego para cada artículo, abrir esta devolución y no necesitamos poner la devolución aquí, Creo que podemos simplemente poner en un div aquí, poner un poco de JSX aquí, y volvamos el título del artículo. Aquí vamos y tenemos acceso al título del artículo aquí, así que si le pego a “Guardar” en eso, refrescar por aquí, no está pasando nada en este momento, echemos un vistazo. La cuadrícula del artículo está llegando, pero no el título del artículo aquí, y tal vez no debería haber puesto esto ahí. Hagámoslo a ver que pasa, Sí, así que ahí tienes aquí tenemos cuatro divs con todos los títulos. Podríamos hacer esa lista como te mostré antes, pero vamos a convertir estas en cuadrículas muy pronto así que dejémoslas como divs. Puedo crear un componente separado en mi carpeta de componentes por aquí, pero solo voy a usar esto en esta ruta particular del blog, así que lo voy a poner a continuación, y voy para llamarlo Artículo grid item y voy a pasar por el artículo como un prop, y luego vamos a devolver exactamente el mismo JSX que tenemos aquí, y luego así que voy a reemplazar aquí con elemento de cuadrícula de artículo. Entonces lo único que tenemos que hacer es pasar por el artículo como utilería y eso va a pasar eso justo aquí, que luego podemos usar dentro de nuestro JSX aquí abajo. Pulsa Guardar en eso y deberíamos obtener el mismo resultado, lo cual hacemos. Lo que voy a hacer es agregar esta clase aquí para habilitar esto para usar nuestro elemento de cuadrícula de artículo CSS es el nombre de la clase. Entonces vamos a insertar dos enlaces aquí. Uno un enlace de imagen y otro un enlace del título. ¿Hemos importado link e imagen? No, no lo hemos hecho. Importemos enlace e imagen desde hidrógeno. Entonces voy a poner aquí un componente de enlace. Voy a agregar en cadena aquí. Vamos a anidar el artículo dentro de una ruta de blog. Al igual que hicimos con los productos, usa el identificador de artículos como su URL. Estableceremos esa ruta en sólo un segundo. Voy a darle a eso un nombre de clase de contenedor de imagen. Entonces dentro de aquí, vamos a configurar nuestro componente de imagen. Todo lo que necesitamos hacer es pasar por la imagen del artículo y componente de imagen de Shopify manejará el resto aparte de alt, que tenemos que pasar por aquí mismo, artículo, imagen, alt, texto. Fresco. No queremos que se cierre así, queremos que sea autocierre. Barrido. Vamos a ver si eso funciona. Sí, tenemos estas imágenes llegando a través. Hermoso. Aquí, voy a crear otro componente de enlace, enlazando al mismo lugar. Voy a darle a esto un nombre de clase para el CSS de article-grid-item-title. Cerremos esto, para que podamos ver. Cierra eso y luego coloca el título del artículo entre estas etiquetas de enlace. Guarde eso y aleluya, tenemos nuestra grilla de artículos aquí. Si hago clic en uno de estos, básicamente va a ir a una página en blanco porque aún no hemos configurado esa ruta. Vamos a configurarlo ahora mismo. Al igual que hicimos con colecciones y productos, solo necesitamos crear una nueva carpeta llamada blog. Entonces al igual que hicimos con colecciones y productos, configuramos una ruta dinámica [handle] .server.jsx. Aquí es donde haremos la mayor parte de nuestro trabajo para esta lección. Exportemos una función predeterminada. Vamos a llamar a este artículo componente y pasaremos por el artículo como utilería. En nuestra declaración de retorno aquí, solo voy a dar salida a nuestro archivo de diseño y luego averiguaremos qué poner dentro de eso en un poco. Tenemos que importar algunas cosas aquí. Voy a expandir esto en múltiples líneas como lo hemos hecho a lo largo de esta clase e importar algunas cosas de la biblioteca de hidrógeno de Shopify. Voy a necesitar usar ShopQuery. Voy a necesitar usoLocalización. Voy a agarrar el componente SEO porque de qué sirve tener un buen artículo si no está optimizado para motores de búsqueda. Voy a agarrar el GQL y voy a agarrar el componente de imagen. También voy a importar suspenso de react e importar los componentes de layouts por supuesto. Creo que tenemos que volver dos veces, yendo a componentes y luego layout.server. Ahí vamos. A continuación vamos a construir la consulta. Hagámoslo en la interfaz gráfica, para que podamos corregir cualquier error antes de ejecutarlo. También aprovechamos el auto completo haciéndolo de esta manera. Voy a deshacerme de ese viejo y llamemos singular a este artículo de consulta. Antes de abrir eso, realidad necesitamos pasar en qué variable vamos a pasar? Tenemos que decir que vamos a estar pasando en una variable llamada handle, ese es el tipo de cadena. Entonces vamos a apuntar al blog específico de revista. Entonces lo que tenemos que hacer es especificar un artículo por asa. No se llama artículo por alguna razón, se llama ArticleByHandle. Eso es bastante específico, pero obviamente vamos a poner como parámetro nuestro mango. Ábrelo y luego aquí dentro, cuáles son algunas de las cosas que vamos a necesitar recuperar de cada artículo. Obviamente el título, la fecha en que se publicó, el autor que ahora es AutorV2. Que en realidad es una selección, solo necesitamos especificar lo que queremos en esa selección. Yo solo quiero el nombre y luego la imagen, que obviamente es una selección. Vamos a agarrar la URL y el texto alt y luego el contenido HTML, que es el contenido del artículo. Obviamente esto no va a funcionar porque no hemos especificado el valor del identificador, pero al menos hemos utilizado gráficos para ayudarnos a autocompletar algunos de estos campos. Volvamos aquí. Yo sólo voy a anotar aquí consulta como un GQL constante, abre esto y luego aquí vamos. Hemos codificado el hecho que estamos mirando dentro del diario, pero el mango vamos a pasar como una variable. Dentro de aquí podemos agarrar el mango que estamos buscando a través de los parámetros, a través de los apoyos de este componente. Voy a agarrar el asa del artículo y luego vamos a UseShopQuery, así que const data es igual a UseShopQuery. Esta vez sólo voy a poner en la consulta y las variables. Las variables por las que vamos a pasar es simplemente el mango. Como siempre lo hago, voy a registrar en consola los datos que se devuelven de nuestra consulta. Cuando vamos a uno de estos, tenemos un error, no podemos desestructurar el manejador de propiedad del artículo ya que está indefinido. En realidad no tenemos acceso a un objeto de artículo aquí. Echemos un vistazo. Estamos usando lo incorrecto aquí. Necesitamos UserOuteParams. Perdón por eso. UserOuteParams. lo vamos a pasar, solo vamos a usar los RouteParams. Voy a UserOuteParams aquí y me arranco el asa. Vamos a refrescarnos. Uy. Volvamos a nuestro blog. Da click en uno de estos. Ahora tenemos un error de la API de Storefront, el manejador de la variable se proporcionó no válido. Probablemente es porque no usé los corchetes aquí para invocarlo. Vamos a refrescarnos por aquí. Sí. Ahora no obtenemos errores. Déjame echar un vistazo aquí. Nos desplazamos hacia abajo. Ahí vamos. Estamos obteniendo el registro de datos de la consola aquí y nos está devolviendo el artículo del blog de datos por mango y luego objeto dentro de allí. De hecho, podemos simplemente copiar esto y usarlo para nuestra desestructuración. Obviamente no necesitamos usar objeto aquí, pero podemos sacar el artículo por asa y luego nuestra consola registrar el artículo por asa. Refresca por aquí. Si abro esto, verás que tenemos este objeto venir a través del título, PublishedAT, AuthorV2, imagen y el contenido de la misma. Muy chulo. Eso está funcionando ahora, nuestra consulta de API de Storefront. Ahora tenemos esta cosa llamada ArticleByHandle. Realmente no me gusta ArticleByHandles, así que solo voy a intercambiar eso. Sólo voy a llamarlo un artículo. No sé por qué tiene que ser ArticleByHandle. Entonces usaremos el artículo dentro de aquí. Lo que voy a hacer es, voy a abrir un suspenso para el componente SEO digamos tipo artículo y luego los datos solo va a ser el artículo. Quiero hacer de eso una etiqueta de cierre automático. Después de eso lo que vamos a hacer es crear esta página de artículo, así que voy a crear un dev con la clase de artículo, página y contenedor. Entonces voy a tener dos partes para esto. Voy a tener el encabezado de la página del artículo y luego el artículo en sí, el encabezado de la página del artículo es el nombre de la clase. Voy a poner a través del H1, el título del artículo. Voy a crear aquí un lapso para la fecha que aún necesitamos formatearla. Pero digamos que es artículo. Vamos a pasar por el sin formato por ahora. PublishedAt, vamos a separar eso con un punto y poner el artículo authorv2.name aquí para el nombre del autor, y luego después de la cabecera, vamos a crear, abrir un artículo etiqueta HTML aquí es donde vamos a poner nuestra imagen principal del artículo. Voy a pasar por el artículo.imagen, y luego en los textos alt, la imagen del artículo, texto alt. Etiqueta de cierre automático para la imagen, y luego lo que vamos a hacer es el div para traer el HTML. Vamos a ver de nuevo este atributo dangerOuslySetInnerHTML, y solo tenemos que hacer este guión bajo, subrayar HTML es igual y luego no es igual a dos puntos más bien. Después poner en contenido HTML proveniente del objeto article, y luego voy a darle a eso un nombre de clase para formatear el cuerpo del artículo. Fresco. Vamos a terminar ese div, y veamos qué pasa ahora cuando ejecutamos esta página. Mira esto. Tenemos el título, tenemos la fecha que aún necesitamos formatear. Tenemos el nombre completo del autor, y luego tenemos esta imagen aquí, que es la imagen principal. Si cierro esto, puedes ver que esa es la primera parte y luego el contenido del artículo. Esto está prácticamente hecho. Lo único que realmente tenemos que hacer es arreglar esta marca de tiempo aquí. Es bastante jodidamente feo. Obviamente no podemos dejarlo así para el usuario, y también en caso de que no haya artículo, quiero poner en un fallback también. Déjame hacerlo primero. Sólo lo voy a poner en una reserva. Si no hay ningún artículo, entonces volvamos con nuestros componentes de diseño. Todavía usando el contenedor. Simplemente pondremos en un div con artículo no encontrado, y eso también me recuerda construir algo a nuestro componente de aplicación que mencioné en las lecciones de teoría, pero no he implementado en este particular proyecto que está incorporando el componente de rutas y haciendo una ruta NotFound. Podemos usar este comodín seleccionado aquí. Cualquier cosa que se deslice a través de rutas de archivos y llegue hasta aquí, solo traeremos componentes NotFound. Lo siento, esto es bastante tangente, pero solo pensé en ello entonces cuando estaba creando ese respaldo para la página del artículo, y luego debajo de aquí, en realidad hagámoslo aquí. Función NotFound. Esto es solo un pequeño retorno de 404 páginas sin maquetación, que creo que tendremos que importar layout de los componentes, layout.server. Entonces al igual que hicimos para la página del artículo, un contenedor con un div dentro que solo dice página no encontrada. Ahora bien si voy a un artículo que no se encuentra, entonces nuestro hola, vamos a poner algo al azar así. Volverá artículo no encontrado. Si vamos en la ruta raíz y tecleamos algo aleatorio como hola ahí, dirá página no encontrada. Eso es un pequeño bono para ti ahí. Actualicemos en realidad el enlace 3. Estoy rebotando un poco por aquí, pero es el video extra. Dame algunos tipos flojos. En layout.server, pongamos en un enlace al blog. Deshazte de ese feo enlace 3, y luego si hago clic en “Blog”, nos va a llevar al blog, y luego si hago clic aquí, llegaremos a uno de nuestros artículos, y así sí. Como decía antes de irme en esa tangente, necesitamos formatear esta fecha, que es un poco más complicada de lo que nos gustaría, pero estamos trayendo, usa la localización aquí, que es un gancho de hidrógeno. Podemos usar la estructuración para sacar algunas cosas aquí desde el gancho de localización de uso. Lo que vamos a lograr es el lenguaje, IsoCode. LanguageCode es como lo vamos a llamar, y luego country sacará el isoCode del país y lo traerá a su propia variable llamada countryCode. Esto va a ser para la siguiente función que usemos. Vamos a crear una fecha formateada, y vamos a crear nuevos objetos de formato de fecha y hora internacionales. Esta es una especificación dentro de JavaScript. Esto no es reaccionar ni hidrógeno. Entonces abriremos una cadena aquí, poniendo en esas dos variables que acabamos de crear y que acabamos de sacar de la localización de uso. El primero LanguageCode, luego dash countryCode, y luego el siguiente argumento irá y pondrá en un objeto año numérico, mes largo y día numérico. Todo esto depende de tu preferencia personal. Pero vamos a tener un año numérico, una pantalla larga para el mes, lo que creo que solo le gusta si es enero, va a dar salida a enero por completo, y luego el día va a ser numérico también, lo que tiene sentido. Luego después de aquí, vamos a ejecutar formatos en ese objeto recién creado y luego ejecutarlo a través un nuevo objeto, Article.Publishedat. Eso parece bastante agitado, pero básicamente estamos convirtiendo esa fecha PublishedAt en este formato de fecha internacional. Ahora que tenemos esta fecha formateada, solo podemos bajar aquí y reemplazar artículo PublishedAt con la fecha formateada, y a menos que hayamos cometido algunos errores aquí, que parece que tenemos. ¿Qué hemos hecho? No se puede acceder al artículo antes de inicialización. He hecho la variable artículo después de haber escrito todo este código, así que solo necesitaba moverlo antes, y luego si presiono Guardar en esa actualización por aquí puedes ver el nombre de forma larga del mes que es el 3 de junio de 2022 de Ben cell o como sea que pronuncies su nombre, y ahí está tu artículo. Si vamos a otros artículos de este blog, verás que funciona igual de bien. Eso es un pequeño bono para ustedes. La página del blog, siento que esta lección debería ser bastante buena práctica para ustedes porque como mencioné anteriormente, estamos corriendo como una secuencia una y otra vez de construir estos componentes, capturando datos de la API de escaparate usando consulta nítida usada para tomar los datos que queremos dentro de esos datos devueltos y luego usarlos dentro de nuestro componente. Entonces al mismo tiempo, trayendo algunos de estos otros componentes y ganchos de Shopify, que nos hacen la vida mucho más fácil. Eso básicamente concluye esta clase chicos. Espero que lo hayan disfrutado. Cualquier duda como siempre las deja abajo, pero saltemos a la conclusión ahora donde hablaremos sobre tu proyecto de clase. Te veré ahí. 15. Conclusión y proyecto de clase: Esto concluye esta clase sobre Shopify hidrógeno. Para tu proyecto de clase, te animo a crear tu propio escaparate personalizado usando hidrógeno. Para inspirarte, puedes tomar lo que hemos hecho hasta ahora en esta clase y ampliarlo. Podrías construir una galería de productos para traer más fotos de productos desde el backend, crear un cajón para alojar el carrito del usuario sin que salgan de la página del producto, o construir secciones personalizadas para mostrar las mejores características de su producto. La elección es suya. Como siempre, si tienes alguna duda o inquietud, deja un comentario en el cuadro de discusión a continuación, y haré todo lo posible para señalarte en la dirección correcta. Gracias como siempre, por ver y espero volver a verte en algunas de mis otras clases.