Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix

Estamos aquí hoy para presentar el bucle __ detrás de React. Hoy, estamos trabajando con Spana y Omikasa para escuchar de ellos. Antes de eso, por favor, únase a nosotros para dar la bienvenida a Omikasa. Quería dar una charla sobre hydrogen porque creo que es muy interesante que Shopify cree su propio marco y cuando comienzo con él, donde vendemos nuestros componentes y luego compraron Remix. Y así aprendí Remix por causa de hydrogen.

Al principio, lo que es gracioso es que no me atraía Remix porque soy más frontend y la comida de ciervo, etc. Y vengo del trabajo independiente. Ahora, soy un dev rel en Storyblok. Y lo que sucede, realmente me enamoré de Remix porque hace todo más fácil porque se basa en los web standards. Y así mi nueva charla en conferencias es sobre web standards en Remix. Así que fue una doble victoria porque aprendí hydrogen y encontré mi marco favorito de esta manera. Así que, básicamente, hydrogen está realmente construido sobre Remix con algunos paquetes y una integración de paquetes. Lo siento, tengo que detener mis notificaciones. Las APIs de Shopify.

Entonces, comencemos. Voy a compartir mi pantalla. Para comenzar, tenemos esta página de Notion donde tengo toda la información, todo lo que voy a decir, y todo el código está ahí. Así que esta es la URL. Así que, por favor, vayan allí para seguir. Es una URL corta, t.li slash hydrogen. ¿De acuerdo? Y después de eso, clonarán este repositorio así que tienen el enlace en la página de Notion. Y mientras están haciendo eso, voy a mostrarles el sitio web final que vamos a construir.

Así que este es el sitio web que vamos a construir. Así que esta es su página principal. Y la página principal se construye con hydrogen pero también con Storyblok, que es un headless CMS con un editor visual que tiene una extensión para integrar el comercio en él. Así que aquí, primero tenemos un banner, y aquí tenemos una cuadrícula de productos. Así que estos productos son extraídos de Shopify, pero podemos verlos visualmente, ya sabes, en el editor visual aquí. Y luego tenemos un solo producto. Y este solo producto extrae esto de Shopify, y esto del CMS, y todo es visual. Así que también voy a mostrarles cómo se construye esto.

Ahora, si vamos a encontrar su tablero aquí, nos lleva a las entradas para la conexión de Shopify. Así que tenemos un tablero de performance y un tablero original. Así que si vamos a los tableros de performance, aquí, vemos todos los detalles de la colección con todos los productos de Shopify. Así que esto es 100% Shopify y no Storyblok. Y ahora puedo ir a los detalles de mi producto. Aquí tengo un botón de Comprar Ahora y un botón de Añadir al Carrito. Así que añado el carrito, y puedes ver aquí el número de artículos en mi carrito. Y luego si voy al carrito, puedo pagar. Así que es un y también puedo eliminar productos. Es un e-commerce funcional y simple. Tomé un tema gratuito de Shopify y copié el estilo y tomé inspiration para hacer este bonito sitio web de surf. Y ahora si vuelvo a la página principal, puedes ver que este banner ha cambiado. Ahora está presentando la tabla de performance. Y esta cuadrícula es solo una tabla de performance, también. Y esto es porque he introducido algo de personalización. No sé si has oído hablar de la personalización, pero es realmente una tendencia alta ahora en e-commerce. Significa que dependiendo del comportamiento del cliente, vamos a mostrar información diferente. Así que aquí, como he navegado a la tabla de performance, asumo que este usuario, yo, está interesado en la tabla de performance. Así que cuando vuelve al sitio web, sirvo tablas de performance para impulsar las ventas, por supuesto. Así que también te mostraré cómo se construye esto en la oficina de atrás con Storyblok y en el código y cómo funciona todo esto.

Así que ahora, no sé si ya has clonado el repositorio? ¿Y también la página de notion? Cuando esté hecho, creas un archivo .env. Creo que tal vez hay un ejemplo de .env. Y aquí tienes todos los tokens necesarios porque ya tengo una instancia de Shopify y así que no tienes que crearla. Y tienes todos los tokens así que obtendrás todos los productos de allí. Así que por favor levanta la mano si no está terminado. Así que después de eso, clonas el repositorio aquí. Así que esperaré cinco minutos para que todos puedan hacerlo. Y luego ejecutas npm install. Y después de eso creas el archivo .env. Y te quedas por el momento en la rama principal y vamos a progresar por ramas. De acuerdo, cuando estés listo, simplemente ejecutas npm run dev o h2dev también funciona, que son atajos. Y deberías tener esto. De acuerdo. Así que voy a comentar el repositorio. Así que para crear esto, he creado el comentario con las líneas de comentario por. Así que si vamos a hydrogen Shopify. Y si vamos a los documentos, empezando, de acuerdo. Si ejecutas este comando, te dejo probar esto por ti mismo porque la última vez que hice una masterclass en cuatro horas y estaba tomando demasiado tiempo. Pero si ejecutas este comando, tendrás un e-commerce completo con todo incluyendo registro de usuarios, búsqueda de pedidos, todo lo que puedes encontrar y con datos simulados. Así que desde allí puedes explorar o personalizarlo.

Pero en este caso, he utilizado la plantilla Hello World. Creo que es otro comando, así que aquí hay solo tutoriales que también recomiendo si quieres trabajar solo, aprendí todo de allí y la documentation está realmente bien hecha. Entonces, bien, vamos a mostrar esto, ¿dónde está el comando Hello World? Solo quería mostrar... Bueno, no encuentro un comando Hello World ahora, pero es una plantilla básica y he construido sobre ella.

Y aquí lo que ya he instalado porque queremos centrarnos en Hydrogen y no en todas las cosas básicas. He instalado Tailwind. También he creado las cosas básicas como tu pie de página, bien. Un encabezado con solo un logo y un menú con solo un enlace a las colecciones llamadas board y un layout. Y esto es un remix. Y en remix tenemos un archivo raíz que es la raíz principal. Y así importamos el layout aquí y envolvemos nuestro outlet. Así que el outlet mostrará las otras rutas. Y así envolvemos el layout aquí. Y luego tenemos la ruta índice que se crea por defecto. Aquí tenemos el archivo end. Y server.js es nuestro punto de entrada. Y esto es cuando usas la plantilla Hello World todo esto se crea para ti. Así que tienes esta función create store from client y creas la tienda con ella y pasa todas estas variables N aquí. Luego es mejor obtener ese contexto. Y así estaría disponible en el contexto global de los cargadores de remixes y acciones. Así que para los que no conocen los remixes es un marco de trabajo de pila completa y las funciones de carga obtienen data del servidor y las funciones de acción crean mutaciones en el servidor. Así que con la tienda, seremos capaces de hacer para obtener data con storefront.query y con storefront.query, obtendremos los data para crear las colecciones, para crear los productos, para leer los data del carrito y con storefront.mutate, realizaremos mutaciones GraphQL para crear las operaciones del carrito. Bien, y así todo es de pila completa, estas funciones ocurren en el servidor y son el mismo archivo de los componentes donde cargas los data del servidor. Así que todos los componentes son de pila completa. ¿Alguna pregunta sobre eso? Estás silenciado. No puedo oírte. Bueno, estoy bien. Ya estoy contento de que el entorno esté funcionando, así que. Bien. Lo que quería decir también, sí, cuando instalas la plantilla Hello World, no tienes eso. Y así fue hace unas semanas tuve que leer esta charla en Amsterdam. Sí, no, en Croacia, porque tengo esto en Croacia. Y lo que pasa, cambió muchas cosas. Y tenían esta nueva política de security de contenido y nada funcionaba. Así que esta no es la forma perfecta de hacerlo. Hay cosas en la documentation. Así que lo hice de una manera rápida así. Por eso, la imagen no funcionaba. Los scripts tampoco. Así que esto es algo que tuve encima de la plantilla, solo para saber qué está inmediatamente disponible y qué tienes que crear. Bien, así que si tu plantilla está funcionando, tu repositorio está funcionando, volvamos a Notion. Así que ahora vamos a crear la colección de N productos. Así que esto es lo que estaba explicando, una consulta de tienda y una mutación de tienda. Podemos hacer este ejercicio si quieres. Podemos intentarlo. Así que si vamos a localhost 3000 y slash GraphQL, tenemos acceso al esquema GraphQL. ¿Bien? Así que desde allí, queremos crear una consulta para obtener el índice de la colección. Así que en el índice de la colección, lo que tenemos, tenemos la imagen de la colección. Tenemos el título y tenemos un handle que enlaza con los detalles de la colección. Así que necesitamos todo eso. Así que necesitamos crear esta consulta. Así que podemos crearla en GraphQL. Podemos buscar allí. Luego necesitamos escribirla en la ruta. Así que te muestro la ruta. Oops. Necesitamos crear una ruta para eso. Bien. Así que puedes mirar en la documentation. Te dejaré 15 minutos para eso. Y luego necesitamos escribir una función de carga para consultar los data necesarios. Así que data de nuestra colección. Luego necesitamos recuperar estos data en el componente con el gancho use loader data, que es un gancho de Remix para recuperar los data del servidor. Y luego para escribir un componente solo para mostrar un título de colección. Quizás es un poco demasiado, si no conoces hydrogen, pero ¿quieres intentarlo? ¿Quieres la solución inmediatamente? Lo intentaré. ¡Vamos! Bien. Así que voy a explicar porque será más fácil. Para eso, vas a la rama. A colecciones. Esta rama, no una, una colecciones.

