E-Commerce a la Velocidad del Rayo: Remixa tu Tienda con Shopify Hydrogen

Hola, soy Alessandra Sfalato, soy ingeniera de relaciones con desarrolladores en Storyblok. Soy francesa, como puedes escuchar por mi acento, y vivo en Madrid. Así que hoy mi tema es cómo puedes remix tu tienda con Shopify hydrogen para construir un e-commerce ultrarrápido. Bueno, tengo al público delante, soy un público delante, así que no puedo preguntarte quién ya está usando, no sé nada al respecto, pero espero que aprendas y te guste con mi charla. Así que en la primera parte de la charla, cubriremos los conceptos básicos del e-commerce, es importante, y en la segunda parte presentaremos Shopify hydrogen y sus características, y finalmente en la gran parte de la charla, hablaremos, exploraremos el código de una tienda personalizada construida junto con Hydrogen.

Así que el comercio headless significa la separación del front-end y el back-end, y esto se logra gracias a una architecture impulsada por API, que permite una experiencia de front-end flexible y personalizable. En comparación con el monolítico, headless ofrece muchas ventajas, venta omnicanal, tiempo de comercialización más rápido, mejor performance, que conduce a un mejor SEO, personalización y personalización, y ciertamente mucho más. Sin embargo, puede venir con un aumento de la complejidad del desarrollo.

Así que imagina una plataforma de e-commerce que ofrece todos los beneficios del comercio headless mientras minimiza la complejidad del desarrollo. Aquí es donde entra Shopify Hydrogen. Así que Shopify Hydrogen es un nuevo marco diseñado para simplificar el desarrollo de tiendas headless Shopify. Incorpora las mejores prácticas integradas y está construido sobre Remix. Así que de nuevo, no puedo preguntarte quién conoce Remix, pero para el que no conoce Remix, es un conjunto completo de frameworks React, que se basa en web standards y crea una gran experiencia de desarrollador porque trabajas con web standards, por lo que hace todo más sencillo. Y también puedes hacer sitios web realmente escalables y rápidos. No lo conocía antes de aprender Hydrogen y al aprender Hydrogen, me enamoré de Remix y ahora es realmente mi marco de referencia.

Así que ofrece, bueno, Hydrogen, no Remix, una architecture basada en componentes que aprovecha Remix para mejorar el performance y también proporciona una integración perfecta con las API de Shopify. Así que ahora es el momento de hacer una deep dive en el código de un proyecto Shopify Hydrogen. Así que primero crearemos el proyecto, luego veremos cómo obtener y mutar data en Hydrogen, cómo construir la colección y los productos, cómo manejar el SEO y cómo construir un carrito.

Así que primero usamos el CLI de Shopify para crear el proyecto con NPM-created Shopify Hydrogen latest, y esto creará para ti en dos minutos un sitio web de comercio electrónico con todas las funciones. Para esta sesión utilizaremos el comando de plantilla hello world que proporciona un repositorio barbone para que realmente podamos explorar lo que estamos construyendo, pero veamos lo que obtenemos con este comando en solo dos minutos.

Así que este es el sitio web que obtienes con eso, así que estamos fuera. ¿Qué pasó, oh sí tengo que lanzar el desarrollo así que npm run dev. Vale, así que ahora deberíamos estar bien. Vale, así que tenemos datos simulados, así que tenemos esta página de inicio, tenemos todos los productos, tenemos los productos individuales con opciones, podemos añadirlos al carrito, podemos aplicar descuentos, podemos hacer el checkout, podemos iniciar sesión, podemos buscar. Así que realmente tenemos todo y podemos verlo en el código de la tienda aquí. Tenemos todas las rutas posibles, login, logout, recover, register, reset, direcciones, pedidos, colecciones, productos, búsqueda. Así que puedes usar eso y personalizarlo para hacer tu tienda o explorarlo para aprender. Pero he utilizado la plantilla Hello World para construir este pequeño y bonito sitio web sobre surf. Así que esta es la página de inicio, la página de inicio está construida con Shopify y Storyblok, mi headless CMS favorito. Así que aquí tenemos un banner que viene del CMS y aquí tenemos una cuadrícula de productos que viene de Shopify y aquí productos individuales donde la imagen se extrae de Shopify y estos pequeños textos que se extraen del CMS.

