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

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

Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
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
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
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)
How to Solve Real-World Problems with Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
Michael Carter
Michael Carter
- 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
Build and Launch a personal blog using Remix and Vercel
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
Robert Pop
Robert Pop
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
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
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.
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
WorkshopFree
Matteo Frana
Matteo Frana
- 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

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
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!
Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
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.
Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
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.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
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.
Remix Flat Routes – An Evolution in Routing
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – An Evolution in Routing
Top Content
This talk introduces the new Flat Routes convention that will most likely be the default in a future version of Remix. It simplifies the existing convention as well as gives you new capabilities.
Remix Architecture Patterns
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Remix Architecture Patterns
Top Content
Remix provides amazing flexibility and can be deployed anywhere where JavaScript is running. But how does Remix fit into the bigger application landscape of an organization? Remix provides great utility, but how to best take advantage of it? What things should be handled inside of Remix, and what things are better off done elsewhere? Should we use the express adapter to add a WebSocket server or should that be a standalone microservice? How will enterprise organizations integrate Remix into their current stacks? Let’s talk architecture patterns! In this talk, I want to share my thoughts about how to best integrate Remix into a greater (enterprise) stack.