Y así tendrás todo el código. Y así creas, todo el código también está aquí. Si quieres reconstruir paso a paso y tratar de hacer las cosas por ti mismo, he escrito todo el código en esto aquí. Y así creas un índice de colección raíz. Y aquí es donde escribes tu consulta de colección. Así que si pruebo, ves, obtenemos el ID, el título, el handle y la imagen. Así que si pruebo esta consulta, oops. En aquí. Ves, obtengo toda mi colección performance board y original board, ¿vale?

Entonces escribimos nuestra función de cargador, y como explicaba antes, pasamos la consulta al contexto storefront dot query. Como recuerdas, tenemos storefront disponible en nuestro contexto. Así que esto obtendrá los datos de la colección data del servidor. Y aquí está nuestro componente, y aquí recuperamos estos data. Usamos el gancho de datos del cargador, y así tenemos los data para nuestras colecciones.

Y no sé quién no está silenciado, porque oigo a alguien. Sé que eres tú Peter. Creo que tienes ruido. Lo siento, estoy en el espacio de co-working. Sí, espacio de trabajo. Me silenciaré. Trabajo en un espacio de co-working, pero está justo al lado de mi casa así que cuando tengo masterclasses o cosas vuelvo a casa. Así que es muy práctico. Está al lado de mi casa. Sí, y luego he creado un componente de tarjeta de colección, que está aquí. Y aquí también uso, por ejemplo, este componente y este shopping hydrogen react. Es una biblioteca que puedes usar con cualquier marco de react. Así que puedes usarlo con Next también. Por supuesto, recomendaría mejor usar hydrogen y Remix. Y así, por ejemplo, aquí está un componente de imagen. Solo necesitas pasar los data para obtener la imagen y veremos todos los componentes. Tenemos uno para mostrar la moneda y el precio, que es entonces el dinero. Tenemos un botón de Comprar Ahora, y hay componentes para la tarjeta que no usaré aquí porque vamos a ser la tarjeta del lado del servidor es más eficiente, pero si quieres usarlo con otros frameworks, puedes mirar en esta biblioteca y puedes hacer la tienda de una manera más fácil. Pero creo que es mejor trabajar con Remix y Hydrogen. Así que aquí tenemos nuestro handle. Usamos un componente de enlace de Remix. Aquí tenemos un título y una imagen y todo está atado con Tailwind. Si volvemos a nuestro índice de colección, con eso, mostramos nuestras colecciones. ¿Alguna pregunta sobre eso? ¿Todo bien? Vale. A continuación, vamos a construir los detalles de la colección. Vamos allá. Aquí, lo mismo. Tenemos una consulta de colección, y también tenemos todos estos data es para la paginación que es un nuevo componente en Hydrogen. La primera vez que di esta charla porque esto fue la charla antes de ser la masterclass. Tuve que hacerlo a mano, pero ahora tienen un competente para la paginación, así que necesitas pasar todo eso, el primero, el último, el tercer cursor y el cursor. Luego todos los detalles de la colección que necesitas. ID, título, descripción, como una imagen como si fuéramos a nuestra colección aquí. Tenemos el título, tenemos la imagen, y luego tenemos los productos. Tenemos esta paginación, podemos cargar más. Necesitamos los productos, un primer número de producto que queremos por página. Así que en la primera carga, antes y después de la información de la página, todo eso lo tienes en GraphQL y el nodo para los productos. Así que el ID, el título, la fecha de publicación, el handle, las variantes con la imagen, y para la imagen, queremos la URL, el outtake, el ancho y la altura, el precio, la cantidad y el código de la moneda, y el compareAtPrice es para productos con descuento. Vale, luego de nuevo, tenemos nuestro cargador, y aquí obtenemos los detalles de la colección, que de nuevo comienzan desde la consulta y pasamos nuestra consulta así como las variables de paginación. Así que tenemos esta función, getPaginationVariables de Shopify Hydrogen, y aquí ponemos el número de productos por página. Y pasamos en la variable de paginación, y todo eso es para construir la paginación. No entraré en detalles a través del mecanismo de eso, pero hace que la paginación sea realmente fácil de hacer. Luego obtenemos nuestros datos de colección. De nuevo, usamos los datos del cargador y desde allí, tenemos toda la información para construir nuestra colección. Así que vale, así que aquí tenemos la imagen de la colección, un título de colección aquí como fuera de la imagen. Aquí está el título de la colección y la cuadrícula de productos. He creado otro componente aquí y aquí es donde uso la paginación. También he creado una tarjeta de producto. Aquí está, así que primero, veamos la tarjeta del producto. Así que aquí estoy usando este componente de dinero que estaba comentando antes y creo una variable es descontada. Así que si el precio comparado es superior al precio, el producto está en venta, está descontado. Así que aquí tengo el handle para mis detalles del producto. Aquí, vale, si está descontado, muestro una insignia de venta. Aquí tengo la imagen. Así que solo pongo una imagen. Tenemos un array de imágenes, así que tomo solo la primera de las variantes y aquí, vale, el dinero muestra un precio. Y aquí está el precio descontado. Así que esto es para la tarjeta del producto y la cuadrícula del producto.

Así que aquí paso mi colección como prop. Y aquí tenemos este componente de paginación y solo tenemos que pasar el producto de la colección a la conexión y los nodos del siguiente enlace y está cargando. Y luego la paginación funcionará. Así que pasamos aquí una tarjeta de producto y mapeamos alrededor de los nodos y el producto y cada producto. Y aquí tenemos el enlace para cargar más productos.

Bueno, esto fue para los detalles de la colección. ¿Alguna pregunta sobre eso? No, para mí no. Bueno, bueno, bien. ¿Otras personas tienen preguntas? Bueno, alguien tiene derecho o bien. Bueno, podemos continuar. Entonces ahora tenemos nuestras colecciones y ahora queremos mostrar. Así que tienes todo el código aquí. Queremos mostrar nuestro producto. Así que para eso vamos a la siguiente rama, número dos, producto. Entonces, bueno, y aquí he creado esta ruta, el handle del producto. Y en esta ruta, de nuevo este es el mismo principio Creo mi consulta de producto, ¿vale? Con todos los data que quiero para mis productos. Así que las ideas, los handles, los vendedores, las descripciones, la imagen destacada, la opción, la seleccionada, la variante por opción seleccionada que renombré variante seleccionada, la imagen precio, etc. Te dejo explorar eso. Solo quiero mostrarte cómo funciona todo.

