Construye una página de producto con el marco de trabajo Hydrogen de Shopify

Una buena representación global aquí. Así que, sin más preámbulos, se lo entrego a David. David Witte es un defensor del desarrollador aquí en Shopify. Nos guiará a través de los primeros pasos con Hydrogen, cómo construir nuestra página de producto, y los últimos 30 minutos de esta sesión de 90 minutos serán para preguntas y respuestas, y lo hará con sus compañeros de equipo de Shopify.

Entonces, David, te cedo la palabra. Y mucho éxito. Muy bien. Gracias, Mercy. Así que, bienvenidos todos. Bienvenidos a este taller. Gracias por unirse a mí hoy. Mi nombre es David Witte, y estoy con ustedes desde la soleada Seattle, Washington. Si no lo saben, mi estado está actualmente en llamas, por lo que la calidad del aire es muy mala y ha afectado un poco mi voz. Así que, disculpen si mi voz se va y viene. Voy a intentar hablar un poco más bajo, pero espero poder superar esta hora. Conmigo hoy tenemos a Brett, a Daniel y a Matt, que forman parte del equipo de Hydrogen. Ellos responderán las preguntas al final de este taller. Pero vamos a comenzar con 60 minutos de un taller interactivo donde juntos construiremos una página de visualización de productos. Así que, empecemos.

Un poco sobre mí. Mi nombre es David Witt, y soy un defensor del desarrollador en Shopify. He estado en Shopify desde finales de julio, así que soy relativamente nuevo. Pero he estado aprendiendo Hydrogen, y estoy muy emocionado de enseñar Hydrogen a desarrolladores como ustedes hoy. En esta imagen estoy con mi perro, Lucy. Ella está sentada en el sofá, y yo estoy sentado en el suelo, y para ella, ese es el lugar correcto de donde deben estar las cosas. Así que, si te identificas con eso, envíame una foto de tu mascota a mi cuenta de Twitter. Me encantaría ver y compartir fotos de mascotas contigo.

Así que, hablemos del taller. Hoy vamos a construir una página de visualización de productos en Hydrogen, y hablaremos sobre qué es Hydrogen y cómo encaja en el ecosistema de Shopify. Pero esto es solo un adelanto de dónde llegaremos hoy. Todos estos datos se almacenan en Shopify, y utilizaremos una API para consultar esos datos y construir un sitio web personalizado donde podamos interactuar con él y comprar un producto, lo cual nos llevará al proceso de pago de Shopify. Así que, comencemos. Si quieres seguir el taller, ve a esta URL, shopify.github.io/workshops. Estos talleres también estarán disponibles después del evento, así que si solo quieres escuchar y seguir mientras lo hago, está bien. Puedes intentarlo en tu propio tiempo, o si quieres seguir el ritmo, puedes ir a tu propio ritmo y ponerte al día en cualquier momento. Trataré de hacerlo a un ritmo en el que puedas seguir. Pero entiendo que hay mucha información que te llega de golpe. Así que está bien dar un paso atrás y hacerlo a tu propio ritmo. Así que voy a salir de esto y cambiar a mi página de taller. Y en la página del taller, veremos que tenemos varios talleres disponibles. Te animo a explorarlos en tu propio tiempo. Hay muchas cosas interesantes que estamos tratando de enseñar, y este es un nuevo método que estamos utilizando para enseñar, así que por favor dinos qué opinas de esto. Pero el taller con el que comenzaremos es el taller de Crear una página de producto con Hydrogen. Así que haré clic en Comenzar y comenzaremos en el paso uno. Así que daremos un paso atrás y hablaremos de las tiendas personalizadas por un momento. Cuando piensas en Shopify, la mayoría de las personas piensan en la solución encabezada donde un usuario se registra en una cuenta, puede seleccionar un tema y algunas aplicaciones, y, ya sabes, configurar algunos estilos y marcas, y luego Shopify les sirve esa tienda. Esa es una forma de usar Shopify. Y es genial porque proporciona mucha estructura, y obtienes muchas cosas realmente buenas de forma predeterminada. Pero queríamos proporcionar una opción para algo que pudiera salirse de esa estructura. O tal vez solo quieras traer tu propia cabecera a una tienda basada en API.

Y las tiendas personalizadas te permiten hacer eso. Entonces, hydrogen es realmente la forma preferida por Shopify de construir una de esas tiendas personalizadas. Así que hablaremos un poco más sobre qué es hydrogen en un momento. Pero quiero que todos comiencen con el proyecto en el que estaremos trabajando, que es un proyecto de StackBlitz. Entonces, en el Paso 1, si hacen clic en este enlace, se abrirá un proyecto de StackBlitz para ustedes. Y luego, en la esquina superior izquierda, si hacen clic en el botón de bifurcación, obtendrán su propia instancia de este proyecto inicial. Así que en el lado derecho, veré que mi contenedor web de inicio está atascado. Entonces, si actualizo la página, eso me desbloqueará y podré ver que se ejecuta el comando de inicio y veré una vista previa de mi aplicación aquí. Entonces, si no están familiarizados con StackBlitz, es un editor de código que sirve todo desde un navegador web. Es una forma realmente buena de jugar con hydrogen y comenzar con solo un clic de botón. Entonces, en el panel izquierdo, tenemos el Explorador de archivos. El panel central será nuestro editor de código. En la parte inferior, tenemos una terminal y en el lado derecho, tenemos nuestra vista previa de la ventana. Es todo lo que necesitamos para comenzar y construir con hydrogen. Así que volveré al taller y hablaré un poco más sobre hydrogen. Como mencioné, hydrogen es la forma preferida por Shopify de construir una tienda personalizada. Está diseñado para brindar una excelente experiencia de desarrollo, pero también está diseñado para hacer que tus sitios sean realmente rápidos. Y bajo el capó, utiliza los componentes de servidor React, que permiten utilizar componentes tanto en el servidor como en el cliente, y proporciona un renderizado en el lado del servidor en tiempo real. Hydrogen también es muy rápido, ya que se puede ejecutar en servidores Edge, lo que proporciona un tiempo realmente rápido para el primer byte. Hydrogen es genial porque viene con muchos componentes y herramientas que hacen que el desarrollo sea realmente rápido y eficiente, y exploraremos algunas de esas herramientas en este taller. Así que volveré a mi proyecto de StackBlitz y lo primero que haré es simplemente mostrar algunas piezas de configuración que hacen que nuestra tienda comience. Así que abriré hydrogen.config.js y aquí es donde configuramos a qué tienda hace referencia nuestro proyecto. Así es como configuramos nuestra API. Simplemente especifico el dominio, un token de tienda y una versión de API. Para nuestros propósitos, hoy solo tenemos una tienda de demostración de taller desde la que consultaremos datos. Una vez que se define esta configuración, se consume en app.server.jsx, que será el componente raíz principal de nuestra aplicación. Y verán que toda nuestra aplicación está envuelta en un componente proveedor de Shopify. Y ese componente proveedor va a consumir el archivo de configuración y luego nos dará hooks para que podamos consultar la API de la tienda. Entonces, eso abstrae algunas de las piezas de nosotros y nos brinda una interfaz agradable utilizando el paradigma de proveedor y hook.

Así que vamos a pasar al paso dos y vamos a hablar sobre el enrutamiento basado en archivos. Entonces, Hydrogen utiliza el enrutamiento basado en archivos y si has utilizado Next.js u otros frameworks populares, es posible que estés familiarizado con cómo funciona esto. Básicamente, es una forma conveniente de configurar un sitio y establecer el enrutamiento de URL, similar a un árbol de archivos en un explorador.

Vamos a crear una página de visualización de productos. Para ello, vamos a crear una carpeta llamada 'products' y luego vamos a crear un archivo con el nombre del producto. Y esto me lleva al primer punto que quiero mencionar sobre Hydrogen y los componentes de servidor React. Y es el concepto de dónde quieres que se renderice tu componente. Utilizamos una convención de nomenclatura sencilla para ayudarnos a entender y ayudar al framework a determinar dónde deben renderizarse estos componentes. Un archivo que termina en '.server.jsx' se renderizará en el servidor. '.client.jsx' se ejecutará en el cliente, y '.jsx' se ejecutará en el servidor o en el cliente, dependiendo de dónde se incluya y renderice ese archivo. Hay ciertas reglas que debemos tener en cuenta al decidir si queremos utilizar un componente de servidor o de cliente. Pero solo mencionaré dos reglas que debemos tener en cuenta para este proyecto. La primera es que todos nuestros componentes de archivo basados en rutas deben ser componentes de servidor. Y cualquier cosa que gestione el estado del usuario debe ser un componente de cliente. Puedes encontrar más información sobre las reglas, directrices y mejores prácticas en el sitio web de Shopify.dev.