Por lo tanto, podemos mezclar y combinar Storyblok y los datos del CMS data y crear narraciones. Te mostraré después cómo se construye esto. Y ahora, si hago clic en el enlace del tablero, tengo acceso a mis entradas de la colección. Así que tenemos el tablero de rendimiento performance y la colección original del tablero. Entonces, si hago clic en una colección aquí en el tablero de rendimiento performance, tengo acceso a los detalles de la colección con un banner aquí y todos los productos de esta colección. Y luego puedo ir a mi producto individual. El botón de Shop Pay es un botón de compra ahora y luego puedo agregar al carrito y aquí puedo ver los artículos en mi carrito. Y puedo ir a mi carrito. Puedo eliminar artículos del carrito y puedo pagar. Y aquí todo está funcionando. Y si vuelvo a mi sitio web y a mi página de inicio, puedo ver que mi banner ha cambiado. Ahora está presentando el tablero de rendimiento performance y también está mostrando solo el tablero de rendimiento performance en esta cuadrícula de productos. Esto se debe a que he implementado cierta personalización. Entonces, dependiendo del comportamiento de mi usuario, y aquí he navegado al tablero de rendimiento performance, serviré una página de inicio diferente. Y como he navegado al tablero de rendimiento performance, asumo que mi usuario está interesado en el tablero de rendimiento performance. Así que sirvo eso, y aquí voy directamente al tablero de rendimiento performance.

OK, entonces vamos a explorar el código de mi, de este pequeño sitio web. Así que tengo un archivo server.js que es el punto de entrada. Y he creado algunas rutas. Así que esto es para las páginas. Esta es la ruta del carrito, una ruta de índice de colección que muestra mis entradas de colección, la ruta de manejo de colecciones que muestra los detalles de la colección de forma dinámica, el manejo del producto que muestra los detalles del producto de forma dinámica también. El archivo raíz es la raíz principal. Y aquí tengo mis componentes. Así que encabezado, pie de página, diseño, los componentes comunes. Y aquí tengo todos los componentes del carrito y en bloques son los componentes que vienen de Storyblok y estos son los que vienen de Storyblok y Shopify.

Volvamos a nuestras diapositivas. OK, así que ahora veamos cómo obtener y mutar data en Hydrogen. Hydrogen proporciona el cliente de la tienda para enviar consultas y mutaciones desde los cargadores y acciones de REMIX. Así que los cargadores de REMIX son funciones que obtienen la data del servidor, y las acciones de REMIX son funciones que realizan mutaciones y envían data al servidor. Así que para eso, vamos a crear e inyectar el cliente de la tienda en server.js. Así que veamos eso en el código. Así que aquí está server.js. Así que tenemos este create storefront client. Así que esto es cuando creas tu tienda con el CLI. Todo eso se proporciona excepto esta política de security de contenido que tuve que personalizar, a la que tendrás acceso en el código también. Así que tenemos esta función create storefront client, y la usamos para crear nuestra tienda y pasar todos nuestros tokens aquí. Y luego pasamos esta tienda a get load context. Así que nuestra tienda estará disponible en nuestro contexto global en nuestros cargadores y acciones. Y por cierto, tienes aquí el repositorio si quieres cogerlo. Y aquí tendrás todos los detalles para reproducir este sitio web. OK, así que pasamos la tienda al contexto. Siguiente. Y desde allí, podemos llamar al cliente de la tienda en los cargadores y acciones. Así que usaremos storefront.query para enviar consultas a nuestra tienda y cargar data. Usaremos eso para obtener la data de nuestros productos y colección, y también de nuestro carrito. Y usaremos storefront.mutate para realizar mutaciones de GraphQL en RemixAction.

Así que lo utilizaremos para todas nuestras operaciones de carrito. Ahora veamos cómo podemos crear los productos y las colecciones. Como les mostraba en el informe, hemos creado este archivo para mostrar el índice de la colección para mostrar las entradas de la colección, el handle de la colección para mostrar el título, la descripción, y los productos paginados de la colección, y los productos que se manejan para mostrar los detalles del producto. Así es como funciona. Esto es para los detalles de la colección. Tenemos nuestra consulta GraphQL, y solicitamos aquí el ID, el título, el handle y la imagen que necesitamos para mostrar en nuestras entradas de colección.