Y de nuevo, tengo mi cargador y obtengo, así que aquí cargaremos el producto dinámicamente dependiendo del handle. Así que sí, en mi consulta, tengo el handle como variable, y entonces obtengo mi handle de los parámetros. Y paso de nuevo mi consulta de producto a la consulta de Storefront. Y paso el handle y las opciones seleccionadas como variables. Y aquí obtengo las opciones seleccionadas de los parámetros de búsqueda. Y desde allí de nuevo, bien y devuelvo, así que aquí en Remix, en Azure y en Remix, devolvemos desde el cargador lo que queremos, así que lo que es genial en Remix también estamos en el servidor. Así que podríamos devolver solo los data que queremos. Aquí no he devuelto también producto, pero si quisiera solo el título, devuelvo solo el título. Así que podemos filtrar los data desde el servidor y esto evita tener data innecesarios en el front end y hace que todo sea más rápido. También queremos el dominio de la tienda. Esto es para el botón de pago de la tienda, así que es un botón de comprar ahora, y necesitamos pasar el dominio de la tienda para que este botón de pago de la tienda funcione. Y bien, vamos a ejecutar esto. Bueno, devuelvo todo eso y aquí de nuevo, hemos usado los data. Recupero todos estos data como un producto, la variante seleccionada en el dominio de la tienda. Así que aquí es ordenable. Bueno, veo si mi variante seleccionada está disponible para la venta. Si tenemos una imagen de predecir también. Y luego tenemos todos los data para mostrar nuestro producto. Por el momento solo tenemos el botón de pago corto. No tenemos, no hemos hecho el añadir al carrito porque vamos a construir un carrito juntos, que es una de las partes más grandes de esta masterclass. ¿Alguna pregunta? Tal vez, pero es un poco relacionado con Storyblok. Storyblok viene después. Bueno, bueno. Sí, sí, sí. Por el momento, estamos, todavía, si miras en el front end, bien, en npm install, así que, oops. No, no, no me importa. Bueno, si vamos a localhost 3000, puedes ver que nuestra página principal todavía está vacía, bien, pero todavía esperamos que haya algo sobre el estándar no está bien. Bueno, pero tenemos, bien, tenemos un problema con un problema en esta rama, parece, bien, con Tailwind, pero tenemos todos nuestros data y construiremos la página principal con Storyblok, y primero vamos, construimos las colecciones, los productos, luego la parte, luego tendremos toda la parte de Shopify funcionando, trabajaremos en Storyblok, ¿vale? Entonces, ¿alguna... Lo siento. Sí, está bien. Solo me preguntaba sobre otra cosa, pero es más sobre la combinación en la página de detalles del producto con los componentes de Storyblok, pero tal vez es un poco fuera de tema. No, no, no está fuera de tema. Es al final. Bueno, eso está bien, eso está bien. Es la última parte. Esperaré. Otras personas, ¿tienen preguntas? Bueno. Podemos hacer una pausa de cinco minutos, ¿o queremos continuar? Porque ahora vamos a crear el carrito. Tal vez podríamos continuar. No sé para los demás. Sí, por favor continúa, sí. Bueno. Bueno, ahora vamos a crear el carrito. Así que las operaciones del carrito se pueden hacer en el lado del cliente, pero esto causaría una degradación del performance debido al código adicional entregado al navegador, también afectaría la experiencia del cliente ya que los flujos críticos no serán accionables hasta que todo el JavaScript haya terminado de cargar. Pero Remix es una potente API de mutación que utiliza web standards como Form Element y HTTP, así que podemos implementar un flujo de trabajo de formulario del lado del servidor tradicional mientras mantenemos los beneficios de la experiencia del usuario del lado del cliente. Y gracias a eso, podemos hacer mejora progresiva, UI optimista, todas estas cosas buenas, porque esta parte funcionará sin JavaScript. No la que estamos construyendo porque uso Suspense en este momento por algunas razones, pero lo que quiero decir es que puedes, con Remix en general, puedes traer aplicaciones que ni siquiera necesitan JavaScript para funcionar. Pero en realidad, aquí JavaScript y React, están aquí para mejorar la experiencia del usuario o la interactividad, pero todas las funcionalidades pueden funcionar sin JavaScript. Así que esto es realmente algo genial. Así que vamos a construir el performance del lado del servidor Trard y mejorar nuestra tienda y la experiencia del cliente. Así que vamos a la siguiente rama, número tres, Kart.

Bueno, no sé si necesitamos NPM. Quizás ejecutar NPM install porque creo que tengo todos los paquetes como iconos que están en esta rama y ahora si vamos al front end. Bueno, ves que tenemos un Kart aquí. Bueno, ahora mi CSS también está bien y a partir de ahí cuando tenemos todo eso, somos capaces de añadir artículos al Kart y después de todo eso, y también eliminarlos. Bueno, podemos eliminarlos aquí y podemos pagar, ¿vale? Así que primero para construir eso, inicializamos el Kart con Create Kart Handler. Así que esto está en server.js, el archivo de entrada. Bueno, voy a ver si había preguntas. Bueno, así que importamos Create Kart Handler y creamos este fetch dentro de la solicitud fetch creamos el Kart Handler. Pasando el storefront y las funciones para obtener el ID del Kart y establecer el ID del Kart. Esto utilizará una consulta básica, pero puedes, puedes mirar la documentación y encontrar más opciones para pasar a este Kart Handler. Luego pasamos este Kart a getLoadContext por lo que nuestro Kart ahora estará disponible con algunas funciones en nuestro contexto. Así que, lo muestro en el código. Así que en Server.js. Tenemos nuestro Create Kart handler. Aquí tenemos nuestro fetch. Y tenemos aquí nuestro Create Kart handler que pasamos aquí en getLoadContext. Bueno, este es un primer paso. Ahora, nuestro Kart está disponible. Así que, ahora, tenemos esta función, pero necesitamos, por supuesto, añadir artículos a nuestro kart y ser capaces de eliminarlos. Así que, vamos a crear un botón de añadir al kart. Para eso, importamos el componente kartForm y este componente kartForm abstrae mucha complejidad. Así que, esto es cuando di esta charla por primera vez en mayo en la RemixConf y no existía. Y lo di varias veces y lo estaba dando en Croacia y una semana antes me di cuenta de que hydrogen evoluciona mucho y tuve un ataque de pánico durante una semana porque tuve que cambiar todas mis diapositivas y todo. Así que, es genial porque hydrogen está evolucionando rápidamente y siendo abstraído lo que hace que la experiencia del desarrollador sea más fácil. Pero para mí fue realmente un pánico porque tuve que cambiar todo eso y había estas políticas de seguridad del banco de código. Pero bueno, esa es una pequeña historia. Realmente hace las cosas más fáciles. Así que, definimos qué añadir al carrito con la línea. Así que, ta-da-da. Bueno, aquí en las líneas definimos lo que queremos tener en el carrito, la cantidad y el ID de la mercancía que es el ID de la variante. Y luego sólo necesitamos devolver este formulario del carrito para indicar la ruta donde se procesará. La acción, aquí es líneas tiene. Desencadenará una función que vamos a ver después. Y las entradas, pasamos las líneas. Así que las entradas, las líneas son los productos que vamos a añadir al carrito. Y tenemos nuestro botón que está anidado en el formulario del carrito. Así que esto asegura que el click se traduce en añadir artículos al carrito. Gracias a las acciones, líneas tiene. Y toda esta acción está dirigida a nuestra ruta del carrito. Así que luego colocamos nuestro botón del carrito en nuestra página de detalles del producto. Así que producto dólar handle debajo del botón de pago corto, ¿vale? Así que si vamos aquí, tenemos el... Así que también lo que han hecho aquí, he puesto todos mis componentes del carrito en la carpeta, pero esta es mi forma de hacer las cosas. Puedes hacerlo como quieras. Así que aquí tengo mi botón de añadir al carrito, ¿vale? Y bueno, así que formulario del carrito, las líneas, y todo está ahí. Y luego en mi producto handle, ahora tengo mi botón de añadir al carrito y paso el ID de la variante, que es el ID de la variante seleccionada, ¿vale? Entonces el botón de eliminar del carrito funciona igual. Así que eliminar del carrito, al carrito, bueno, botón de eliminar del carrito aquí. Así que aquí tenemos de nuevo nuestro formulario del carrito, pero aquí es acción, es líneas eliminar y las entradas son los IDs de línea es el producto a eliminar, y nuestro botón aquí es un icono. Bueno, entonces creo que tengo una acción, normalmente para, sí, entonces en la ruta del carrito, así que tengo una ruta del carrito aquí. Tengo esta acción, y así que tengo un switch, y dependiendo de la acción del carrito, así que si es línea dura, ejecutaré la función de añadir líneas al carrito. Y si es, la acción es línea eliminar, ejecutaré las funciones de eliminar líneas del carrito. Bueno, así es como funciona. ¿Alguna pregunta sobre eso, sobre el botón de añadir al carrito y eliminar del carrito? No, no. ¿Todos están bien? Bueno. Bueno, así que bueno, instalamos los react icons, pero eso ya está hecho. Bueno, botón de eliminar del carrito, bueno, eso lo he explicado. La ruta del carrito está aquí. Bueno, también construimos un componente de carrito vacío que aparecerá si nuestro carrito está vacío. Así que esto es muy simple. Bueno, tenemos tu carrito está vacío y un enlace a la página de la colección para seguir comprando. Así que ahora tenemos un carrito. Tenemos un botón para añadir artículos a él. Así que ahora necesitamos agarrar el carrito y leer data para mostrarlo. Así que vamos a necesitar estos data en dos lugares. Tenemos este icono en los encabezados que muestra un número de artículos. Así que necesitamos leerlo desde el encabezado. Y por supuesto también necesitamos leer estos data en la ruta del carrito. Así que como necesitamos los data en dos lugares, los necesitamos globalmente. Así que vamos a crear un cargador en el archivo de ruta porque el archivo de ruta es la ruta padre. Así que aquí en nuestro cargador, creamos... Así que tenemos algo especial aquí porque...