Vamos a crear nuestra primera ruta estática. Así que volvamos a StackBlitz y abramos la carpeta de rutas. Veo que ya tengo mi archivo 'index.server.jsx' que muestra 'Hello World'. Voy a crear una nueva carpeta llamada 'products'. Y dentro de la carpeta 'products', crearé un nuevo archivo llamado 'example.server.jsx'. Y este será un componente de React. Voy a exportar por defecto la función 'example'. Y simplemente voy a devolver algo de JSX. Así que esto mostrará 'Hola ejemplo'. Cuando guardo, esto registrará mi aplicación o ruta en mi aplicación. Así que podré navegar a ella de inmediato. Voy a ir a la ventana de vista previa y abrir 'products/example'. Veremos que ahora se muestra mi componente 'example' como una página. Eso es genial. Ahora tenemos una forma muy sencilla de configurar una ruta estática. Las rutas estáticas son ideales cuando conoces la URL completa. Por ejemplo, '/about-us/faqs' o '/cart'. Ese es un buen caso de uso para una ruta estática. Pero como estamos construyendo una página de visualización de productos, vamos a querer una ruta dinámica. Queremos que sea '/products/nombre-del-producto'. Y eso será diferente para cada página de producto. Entonces, en lugar de usar una ruta estática, tendríamos que agregar un nuevo componente para cada identificador de producto. Eso sería un poco absurdo. En su lugar, podemos utilizar una ruta dinámica para renderizar todos esos productos dentro de un solo componente. Así que vamos a convertir nuestro componente 'example' en una ruta dinámica ahora. Y puedo hacer eso cambiando el nombre del archivo. En lugar de 'example.server.jsx', esto registrará este archivo como una ruta dinámica. Si cambio mi ruta a 'example1', veré que sigue mostrando el componente 'example', o 'example2', sigue mostrando un ejemplo. Eso demuestra que ahora tenemos una ruta dinámica y cualquier cosa bajo el fragmento de URL '/products' será renderizada por este componente. Una de las cosas que tendremos que hacer cuando interactuemos con nuestra tienda es hacer una llamada a la API y pasar este identificador a nuestro servidor para asegurarnos de obtener el producto correcto. Y podemos extraer ese identificador de la URL de manera relativamente sencilla porque nuestro componente de servidor ha pasado algunas props que podemos usar. Así que vamos a obtener la propiedad 'params' de nuestro componente de ruta.

Y luego, a partir de esa propiedad params, simplemente voy a desestructurar la propiedad handle. Y luego, voy a imprimir esto en la página solo para asegurarme de que lo tengamos correcto. Bien, así que en mi vista previa, ahora veo ejemplo dos, y voy a volver a mi ejemplo original y veremos que tenemos el handle. Así que esa es una forma fácil y sencilla de obtener ese handle. Y luego, en los siguientes pasos, hablaremos sobre cómo hacer esas consultas a la API de la tienda.`,`

Lo siguiente que voy a hacer es hacer que las cosas se vean un poco mejor importando un componente de diseño, que ya está construido para nosotros en nuestra carpeta de componentes. Lo voy a importar como Layouts.server. Y luego, voy a envolver todo lo que tengo hasta ahora en mi componente de diseño. Bien, ahora veo un encabezado pequeño y eso me ha preparado para el éxito aquí. Quería revisar una instancia de cómo romper el servidor. Así que voy a introducir un error de sintaxis y guardar. Y eso en realidad va a romper mi servidor. Así que veremos que ya no puedo actualizar nada. Y si te encuentras con eso, generalmente puedes usar deshacer para volver a donde estabas antes, o si conoces tu error y puedes ver realmente, parte del código que se generó te ayudará a encontrar el error, puedes corregir tu error. Guardaré y luego en mi terminal, solo tengo que presionar la flecha hacia arriba para ejecutar, para mostrarme el comando ejecutado previamente, que es npm install y yarn beat, y puedo presionar Enter y eso volverá a ejecutar mi servidor y me devolverá a donde estaba antes. Así que voy a volver a /productos/ejemplo, y estoy de vuelta donde estaba. Así que si en algún momento introduces accidentalmente un error, esa será la forma de volver a ejecutar tu servidor. Eso nos lleva al final del paso dos, tenemos algunos pasos en los que si te quedas atascado en el camino, hemos proporcionado un bloque de código completo al final del paso, y deberías poder copiar todo el bloque de código en tu portapapeles, pegarlo en Stackblitz y deberías volver al buen camino.`,`

A continuación, vamos a alejarnos de nuestro proyecto de Stackblitz y hablar sobre la API de la tienda. Entonces, la API de la tienda Shopify es una API de GraphQL desarrollada por Shopify y ayuda a soportar la construcción de tiendas personalizadas. Y una de las cosas buenas que Hydrogen hace por nosotros es proporcionarnos una herramienta para que podamos probar y hacer consultas de GraphQL utilizando una herramienta del navegador llamada GraphiQL. Así que mostraré cómo se ve eso ahora. De vuelta en Stackblitz, veo en la esquina superior derecha, tengo un botón para abrir nuestro proyecto en una nueva pestaña, y voy a hacer eso. Y lo que quiero hacer es ir a la URL del host y luego /GraphiQL, que es G-R-A-P-H-I-Q-L, y eso abrirá la interfaz gráfica. Entonces, si no estás familiarizado con GraphQL, haré un par de consultas de ejemplo, y eso espero que te dé una idea de cómo podemos usar GraphQL para consultar datos. Esta interfaz aquí es bastante común en las interfaces de GraphQL, donde el lado izquierdo será donde escribimos nuestra consulta, y el lado derecho será donde vemos los resultados de nuestra consulta.

Así que voy a eliminar estos comentarios por ahora, y vamos a hacer una consulta simple. Vamos a llamar a nuestra consulta, shop, y luego para averiguar cómo comenzar mi consulta, puedo abrir la documentación y hacer clic en la ruta de consulta y ver qué puedo consultar en el nivel superior. Y esto es mucha información útil, y todo está fuertemente tipado, por lo que es realmente útil. También puedo empezar a escribir, y tengo autocompletado disponible para mí. Así que voy a consultar algunos datos básicos de la tienda data donde dentro de la tienda, puedo buscar el ID. Puedo buscar el nombre, y simplemente diremos la descripción. Y presionaré Control, Enter o este botón de reproducción rosa para iniciar mi consulta. Y veremos en el lado derecho que tengo un objeto data que coincide con la forma de la consulta que tengo aquí. Y eso es una de las cosas realmente buenas de GraphQL es que te da una pista de cómo será la forma de tus data cuando construyas tu consulta. Así que este es solo un ejemplo muy simple de cómo consultar data y cuál será la forma de esos data.

Así que vamos a deshacernos de esto y vamos a centrarnos en el data del producto. Así que voy a llamar a esta consulta detalles del producto, y dentro de mi consulta de detalles del producto, vamos a buscar algunos productos. Veo que tengo un par de opciones diferentes de productos que podría usar. Voy a usar productos en plural que nos da una conexión de productos, y simplemente voy a empezar buscando los primeros 10 productos. Y así es como se especifica qué productos quieres buscar. Y esto me dará un objeto hijo de bordes y en cada uno de esos bordes, quiero un nodo. Y si no estás familiarizado con esa terminología, es solo terminología de estructura de datos de gráficos. No entraré en eso, pero el autocompletado te ayudará a descubrir dónde necesitas profundizar para obtener esos datos de producto reales. Así que para un producto dentro de mi nodo, vamos a obtener solo el ID, el handle y el título. Así que gracias, autocompletado. Presionaré Control-Enter y ahora debería ver que tengo una matriz de bordes donde cada nodo va a representar un producto. Veo bastantes a los que puedo hacer referencia y para los propósitos de esta demostración, voy a usar snowboard como mi handle. Así que copiaré snowboard en mi portapapeles y ahora reescribiré esta consulta para que podamos centrarnos en un solo producto. Así que eliminaré todo lo que tengo hasta ahora y simplemente escribiré producto y cuando abra mis paréntesis, veo que puedo consultar un producto por ID o por handle así que lo haré por handle porque sé que en nuestra aplicación ya tenemos el handle desde la URL. Así que nos aseguraremos de que este sea el handle snowboard y ahora tengo acceso a los datos del producto. Nuevamente, puedo obtener el ID, el título, quiero el handle y luego simplemente diremos descripción. Así que si ejecuto eso, ahora debería ver que tengo datos de un solo producto y eso estará anidado dentro del objeto producto. Así que esto es genial, nos estamos acercando mucho a lo que usaríamos en nuestra aplicación. Lo único que tenemos que hacer ahora es hacer esto dinámico. En lugar de tener un handle de snowboard codificado, voy a extraer eso de mi consulta, y en su lugar voy a crear un parámetro de consulta para GraphQL. Y puedo hacer eso configurándolo de la misma manera que lo haría para una función de JS. Así que en la parte superior de mi nombre de consulta, puedo definir un nuevo parámetro utilizando la sintaxis del signo de dólar y luego especificando un tipo. Lo haré de tipo string, y luego agregaré un signo de exclamación para hacerlo obligatorio. Y luego dentro de mi consulta en sí, puedo usar nuevamente la sintaxis del signo de dólar para hacer referencia a esa variable. Así que ahora hemos hecho esto dinámico. Así que si continúo y hago clic en Reproducir ahora, debería ver un error porque en realidad no he especificado un handle para nuestra consulta. Y así, obtenemos los errores esperados que nos dan una explicación y nos pueden ayudar a corregir esto asegurándonos de pasar una variable de handle. Así que puedo hacer eso dentro de GraphQL. Lo siento, GraphiQL, abriendo la pestaña de variables y esta pestaña de variables en la parte inferior espera una entrada JSON. Así que crearé un objeto y puedo comenzar a escribir handle porque eso es lo que espera. Y luego puedo pegar el handle snowboard desde mi portapapeles. Así que si ejecuto esta consulta nuevamente, ahora debería ver que tengo los mismos datos que tenía antes. Y tenemos éxito. Esta será la consulta que usaremos para renderizar los datos en nuestra página de visualización del producto.