Y luego en nuestra función loader, pasamos esta consulta a context storefront.query. Y luego podemos, así que esto sucedió en el servidor. Esto está en el mismo archivo. Y aquí en nuestro componente, podemos recuperar nuestros data. Así que nuestras colecciones con el hook, es un hook de remix use loader data. Y luego solo tenemos que mapear nuestras colecciones para mostrarlas. Mismo principio para los detalles de la colección y los detalles del producto. Hacemos la consulta, la pasamos a storefront.query y la recuperamos con use loader data.

También tenemos un hydrogen React que es una biblioteca de componentes de React, hooks y utilidades que se pueden usar con cualquier framework o aplicación de react. Así que por ejemplo, si tienes un sitio web de Next.js, puedes usar totalmente estos componentes de React. Aquí algunos ejemplos, el componente de imagen obtiene la imagen del producto como una imagen de Shopify muy fácilmente. El componente de dinero mostrará el precio y la moneda muy fácilmente también. Y el botón de compra rápida mostrará un botón de comprar ahora solo pasando el dominio de la tienda. También hay muchos componentes para el carrito. En nuestro caso, vamos a estar en el carrito del lado del servidor. Así que no los elegiríamos porque el lado del servidor es más eficiente, pero si quieres usarlos, ve a la documentation y luego puedes implementar un hydrogen en cualquier framework de React.

Y ahora es el momento de construir un carrito. Entonces, vaya, estoy perdiendo mis ropas de cabello. Entonces, las operaciones del carrito podrían hacerse en el lado del cliente, pero esto causaría una degradación del performance debido al código adicional entregado al navegador. Y también afectará la experiencia del cliente ya que los flujos críticos no serán accionables hasta que JavaScript haya terminado de cargar. Pero Remix tiene una poderosa API de mutación que utiliza web standards como elemento de formato y HTTP. Así que podemos implementar un flujo de trabajo tradicional del lado del servidor manteniendo los beneficios de la user experience del lado del cliente. Y también permite una mejora progresiva porque nuestro carrito puede funcionar totalmente sin JavaScript. Así que construyamos un carrito del lado del servidor con performance.

Entonces, primero necesitamos inicializar un carrito creamos un manejador de carrito. Esto está en nuestro archivo server.js dentro del manejador de fetch. Creamos una instancia de carrito utilizando el manejador de creación de carrito y esta utilidad es muy útil porque nos permite interactuar sin problemas con la API de la tienda. Así que creamos nuestro carrito con una configuración esencial como la tienda y los métodos para obtener y establecer el ID del carrito. Luego pasamos nuestra instancia de carrito a get load context. Así que esto asegura que nuestro carrito es accesible y puede ser manipulado según sea necesario. Así que con este paso, nuestro carrito hydrogen está todo configurado y listo para rodar.

Ahora que tenemos un carrito, necesitamos añadir productos a nuestro carrito. Así que para eso vamos a crear nuestros dos botones de carrito. Primero importamos el componente de formulario de carrito que abstrae mucha complejidad. Y déjame decirte que he dado esta masterclass varias veces hace unos meses y este componente de formulario de carrito no existía. Así que estaba haciendo todo eso manualmente. Así que el formulario de carrito hace las cosas realmente más fáciles. Bueno, no para mí porque lo descubrí. Hace una semana y tengo que hacer esta masterclass de nuevo unos días después y tengo que reconstruir mis diapositivas, mi proyecto para practicar todo eso. Así que no fue fácil pero eso muestra lo rápido y bueno que hydrogen está evolucionando y trayendo cosas para hacer la vida del desarrollador más fácil.

Así que definimos qué añadir al carrito con las líneas, especificando el artículo del ID de la mercancía pasando el ID de la variante y la cantidad. Y tenemos un atributo de raíz donde definimos dónde se procesará el formulario. Así que aquí en la raíz del carrito y en el atributo actual, definimos la acción. Aquí es lines had. Y en el atributo de entradas, pasamos nuestras líneas. Así que los productos que queremos añadir. Nuestro botón está anidado dentro del formulario de carrito. Así que esto asegura que el click se traduce en añadir artículos al carrito. Gracias a la acción de lines had y toda esta acción está dirigida a nuestra raíz de carrito. Luego colocamos nuestro botón de añadir al carrito en nuestra página de producto y hay un botón de shop pay. Luego también hacemos un botón de eliminar del carrito que funcionará de la misma manera, pero aquí las líneas son los IDs de las líneas que representan los productos a eliminar. Y la acción es lines remove. Aquí añadimos un icono dentro de un botón y este botón se colocará en nuestro artículo de carrito y ofrece la posibilidad de eliminar el producto del carrito.