Ah, olvidé explicar algo. SEO. Entonces, cómo manejar SEO. Y permíteme mostrarte eso. Entonces, en el archivo raíz aquí, tenemos un componente SEO. Y tenemos un export handle. ¿Dónde está? Sí, aquí. Tenemos este export handle y podemos crear esta función SEO y pasar los data del cargador a esta función SEO. Y aquí, por ejemplo, queremos como título SEO, queremos el nombre de la tienda. Así que esto proviene de esta consulta de tienda. Y para nuestra descripción meta, queremos la descripción de la tienda. Luego colocamos este componente SEO aquí en el head en la raíz. Y luego en los otros archivos, por ejemplo, en el manejador de producto, podemos sobrescribirlo. Así que aquí mi SEO, quiero que aquí sea el título, que sea el título del producto y la descripción sea la descripción del producto. Y si miro mi producto aquí, por ejemplo, si inspecciono aquí mi, puedes ver que el título es el título y la descripción para hacer una descripción, es mi descripción aquí. Así que es muy fácil manejar SEO. ¿Alguna pregunta sobre eso? No, para mí, no.

Vale. Entonces volvamos aquí. Entonces sí, lo que quería mostrarte ahora aquí en el archivo raíz, queremos los data del carrito. Pero vamos a hacer algo diferente porque queremos inmediatamente estos data de la tienda para SEO. Así que no queremos esperar a que se resuelva la promesa del carrito. Y para eso, usamos defer, que es una utilidad de Remix para hacer streaming de data por lo que podría transportar la promesa a los componentes de la interfaz de usuario y los resolveremos allí. Así que solo envolvemos con esta función defer, la tienda y el carrito. ¿Vale? Y a partir de ahí, creamos el icono del carrito. Entonces, en el componente del icono del carrito, aquí vamos a resolver nuestro carrito con un peso junto con suspense. Por eso este carrito necesita JavaScript, pero si no estuviera usando peso y suspense, podría mostrarte que funciona incluso sin JavaScript. Pero quería mostrarte esta función. Así que no sé si es súper útil en este caso o solo la tienda SEO, pero es solo una forma de mostrarlo. Puedes explorarlo más en la documentation. Y básicamente creo que esto hace lo que streaming con un componente de servidor React que no he usado mucho. Creo que puedes hacerlo sin usar los componentes del servidor React. Pero sé que Remix quiere implementar los componentes del servidor React, pero esperan que sea realmente estable porque por lo que escuché en el próximo 13, no es realmente estable y las personas que comienzan a usarlo no están muy contentas. ¿Has experimentado con, qué puedes decir, Pieter, sobre el próximo 13. Bueno, leí los mismos comentarios. Tengo un colega que estaba un poco loco por eso porque pensó que no estaba listo para producción. Sí, pero ellos dicen que está listo para producción. Sí, pero a veces siento que Next lanza cosas un poco demasiado pronto. Sí, sí, sí, quieren ser populares, así que los lanzan. Sí, sí, sí. Sí, entonces Remix lo tendrá pero cuando sea estable. Y de nuevo, no trabajo para Remix pero me encanta.

Entonces, aquí, usando await, resolvemos nuestro carrito y obtenemos data aquí y a partir de ahí, podemos verificar la cantidad total de data y si es superior a cero, la mostramos en el icono. Entonces, muy simple y luego colocamos nuestro icono de carrito en el componente de encabezado aquí. Entonces, el icono del carrito está ahí. Vale, await, entonces lo que dice aquí, suspense y todo está aquí. Y el icono del carrito, sí, es solo un icono de Rect Icons. Vale y sí aquí podemos usar otros data porque el icono del carrito es un hijo del archivo raíz. Entonces podemos obtener los data a nivel de componente lo que no es posible en Next 12 casi, que yo sepa. Esa era otra cosa que realmente no me gustaba de Next cuando tienes un encabezado, tienes que perforar props hacia arriba y hacia abajo, así que venía de Gatsby antes de sumergirme en Remix y esta parte de Next, digo por qué, ¿por qué no podemos hacer eso? Entonces, bueno, así es como digo que mis opiniones son mías.

Entonces, creo que era el icono del carrito, ¿alguna pregunta sobre eso? Solo una pequeña pregunta, todo el suspense, la cosa de espera es solo cómo se carga la página y luego el resto del carrito entra cuando está listo. Entonces, si lo harías- Sí, básicamente el carrito en lugar de, ten cuidado con esto, en lugar de resolverse aquí porque queremos inmediatamente estos data se resolverá en el componente de la interfaz de usuario. Entonces, cuando este componente aparece, entonces. Entonces, si tenemos algunos data críticos en la ruta que queremos inmediatamente en el cargador entonces podemos diferir estas promesas. Ese es el propósito de eso. Sí. Vale. ¿Y no necesitas pasar un fallback al componente suspense? Sí, podemos hacerlo. No lo he hecho aquí. Eso era justo lo que iba a decir. Podemos pasar aquí un fallback, aquí no es realmente necesario pero sí, normalmente puedes, pasas un fallback aquí. Vale, ¿alguna otra pregunta? Sí, estamos bien. Vale, entonces ahora queremos, sí, ahora podemos crear también componentes de carrito. Entonces tenemos los elementos de línea. El elemento de línea representa un producto y aquí también renderizamos el botón de eliminar del carrito. Entonces, este es un producto. Tenemos la imagen, el enlace. Entonces, básicamente esto es esto, ¿vale? Este es un elemento de línea. Luego, en los elementos de línea del carrito, mostraremos todos los elementos de línea del carrito.

Y aquí nuevamente, usamos un componente de React Hydrogen como una conexión aplanada que aplana el nodo y el objeto Hedges en un simple array de líneas. Así que podemos mapear las líneas y mostrar cada elemento de línea. Luego tenemos los resúmenes del carrito que muestran el total cuando usamos el componente de dinero aquí. Luego tenemos el botón de pago que enlaza con la URL de pago aquí. Y el contenido del carrito muestra todo eso.

Así que los elementos de línea del carrito, los productos, el resumen del carrito y el botón de pago. Como podemos ver, aquí tenemos los elementos de línea, el resumen del carrito y el botón de pago aquí. Y bien, ahora lo tenemos todo. Ahora necesitamos mostrar los data del carrito. Así que esto está en la ruta del carrito. Y aquí la ruta del carrito es otra ruta, por lo que no es un hijo del archivo raíz. Así que para obtener los data, no vamos a usar user data, sino que vamos a usar use matches, y con use matches, nosotros, ta-da-da, podemos obtener, bueno primero tenemos esto, espera un minuto. Oh sí, esta es mi acción de granja, eso es, bien estamos en el componente, así que sí, con use matches, obtenemos los data de la ruta, obtenemos los data de todas las demás rutas, y en los data de la raíz tenemos el carrito. Así que desde allí obtenemos los data del carrito, y de nuevo, usamos await y suspense. Y si hay artículos en mi carrito, muestro el componente de contenido del carrito, de lo contrario muestro el componente de carrito vacío. Y eso es todo, ahora tenemos un carrito que funciona.

¿Alguna pregunta sobre eso? Tenemos tiempo, vamos muy rápido, cuando lo estaba haciendo en vivo hace diez días en Alicante, solo teníamos tres personas porque había muchas otras masterclass al mismo tiempo, y fue un total de cuatro horas porque todos iban despacio, haciendo preguntas, y aquí en línea todo va más rápido, o quizás ustedes entienden más rápido que las personas que tengo, no lo sé. Pero está yendo realmente rápido. Así que avísenme si tienen preguntas, no duden que tenemos tres horas, y creo que terminaremos realmente antes. Así que no duden en hacer preguntas.