Así que eso fue solo una introducción muy rápida sobre cómo usar GraphiQL y GraphiQL viene incluido con hydrogen. Y también tiene toda la configuración lista para ti. Así que sabe qué consulta de la tienda y realmente no tienes que preocuparte por ello. Una experiencia de desarrollador muy agradable para que puedas construir tus sitios rápidamente.

Si has estado siguiendo hasta ahora, estaremos al final del paso tres, y volveremos a nuestro proyecto para el paso cuatro, donde moveremos esta consulta a nuestro componente. Como mencioné antes, el proveedor de Shopify nos da acceso a ganchos dentro de nuestra aplicación. Y uno de los ganchos que vamos a usar es el gancho 'useShopQuery'. Y eso nos permite hacer esas consultas a la API de la tienda. También vamos a importar la biblioteca GQL, GraphQL Tag para tener resaltado de sintaxis en nuestras consultas. Eso no funcionará dentro de StackBlitz, pero es una buena práctica cuando estás trabajando en una herramienta de código que proporciona ese resaltado para ti. Así que voy a copiar esto en mi portapapeles, o simplemente importamos esas dos herramientas de Hydrogen. Y luego, en mi componente handle.server.jsx, voy a importar esas dos herramientas, y luego puedo comenzar a construir mi consulta. Ya tengo el handle, así que necesito ese handle antes de hacer mi consulta. Así que debajo voy a empezar a construir mi consulta. Sé que la consulta va a devolver un objeto, y volveré a eso en un momento, pero comenzaré escribiendo ushopquery. Y luego abriré mis paréntesis, y eso me dará la firma de la función. Y veo todas las sugerencias de tipo que son útiles para ayudarme a construir mi consulta. Así que ushopquery espera un objeto, y espera ciertos parámetros. Así que hoy nos vamos a centrar en el parámetro de consulta y el parámetro de variables. Pero hay muchas otras cosas que puedes hacer con ushopquery para optimizar tus llamadas a la API, como el almacenamiento en caché y la precarga. Así que voy a abrir ese objeto. Voy a deshacerme de esto, y voy a empezar a escribir query. Y eso será lo primero que haga. Así que eventualmente crearé una constante de consulta, y la construiré en un momento. Pero lo segundo que quiero pasar es variables. Y para las variables, quiero que coincida con lo que configuré aquí abajo. Así que haremos esto un objeto JavaScript plano con una clave de handle, y luego el valor de nuestro handle como el valor. Y así podemos hacerlo en JS con la sintaxis abreviada simplemente pasando handle. Así que eso es funcionalmente idéntico a handle: handle. Y así podemos usar la forma abreviada aquí. Entonces, ushopquery nos devolverá un objeto. Y solo queremos extraer los data de esa consulta por ahora. Así que lo imprimiré en la consola solo para asegurarme de que lo hice correctamente. Y luego lo último que necesito asegurarme de hacer es definir esa constante de consulta. Y voy a mover esto al final de mi página, porque estas consultas pueden ser muy largas. Y así es una buena manera de hacerlo para que no tengas que desplazarte más allá de esa consulta realmente larga cada vez que quieras trabajar en tu JSX. Así que voy a crear una cadena GQL con comillas invertidas. Ve a GraphiQL, usa este botón para copiar la consulta a mi portapapeles y pégala aquí. Eso debería ser todo lo que necesito hacer para mover esta consulta GraphQL a mi componente del servidor. Así que voy a abrir mi vista previa de nuevo. Y ahora debería ver en mi terminal que estoy devolviendo un objeto con producto: null. Y eso es porque no tengo un producto con ejemplo como el handle en mi tienda. Así que vamos a actualizar ese handle para que sea snowboard. Así que cuando haga eso, debería ver que estoy renderizando la página para snowboard y mi terminal ahora me muestra un objeto data con producto data, y puedo ver el ID, handle, título y descripción. Así que eso funciona por ahora. Así que he demostrado que esto funciona y ahora voy a copiar mi declaración de consola, pero siéntete libre de dejarlo sin comentar si quieres hacer referencia a la estructura de los data. Así que voy a volver al taller. Y si te quedaste atascado en algún momento o tu consulta no está funcionando correctamente, puedes copiar todo desde este bloque en tu componente handle.server.jsx y eso debería ayudarte a retomar el rumbo. Así que voy a hacer una pausa por un momento para que todos puedan ponerse al día.

Muy bien, veo algunas preguntas en el chat y veo que las personas están respondiendo.

Tendremos tiempo al final para más preguntas genéricas y si quieres hacer preguntas que no estén específicamente relacionadas con esta masterclass, tendremos mucho tiempo para eso al final.

De acuerdo, sigamos y hablemos de nuestro primer componente del cliente. Entonces, nuestro componente del servidor en el que hemos estado trabajando hasta ahora será manejado y renderizado en el servidor, pero eventualmente necesitaremos proporcionar una forma para que el usuario pueda hacer una selección de las opciones de su producto y eso será gestionado con el estado del usuario y queremos tener un componente del cliente para manejar eso por nosotros.

Así que creemos un componente del cliente ahora. En mi editor de StackBlitz en el navegador de archivos, voy a abrir la carpeta de componentes y simplemente crear un nuevo archivo llamado detalles-producto.cliente.jsx. Y nuevamente, esto será simplemente un componente react. Así que exportaremos por defecto la función, detallesProducto, y luego sé que eventualmente pasaré una propiedad con ese objeto de producto. Así que vamos a agregarlo ahora, y luego voy a devolver algo de JSX.

Así que voy a hacer trampa un poco y voy a cortar esto de nuestro componente del servidor, moverlo a nuestro componente del cliente, cambiarle el nombre solo para asegurarnos de que funcione, y luego ya no tendremos acceso a esa propiedad handle, pero el objeto de producto que estamos devolviendo sí tiene el handle. Así que simplemente podemos cambiar esto a product.handle. Guardaré eso. Y luego, en mi componente del servidor, voy a importar mi componente del cliente. Esto será detalles de producto de nuestra carpeta de componentes..cliente, y el .cliente es importante. Luego voy a renderizar esos componentes y asegurarme de pasar mi propiedad, que será data.product. Muy bien, y en mi panel de vista previa, ahora debería ver hola detalles de producto con mi tabla de snowboard como propiedad del producto. Así que hemos refactorizado el mensaje un poco. Entonces los detalles en nuestra página vendrán de nuestro componente del cliente. Así que eso es todo lo que necesitamos hacer para prepararnos para tener esa parte interactiva en nuestra página de visualización de productos. Así que ese fue un paso rápido, y ahora puedo llevarnos al paso seis.