Bueno, así que ahora tenemos que configurar esto en la raíz del carrito, así que cart.jsx.

Y aquí obtenemos el carrito del contexto, luego obtenemos los datos del formulario de la solicitud y los pasamos al formulario del carrito, obtenemos la entrada para capturar nuestra acción y entrada desde allí. Configuramos una declaración switch para gestionar estas acciones del carrito. Así que dependiendo de la acción, activamos la diferente función del carrito, añadir, eliminar o actualizar líneas. Y luego un pequeño pero crucial detalle es el ID del carrito. Puede cambiar. Así que siempre nos aseguramos de que esté actualizado.

Bien, así que ahora tenemos un carrito, tenemos un botón para añadir artículos a nuestro carrito. Así que necesitamos obtener los datos del carrito para leerlos y mostrarlos. Y lo necesitamos en dos lugares porque recuerdas que tenemos este pequeño icono en el encabezado que muestra el número de artículos en el carrito. Y por supuesto, tenemos nuestra página del carrito donde queremos mostrar todo. Así que necesitamos que estos datos sean accesibles globalmente, y por eso vamos a escribir nuestro cargador. Así que el cargador obtiene los datos del servidor en el archivo raíz, que es la raíz padre.

Bien, así que aquí estamos en nuestro archivo raíz, en nuestro cargador, y obtenemos el carrito del contexto. Y obtenemos los datos con la función cart get. Pero aquí no queremos esperar a que esta promesa se resuelva porque tenemos otros datos críticos para cargar. Los datos de la tienda que necesitamos para nuestro SEO para obtener el nombre de la tienda y la descripción de la tienda que hemos visto antes. Así que para eso usamos defer que es una utilidad de remix para crear respuestas diferidas en streaming. Y transportará las promesas a nuestros componentes de la interfaz de usuario. Así que aquí es, así es como creamos nuestro icono del carrito. Así que usamos el gancho use loader data para obtener los datos de la raíz porque el icono del carrito es un hijo del archivo raíz. Así que podemos obtener los datos a nivel de componente con use loader data. Tenemos acceso a la raíz de los padres. Y luego aquí resolvemos la promesa del carrito con un peso junto con suspense. Luego obtenemos los datos y de estos datos obtenemos la cantidad total. Así que podemos mostrarlo en nuestro icono. Luego podemos crear todos nuestros componentes del carrito. Así que el artículo de línea, renderizamos cada producto del carrito y también renderizamos aquí, nuestro botón de eliminar del carrito. El componente de artículos de línea del carrito está utilizando la conexión aplanada otro componente de Hydrogen React que aplana el objeto de bordes del norte con una simple matriz de líneas que representan cada uno de nuestros productos. Así que aquí mostramos todos los productos. El componente de resumen del carrito renderiza un total utilizando el componente de dinero y el botón de pago enlaza con la URL de pago.

Finalmente, el componente del carrito muestra todo, todos nuestros productos, las líneas del carrito, artículos, el total con el resumen del carrito y el botón de pago para realizar el pago.

Ahora necesitamos mostrar todo eso ahora en nuestra raíz del carrito y la raíz del carrito no es un hijo del archivo raíz. Así que aquí utilizamos otro gancho, el gancho use matches que nos da acceso al archivo raíz. Y desde allí, podemos obtener los data del carrito. Y luego de nuevo, usamos wait para resolver el carrito con suspense, obtenemos nuestros data. Si hay artículos en nuestro carrito, mostramos el componente de contenido del carrito, de lo contrario mostramos el componente de carrito vacío.

Y mientras tenemos un pequeño sitio web de e-commerce, headless, realmente fácil de construir. Así que espero que les haya gustado esta charla y aquí pueden tomar este código QR y tener acceso a la diapositiva donde tendrán acceso al repositorio, también a la documentation de Story Block y a la documentation de Hydrogen. Realmente les recomiendo que vayan allí. Está realmente bien hecho. He aprendido todo de ellos. Y no soy una persona de documentation. Soy un aprendiz de video. Así que es realmente, realmente bueno. Y la documentation de Remix, que también está muy bien hecha.

Y finalmente, les invito a escanear este código QR para quizás ganar una suscripción a Egghead porque Storyblok organizó una rifa. Y para eso escanean el código QR, llenan el formulario antes del 31 de diciembre y pueden ganar una suscripción a Egghead. Así que gracias. Que tengan un buen día y nos vemos por ahí.