Entonces, el use matches, ¿podrías explicar eso un poco más, porque cuál es la diferencia entre el use loader y el use matches, porque el use loader se usa cuando usas la función de carga supongo? Sí, usas el cargador, pero con use loader data obtienes los data de la ruta padre, pero aquí tenemos la ruta padre la ruta es una ruta cinco, pero aquí hemos creado otra ruta, estamos en la ruta del carrito, bien, así que necesitamos los data y entonces use matches si vamos a la remix doc, bien, pero haré un registro de consola, lo verás. Bien, devuelve las coincidencias de ruta actuales en la página, ah sí no explica mucho, pero puedo mostrarte con consola log lo que hace, así que estamos en el carrito aquí, y oops, bien, así que, déjame ver aquí, bien, así, ¿puedo verlo aquí? No aquí, espera, no soy muy bueno en la codificación en vivo para ser honesto. Creo que es, solo puedo ver aquí. Entonces, básicamente estás aquí, ves el use matches. Ves los data de, del disparo de la tarjeta y la ruta que están en el, en el árbol. Así que si sacamos los data fuera, incluso array con los data de la ruta y, y ese es el objetivo. No puedo ver esta consola aunque. ¿Qué voy a reiniciar? Entonces, pero te da la información de todas las rutas o sí, todas las rutas que están hasta esta. Bien. Bien. Bien. Así que no muestra. Por ejemplo, tengo una ruta para páginas. No mostraría esta, pero la ruta, los archivos de ruta en el árbol. Bien. La ruta del carrito no es un hijo de ella. Así que no puedo obtener los data del archivo raíz, pero puedo encontrar estos data. Usamos matches. Bien. Coincide a lo largo de. Entonces sí, algo así. Algo así, trata de recordar eso chico. Sí. Que se mostraría aquí. Oh, ahí está. Aquí solo para entender. Entonces ves, tenemos un array. Tenemos la ruta y tenemos la tarjeta raíz aquí. ¿Ves? Sí. Puedo recorrer la ruta data. Y desde allí, sí, te doy esa tarjeta. Lo veo. Porque, porque la tarjeta se carga en la ruta. Así que sí, desde allí. Sí, porque he escrito mi cargador en ella porque necesito data globalmente porque no veo el encabezado. Pero ahora es por eso que necesito estos matches y es bueno porque me hace esperar más cosas. Así que ahora funciona. Bien. Gracias. ¿Alguna otra pregunta? No. Avísame. Bien. ¿Son las personas? Bien. Así que ahora volvamos. Alguien tiene. Sí, es lo mismo. Misma documentation que tengo. Puse aquí.

Bien. Ahora tenemos todo el producto de Shopify funcionando y ahora queremos construir. Entonces, tenemos que crear una cuenta. Y voy a mostrarles cómo hacerlo. Primero. Vamos a Storyblok. El sitio web. Y si no tienes una cuenta, creas una cuenta. Y si tienes una cuenta, te registras. Así que avísenme cuando todos estén allí. Y luego solo tienes. Dos. Así que este es un espacio con todos los componentes. Y páginas. Todo el contenido de allí será clonado en tu propio. Espacio de Storyblok. ¿Todos? Sí. No. No. Bueno. Estoy iniciando sesión en storybook. Y me da un. Y crea una demo. Y esa es la que tengo que ejecutar. No, no, no, no, no. Solo como está el enlace en. Solo lee mis instrucciones aquí. Solo lee el espacio de la caja de imagen con este particular. Eres tú. Solo una vez que estás. Has iniciado sesión en tu. Cuenta de Storyblok. Solo tienes que hacer clic aquí. Y creará. El espacio. Hmm. En el, cuando hacemos clic en ese enlace. Tenemos eso. Esa pantalla que Peter dijo. Ahora mismo. Y necesitamos obtener una copia local, luego crear contenido y. Espera, espera, espera, espera, déjame intentarlo. Vale. Correcto. Vale. Sí. Sabes, tienes un, tienes un, sabes, uh, dirección de correo electrónico. Sí. Pero mira, si vas allí, tienes el contenido. Tienes la biblioteca de bloques. Tienes todo. Lo que necesitas. Vale. No te preocupes. Vale. Estás bien. Entonces es divertido porque es una de las partes más fáciles, ya sabes, no hay código en nada. Sí. Todos entienden todo. Rápidamente. Es difícil. No es simple para. ¿Puede ser tan simple? No puede ser eso. No, no, tienes todo allí. Entonces, sí. Así que la próxima vez. Sí. Tengo que hacerlo más complicado. Entonces.

Vale. Entonces desde ahí. Obtenemos el token de vista previa de la API de configuración. Entonces. El. La configuración y. No token de acceso. Sí. Sí. Acceso para venir. Entonces vienes a este. Copias este. Vale. Sí. Y desde ahí. Instalas tu QP, y luego instalas el complemento SDK de react. Tienes que hacer eso. Pero ejecutas NPM install para obtener esto. E inicias una historia, bloque en la aplicación. Entonces aquí necesitas pasar el token de acceso aquí en Storyblok. Necesitas, esto es lo único que tienes que cambiar. Entonces Storyblok, necesitas configurar la conexión con el espacio. Y dentro del editor visual, y la función también proporciona una instancia de los clientes de la API de Storyblok que podemos usar para recuperar contenido de Storyblok. Entonces, en el código, voy a mi nueva rama para conectar Storyblok, aquí. Y esto está en el archivo raíz. Entonces, vale. Entonces, tenemos Storyblok en el complemento de la API del SDK de Storyblok React. Y en Storyblok aquí pasamos nuestro token de acceso. Tenemos este componente que pasamos aquí. Y esto mapeará el componente que construimos en Storyblok. Eso se mapeará con los React components. ¿Vale? Y entonces, esto es algo que realmente me encanta de Storyblok. Se basa en componentes. Entonces, realmente mapeamos los React components y los componentes de Storyblok. Por cierto, ¿alguien ya ha usado Storyblok o es totalmente nuevo para ti? No pregunté esto. No puedo oírte. No somos nuevos en esto. Pero no lo hemos usado en el proyecto. Vale. Entonces, jugué con un tutorial simple con las características y los conceptos básicos de Storyblok. Entonces, sé un poco sobre eso. Vale. Vale. Es reconocible. Vale, bien. Y Peter, ¿eres independiente, eres una agencia? ¿Qué estás haciendo? Bueno, somos una agencia de los Países Bajos, nos llamamos de nieuwe zaak, que se traduce aproximadamente como el nuevo negocio. Vale. Y nos estamos concentrando en las plataformas de e-commerce. Entonces, estamos usando Intershop y big commerce para desarrollar tiendas web para nuestros clientes. Ese es nuestro principal negocio. Y estamos buscando infinitas posibilidades. Entonces, necesitábamos un CMS para eso. Y Storyblok apareció muchas veces, así que intentamos, los estamos probando. También hicimos la cosa de socios y tenemos un contacto aquí en los Países Bajos. Ah, ya eres, iba a hablar de eso, pero ya eres un socio. Sí, sí. Vale, genial. Genial, genial, genial. Entonces, sí, entonces tienes muy buenos contactos. Genial, genial, genial. Entonces, sí, entonces realmente tienes que aprender Storyblok de esta manera. Y también hay complementos para BigCommerce y otras plataformas de e-commerce, pero creo que ya lo sabes. Sí. Vale, vale. Entonces, ahora estamos conectando Storyblok y ahora necesitamos agregar el servidor de desarrollo a Storyblok. Entonces, vamos a Configuración, Editor Visual y agregamos este localhost 3010 porque necesitamos un HTTPS y también vamos a Configuración de Entrada y agregamos esto como readback. Entonces, te muestro eso. Entonces, aquí en el Editor Visual. Vale.