Así que ahora vamos a entrar en algunas de las partes divertidas de Hydrogen y algunas de las formas realmente agradables en que Hydrogen ha sido configurado para hacer que la construcción de características de comercio electrónico sea realmente rápida y sin problemas. Ya hemos hablado de el componente proveedor de Shopify, pero hay varios otros proveedores que se incluyen con el marco, y vamos a usar el proveedor de opciones de producto. Y lo que hace es que nos da acceso a un modelo de data de opciones de producto, que nos ayudará a gestionar la representación y selección de una variante de producto específica que estará dentro de ese modelo de opciones. Así que empecemos importando el proveedor de opciones de producto a nuestro componente del cliente. Copiaré esta línea a mi portapapeles, iré a productdetails.jsx, haré un poco de espacio en la parte superior, lo importaré, y luego envolveré todo en mi aplicación, o todo en mi componente alrededor de ese proveedor de opciones de producto. Y luego guardaré esto y se formateará, pero también obtendré un error en mi vista previa, y hablaré de eso en un momento. Nos está dando un error que no puede leer las propiedades de nulo, y está buscando un objeto de variante. Así que eventualmente necesitaremos pasar un objeto data a nuestro proveedor de opciones de producto, pero en realidad no estamos consultando la cantidad correcta de data para nuestro producto en este momento. Así que si vuelvo a nuestra interfaz gráfica, veré que solo estoy consultando algunos datos básicos del producto, y no estoy consultando los datos de la variante que necesitaré para ese modelo de opciones de producto. Así que podría pasar un tiempo construyendo esa consulta para usted, pero vamos a avanzar un poco más rápido porque esto no se centra completamente en GraphQL, así que copiaré esto a mi portapapeles, volveré a mi componente del servidor. Reemplazaré la consulta básica con una consulta más sólida, y también lo haré en la interfaz gráfica para que podamos ver la forma de los datos. Así que tenemos los mismos datos que estábamos solicitando antes, pero ahora también estamos obteniendo la descripción en HTML, también estamos obteniendo algunos datos multimedia, específicamente algunas imágenes de nuestro producto. Así que eso es genial. Lo voy a colapsar, y luego también vemos que tenemos datos de variante, así que cada uno de esos nodos de variante representa una variante de producto que se puede comprar y ordenar, y necesitaremos estos ID para asegurarnos de que podemos comprar el producto correcto. Y este objeto será consumido por nuestro proveedor, y nos dará un modelo de opciones de producto bien construido y accesible donde podemos representar y actualizar los datos de opciones para asegurarnos de obtener el ID de variante correcto en función de nuestras opciones seleccionadas. Así que nuestra consulta se actualiza en nuestro componente del servidor, guardaré eso, y luego en mi componente del cliente de detalles del producto, solo necesito actualizar el proveedor para asegurarme de pasar los datos del producto. Así que puedo pasar directamente el objeto del producto y sabrá cómo consumirlo. Eso elimina nuestro error y ahora tenemos un modelo de opciones de producto al que podemos acceder y podemos construir detalles para. Así que nos estamos preparando para el éxito donde en realidad no estamos construyendo los detalles de las opciones todavía, lo haremos en nuestro último paso, pero por ahora, tenemos todo configurado para poder representar más detalles en nuestra página de visualización de productos. Así que hagamos eso y los dos siguientes pasos. Otra característica realmente agradable de Hydrogen es que viene con muchos componentes de utilidad para hacer que la representación de los datos, especialmente desde nuestra API de la tienda, sea realmente agradable y fácil. Y uno bueno es el componente de archivo multimedia. Así que no solo maneja la representación de imágenes, sino que también puede hacer videos y modelos 3D. Veamos cómo podemos usarlo. Así que me aseguraré de importar el componente de archivo multimedia de Hydrogen en mi componente del cliente de detalles del producto. Y luego también voy a desestructurar un par de piezas de data de nuestros objetos de producto. Y eso solo hará que el trabajo de copiar y pegar sea un poco más fácil y limpio. Entonces, debajo de nuestro mensaje, vamos a representar nuestros componentes de archivo multimedia y asegurarnos de pasar nuestro objeto data. Y ese objeto data será el objeto multimedia. Y solo necesitamos pasar uno de los nodos. Así que lo llamaremos media.nodes y pasaremos el primer nodo. Guardaré eso. Y luego, en mi panel de vista previa, puedo ver la tabla de snowboard de Hydrogen y puedo jugar con esto para ver qué imágenes están disponibles para mí. Y en una página de visualización de productos completamente funcional, probablemente podríamos recorrer esto y representar más de una imagen, pero esto será solo una demostración. Así que solo representaremos la primera imagen. Así que voy a mostrarles una característica realmente agradable del componente de archivo multimedia abriendo una página completa e inspeccionando la imagen del producto. Veo que mi componente de imagen no solo representa la imagen y la URL, sino que también la carga de forma automática y proporciona una fuente y varios conjuntos de fuentes como URL. Así que el navegador sabrá qué producto o qué imagen cargar en función del ancho del navegador. Así que tenemos todo eso construido para nosotros porque el CDN de Shopify puede redimensionar automáticamente nuestras imágenes.

Así que realmente una gran experiencia para los desarrolladores porque no tuvimos que hacer todo este trabajo manualmente. Y es una experiencia realmente agradable para los compradores porque obtendrán una imagen optimizada y eso garantizará que el sitio que están utilizando sea rápido y eficiente. Así que realmente una gran experiencia para todos desde el principio. Me quito el sombrero ante el equipo de Hydrogen por hacerlo tan fácil para nosotros.

Así que ese es un ejemplo de un componente realmente bueno que podemos usar. Hablaremos de las otras piezas que podemos usar después de agregar estilo a nuestra página de visualización de productos. Nuestro proyecto ya viene configurado con Tailwind por lo que lo usaremos en este proyecto y Tailwind no es obligatorio. No está vinculado a Hydrogen, pero lo estamos usando en este proyecto solo para facilitar un poco la construcción y representación de algunos de nuestros componentes, sin tener que escribir CSS para esta demostración.

En lugar de escribir muchas de estas clases de utilidad, simplemente copiaré y pegaré y hablaré sobre la estructura de esta página de visualización. Así que si copio esa sección en mi portapapeles y luego elimino todo dentro de mi proveedor de opciones de producto, pegaré esto y revisaré rápidamente esto, mi sección creará una cuadrícula para mí y luego esa cuadrícula tendrá dos columnas. La columna izquierda será un componente MediaFile, que acabamos de mostrar y la columna derecha mostrará el título del producto, el proveedor del producto y luego representaremos esa descripción HTML como HTML real usando esta función. Así que guardaré eso, abriré mi vista previa nuevamente y ahora puedo ver que tengo una representación realmente agradable de mi imagen y algunos detalles del producto. En la vista previa de página completa, puedo ver que este es un diseño de dos columnas agradable. Así que estamos en buen camino para construir una página de visualización de productos realmente atractiva.

Esto no fue específico de Hydrogen, así que vamos a pasar rápidamente por algunas de las piezas específicas de Tailwind y marcado de esta demostración, pero vamos a agregar un poco de interactividad en el siguiente paso. Y para hacer eso, vamos a construir un nuevo componente de formulario de producto y lo agregaremos al final de nuestro archivo de detalles del producto, pero vamos a usar un nuevo gancho. Y ese es el gancho de opciones de producto. Y podremos usar eso porque hemos configurado nuestro componente de formulario de detalles del producto con ese proveedor de opciones de producto. Y si miras nuestro código de demostración aquí, vamos a extraer la variante seleccionada de ese gancho de opciones de producto, porque necesitaremos ese ID de variante para poder pasarlo a nuestro botón Comprar ahora para asegurarnos de comprar el producto correcto.

Copiaré esta línea en mi portapapeles, en realidad voy a copiar toda esta función en mi portapapeles solo para ahorrar un poco de escritura. En la parte inferior de mi archivo de detalles del producto, puedo colocarlo aquí. Necesito asegurarme de importar use product options de Hydrogen. Si guardas accidentalmente tu archivo aquí, puede intentar obtener esto de una fuente diferente y eso podría romper tu aplicación. Así que asegúrate de obtenerlo de app shopify slash hydrogen. Y luego solo imprimiré la variante seleccionada. Así que solo haré que esto sea un ID de variante seleccionada. Y luego solo necesito asegurarme de representar este formulario de producto, lo haré incluyéndolo justo debajo de mi descripción HTML. Y no necesitamos pasarle ninguna propiedad porque estamos usando ganchos en su lugar. Dado que este es un descendiente del proveedor de opciones, podemos usar ese gancho de opciones de producto. Así que si guardo eso y luego muestro la vista previa en mi página, en la parte inferior, ahora veo el ID de la variante del producto. Y eso es lo que pasaremos a nuestro botón Comprar ahora. Así que agreguemos ese botón Comprar ahora ahora. Así que de vuelta en mi declaración de importación, voy a importar el botón Comprar ahora, que está construido para nosotros en Hydrogen. Y también voy a importar el objeto money, que nos proporciona una forma muy agradable de representar un objeto de precio en una cadena de moneda amigable para el comprador. Así que también te mostraré cómo hacer eso. Y nuevamente, esto se volverá un poco tailwindy. Así que voy a copiar y pegar. Pero es relativamente sencillo. Así que dentro del formulario, vamos a representar nuestro botón Comprar ahora y la prop variante ID que ya hemos descubierto puede venir de la variante seleccionada que ID. Y luego dentro de ese botón, vamos a representar un span que básicamente crea un fondo negro con un botón de texto blanco. Vamos a representar una cadena Comprar ahora y luego el precio de nuestra variante seleccionada actual pasando el objeto price V2 a un componente money. Así que características realmente agradables del componente que hacen que la construcción de algunas de estas características sea realmente rápida. Así que si pego eso y dejo que el formato automático se encargue de esto por mí, ahora debería ver eso en la parte inferior de mi vista previa que tengo un botón Comprar ahora y cuesta 600 dólares canadienses para esta variante seleccionada. Si hago clic en este botón dentro de StackBlitz, probablemente nos dará un error. Así que en su lugar, lo haré en mi vista previa completa. Y esto está enlazando a una tienda de demostración que está protegida por contraseña. Así que existe la posibilidad de que esto realmente se bloquee y nos pida una contraseña. Pero parece que realmente nos va a dirigir al pago. Y veremos que nuestro producto se agrega a nuestro carrito y estamos listos para realizar nuestra compra. Entonces, lo que mencioné hace un momento no será un problema para una tienda en producción.

