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

This workshop has been presented at React Advanced Conference 2023, check out the latest edition of this React Conference.

FAQ

Hydrogen es un marco desarrollado por Shopify que está construido sobre Remix, integrando paquetes adicionales y una integración profunda con las APIs de Shopify para facilitar la creación de comercios electrónicos.

Remix facilita el desarrollo web al basarse en los estándares web y simplificar la creación de aplicaciones web con funcionalidades completas, permitiendo una mejor experiencia de usuario y un desarrollo más sencillo.

Storyblok, un sistema de gestión de contenido (CMS) headless, se integra con Hydrogen para permitir una gestión visual del contenido que se muestra en las páginas web, mejorando la capacidad para gestionar dinámicamente el contenido en comercios electrónicos.

La plantilla Hello World en Hydrogen es un punto de partida básico para proyectos que utilizan este marco, incluyendo configuraciones mínimas y ejemplos de cómo estructurar y desplegar una aplicación.

Se puede personalizar el contenido utilizando técnicas como almacenar información sobre las preferencias del usuario en cookies y luego usar esa información para mostrar contenido dinámico relevante, como banners o productos específicos, basados en el historial de navegación del usuario.

Para comenzar con Hydrogen, se debe clonar un repositorio inicial, instalar las dependencias necesarias con npm install, configurar variables de entorno con un archivo .env que incluya tokens de acceso a Shopify, y luego ejecutar el proyecto localmente.

Alexandra Spalato
Alexandra Spalato
104 min
17 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

Watch more workshops on topic

Fundamentos de Remix
React Summit 2022React Summit 2022
136 min
Fundamentos de Remix
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas
¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™?
Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida?
Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Cómo Resolver Problemas del Mundo Real con Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
Cómo Resolver Problemas del Mundo Real con Remix
Featured Workshop
Michael Carter
Michael Carter
- ¿Errores? Cómo renderizar y registrar tus errores del servidor y del clientea - Cuándo devolver errores vs lanzar excepcionesb - Configurar servicios de registro como Sentry, LogRocket y Bugsnag- ¿Formularios? Cómo validar y manejar formularios de varias páginasa - Usar zod para validar los datos del formulario en tu acciónb - Pasar por formularios de varias páginas sin perder datos- ¿Atascado? Cómo solucionar errores o funciones faltantes en Remix para que puedas continuara - Usar patch-package para solucionar rápidamente tu instalación de Remixb - Mostrar herramienta para gestionar múltiples parches y seleccionar solicitudes de extracción abiertas- ¿Usuarios? Cómo manejar aplicaciones de varios inquilinos con Prismaa - Determinar el inquilino por el host o por el usuariob - Base de datos múltiples o base de datos única/múltiples esquemasc - Asegura que los datos del inquilino siempre estén separados de los demás
Construye y lanza un blog personal usando Remix y Vercel
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Construye y lanza un blog personal usando Remix y Vercel
Featured Workshop
Robert Pop
Robert Pop
En este masterclass aprenderemos cómo construir un blog personal desde cero usando Remix, TailwindCSS. El blog será alojado en Vercel y todo el contenido será servido dinámicamente desde un repositorio separado en GitHub. Utilizaremos HTTP Caching para las publicaciones del blog.
Lo que queremos lograr al final del masterclass es tener una lista de nuestras publicaciones de blog mostradas en la versión desplegada del sitio web, la capacidad de filtrarlas y leerlas individualmente.
Tabla de contenidos:- Configurar un proyecto de Remix con una pila predefinida- Instalar dependencias adicionales- Leer contenido desde GitHub- Mostrar contenido desde GitHub- Analizar el contenido y cargarlo en nuestra aplicación usando mdx-bundler- Crear una página separada para las publicaciones de blog para mostrarlas de forma independiente- Agregar filtros a la lista inicial de publicaciones de blog
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico
React Summit 2023React Summit 2023
139 min
Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico
Top Content
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: por qué lo construimos, qué es y cómo funciona- Crea una cuenta gratuita- Crea un nuevo proyecto con Next.js y Tailwind- Explora la estructura del directorio- Anatomía de un Brick- Crea un nuevo Brick (Texto-Imagen)- Añade un título y descripción con edición visual RichText- Añade una imagen con edición visual- Añade controles de barra lateral para editar props (relleno y lado de la imagen)- Anidación de Bricks utilizando el componente Repeater- Crea un brick de galería de imágenes- Publica en Netlify o Vercel- Tipos de página y campos personalizados- Acceso a los valores meta de la página- Internacionalización- Cómo reutilizar contenido en varias páginas: Historias y incrustaciones- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de aterrizaje creadas visualmente en React Bricks- Características empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados

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

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
No resuelvas problemas, elimínalos
React Advanced Conference 2021React Advanced Conference 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Remix Flat Routes – Una Evolución en el Enrutamiento
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – Una Evolución en el Enrutamiento
Top Content
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.
Patrones de Arquitectura Remix
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Patrones de Arquitectura Remix
Top Content
This Talk introduces the Remix architecture patterns for web applications, with over 50% of participants using Remix professionally. The migration from single page applications to Remix involves step-by-step refactoring and offers flexibility in deployment options. Scalability can be achieved by distributing the database layer and implementing application caching. The backend for frontend pattern simplifies data fetching, and Remix provides real-time capabilities for collaborative features through WebSocket servers and Server-SendEvents.