Como entorno predeterminado, tengo localhost 3010. Como puedes ver, también tengo un entorno en vivo con mi sitio web en vivo, que es Deploy Universal. Y luego en el contenido y en casa, tenemos aquí la configuración de entrada. Y aquí ves que tenía la ruta real como una barra diagonal porque no queremos que sea la URL-barra diagonal-casa. La ruta real es solo el archivo raíz. Así que siempre necesitamos pasar eso. ¿De acuerdo? Y ahora, necesitamos agregar el proxy https porque necesitamos tener el https. Así que aquí solo tenía el enlace para hacerlo con Windows y si estás en Windows, sigue este enlace. Y aquí tengo la explicación para hacerlo en Mac. Así que necesitas hacer brew install mkaster. Luego mkaster install mkaster localhost dentro del repositorio y esto creará estos dos archivos, ¿de acuerdo? Y están en gitignore2. Hay una—¿puedo hacer una pequeña introducción? En VS Code hay una opción llamada Puertos y allí puedes exponer tu localhost al público. Así que también es una forma de—y también es HTTPS. De acuerdo. Ah, tengo que mirar eso. Sí, lo hice de esta manera, y siempre es un poco complicado porque tienes que hacer un certificado y cosas así, pero hay una forma. Puedes hacerlo privado y público, pero entonces está expuesto al mundo, y así es fácil compartir tu entorno local. Para eso se utiliza, pero la conveniencia agradable es que también está en HTTPS. Así que básicamente solo está dentro de Visual Studio Code. Está al lado de la terminal, si la tienes abierta. ¿Estamos buscándolo? Sí, lo intentaremos para la próxima vez. ¿Funciona así? Sí. Así que entonces inicia y ejecuta un proxy. Así que NPN install glocal SSL proxy, y luego cada vez que ejecutas este comando, así que tenemos que registrarnos aquí porque lo uso a menudo, y ahora... De acuerdo. Si lo ejecuto aquí... De acuerdo. Veamos. Ahora va a investigar GPS, elemento 10, y aquí... De acuerdo. Voy a cambiar la URL por esta, y ahora estamos conectados, ¿de acuerdo? Pero por el momento, no tenemos nada en la página de inicio porque no hemos construido el componente por el momento. De acuerdo. Así que avísame cuando estés allí con el proxy funcionando y que puedas ver eso en la página de inicio. De acuerdo. Tengo una pregunta. Puedo ver mi casa local. Estoy viendo otra dirección, como espacio de demostración, así que no estoy seguro de cómo puedo visualizar mi local. ¿Qué has hecho? ¿Has clonado el espacio? Porque si ves... porque cuando creas algo en Storyblok, déjame mostrarte. Si vamos a Storyblok. Así que no sé qué has hecho pero si tienes creado este espacio de añadir y crear espacio de demostración, este es un espacio preconstruido y un front end para explorar todo, todas las características. De acuerdo. Así que si has hecho eso, eso está bien si quieres explorarlo pero no para esta masterclass, Así que lo que necesitas hacer es simplemente hacer clic en este enlace y tendrás el espacio, el espacio correcto. Creo que era de... Sí. Quizás el nombre es espacio de demostración. No recuerdo entonces. Puedes renombrarlo como quieras en la configuración. Así que este es un espacio y deberías ir a la configuración. Sabes que puedes nombrarlo como quieras. Pero, sí, creo que lo llamó tu espacio de demostración. Solo tienes que renombrarlo. Pero entonces si todo está bien, deberías tener una casa con estos componentes y deberías tener una biblioteca de bloques con todo eso. De acuerdo. Y de todos modos, si está bien hecho, cuando enlazas, tendrás todo el front end mostrando. Pero, normalmente, haciendo clic en este enlace, tendrás todo esto construido para ti directamente. De acuerdo. Sí, ahora lo tengo. OK, bien. Así que el siguiente paso. El siguiente paso, vamos a crear la ruta para las páginas. Y para eso, hemos creado una ruta splat. La ruta splat es como el atrápalos todos en Next. Estas rutas se mapearán a cualquier URL, no coincidente con otras rutas archivadas en el mismo directorio. Y esto es muy útil, porque los editores de contenido podrán crear nuevas páginas con una carpeta anidada. Y no necesitamos crear otras rutas para eso, para las páginas. Si tienes páginas sobre barra diagonal, no sé, clientes o lo que sea, funcionará. ¿De acuerdo? Así que, creamos esta ruta aquí. De acuerdo. Voy aquí a mi rama Next.

Y en mi ruta, está aquí. Entonces, aquí, obtengo... Así que, importo la API Get story block. Hay YouStoryBlockState y StoryBlockComponent del SDK de Storyblok para React. Y aquí, en mi ruta, obtengo mi historia de UseLoaderData. Que viene de... Sí, esto viene de la ruta. Entonces, podemos ir al archivo de ruta aquí. Voy a decir que estoy perdiendo algo. Vale. Sí, porque mi cargador está escrito después. Normalmente lo escribiría antes. Entonces, aquí en mi cargador, obtengo mis datos de get story block API, que viene del SDK. Paso aquí el método GET, la historia CDN con el slug. Obtengo el slug de los parámetros aquí. Y aquí está la versión borrador, y luego en mi JSON, devuelvo la historia, que es una historia de datos, ¿de acuerdo? Luego lo recupero aquí con used loader datos, así que ahora sabes cómo funciona, el cargador, los datos. Y lo paso en la función useStoryBlockState, y esto cargará el puente JavaScript y escuchará los eventos en el editor visual. Así que gracias a eso, podemos tener el editor visual. Y luego este componente Storyblok mostrará dinámica y condicionalmente los componentes si existen. Y aquí pasamos en la propiedad de bloque el contenido de la historia. Así que si estamos en Storyblok, déjame mostrarte. Aquí tenemos el JSON, y puedes ver que tenemos una historia, creada así, id, etc. Y tienes el contenido. Y aquí tenemos un componente de cuerpo, pero voy a explicar. Peter, oigo todo el ruido alrededor así que si puedes silenciar ahora. Entonces, REMIX por definición, necesita un archivo index.jsx dentro del directorio raíz. Entonces, el problema es que esto colisionará con la raíz de nuestra página de inicio así que como no queremos repetir el código de nuestra raíz dinámica, podemos reemplazar el código de los archivos index.jsx de esta manera. Y ahora vamos a construir el componente de página. Así que en el componente, creo la carpeta de bloque en componentes. Hay dos formas de hacerlo. No es algo obligatorio, pero organiza mejor las cosas porque sé en bloques, estos son los componentes que se mapean a story block. Y aquí, importo story block editable y story block components. Así que story block editable, gracias a eso, como puedes ver, normalmente tengo que recargar. Y vas a ver todo. No, ¿qué pasó? OK, solo tengo los componentes de página aquí. OK, por el momento, solo muestro la página aquí, pero no tengo nada dentro por el momento. Así que en mi página, como puedes ver, tengo un campo de cuerpo. OK, y este campo de cuerpo, está hecho con un tipo de campo llamado bloque y este tipo de bloque, como puedes ver, tenemos muchos tipos de bloque de texto, área de texto, texto enriquecido, markdown, todos los tipos de campo comunes, pero tenemos algunos tipos de campo especiales. Tenemos los bloques y el plugin, y vamos a explorarlos. Así que el campo de bloque puedes anidar en todos los demás componentes dentro de él. Así que esto hace estos principios de diseño atómico. Puedes anidar componentes dentro de uno otro, pero también puedes permitir un número mínimo o máximo de componentes, y podemos permitir que solo se inserten componentes específicos. Así que aquí, todos los componentes están permitidos, pero podríamos hacer una carpeta con solo ciertos componentes y solo permitir este, o veremos más tarde. Otros campos de bloques donde solo permitimos ciertos tipos de componentes. Entonces, si volvemos a mirar nuestro borrador aquí, podemos ver este campo de cuerpo, y en este campo de cuerpo, vemos nuestros otros componentes, lo que he nombrado variantes que vamos a explorar más tarde. Pero como es un campo de bloque, tenemos varios componentes. Tenemos una matriz de componentes dentro de él. Y por eso tenemos, de nuevo, este mapa de cuerpo de bloque. Y de nuevo, usamos un componente de story block para mostrar dinámicamente los componentes que están dentro de este campo de cuerpo. Vale. Y el editable de story block hace que cuando hacemos clic en un componente, sea directamente editable. Así, déjame mostrarte si voy a la URL en vivo. Aquí, puedes ver que puedo editar todo. Y en tiempo real, solo haciendo clic en él, lo cual es muy agradable en mi opinión. Y no solo porque trabajo para ellos. Así que esto es para el componente de página. Y luego este componente, lo traigo aquí en el archivo raíz, lo importo aquí, ¿vale? Y lo paso y lo mapeo en mi objeto de componente al componente de página, ¿vale? ¿Alguna pregunta sobre eso? No, no para mí.