Pero cuando hacemos nuestro desarrollo en tiendas de demostración con una protección de contraseña, a veces el paso de la aplicación al pago nos requerirá ingresar una contraseña. Así que hemos agregado algo de interactividad a nuestra página y ahora podemos comprar un producto. El problema ahora es que solo podemos comprar la variante seleccionada disponible para nosotros cuando se carga la página. Así que nuestro último elemento interactivo será agregar un selector de opciones. Así que hagamos eso en el siguiente paso.

Entonces, nuevamente, vamos a avanzar un poco y simplemente mostrar un componente de opciones de producto que ya hemos construido. Pero utiliza los mismos principios de nuestro formulario de producto donde estamos usando ese gancho UseProductOptions. Así que veamos cómo se construyó eso. Entonces, las opciones de producto son un componente separado y veremos que se está utilizando el gancho UseProductOptions y estamos extrayendo todos estos data. Entonces tenemos una matriz de opciones, tenemos nuestras opciones seleccionadas y tenemos una función llamada SetSelectedOption donde podemos actualizar nuestro modelo de datos con una opción de variante recién seleccionada. Entonces, cuando devolvemos nuestro JSX, vamos a iterar sobre cada una de las opciones y luego extraeremos el nombre y los valores. Entonces, si la longitud de los valores es igual a uno, eso significa que no podemos hacer una selección así que simplemente lo omitiremos y no lo representaremos. De lo contrario, vamos a representar una cuadrícula flexible y para esa cuadrícula, tendrá una leyenda donde representaremos el nombre de la opción y luego vamos a iterar sobre los valores de esa opción. Y para cada valor, vamos a representar una entrada de radio. Y una entrada de radio es una forma nativa de asegurarnos de que solo tengamos una opción seleccionada a la vez. Y la entrada de radio también nos proporciona una función de devolución de llamada onChange. Dentro de esa función de devolución de llamada, podemos ejecutar la función setSelectedOption, que nuevamente, obtenemos de nuestro gancho UseProductOptions. Entonces eso actualizará nuestro modelo de datos y pasamos el nombre y luego el valor de esta opción específica. Y la última parte de la bondad tailwind del marcado es que vamos a representar una caja para cada una de nuestras entradas de radio. Y si esa entrada está marcada, entonces tendremos un borde gris que se muestra debajo. Así que un poco de iteración y bucle, por lo que este es más código React que código Hydrogen, pero quería resaltar las piezas de Hydrogen, que son los ganchos y cómo actualizamos nuestro modelo aquí abajo. Entonces vayamos a los detalles del producto e importemos este componente ProductOptions. Entonces import ProductOptions from, y ya estamos en esta carpeta. Así que asegurémonos de que sea ProductOptions.client, si puedo escribirlo correctamente. De acuerdo, ProductOptions es lo que vamos a representar, y lo representaremos dentro de nuestro formulario justo encima del botón de comprar ahora. Y nuevamente, no necesitamos pasar propiedades a este componente porque estamos usando ganchos. Entonces esto será un descendiente del proveedor de opciones de producto, por lo que podemos usar esos ganchos. Entonces, en nuestra vista previa, ahora veo que tengo un selector de opciones donde tengo tamaño, enlace de montaje y material. Y solo para demostrar que el modelo de data se actualizará si hago una selección, puedo ver que el precio de mi variante en este momento es de 600 dólares canadienses. Si selecciono un tamaño diferente, veré que mi precio se actualiza. Entonces, detrás de escena, ¿qué está haciendo eso? La función setSelectedOption se está ejecutando, eso actualiza el modelo de data, y luego React se encargará de volver a representar los componentes descendientes que deben volver a representarse. Así que todo eso se encarga por nosotros de una manera declarativa utilizando el patrón de programación de proveedores y ganchos. Entonces, una forma realmente agradable de representar nuestras opciones y los ganchos y componentes proveedores de Hydrogen hicieron que eso fuera realmente rápido. Así que puedo, una vez más, intentar probar esto seleccionando una compra de producto diferente y veré si puedo comprar este producto. Y así obtuve el error de tienda cerrada. Entonces eso no será un problema con una tienda en producción, pero, ya sabes, estamos codificando en una tienda de demostración. Eso es todo para la primera parte de esta masterclass. Hemos construido una página funcional de visualización de productos, y hay mucho más que podríamos hacer con esto y mucho más que deberíamos hacer con esto si queremos que esté lista para producción. Y tienes varias opciones de hacia dónde puedes llevar esto como próximo paso. Así que tenemos mucho más que puedes explorar en nuestra documentación, o puedes intentar ampliar esta masterclass mejorándola y solucionando errores y agregando nuevas características, como deshabilitar el botón de comprar ahora si una variante no está disponible. También podrías intentar mostrar un mensaje en ese componente de ruta si no se encuentra un producto. También tenemos un componente de SEO muy bueno que se encargará de la representación de cosas como el título y las etiquetas meta. Así que eso es realmente agradable de explorar. Y luego también podrías intentar construir un carrito completamente funcional, pero lo haremos en la siguiente sección y nos saltaremos a eso ahora mismo. Así que tienes la opción de construir un carrito completamente funcional con nuestro tutorial de construcción de una tienda Hydrogen en Shopify.dev. Pero vamos a hacer una versión rápida para que encaje dentro de nuestro bloque de tiempo aquí. Así que cerraré la primera masterclass y luego pasaré a la segunda masterclass donde agregamos una página de carrito a nuestro proyecto hydrogen. Y así que en cualquier momento que quieras ingresar solo a este proyecto, puedes bifurcar el proyecto completado que tenemos aquí en un enlace. Pero como ya he construido nuestro proyecto y stack splits, simplemente continuaré con mi proyecto existente. Entonces, al igual que hicimos con nuestro proyecto anterior, vamos a comenzar configurando nuestro componente de ruta.

