Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix

Rate this content
Bookmark

I. Introducción

- Visión general de Shopify Hydrogen y Remix

- Importancia del comercio electrónico sin cabeza y su impacto en la industria


II. Configurando Shopify Hydrogen

- Instalando y configurando Hydrogen con Remix

- Configurando la estructura del proyecto y los componentes


III. Creando Colecciones y Productos

- Creando colecciones y productos utilizando los componentes React de Hydrogen

- Implementando un Carrito de Compras

- Construyendo un carrito de compras utilizando los componentes incorporados de Hydrogen


VI. Construyendo la página de inicio con Storyblok

- Clonando el espacio y explicando cómo funciona

- Implementando Storyblok en el repositorio

- Creando los componentes Blok

- Creando los componentes Shopify

- Implementando personalización

104 min
17 Oct, 2023

Comments

Sign in or register to post your comment.

AI Generated Video Summary

La masterclass cubrió varios temas, incluyendo la construcción de una página de inicio con Hydrogen y Storyblok, consultando datos utilizando storefront.query y storefront.mutate, construyendo índices de colección y detalles, añadiendo artículos al carrito y mostrando datos del carrito, conectando Storyblok y añadiendo un servidor de desarrollo, configurando entornos y creando rutas de página, utilizando Storyblok y creando componentes de página, personalizando la página de inicio basada en el comportamiento del usuario, integrando Storyblok con componentes de Shopify, y observaciones finales.

1. Introducción a Hydrogen y Construcción de la Página Principal

Short description:

Estamos aquí hoy para presentar el bucle __ detrás de React. Hoy, estamos trabajando con Spana y Omikasa para escuchar de ellos. Hydrogen se construye sobre Remix con algunos paquetes y una integración de paquetes. El sitio web que vamos a construir es la página principal, que se construye con hydrogen y Storyblok. Incluye un banner, una cuadrícula de productos y un solo producto. Se introduce la personalización para mostrar información diferente basada en el comportamiento del cliente. La masterclass incluye instrucciones sobre cómo clonar el repositorio, crear el archivo .env y ejecutar npm install.

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.

2. Uso de la Plantilla Hello World y Consulta de Datos

Short description:

En esta parte, el orador discute el uso de la plantilla Hello World y cómo construir sobre ella. Explican la estructura básica de un remix y cómo importar layouts y envolver outlets. El orador también introduce el uso de storefront.query y storefront.mutate para obtener y manipular datos. Mencionan algunos desafíos con la plantilla Hello World y sugieren referirse a la documentación. Luego, el orador guía a la audiencia en la creación de una consulta para obtener el índice de la colección y recuperar los datos necesarios en el componente. Ofrecen asistencia e instrucciones para probar el ejercicio. La parte concluye con una mención de la rama de las colecciones.

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.

3. Creación del Índice de Colección y Detalles

Short description:

En esta parte, el orador proporciona el código para crear un índice de colección raíz y escribir una consulta de colección. Explican el uso de la consulta de la tienda para recuperar datos de la colección del servidor y demuestran la recuperación de datos en un componente utilizando el gancho de datos del cargador. El orador también presenta el componente de tarjeta de colección y la biblioteca de react de hydrogen de compras. Discuten los componentes para mostrar la moneda, el precio y un botón de Comprar Ahora. El orador menciona que los detalles de la colección se construirán a continuación, incluyendo la paginación y la información del producto.

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.

4. Construcción de la Colección y Visualización del Producto

Short description:

En esta parte, el orador explica cómo pasar una colección como prop y cómo implementar la paginación. También discuten la creación de una ruta para el handle del producto y la recuperación dinámica de los datos del producto. El orador demuestra cómo devolver datos específicos desde el cargador y la importancia de filtrar los datos en el lado del servidor. Mencionan la necesidad del dominio de la tienda para el botón de pago de la tienda. La parte concluye con el orador mencionando el próximo trabajo en la construcción de la página principal con Storyblok y la creación del carrito.

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.

5. Añadiendo Artículos al Carrito y Mostrando Datos del Carrito

Short description:

Para agregar artículos al carrito, inicialice el Kart con Create Kart Handler en server.js. Importe el componente kartForm para crear un botón de añadir al carrito. Defina los productos para agregar al carrito con la línea, incluyendo la cantidad y el ID de la variante. Devuelva el formulario del carrito para indicar la ruta donde se procesará. Coloque el botón del carrito en la página de detalles del producto. El botón de eliminar del carrito funciona de manera similar. En la ruta del carrito, use una declaración switch para ejecutar las funciones de añadir líneas al carrito o eliminar líneas del carrito en función de la acción del carrito. Se muestra un componente de carrito vacío si el carrito está vacío. Para mostrar los datos del carrito, cree un cargador en el archivo de ruta. Esto se utilizará globalmente para leer datos en el encabezado y la ruta del carrito.

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...

6. Manejo de SEO y Creación de Componentes de Carrito

Short description:

En el archivo raíz, se utiliza un componente SEO para manejar el SEO. El nombre de la tienda se utiliza para el título SEO, y la descripción de la tienda se utiliza para la descripción meta. El componente SEO puede ser sobrescrito en otros archivos, como el manejador de producto. Los datos del carrito se obtienen utilizando la utilidad defer de Remix para hacer streaming de datos. El icono del carrito se crea utilizando los datos del carrito y se muestra en el componente de encabezado. El icono del carrito puede acceder a los datos a nivel de componente, lo que no es posible en Next 12. La funcionalidad de suspense y espera permite que la página se cargue y luego muestre el resto de los datos del carrito cuando estén listos. Los componentes del carrito incluyen elementos de línea y un botón para eliminar del carrito. El componente de elementos de línea del carrito muestra todos los elementos de línea del carrito utilizando un componente de conexión aplanado de React Hydrogen.

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.

7. Mostrando Datos del Carrito y Explicando useMatches

Short description:

Usamos un componente de React Hydrogen como una conexión aplanada para mostrar cada elemento de línea. Los resúmenes del carrito muestran el total, y el botón de pago enlaza con la URL de pago. Obtenemos los datos del carrito utilizando use matches en la ruta del carrito. Si hay artículos en el carrito, mostramos el componente de contenido del carrito; de lo contrario, mostramos el componente de carrito vacío. El gancho use matches nos permite acceder a los datos de la ruta actual y de otras rutas. Proporciona información sobre todas las rutas hasta la actual.

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í.

8. Creando una Cuenta en Storyblok

Short description:

Ahora tenemos todo el producto de Shopify funcionando y queremos construir. Crea una cuenta en Storyblok. Una vez que hayas iniciado sesión, haz clic para crear un espacio. Obtén una copia local, crea contenido y explora la biblioteca de bloques. Es una parte fácil sin código. Todos lo entienden rápidamente.

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.

9. Conectando Storyblok y Agregando el Servidor de Desarrollo

Short description:

Para conectar Storyblok, obtén el token de vista previa desde la API de configuración e instala el complemento SDK de react. Inicia una aplicación de Storyblok y pasa el token de acceso. Mapea los componentes de React con los componentes de Storyblok. Storyblok se basa en componentes. Peter, una agencia de los Países Bajos, utiliza Storyblok para plataformas de comercio electrónico. Son socios y tienen buenos contactos. Agrega el servidor de desarrollo a Storyblok en la configuración y el editor visual. Configura la conexión con el espacio y agrega el localhost 3010 como HTTPS.

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.

10. Configurando el Entorno y Creando Rutas de Página

Short description:

Hemos configurado el entorno predeterminado con localhost 3010 y un entorno en vivo con Deploy Universal. Configuramos la entrada con la ruta real como una barra diagonal. Para habilitar HTTPS, agregamos un proxy HTTPS. En VS Code, podemos usar la opción Puertos para exponer localhost al público. También podemos usar un proxy SSL local para HTTPS. Creamos una ruta splat para las páginas, que se mapea a cualquier URL no coincidente con otras rutas en el mismo directorio.

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.

11. Uso de Storyblok y Creación de Componente de Página

Short description:

En mi ruta, importo la API Get story block y recupero la historia de UseLoaderData. El cargador recupera los datos de la API get story block utilizando el slug de los parámetros. La función useStoryBlockState carga el puente JavaScript y permite el editor visual. El componente Storyblok muestra los componentes de forma dinámica y condicional. El componente de página tiene un campo de cuerpo que contiene una matriz de componentes, que se muestran utilizando el componente de bloque de historia. El editable de bloque de historia permite la edición directa de componentes en tiempo real.

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í.

12. Personalizando la Página Principal con el Comportamiento del Usuario

Short description:

Storyblok editable permite marcar los componentes de React como editables para una fácil personalización. A continuación, personalizamos la página principal en función del comportamiento del usuario almacenando información de la colección en una cookie. Se crea el componente de banner y se puede personalizar en la oficina de back. Los editores pueden elegir productos de Shopify y personalizar los diseños y CSS. Los componentes de banner personalizado y productos personalizados se utilizan para mostrar el contenido personalizado.

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.

13. Componentes de Shopify y Mapeo de Datos

Short description:

Tenemos pre-varianza y aquí la variante tiene que ser una lectura privada. En la oficina de back, los simples, el banner uno, tienen el esquema, título de texto y el tipo de usuario. El banner personalizado y la cuadrícula personalizada tienen un campo de bloque llamado variante. El producto único tiene un titular, descripción, diseño y un campo de tipo de producto. Para conectar el complemento de Shopify, se elige la opción SB Shopify de la lista desplegable, y se conectan el punto final y los tokens de Shopify. El tipo de usuario y los campos de producto se utilizan en la lectura del producto. Los datos faltantes del complemento se obtienen consultando todos los productos. El componente de producto único recupera los datos necesarios para construir el producto. El complemento extrae datos de Shopify pero no todos los datos, por lo que se obtienen y mapean datos adicionales. Cargar demasiados datos puede ser un problema, especialmente con un gran número de productos.

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í.

14. Uso de Storyblok y Cuadrícula Personalizada

Short description:

Gracias por la demostración. Pasamos el componente a Storyblok Init, incluyendo el ProductGrid. Obtenemos todos los productos, los filtramos por ID y mostramos la cuadrícula de productos con el botón de compra. En la cuadrícula personalizada, filtramos la varianza y mostramos los componentes en consecuencia. Agradecemos tus comentarios.

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.

15. Integrando Storyblok con la Página de Detalle del Producto

Short description:

Todavía estoy viendo cómo integrar Storyblok con la página de detalle del producto. El desafío es que la página ya existe fuera de Storyblok, pero quiero agregar componentes de Storyblok a ella. Por ejemplo, quiero agregar un banner a la página de detalle del producto. Es un poco complicado averiguar el mejor enfoque. Podríamos trabajar al revés y alimentar Storyblok con todas las páginas de productos, pero eso sería complicado debido a la naturaleza dinámica del manejador del producto.

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.

16. Integrando Storyblok y el Manejador de Producto

Short description:

Necesito insertar un componente aquí para obtener datos de Storyblok en Remix. Puedo recuperar los datos utilizando la API get Storyblok en mi manejador de producto. Sin embargo, hacerlo editable en el editor visual sería un problema. Otra solución podría ser crear una página que carga dinámicamente los datos del manejador de producto desde Shopify. Es un problema interesante porque BigCommerce tiene una característica similar en su CMS. Queremos recuperar esa funcionalidad cuando nos volvemos sin cabeza.

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.

17. Comentarios Finales y Despedida

Short description:

¿Algo más? Estoy aquí por otra hora. Gracias a ti y a Peter por ser la cara de la masterclass. Soy un desarrollador extrovertido y hablador. Que tengas una buena noche y disfruta construyendo con Hydrogen. Gracias.

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.

Watch more workshops on topic

React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
WorkshopFree
- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
Node Congress 2022Node Congress 2022
34 min
Server-side Auth with Remix, Prisma, and the Web Platform
In this talk, we'll get a live coded demo of building custom hand-rolled authentication. When you have the right tools (and we do), authentication can be quite simple and secure. This is more (and better) than just: "Install this library and you're good to go." When we're done we'll have our own auth code that can evolve with our ever-changing requirements without a need to learn some library-specific APIs. We'll be leveraging the Web Platform the way it was meant to be done to give us simple and secure server-side authentication for the web.
You can check the slides for Kent's talk here as well as demo code.