Bueno, pero ya conoces Storyblok, así que quizás las personas que nunca lo han visto tienen más preguntas, no lo sé. Vale. Bueno, así que sí, tengo más explicaciones, así que Storyblok editable, esta función nos permite marcar el componente de React como editable así que cuando cargamos la página que está contenida dentro del editor visual, podrás hacer clic en ella y editar sus propiedades y marcamos todos los componentes de React que conducen a los componentes de Storyblok como editables. Vale. Así que ahora vamos a la siguiente rama, el componente personalizado. Vale. Creo que cometí un error. No es una rama. Sí, es la rama seis. Vale. Así que vamos a personalizar la página principal en función del comportamiento del usuario. Así que si un usuario visita una colección específica como performance board, verán un banner correspondiente y el proyecto leído en la página principal. Así que almacenamos la información de la colección en una cookie utilizando react-use-cookie. Así que necesitas ejecutar NPM install porque tengo este nuevo componente. Sí. No puedo oírte. No puedo oírte. Todavía, todavía estás silenciado. Necesitas desactivar el silencio. No puedo oírte. Sí. No hay problema. Algunos colegas están saliendo del edificio, así que no hay paga aquí. Así que tengo que despedirme de ellos. Se preguntaban por qué todavía estoy tan tarde, así que. Bueno, pensé que estabas preguntando. No hay pregunta, no hay pregunta. Vale, vale, así que puedes silenciar de nuevo. Así que instalamos el paquete, NPM install react-use-cookie y en el manejador de la colección, importamos get cookie y set cookie de react-use-cookie. Y aquí, así que vamos a almacenar el manejador de la colección así que si no hay un tipo de usuario y hay una colección, enviamos la cookie a, la llamamos userType, y tomamos el manejador de la colección como valor para esta cookie. Y así podemos verlo en el sitio web aquí. Si vamos a la aplicación y la cookie, puedes ver que el tipo de usuario es performance board aquí, vale. Y si voy a la tabla y voy a esta, ahora veo que ha cambiado a tablas originales, vale. Y cuando vuelvo a casa aquí, ahora tengo mi banner de tablas originales. ¿Vale? Así que es muy simple. Es muy simple para este caso. Quiero decir, puedes hacer mucho más como y establecer personalización. Este es el principio de cómo funciona. Creo que ahora puedes, sí, usar aplicaciones externas, IA para hacer en este campo, pero esto es lo básico. Así que, vale, vamos a mi manejador de colección. Está, está aquí. Vale, muy simple. Luego creamos el componente de banner. Así que voy a mostrarte cómo funciona en la oficina de back antes de eso. Así que aquí podemos ver que en nuestro cuerpo, tenemos banner personalizado y productos personalizados, y tenemos un solo producto. Así que este solo producto, como puedes ver, puedo crear aquí otro producto. Creo un solo producto aquí y ves, ya tengo mi botón y aquí puedo elegir mi producto. Así que va a sacar eso de Shopify, así que por ejemplo, elijo este. Y ves que puedo elegir solo uno porque lo he limitado a uno. Puedes ver que todo aparece en tiempo real. Y Remix es también del lado del servidor, así que todo va directamente a live aquí. Y así, tengo mi descripción. Oops, y mis AirPods se están yendo. Y puedo invertir el diseño también si quiero. Así que, vale, esto desencadena algo de CSS. No es mágico, no está dentro del componente. Así que, cómo es esto, así que esta es la parte que verán los editores. Si tienes un equipo de contenido, solo usarán eso. Y aquí en el banner personalizado, tengo tres componentes de banners. Tienen un nombre de componente de varianza que contendrá tres banners. Y si inspecciono este componente, veo que es de nuevo un campo de bloque. Pero aquí solo he permitido que se inserten componentes de banners. Vale. Así que, oops. Hagamos otro. Ves, puedo tener otros banners aquí. Vale, si voy a la página. Vale, banners. Y es lo mismo para la lectura personalizada. Tenemos pre-varianzas y aquí la variante tiene que ser una lectura privada.

Tenemos pre-varianza y aquí la variante tiene que ser una lectura privada. Ahora, si inspecciono mis banners. Puedo ver que tengo un campo para el título, para el texto y para la imagen, pero también tengo un campo de tipo de usuario y por defecto está vacío. Pero aquí tengo otro componente que tiene el tipo de usuario original y aquí la imagen y el título y el contenido son diferentes y aquí tengo un tipo de usuario performance y el mismo principio para la cuadrícula personalizada. Tengo los productos que puedo elegir aquí y tengo un tipo de usuario que está vacío por defecto y tengo dos otros componentes que tienen un tipo de usuario performance y tipo de usuario original.

Vale. Entonces, ahora veamos cómo estos, como, estos bloques están construidos. Así que los simples, el banner uno, tenemos el esquema, título de texto y el tipo de usuario que es un campo de opción única y vale, el banner personalizado, como estaba diciendo, es un campo de bloque llamado variante, lo mismo para la cuadrícula personalizada y con una limitación para permitir sólo componentes específicos. Veamos el producto único. Así que, en el producto único, tenemos un titular, una descripción y un diseño, digamos si queremos izquierda o derecha y tenemos otro campo que es un campo de tipo de producto, un producto, no, un campo de tipo de complemento y lo hemos llamado producto. Así que, si lo abro aquí, Storyblok, es extensible y podemos construir cualquier complemento tan pronto como tengas una API, puedes construir un complemento, pero este, el de Shopify, BigCommerce y otras plataformas están disponibles y preconstruidas para ti en ciertos planes, así que el plan de Teams para Shopify y el plan Enterprise para Storyblok y otros. Pero también puedes construir tus propias extensiones de complementos si usas una plataforma que no hemos creado el complemento. Así que, para conectarlo, usamos aquí en la lista desplegable, elegimos SB Shopify, y conectamos aquí el punto final y los tokens que obtienes de Shopify, y aquí he limitado a un producto y selecciono sólo producto. También podríamos elegir categoría aquí, pero aquí es para producto. Así que esto es para el producto único, y para la lectura del producto es el mismo principio, tenemos el tipo de usuario, y tenemos el producto pero aquí tenemos un límite de cuatro productos. Vale, así es como funciona en la oficina de back. Y ahora en el código, así que continuamos aquí. Así que hemos almacenado la cookie de tipo de usuario, que es el manejador de la colección, y ahora creamos el componente de banner. Y en este componente de banner, Vale, esto es muy simple porque obtenemos del blog, los tipos de usuario, el UID, los títulos del texto y la imagen, y pasamos StoryblockEditable, y luego tenemos todos los data para construir nuestro banner con JSX y Tailwind. Y aquí pasamos el tipo de usuario en el enlace a, así que enlazará a la colección correcta. Así que si es original board, será colección slash original boards. Vale. Así que esto es para los banners. Y ahora creamos un componente de banner personalizado. Así que aquí importamos get cookie, y creamos el tipo de usuario obteniendo la cookie con get cookie. Y luego obtenemos la variante filtrando las variantes de bloque. Así que elegimos una que tenga el mismo tipo de usuario. Y a partir de ahí, mapeamos, sólo hay una variante, pero es un array. Así que necesitamos usar de nuevo, una función de mapeo y usar el componente Storyblok. Y a partir de ahí, mostrará el banner correcto o el árbol de productos correcto dependiendo de la navegación del usuario si ha visitado el tablero de performance o el tablero original. Y luego necesitamos pasar todos estos componentes a Storyblok init en el archivo raíz, ¿vale?