Así que me aseguraré de construir esto de una manera similar a nuestra página de visualización de productos donde tenemos un componente de ruta servidor, y luego la mayoría de nuestros detalles que se representan en la página se manejarán dentro de nuestro cliente. Así que voy a crear un nuevo componente cliente de detalles del carrito. Solo pego eso aquí, y nuevamente, es solo un mensaje simple. Luego, también voy a configurar un componente servidor y se ubicará en la ruta /carrito. Entonces, en nuestra carpeta de rutas, puedo agregar un nuevo archivo y se llamará carrito.server.jsx. Pego este data aquí. Y nuevamente, solo estamos representando el diseño y los detalles del carrito. Luego puedo ir a mi vista previa y dirigirme a la ruta del carrito solo para asegurarme de que lo hice correctamente. Así que eso funciona bien, genial. Y voy a pasar por esto a un ritmo muy rápido porque tenemos poco tiempo. Así que disculpen si esto es un poco rápido para ustedes, pero deberían poder seguirlo si lo hacen en su propio tiempo. Entonces, porque necesitamos acceso a los datos del carrito, eventualmente también necesitaremos configurar un proveedor. Y lo haremos en este paso. Además del proveedor de Shopify, y el proveedor de opciones de producto, podemos hacer uso de otro proveedor que está construido para nosotros, y tenemos un proveedor de carrito. Así que lo agregaré a nuestro componente app.server.jsx. Primero, necesito asegurarme de importarlo. Y luego, en el componente proveedor de Shopify, como un elemento directo, voy a representar el componente proveedor de carrito. Y eso significa que toda mi aplicación tendrá acceso a los datos del carrito. Guardo aquí, y esto en realidad va a causar un error, pero es solo un error del framework donde todo lo que necesito hacer es detener y reiniciar mi servidor. Y eso nos devolverá un carrito en funcionamiento. Así que ahora tendremos acceso a los ganchos, como el gancho useCart, para acceder a los datos en cualquier lugar de nuestro sitio. Lo primero que quiero hacer es actualizar mi encabezado para tener un icono de bolsa de carrito mini, y poder hacer clic en él para ir a la página de la ruta del carrito. Vamos a utilizar tanto el gancho useCart como el componente Link. Entonces, lo que vamos a configurar es un componente Link que simplemente funcionará con nuestro enrutador para dirigirnos a la página del carrito, y luego dentro de ese componente Link, simplemente representaremos un icono de bolsa SVG, y luego, como un pequeño extra, si podemos extraer la cantidad total del gancho useCart, podemos representar un pequeño punto de notificación con nuestra cantidad total representada como una pequeña burbuja. Copio todo esto en mi portapapeles y creo un nuevo componente llamado cartLink.client.jsx. Pego eso aquí, y luego lo voy a incluir en mi componente layout. Y vamos a representarlo directamente debajo de nuestro texto de la masterclass de Hydrogen. Bien. Lo siento, mi zoom está en el camino. Así que ahora debería ver que tengo un icono de bolsa aquí abajo. Ahora mismo no se ven del todo bien. Así que asegurémonos de que estén centrados verticalmente y puedo hacer eso actualizando las clases de mi encabezado para que ahora sea un contenedor flex. Y luego podemos centrarlo verticalmente con la clase items-center. Y eso debería hacer que esté, ¿es correcto? Es items-center lo que quería. Y ahora ambos elementos visuales están centrados verticalmente dentro de mi bloque de encabezado. Así que ahora puedo hacer clic en este icono de bolsa y bueno, asegurémonos de que, vayamos a los productos, vayamos, productos de snowboard. Y así que podría hacer clic en este enlace de bolsa ahora y dirigirme a la página de detalles del carrito. Bien, ese enlace está funcionando para nosotros. Ahora vamos a actualizar la página del producto porque hasta ahora podemos representar una página del carrito y ir a nuestro carrito con un enlace, pero no podemos agregar un producto a nuestra bolsa. Así que necesitamos poder hacer eso. Ya hemos configurado el botón de comprar ahora y también tenemos un botón de agregar al carrito que funciona de manera similar. Entonces, pasas un ID de variante y se encargará de agregar ese producto al carrito por ti. Así que asegurémonos de importar mi botón de agregar al carrito y voy a hacer eso dentro de mi componente cliente de detalles del producto. Y nuevamente, esto será un poco tailwindy. Entonces, lo que voy a hacer es reemplazar el botón de comprar ahora y esto será exactamente lo que hicimos en... Este es exactamente el botón que construimos en la sección anterior. La única diferencia es que lo envolvemos en un contenedor flex y luego agregamos el botón de agregar al carrito debajo. Estos dos botones se flexionarán entre sí. Así que, volviendo a mi producto.

Entonces, volviendo a mi formulario de producto, voy a reemplazar el botón de comprar ahora que tengo aquí con el contenedor flexible que incluye el botón de comprar ahora y el botón de agregar al carrito. Así que volvamos a nuestro producto snowboard. Oh, eso está mal. Ahí vamos. Vuelvo a nuestra página de producto. Ahora veo que tengo un botón de comprar ahora y un botón de agregar al carrito. Entonces, si hago clic en el botón de agregar al carrito, eso debería encargarse de agregar un producto para nosotros. Y ahora veo en mi encabezado, tengo una pequeña notificación de burbuja con A1. Así que, solo para darles un vistazo rápido bajo el capó, echemos un vistazo a lo que está sucediendo en esta página. De hecho, voy a ir a un producto diferente solo para que esto se vea un poco diferente en nuestra página del carrito. Vamos a ir al snowboard alojado. Voy a abrir las herramientas de desarrollo y navegar a la pestaña de red. Borro mis solicitudes existentes y luego voy a hacer clic en agregar al carrito. Lo que eso mostrará es una solicitud graphql.json. Y si inspecciono eso un poco más, puedo ver que eso fue iniciado por el proveedor de carrito. Está haciendo la llamada a la API para nuestro producto. Está haciendo la llamada a la API para mí. Y si miro la carga útil, puedo ver que lo que está pasando es una consulta que es una mutación, que es una forma elegante en GraphQL de decir editar o actualizar datos. Y vamos a pasar algunos datos a una mutación de agregar línea al carrito. Y esa variable de datos es toda esta información aquí. Pero el botón de agregar al carrito y el proveedor de carrito se encargan de formatear todos estos datos por nosotros. Así que lo único de lo que realmente necesitábamos preocuparnos es de ese ID de mercancía, que pasamos como ID de variante a nuestro componente. Así que todo eso está un poco manejado para nosotros y abstraído. Y lo que obtenemos de esa mutación de GraphQL es que obtenemos nuevos datos del carrito. Y así, el proveedor de carrito se actualizará con estos nuevos datos del carrito, que incluyen información como la cantidad total de líneas, que es lo que se actualiza aquí en nuestro pequeño ícono de bolsa. Así que todo eso se ha abstraído para ustedes. Por lo tanto, solo pueden usar los proveedores y ganchos y componentes integrados para realizar esas llamadas a la API de manera realmente agradable y sin problemas. Nuevamente, gracias al equipo de Hydrogen. Han diseñado esto para que podamos construir cosas de manera rápida e intuitiva. Entonces, una vez que realmente podamos agregar algunos productos a nuestro carrito, sigamos adelante y representemos algunos detalles del carrito.

Entonces, nuevamente, esto va a ser un poco pesado en el JSX. Así que voy a hacer un poco de copiar y pegar, pero hablaremos sobre lo que estamos usando del marco de Hydrogen. Entonces, nuevamente, estamos usando ese gancho Use Cart. También estamos introduciendo un nuevo proveedor. El proveedor de Cartline será un proveedor específico para ese elemento de línea del carrito. Y eso nos dará acceso a los datos de ese elemento de línea específico. Estamos obteniendo la imagen y el enlace, que son componentes que ya hemos cubierto. Y luego el gancho Use Cartline estará disponible para nosotros una vez que usemos el proveedor de Cartline. Vamos a exportar una función predeterminada donde, si no hay elementos de Cartline, simplemente representamos un mensaje de no hay elementos en el carrito. De lo contrario, vamos a iterar sobre los elementos de línea y eso devolverá JSX donde configuramos un proveedor de Cartline donde pasamos ese objeto de línea. Y luego, por ahora, simplemente vamos a representar el JSON de esa línea. Y luego, a continuación, he configurado dos componentes de utilidad para ayudarnos cuando realmente expandamos la funcionalidad de nuestra página de detalles del carrito. Voy a copiar todo esto en mi portapapeles, ir a Detalles del carrito y reemplazar lo que tengo hasta ahora. Si voy a mi página del carrito, ahora debería ver que puedo ver JSON para cada uno de mis elementos de línea del carrito. Y esta es toda la información que necesitaré para representar una página del carrito. Muy útil. Vamos a deshacernos de nuestro bloque pre donde estamos convirtiendo en cadena JSON nuestros datos de línea. Y en su lugar vamos a representar un marcado para cada uno de nuestros elementos de línea. Así que vamos a sacar algunos datos de ese gancho Use Cartline. Y ya tenemos un componente que se construyó para nosotros.

En realidad, voy a eliminar eso y descomentar esto. Y así, para cada elemento de línea, vamos a devolver un poco de JSX. Así que primero vamos a extraer algunos data de cada una de esas líneas del carrito. Y luego vamos a renderizar algunos data. Ya hemos utilizado algunos de estos componentes antes, pero ahora deberían ser familiares para ti. Tenemos un componente de enlace, que nos llevará a nuestra página de visualización del producto para ese producto por su identificador. O renderizar una imagen de este elemento de línea del producto. Y luego también vamos a renderizar el título del producto, que también está en un componente de enlace. Y en lugar de renderizar el título del producto, debajo de él, vamos a renderizar el título del producto, que es un diferenciador que nos ayuda a entender qué variantes seleccionadas tenemos para este producto que están configuradas en nuestro elemento de línea del producto. Y por último, vamos a renderizar la cantidad para cada uno de nuestros elementos de línea. Así que voy a pegar mi JSX de retorno con nuestros datos adicionales. Ahora deberíamos ver en el panel de vista previa que estamos renderizando una imagen del producto, el título, los datos de la variante data, que es ese título del producto, y la cantidad. Ahora podemos ver los datos del carrito data en nuestra página del carrito.

