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

Rate this content
Bookmark

¿Listo para dar un emocionante paseo por el mundo del comercio electrónico sin cabeza con Shopify Hydrogen? Esta solución de vanguardia, construida sobre Remix, es la última y mejor manera de construir una tienda en línea de alto rendimiento. El comercio electrónico es más importante que nunca, y proporcionar una experiencia de cliente sin problemas es clave. Pero construir una plataforma que cumpla puede ser desalentador, incluso para los desarrolladores experimentados. Con Hydrogen, no solo encontrarás más fácil construir una tienda en línea de primera línea, sino que también descubrirás cuánto divertido puede ser! Desde la creación de colecciones y productos hasta la implementación de un carrito de compras, te mostraremos cómo Hydrogen puede llevar tu experiencia de desarrollador al siguiente nivel.

Alexandra Spalato
Alexandra Spalato
27 min
15 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy es sobre Shopify Hydrogen y cómo simplifica el desarrollo de tiendas Shopify sin cabeza. La charla cubre temas como la mezcla de datos de Storyblok y CMS, la manipulación de código y datos en Hydrogen, la creación de productos y colecciones, el manejo de SEO, la construcción de un carrito del lado del servidor de alto rendimiento, la configuración y gestión del carrito, y la visualización de información del carrito y de la rifa.

1. Introducción a Shopify Hydrogen

Short description:

Hola, soy Alessandra Sfalato, ingeniera de relaciones con desarrolladores en Storyblok. Hoy, hablaré sobre cómo remezclar tu tienda con Shopify Hydrogen para construir un comercio electrónico ultrarrápido. El comercio sin cabeza separa el front-end y el back-end, ofreciendo ventajas como la venta omnicanal, un tiempo de comercialización más rápido, un mejor rendimiento, SEO, personalización y personalización. Shopify Hydrogen simplifica el desarrollo de tiendas Shopify sin cabeza, aprovechando Remix para un rendimiento mejorado e integración perfecta con las API de Shopify. Exploraremos la creación de un proyecto, la obtención y mutación de datos, la construcción de colecciones y productos, el manejo del SEO y la construcción de un carrito utilizando 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.

2. Mezclando Datos de Storyblok y CMS

Short description:

Podemos mezclar y combinar datos de Storyblok y CMS para crear narraciones. Al hacer clic en el enlace del tablero, se accede a las entradas de la colección. En el tablero de rendimiento, están disponibles los detalles de la colección y los productos. Las páginas de productos individuales tienen un botón de Shop Pay para una compra rápida. La funcionalidad del carrito permite agregar, eliminar y pagar los artículos. Se implementa la personalización, mostrando una página de inicio diferente en función del comportamiento y la navegación del usuario.

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.

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

Scaling WordPress with Next.js
React Summit Remote Edition 2021React Summit Remote Edition 2021
9 min
Scaling WordPress with Next.js
As modern as the web is, WordPress is still king. It’s not the most scalable, but is still compelling with its long history and UX. How can we leverage Next.js to bring WordPress to the modern web? We’ll walk through the tools that Next.js provides us to scale WordPress to the world. We’ll talk about what APIs we can use to easily wrangle WordPress content and how we can make the dynamic bits static.
Off with Their Heads: Rise of the Headless Components
React Summit 2023React Summit 2023
25 min
Off with Their Heads: Rise of the Headless Components
Aren't You Tired of Repeating Yourself? Tired of repeating the same code over and over again in your React projects? In this talk, we'll discover the power of headless components, a design pattern that separates the logic from the presentation layer, allowing you to create reusable and flexible UI components.
We'll explore how headless components can simplify your development process, saving you both time and effort. We'll examine popular headless component libraries and provide tips for integrating them into your projects. Whether you're a beginner or an experienced developer, join us to discover how headless components can help you streamline your React development and create high-quality, customizable UIs.
Exploring the WordPress Graph with Next.js & WPGraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
23 min
Exploring the WordPress Graph with Next.js & WPGraphQL
Headless Wordpress using its built-in REST API is a powerful solution to scale WordPress to the web, but complex relationships can easily turn into chains of requests, making maintainability difficult along with the potential cost of performance.
With WPGraphQL, we can harness the benefits of GraphQL, leading to a better developer experience and optimized request logic, making sure we’re only delivering what we need to our users.We’ll explore these advantages and how these pieces fit together with modern tools like Next.js to build great experiences for the web.

Slides & more
API-first Development with Headless WordPress
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
API-first Development with Headless WordPress
When the burden of rendering is removed from WordPress, it becomes an open source API platform. With a few plugins like WPGraphQL, you can create an extensible backend for your React apps to consume which enables modern architectures and development practices in WordPress.
Contentful and headless
React Finland 2021React Finland 2021
19 min
Contentful and headless
How Contentful helps you to manage all the data in a headless e-commerce website.
Headless vs Traditional eCommerce Platforms: Introducing Commerce Layer
JSNation Live 2021JSNation Live 2021
8 min
Headless vs Traditional eCommerce Platforms: Introducing Commerce Layer
In this lighting talk Fabrizio will go through the main highlights of CommerceLayer, comparing the headless approach to the traditional "monolithic" ecommerce platforms. We will speak about security, performances and scalability.

Workshops on related topic

Deploying a decoupled restaurant review site to production with Strapi and Platform.sh
Node Congress 2022Node Congress 2022
134 min
Deploying a decoupled restaurant review site to production with Strapi and Platform.sh
WorkshopFree
Shedrack Akintayo
Chad Carlson
2 authors
Node.js has become an increasingly popular language to build and deploy backend APIs. In a world of legacy CMSs adopting decoupled implementations, plenty of frameworks have sprung up to classify themselves as "headless" CMSs, designed from the start to provide an easy way to personalize content models, administer permissions and authentication, and serve a content API quickly.
Strapi, one of the leaders in this space, has recently released their v4 version of the framework, and with Platform.sh it can be deployed alongside a number of frontends within the same project, giving a drastically simplified development experience working with decoupled sites. In this workshop, we'll deploy a Strapi demo application, which has been configured to serve a restaurant review site.
Piece piece you will add database services, tests, and frontends, all within the safety of isolated development environments. At the end, each user will have a functioning decoupled site, and some greater understanding of working with decoupled sites in production.