¿Alguna pregunta? No, nope. ¿Está todo bien para todos? Mirko, ¿finalmente has resuelto Thomas? Sí, sí, sí. Sí, Thomas, ¿sí? El problema era simplemente ejecutar el comando yarn dev porque lo cerré antes cuando instalo las dependencias y ahora ejecuto un yarn dev y luego ejecuto de nuevo el comando local host one. ¿Así que funciona ahora? Sí, sí. Vale, genial. Vale, genial. Así que aquí, si voy a la... Vale aquí, acabo de hacer los banners en esta rama. Así que ahora, vale, vamos a crear los componentes de Shopify en el código. Así que vamos a la rama siete componentes de Shopify. Vale. Así que aquí, creé una carpeta de Shopify en la de bloques. Esta es mi forma de hacer las cosas. De nuevo, puedes hacerlo de manera diferente, pero creo que es útil. Y, oops. Así que aquí, creo el producto único. Vale. Así que obtengo de los bloques tu UID, los titulares, el diseño, la descripción y los productos que aquí renombro como el producto. Porque voy a mostrarte, no tengo todos los data que necesito de Storyblok. Así que de Storyblok, si voy aquí, vale, tengo mi campo de producto aquí, mi componente de producto y tengo mis items dentro, bueno, sólo un item. Y a partir de ahí, obtengo los IDs, los nombres, los tipos, la imagen, pero esta imagen es pequeña, es 140 así que no quiero usar esta y la descripción, pero quiero enlazar este producto así que necesito el manejador y necesito una imagen más grande. Así que necesito mapearla con todos los productos. Así que para eso, no lo hice de la mejor manera, tengo que corregir eso porque para eso, lo que he hecho en la raíz de la página, en la raíz de splatch aquí, he consultado todos todos los productos. Creo que podemos consultar sólo el correcto con una variable pero por el momento lo he hecho así, tengo que corregir eso y así, obtengo todos mis productos en mi en mi cargador aquí. Vale así que aquí productos comienzan desde la consulta de productos y devuelvo aquí los nodos de productos en mi devolución de mi cargador. Así que a partir de ahí en mi producto único, puedo obtener todos los productos de used loader data. Y luego encuentro un filtro el producto que tiene el mismo ID porque ambos tienen un ID. Así que nos da un parámetro para filtrar y obtener el producto que corresponde a este. Y a partir de ahí, obtengo el manejador y las variantes y obtengo mi imagen a partir de ahí. Y a partir de ahí, tengo todos los data para construir mi producto único aquí. Vale. ¿Alguna pregunta sobre eso? ¿Es sólo porque te falta los data del complemento? ¿No te da todos los data? Sí. El complemento extrae data de Shopify pero no todos los data. Así que necesitamos obtener los data que faltan y mapear las cosas con eso. Pero creo que, sí, necesito hacerlo de otra manera porque estoy cargando demasiados data. Más, no es el sitio web en vivo, es una demostración. No, no, no, no. Lo entiendo, lo entiendo. Pero con 10,000 productos no funcionará, creo, ¿supongo? ¡Sí! No, no. Lo sé, por eso lo digo y sí.

Es una buena demostración, así que gracias. Gracias. Vale. Así que lo arreglarás, estoy seguro. Así que sí. Vale. Vale, así que esto está aquí. Y por supuesto pasamos este componente a Storyblok Init. Mismo principio con el ProductGrid. Obtenemos de nuevo todos los productos. Así que, vale. Supongo que son mis productos del bloque y todos los productos. Y luego mapeo alrededor de mis productos de Storyblok y aquí lo filtro de nuevo por ID. Y luego obtengo todos mis data para mostrar mi cuadrícula de productos incluso con el botón de compra del producto. No me sorprende, no puse un botón para comprarlo, pero podría, sí, tenía el botón de añadir al carrito también así que podemos añadir directamente al carrito aquí. Así que, y luego lo paso de nuevo a la ruta aquí. Así que ahora tengo todos mis componentes de Storyblok aquí. Vale, y luego en la cuadrícula personalizada de nuevo, obtengo la cookie, así que el tipo de usuario, y filtro mis variantes de la misma manera, como para el banner personalizado. Y luego mapeo alrededor de mis componentes y muestro el correcto. Y eso es todo y voila, tenemos todo. Así que, gracias. Así que avísame si tienes más preguntas, críticas también por favor dime como esta masterclass, si puedo mejorar. Realmente aprecio tus comentarios. Bueno, muchas gracias. Fue muy revelador.

Correcto. Todavía estoy viendo un problema que tenemos integrando Storyblok con, por ejemplo, tu página de detalle del producto, porque ya hay una ruta que está ahí. No está en Storyblok. Quieres integrar componentes de Storyblok en el producto y necesita estar solo en esa página. Así que es bastante difícil entender cómo hacer eso.

¿Qué explicaría mejor? Así que tienes una ruta que tiene productos y quieres que se muestren individualmente usando el plugin de Shopify o algo así? Sí. Bueno, por ejemplo, estás en una página de detalle del producto, usas seleccionado un panel de control y vas a esa página. Así que esa página vive, no vive en Storyblok. Y entonces, no hay página para eso pero quiero poner componentes de Storyblok en esa página. Así que, por ejemplo, quiero un banner en la página de detalle del producto. Pero esa página no existe en Storyblok.

Vale, sí, quieres decir que si es como si estuviera aquí, vale, y que quiero mostrar un banner, ¿verdad? Sí, que los clientes colocaron en ese producto específico. Así que necesitas. Sí, hiciste lo contrario porque aquí tenemos una página de Storyblok y mostramos, sacamos cosas de Shopify y mostramos y aquí quieres lo contrario. Tengo que pensar en ello. ¡Oh! Quizás deberíamos trabajar al revés, pero entonces tendrías que alimentar a Storyblok con todas las páginas de productos. Sí, sería complicado porque esto es dinámico, hicimos el manejador del producto.

Sí. Entonces creo que es el camino correcto. Así que necesitamos insertar un componente aquí. Estoy seguro de que no es tan complicado, pero después de dos horas haciendo la masterclass, mi cerebro no está trabajando tan rápido. Entonces digamos, pero por supuesto estoy en Remix. Entonces necesito, estoy en esta ruta y necesito un banner. Entonces necesito obtener data de Storyblok aquí. Entonces en Remix, entonces en next, creo que esto sucederá en las props estáticas o algo así. Aquí sería en el manejador. Necesitamos, sí. Necesitamos cargar los data en el manejador aquí. Pero efectivamente, no sé si sería editable en Storyblok en este caso. Eso es lo que pasa. ¿Qué quieres decir? Entonces, necesito, está bien, tengo mi cargador. Entonces sí, necesitas obtener los data de Storyblok. Entonces aquí debería hacer como hago. Debería, aquí, por ejemplo, está bien. Debería usar la API get Storyblok. Y obtener este banner en mi manejador de producto. Y una vez que lo tengo, entonces aquí en mi cargador, y en ese caso sería en get static crops, creo. Entonces puedo mostrarlo en mi página. Pero no creo que sea editable. Lo verás en el editor visual, pero no sé si puedes editarlo directamente en el editor visual. Pero, sí, seguro. Podría recuperar los data, así que eso no sería un problema. Pero hacerlo editable, eso sería un problema. Sí, eso es un problema. Sí. Sí. OK. Esa es una pregunta interesante. Eso explicaría por qué mi aplicación. Sí. OK. Esa es también una respuesta. OK. O estoy pensando, ¿podemos introducir un producto en una página, en este caso, haciendo una página de productos y cargando los data para los productos dentro de la página. Pero hacerlo una página, hacer un componente de Storyblok, pero cargando los data desde la página. No con el plugin, sino con Shopify directamente. Y entonces estoy pensando en eso ahora. Sí. Sí. Pero sí, tal vez hacer una página que contenga dinámicamente el manejador del producto. No lo sé. Algo así. Pero creo que, sí, tienes que estar dentro de la página en este caso. Pero es un problema interesante. Básicamente, es porque BigCommerce tiene esa característica en su CMS existente. Entonces puedes ir a una página de detalles y poner pequeños widgets en ese producto específico. Así que siempre es un cliente. Sí, pero ya tenemos eso. Así que lo queremos de vuelta cuando nos volvemos headless. Y esa es la historia detrás de eso. Sí. No, pero es interesante. Es interesante. Entonces sí, sí, sí, sí. Porque sí, lo que pasó en DevRel es que construimos esta demo, pero todo al construir proyectos yo mismo para clientes, si tengo dichos proyectos, o al ver a socios teniendo casos de uso que vemos los casos reales y lo que podemos hacer cuando pensamos en cosas. Porque hay tantas maneras de usar algo que no puedes pensar en todo. Así que es un problema interesante. Sí. Nuestros clientes siempre nos sorprenden con pequeñas cosas como esa.

Vale. Vale. ¿Algo más, las demás personas, si tienen preguntas, comentarios, lo que sea? Estoy aquí antes de irme. Todavía tenemos una hora si puedes preguntarme cualquier cosa. Bueno, tengo que irme a casa.

Vale, vale. Para el tiempo de la masterclass, todavía tenemos una hora. Sí, bueno, muchas gracias. Gracias a ti y gracias, Peter, por ser la cara y la persona que habla por mí porque realmente no me gusta cuando es tres en el vacío. Así que fue muy agradable conocerte. Soy un desarrollador raro, me gusta hablar. Sí, como yo, como yo. Soy super hablador, super extrovertido. Y no tomo café. No me gustan los rompecabezas. Realmente, soy un creativo. Entonces, sí, no me gusta tener a los desarrolladores, porque sabiendo todo eso.

OK, que tengas una buena noche. Y espero que construyas, para ti es cierto, pero para las demás personas que lo usarán y construirán cosas con hydrogen. Gracias, gracias. Gracias. Gracias. Adiós.