Y lo último que debemos hacer es agregar dos elementos de interactividad. Así que agregaremos un botón de eliminación para cada uno de los elementos de línea, y luego agregaremos un botón para poder ir de la página del carrito al pago de Shopify. Hagamos eso en nuestros próximos dos pasos. Vamos a agregar un botón de eliminación, y esa funcionalidad de eliminación vendrá del proveedor del carrito. El proveedor del carrito nos brinda acceso a la función de eliminación de una línea, y esa función de eliminación de la línea nos brinda la capacidad de eliminar uno o más elementos de línea por ID. Primero vamos a obtener esto de nuestro hook de uso del carrito. Necesitamos asegurarnos de que esté importado, y lo está, genial. Para nuestro elemento de línea del carrito, vamos a obtener la función de eliminación de la línea, y luego agregaremos un botón debajo de nuestro campo de cantidad, para que cuando hagamos clic en ese botón, ejecutemos la función de eliminación de la línea, y luego pasemos ese ID de línea. Nuevamente, aquí hay un poco de magia de tailwind, donde configuro algunas clases que hacen que este sea un botón blanco con borde negro y texto negro, y luego en nuestro controlador onClick, guardamos esto, controlador onClick, ejecutamos la función de eliminación de la línea, y nuevamente, podemos eliminar más de un elemento de línea, por lo que esto en realidad será una matriz de IDs de elementos de línea. Por lo general, aquí hay un error tipográfico común, donde piensas que solo pasas un ID de línea, pero es una matriz de IDs de línea, y ahora estamos listos para eliminar productos de nuestro carrito. Entonces, si hago clic en este botón de eliminación, eso debería eliminarlo de nuestro carrito, y veremos que nuestra cantidad total se actualiza y solo tenemos otro producto en nuestro carrito. Así es como agregamos esa funcionalidad de eliminación. Nuevamente, bajo el capó, si ejecuto este comando de eliminación de la línea, se ejecuta una mutación en nuestro carrito que eliminará ese elemento de línea específico, y luego devolverá un nuevo estado del carrito con todos los datos que necesitamos para renderizar esos datos en nuestra página. Entonces, nuevamente, una forma agradable y sencilla de declarar el estado que debería tener nuestra aplicación utilizando proveedores y hooks.

Entonces, lo último que haremos, y esto marcará el final de nuestra masterclass, es agregar un botón de pago, y simplemente vamos a renderizar un componente de enlace simple, pero necesitamos obtener una URL de pago que sea específica para nuestro carrito. Y esto va a variar para cada persona. Entonces, tu URL para tu carrito será diferente de mi URL para un carrito, pero podemos acceder a ella fácilmente dentro del framework utilizando el hook useCart.

Dentro de mi componente de acciones de pago, que es solo un componente de marcador de posición que tengo aquí, voy a usar el hook UseCart para obtener la URL de pago, y luego dentro de return.jsx, renderizaremos un enlace que apunte a esa URL de pago. Nuevamente, más bondades de Tailwind donde configuramos un botón negro con texto blanco. Tenemos dos declaraciones de retorno. No queremos eso. Y este enlace simplemente apuntará a nuestra URL de pago. Ahora veo que tengo un botón Continuar con el pago. Y nuevamente, no creo que esto funcione desde StackBlitz, así que iré a mi página de carrito. Y si hago clic en Continuar con el pago, me llevará a mi página de pago, tal como lo hizo con nuestro botón Comprar ahora. Nuestros productos se agregan a nuestro carrito y estoy listo para continuar con mi flujo de pago.

Así que eso es todo en poco más de una hora, hemos construido una página de visualización de productos bastante completa y una página de carrito funcional. Así que te dejaré con un par de detalles como conclusión. El primero es que mencioné al final de la última masterclass que hemos explorado varios aspectos y funciones y patrones de Hydrogen, pero no hemos mostrado todo. Así que hay mucho más que puedes explorar y construir con Hydrogen. Y para hacer eso, solo tienes que sumergirte en la documentación para aprender más. Podrías intentar ampliar esta masterclass agregando un Selector de Cantidad para cada ítem de línea. Podrías intentar agregar un botón de Pago de Tienda a tu componente de Acciones de Pago. O si quieres un desafío extra, podrías intentar renderizar todos los detalles del carrito en un componente de carrito mini desplegable. Y tenemos un tutorial completo que cubre eso en shopify.dev.

Como último detalle de comunicación, te dejaré un enlace a nuestro servidor de Discord donde puedes unirte en ese enlace. Y tenemos un canal de Hydrogen donde puedes hablar con otras personas que están usando y construyendo con Hydrogen. Así que con eso, quiero agradecerte por seguirme en esta masterclass. Y vamos a abrir el espacio para preguntas. Y estas pueden ser preguntas sobre el framework o sobre Shopify. Y tenemos personas en nuestro equipo de producto de Hydrogen. Yo solo soy un defensor del desarrollador. Estoy aquí para facilitar la comunicación entre los desarrolladores que construyen con Hydrogen y el equipo de producto que construye Hydrogen. Así que hoy me acompañan Matt, Daniel, y Brett, quienes son los ingenieros que realmente construyeron Hydrogen para ti. Así que ahora voy a callarme. Voy a dejar descansar mi voz y se lo voy a pasar al equipo de Hydrogen para que se encarguen de la sección de preguntas y respuestas. Adelante, chicos.

Hola a todos. Brett tuvo que salir, así que solo estamos Daniel y yo hoy. No veo respuestas de preguntas y respuestas o preguntas abiertas así que les daremos a las personas tiempo para completarlas o si, sí, si alguien tiene alguna pregunta. También quería mencionar el servidor de Discord como un lugar para, ya sabes, si tienes algunas preguntas después de esta masterclass o tal vez te quedaste atrás y todavía estás trabajando en tu tienda, entonces el equipo siempre está monitoreando eso y es un buen lugar para responder tus preguntas más adelante si vuelven a surgir. Sí. Y también es un gran lugar para estar al tanto de las noticias porque Hydrogen siempre tiene cosas nuevas que se publican. Así que correcciones de errores, nuevas funciones, a medida que el framework evoluciona, podrás hablar con otros desarrolladores y ver esas actualizaciones de noticias dentro de Discord. Así que es un espacio comunitario muy agradable para asegurarte de que estás al día en todo lo relacionado con Hydrogen y puedes hablar sobre cómo todos están construyendo con Hydrogen. Así que tal vez sea una audiencia tímida hoy si no tenemos muchas preguntas. Así que si quieres, puedes tomarte unos momentos mientras cualquiera de ustedes tiene la atención y simplemente hablar sobre algunas de las funciones de Hydrogen que realmente te gustan, o lo que te gusta del estado actual y el futuro de Hydrogen. Sí, puedo hablar de eso. Por ejemplo, la tienda de demostración que puedes ver en hydrogen.shop. No sé cómo escribirlo aquí. Veré si puedo abrirlo. Sí. Aquí vamos. Sí, como esta demostración que pudimos construir en alrededor de dos o tres semanas con muchos componentes que ya habíamos hecho y tiene muchas cosas. Quiero decir, teníamos todos los productos, tenemos un carrito que se abre y se cierra en las variantes. Y creo que mucha gente simplemente va allí y copia algunos de los componentes que construimos allí. Pero sí, como hydrogen. Lo que estamos haciendo ahora es, también estamos tratando de separar estos componentes para que puedan ser reutilizables. Y no necesariamente con Hydrogen, pero es algo genial que también vimos recientemente en alguna tienda de área. ¿Cuál es el nombre? Atom. ¿Viste esa, David? Tal vez podamos abrir esa. Creo que era atoms.io, o algo así. Atoms.io. Oh, el.com, atoms.com, lo pondré en el chat. Sí. Y eso fue impresionante.

Esto fue hecho por un desarrollador en aproximadamente tres meses. Y creo que el tiempo promedio para construir tiendas headless es de alrededor de 12 a 18 meses. Así que es muy rápido para que alguien construya algo así. Y como puedes ver, creo que la principal diferencia es lo personalizada que puedes hacer esto en comparación con, sí, una tienda líquida que te permitirá, bueno, tenemos estas cosas. Será fácil. No se requiere mantenimiento de desarrollo, lo cual es genial. Les he dado a algunos amigos eso y nunca lo han tocado. Nunca tuve que tocarlo y ellos simplemente hacen lo suyo. Y a veces me preguntan si deberían instalar una aplicación o no. Si fuera a hacer esto, probablemente tendría que tocarlo si tienen alguna pregunta, pero ya sabes.

