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.

This talk has been presented at React Summit US 2023, check out the latest edition of this React Conference.

FAQ

Shopify Hydrogen es un nuevo marco de trabajo diseñado para simplificar el desarrollo de tiendas headless en Shopify, utilizando prácticas óptimas integradas y basándose en Remix para mejorar el rendimiento y la integración con las APIs de Shopify.

El comercio headless, que separa el front-end del back-end mediante una arquitectura basada en API, ofrece varias ventajas como venta omnicanal, tiempo de comercialización más rápido, mejor rendimiento y SEO, personalización avanzada y más.

Para construir una tienda con Shopify Hydrogen, primero se utiliza el CLI de Shopify para crear el proyecto. Posteriormente, se manejan datos, colecciones y productos a través de consultas y mutaciones de GraphQL, aprovechando los cargadores y acciones de REMIX.

Remix es un conjunto de frameworks React que se basa en estándares web y crea una experiencia de desarrollador simplificada y eficiente. Shopify Hydrogen utiliza Remix para mejorar la performance y proporcionar una integración fluida con las APIs de Shopify.

Shopify Hydrogen proporciona un componente SEO que automatiza la optimización de la tienda, recogiendo datos del loader para definir dinámicamente los títulos y descripciones de las páginas, lo que mejora la visibilidad en buscadores.

Un carrito del lado del servidor en Shopify Hydrogen es una implementación que permite manejar las operaciones del carrito de manera más eficiente sin depender del lado del cliente. Se implementa utilizando el CLI de Shopify y funciones específicas dentro de server.js para interactuar con la API de la tienda.

Storyblok se utiliza como un CMS headless para gestionar el contenido dinámico de una tienda Shopify. Permite mezclar y combinar datos de CMS con los datos de productos de Shopify para crear narrativas y diseñar páginas web personalizadas.

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

Escalando WordPress con Next.js
React Summit Remote Edition 2021React Summit Remote Edition 2021
9 min
Escalando WordPress con Next.js
WordPress is still widely used, with over 800 million installs. The Jamstack is a modern approach to building static HTML websites that utilize JavaScript and APIs for dynamic content. Serving static HTML files is faster than server-based solutions like WordPress. Serving static files from storage or a CDN allows for infinite scalability. WordPress is a compelling option for nontechnical users due to its familiarity and thriving ecosystem.
Fuera con sus cabezas: El auge de los componentes sin cabeza
React Summit 2023React Summit 2023
25 min
Fuera con sus cabezas: El auge de los componentes sin cabeza
Headless Components are efficient for app development, but there's a lot of work involved, especially for menus. The customizability wall is a problem with component libraries, but it can be solved through reverse engineering and design. Headless Components offer no markup or basic markup to be overwritten, providing flexibility in code and design quality. Radix and React ARIA are recommended stylus component libraries with different APIs. Kodaks' experience with headless components highlights the ability to mix and match easily and the potential for market gaps in the headless space. Radix is a popular choice for headless components due to its well-documented and user-friendly API. Headless components aid in testing, distribution of design systems, and accessibility. MUI is a self-consistent and rich library, while Radix focuses on accessibility and default accessibility. Kodaks integrates well with headless libraries and welcomes feedback through Discord.
Explorando el Gráfico de WordPress con Next.js y WPGraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
23 min
Explorando el Gráfico de WordPress con Next.js y WPGraphQL
WordPress is widely used, and it now supports a REST API for headless usage. Serving static HTML files allows for infinite scaling and surviving viral traffic. GraphQL can be used to interface with WordPress data, reducing complexity. WordPress can be coupled with plugins like Yoast and ACF, and WPGraphQL works seamlessly with these plugins. GraphQL allows for selecting only necessary data and has performance advantages over REST APIs.
Desarrollo API-first con WordPress sin cabeza
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Desarrollo API-first con WordPress sin cabeza
This Talk discusses API-first development with headless WordPress, highlighting its benefits and the availability of resources. It explores the use of plugins and frameworks like WPGraphQL and the headless framework from WP Engine to create custom post types and make GraphQL calls. The Talk also covers building websites, querying and caching data, deploying apps with the Atlas platform, and improving user experience. It touches on authentication, efficiency, backend resources, and WooCommerce integration in headless WordPress, as well as WordPress accessibility and SEO optimization.
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 Plataformas de Comercio Electrónico Tradicionales: Presentando Commerce Layer
JSNation Live 2021JSNation Live 2021
8 min
Headless vs Plataformas de Comercio Electrónico Tradicionales: Presentando Commerce Layer
Commerce Layer is an Atlas Commerce platform that provides global shopping capabilities. It offers a range of endpoints for managing various aspects of e-commerce. Modular architecture, like the one used by Commerce Layer, offers benefits such as flexibility, scalability, security, omnichannel capabilities, and future-proofing.

Workshops on related topic

Desplegando un sitio de reseñas de restaurantes desacoplado en producción con Strapi y Platform.sh
Node Congress 2022Node Congress 2022
134 min
Desplegando un sitio de reseñas de restaurantes desacoplado en producción con Strapi y Platform.sh
WorkshopFree
Shedrack Akintayo
Chad Carlson
2 authors
Node.js se ha convertido en un lenguaje cada vez más popular para construir y desplegar APIs backend. En un mundo de CMSs heredados que adoptan implementaciones desacopladas, han surgido muchos frameworks que se autodenominan CMS "headless", diseñados desde el principio para proporcionar una forma fácil de personalizar modelos de contenido, administrar permisos y autenticación, y servir rápidamente una API de contenido.
Strapi, uno de los líderes en este espacio, ha lanzado recientemente su versión 4 del framework, y con Platform.sh se puede desplegar junto con varios frontends dentro del mismo proyecto, lo que brinda una experiencia de desarrollo drásticamente simplificada al trabajar con sitios desacoplados. En este masterclass, desplegaremos una aplicación de demostración de Strapi, que ha sido configurada para servir un sitio de reseñas de restaurantes.
Paso a paso, agregarás servicios de base de datos, pruebas y frontends, todo dentro de entornos de desarrollo aislados. Al final, cada usuario tendrá un sitio desacoplado funcional y una mayor comprensión de cómo trabajar con sitios desacoplados en producción.