Otro ejemplo, pero una caja de carnicero, tal vez pueda mostrar una caja de carnicero muy rápido también. No sé, pero. Sí, sí. Entonces, lo interesante de las cajas de carnicero es que tienen tarjetas muy específicas donde, dependiendo de lo que elijas, puedes construir una caja con diferentes conjuntos de cosas, de carne, y creo que este es el tipo de situaciones donde tal vez, sí, tiene sentido una solución personalizada.

Sí, no sé. Esas son solo mis experiencias. Sí, sí, desbloquea muchas posibilidades diferentes. Lo siento, adelante, Matt. Iba a decir que es emocionante para nosotros ver estas cosas surgir mientras trabajamos en ello. Y como por ejemplo, el de atoms.com, no tuvimos ninguna participación en eso. Simplemente apareció en nuestro radar, y es genial... Quiero decir, es un sitio muy elegante, lo cual es agradable, pero es genial ver a la gente usar sus cosas y construir cosas fácil y rápidamente y sin límites realmente, porque es solo React y API y el comercio sin cabeza es bastante poderoso, así que. Sí, creo que es genial que si piensas en el desarrollo de Shopify, gran parte de ello se siente realmente personalizado. Como que hay mucho conocimiento interno que necesitas descubrir al trabajar con Liquid o trabajar con aplicaciones. Y así, sabes, tenemos un paradigma diferente con hydrogen donde es como, si conoces React y entiendes un poco sobre las API de GraphQL, sabes, todo está desbloqueado para ti. Todo está ahí. Y TypeScript nos ayuda con, sabes, la verificación de tipos y asegurarnos de que tenemos los parámetros y las entradas y propiedades correctas. Y, sabes, usa las herramientas que existen en la comunidad y puedes construir e iterar rápidamente.

Sí. Supongo que en términos de otras características que proporcionamos y que queremos seguir desarrollando es que tenemos una CLI que puede ayudarte a configurar rápidamente una aplicación. Elegir entre algunas opciones, como elegir la plantilla de demostración inicial, y también una versión mínima, como la versión más básica de un sitio Hydrogen que puedes proporcionar. Así que tenemos esas dos opciones como plantillas, y también admitimos tanto JavaScript como TypeScript. Y la CLI también puede ayudar con la construcción y el despliegue y otras cosas, al igual que las CLI comunes con otros frameworks. Así que esto es algo en lo que hemos estado trabajando mucho recientemente ya que el trabajo de la CLI en Shopify ha ido aumentando y hemos sido parte de eso. Así que esto es solo un reconocimiento a algunas de las otras herramientas que tendrás disponibles si eliges la ruta de Hydrogen que no se demostró tanto en este taller debido a la naturaleza de usar votos de pila, lo cual es genial. Así que si quieres descargar algo y comenzar a experimentar en tu propio VS code o lo que sea, entonces está la CLI y la documentación para eso. Sí, genial. Creo que shopify.new también te permite hacerlo de manera rápida, lo siento, hydrogen.new, si puedo escribirlo, también te lleva a un buen punto de partida donde ya tienes una plantilla configurada y puedes comenzar a construir un sitio rápidamente. Así que hay muchas opciones diferentes para ponerte al día y jugar con hydrogen como un framework en poco tiempo. Definitivamente, eso es algo que queremos brindarte en poco tiempo. Así que buen trabajo al hacer todo súper fácil y disponible para todos. Sí, generalmente comienzo si quiero probar algo y probar algo y voy a la API de Shopify y veo si puedo obtener algo o probar. Esta es la forma rápida sin tener que descargar el repositorio. Así que sí, recomiendo eso. Sí, es un buen momento para ser un desarrollador. Así que puedo simplemente escribir algo en la barra de URL y ya tengo un IDE y un lado ya construido para mí para que pueda comenzar a trabajar. Sí. Y también admitimos, tenemos enlaces específicos en el repositorio para cada una de nuestras plantillas. Mencioné antes que realmente produciremos un stat lets para esa plantilla específica. Así que queremos comenzar incluso con algo que no sea TypeScript o TypeScript o la plantilla más mínima que mencioné antes, también puedes hacer eso, lo cual es bastante genial. Sí, estos editores como stat lets están haciendo cosas increíbles, es tan genial de ver y simplemente cómo reduce la barrera de entrada para comenzar a trabajar. Incluso solo con ayudarnos en el soporte, es tan agradable cuando las personas simplemente publican la URL de stat lets en su error o en el problema que enfrentan y que necesitan ayuda y podemos verlo fácilmente, es tan agradable tener eso disponible para nosotros. Así que estoy realmente emocionado por eso. Creo que en los próximos, quiero decir, lo estamos viendo ahora mismo, parece que todos los días se están lanzando cosas cuando se trata de stat lets, code sandbox, gitpod, ese tipo de cosas, pero creo que los próximos años van a ser realmente emocionantes en ese mundo también. Sí, seguro. Nos quedan unos cinco minutos. No sé si hay algo que quieras destacar en la comunidad de Hydrogen o en la comunidad de React en general, tenemos una audiencia cautiva, así que siéntete libre de expresarte. Realmente no tengo nada. Daniel tiene un taller o una charla relámpago. ¿Qué es el viernes, Daniel? Tal vez quieras mencionarlo para que la gente pueda verlo.

Sí, claro. Tengo React Advanced London este viernes. Tengo una charla sobre componentes de servidor y explico un poco más sobre ellos. Sí, cuáles son las ventajas, desventajas, y nuestras experiencias, porque supongo que no están oficialmente disponibles y algunos de los meta frameworks todavía los están lanzando. Así que hay algunos descubrimientos, por supuesto, de nuestro lado desde que lanzamos Hydrogen en junio. Y así que simplemente hago una charla relámpago sobre ellos.

Sí, no sé cuál es la dirección. Realmente no sé cómo usar esta interfaz. Déjame buscarlo por ti, pero te lo enviaré en un segundo. Genial, gracias Daniel. Tengo una pregunta para todos ustedes ya que están aquí. Matt, Daniel y David, hay viento arriba. Bueno, ¿cuál es tu boletín o blog favorito de React en este momento? Así que, no soy activo en Twitter como muchos desarrolladores. Y probablemente menos que, pero la mayoría incluso en el equipo y cosas así. Así que en realidad me gusta mucho consumir, pero mantenerme actualizado con las noticias de la comunidad a través de boletines y podcasts. Me gustan mucho los podcasts que han estado saliendo últimamente que son muy específicos de Dino, que es solo un proyecto que he estado siguiendo junto con mucho. Así que creo que este es solo como noticias de Dino o solo hay un Dino Weekly o algo así, que sigo más recientemente, pero muchos de los clásicos como Syntax.FM, Chat Talk Show, JavaScript Jabber y Front and Happy Hour, los uso probablemente mucho para mantenerme al día. Y en cuanto a los boletines, realmente me gustan los estándar como el de ESNext y el de React Weekly, como elijo el semanal, como ESNext Weekly y React Weekly, no leo todo obviamente, paso por alto muchas cosas y solo leo los titulares si hay algo interesante de lo que alguien está hablando. Y luego el otro que me gusta últimamente, es como UI.dev, creo que es. Eso es como divertido. Creo que eso es lo que es. Y tienen un boletín. Iba a decir eso. Iba a decir eso. Ese es mi favorito, es hilarante. No sé quién lo escribe, pero escribe tantos chistes. Es genial, es como Bites, tu dosis semanal de JS se llama. Sí, ese es el que es. Sí, ese realmente me gusta, destaca y tiendo a leerlo de manera más confiable que algunos de los otros, que son solo listas. Pero sabes, más distraído. Gran comediante. Lo recomiendo. Ooh, voy a tener que suscribirme porque este no es uno al que estoy suscrito. Así que eso es genial. Sí. El otro que proporcioné y no se mencionó es que sigo a Kent Dodds en Twitter y tiene mucho contenido genial. Algunos son específicos de React, algunos son específicos de Remix. Y luego tiene otro canal que es solo específico de la web. Y creo que recientemente comenzó un boletín y Kent hace un trabajo realmente genial enseñando e instruyendo. Y tiene contenido de alta calidad con excelentes diagramas y prácticamente todo lo que publica es oro sólido. Así que me encanta aprender de él. Encantador.

Muy bien, genial. Creo que eso lo resume muy bien. Davey, buen trabajo. Muchas gracias por organizarlo. Daniel, Mudd por sus ideas y por responder preguntas y a todos los que han estado aquí hasta ahora, les agradecemos. Muchas gracias. Si estarás en persona en React Advanced London este viernes, como mencionó Daniel, él estará allí. Así que ve a saludar, pero también ve la charla relámpago. Será a las 3.30 PM, hora local. Pero realmente te apreciamos. Así que gracias por unirte y disfruta tu día. Cuídate. Gracias, Rushia. Adiós.