Versión en EspañolES

Masterclass de comercio electrónico JAMstack

Bolaji Ayodeji

Commerce Layer

Recording and certification are available to Multipass and Full ticket holders only

Please login if you have one.

Get Multipass

Bookmark

El comercio digital ha cambiado y hay una creciente demanda de soluciones más rápidas y eficientes. En esta masterclass, aprenderás sobre la evolución del comercio electrónico y cómo JAMstack y el comercio sin cabeza mejoran las experiencias de compra en la web. Exploraremos los conceptos básicos del comercio sin cabeza construyendo una página de productos mínima de comercio electrónico JAMstack con contenido estático, HTML5, CSS y Javascript. Finalmente, integraremos Commerce Layer para capacidades de comercio sin cabeza y desplegaremos nuestra aplicación en Netlify.

This workshop has been presented at JSNation Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

JAMstack es un acrónimo de JavaScript, APIs y Markup, y representa una arquitectura moderna para construir aplicaciones web. En el contexto del comercio electrónico, JAMstack permite generar sitios web rápidos y seguros al pre-renderizar páginas y servirlas a través de CDNs, mejorando así la experiencia del usuario y la performance del sitio.

El comercio sin cabeza se refiere a la práctica de separar la capa de frontend (la 'cabeza') del backend de una aplicación de comercio electrónico. Esto permite actualizaciones más rápidas, personalización y escalabilidad al manejar las funcionalidades del backend a través de APIs que se conectan con cualquier frontend.

La combinación de JAMstack con el comercio sin cabeza permite a los desarrolladores construir experiencias de compra altamente personalizables y escalables. Esta arquitectura aprovecha las ventajas de JAMstack para la velocidad y seguridad, mientras que el enfoque sin cabeza proporciona flexibilidad para integrar diversas tecnologías de frontend y mejorar la integración de APIs.

Para comenzar con Commerce Layer, primero debes crear una organización y configurar tu plataforma de comercio electrónico con mercados, productos y métodos de envío. Commerce Layer proporciona APIs para manejar funcionalidades transaccionales, permitiendo integrar estas capacidades con cualquier capa de presentación que elijas.

Para configurar un pedido en Commerce Layer usando la CLI, debes crear un pedido vacío, añadir ítems de línea con SKUs específicos, asignar direcciones de envío y facturación, seleccionar un método de envío, y configurar un método de pago. Finalmente, puedes completar el pedido ejecutando los comandos correspondientes en la CLI.

SKU significa 'Stock Keeping Unit' y es una identificación única para cada variante de producto en un inventario. En Commerce Layer, cada SKU puede tener asociados precios, inventarios y otros atributos específicos que ayudan en la gestión y venta de productos a través de diferentes canales de comercio electrónico.

jamstack e-commerce

Bolaji Ayodeji

199 min

17 Jun, 2021

Comments

Video Summary and Transcription

La masterclass de comercio electrónico JAMstack introduce el concepto de JAMstack y el comercio sin cabeza, destacando sus beneficios para mejorar la experiencia de compra. La masterclass cubre el proceso de construcción de una página de productos estática utilizando la arquitectura de comercio sin cabeza y Commerce Layer. También explora la configuración de la aplicación, la adición de detalles y variantes de productos, y el trabajo con la interfaz de usuario. También se abordan los problemas de autenticación y el proceso de creación de pedidos. La masterclass concluye enfatizando las ventajas de la arquitectura de comercio sin cabeza y proporcionando recursos adicionales para construir tiendas en línea.

Available in English: Jamstack eCommerce 101

Video transcription and chapters available for users with access.

Available in other languages:

Watch more workshops on topic

Construyendo una Aplicación de Shopify con React & Node

React Summit Remote Edition 2021

87 min

Construyendo una Aplicación de Shopify con React & Node

Top Content

WorkshopFree

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

next.js e-commerce react bricks react state management

Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix

React Advanced 2023

104 min

Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix

WorkshopFree

Alexandra Spalato

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

remix e-commerce

Curso intensivo sobre Jamstack con Next.js y Storyblok

React Day Berlin 2022

161 min

Curso intensivo sobre Jamstack con Next.js y Storyblok

WorkshopFree

2 authors

Es posible que ya hayas leído sobre Jamstack. Probablemente ya hayas utilizado Next.js y recientemente hayas escuchado mucho sobre los CMS sin cabeza. Este curso rápido pondrá todas las piezas juntas y te mostrará por qué Storyblok, combinado con Next.js, es la mejor combinación para tu próximo proyecto. ¡Ven y pruébalo tú mismo!
- Conocimiento profundo de Jamstack. Cómo ha cambiado desde los tiempos antiguos hasta el mundo moderno. Aprende cómo se creó Jamstack comparando los sitios estáticos y los sitios dinámicos.- Cómo Next.js sirve contenido y cómo se sirve el contenido con la generación de sitios estáticos (SSG).- Metodología de diseño atómico y cómo se aplica al sistema de gestión de contenido.- Experiencia práctica en proyectos construyendo un proyecto Jamstack con Next.js y Storyblok.
Requisitos previos- Cualquier editor de texto. Se recomienda Visual Studio Code- Node.js LTS- NPM o Yarn- Cuenta de GitHub- Cuenta de Vercel- Familiaridad con JavaScript, React y Git. Haber trabajado con Next.js antes es una ventaja
Lo que se incluye1. Introducción y descripción general del curso2. Introducción a Jamstack3. Introducción al diseño atómico4. Descripción general de los CMS sin cabeza5. Introducción a Storyblok6. Creación de una aplicación Next.js7. Creación de un espacio Storyblok8. Conexión de Next.js y Storyblok9. Creación de componentes personalizados10. Creación de la primera página11. Introducción a Visual12. Adición de páginas dinámicas13. Creación de la sección de blogs14. Implementación en Vercel

next.js jamstack

Construye una Tienda Personalizada en Shopify con Hydrogen

React Advanced 2021

170 min

Construye una Tienda Personalizada en Shopify con Hydrogen

Workshop

2 authors

Hydrogen es un marco de trabajo y SDK React con opiniones para construir tiendas personalizadas rápidas, alimentadas por Shopify. Hydrogen adopta los Componentes del Servidor React y utiliza Vite y Tailwind CSS. En este masterclass, los participantes tendrán una primera vista de Hydrogen, aprenderán cómo y cuándo usarlo, todo mientras construyen una tienda personalizada completamente funcional con el equipo de Hydrogen.

e-commerce react server components hydrogen shopify with react

Creación de tiendas personalizadas en Shopify con Hydrogen

React Summit 2022

71 min

Creación de tiendas personalizadas en Shopify con Hydrogen

WorkshopFree

2 authors

Sumérgete en Hydrogen, un marco basado en React impulsado por Shopify. En este masterclass, exploraremos el marco y pondremos en marcha una tienda personalizada rápidamente. Aprenderás cómo (y cuándo) aprovechar los Componentes del Servidor de React y los mecanismos de almacenamiento en caché para construir tiendas personalizadas rápidas y dinámicas.

e-commerce react server components hydrogen shopify shopify with react

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

RedwoodJS: El marco de aplicación React Full-Stack de tus sueños

React Summit Remote Edition 2021

43 min

RedwoodJS: El marco de aplicación React Full-Stack de tus sueños

Top Content

Tom Preston-Werner

GitHub cofounder, RedwoodJS author

Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.

jamstack fullstack frameworks redwoodjs react full stack framework

Una Saga de Problemas de Renderizado Web

Vue.js London 2023

28 min

Una Saga de Problemas de Renderizado Web

Alba Silvente Fuentes

FullStack Engineer at Storyblok

This Talk discusses the problems faced in building and rendering web applications, different rendering methods and strategies, and the benefits of the Yamstack architecture. It covers server-side rendering, static site generation, incremental static regeneration, and edge rendering. The speaker demonstrates how to build a static site using a Hello CMS and the JAMstack architecture. Other topics include connecting Storyboard with a Nuxt application, mock data, hybrid rendering, and handling I18N with a static site generator.

performance jamstack scalability

Cómo localizar y personalizar contenido con Sanity.io y Next.js

React Advanced 2021

8 min

Cómo localizar y personalizar contenido con Sanity.io y Next.js

Simeon Griggs

Sanity

Sanity.io provides a content platform for structured content that replaces traditional CMS. Their solution allows businesses to structure and query content anywhere using the Sanity studio and open source React application. The talk focuses on solving the challenge of sending personalized data to users in a static website environment using Next.js Vercel for hosting and Sanity for content querying and delivery. The Sanity studio allows for modeling pages, articles, and banners, with banners being shown to visitors based on their country. The solution involves using Grok queries to fetch the right banner based on country information, demonstrating personalization based on localization and dynamic content querying.

next.js jamstack internationalization sanity react

Vue Storefront + Vendure = Comercio Electrónico de Código Abierto de Pila Completa

Vue.js London Live 2021

19 min

Vue Storefront + Vendure = Comercio Electrónico de Código Abierto de Pila Completa

Jakub Andrzejewski

Vue Storefront

This Talk discusses the full stack open-source e-commerce using ViewStorefront and Venge. ViewStorefront is a lightning-fast frontend platform for headless commerce, while Venge is a framework for the back-end. Both tools are highly customizable and built using modern frameworks. Creating an online store with Venge is quick and easy. Overall, this Talk presents a dream stack for open-source e-commerce and encourages contributions to the projects.

fullstack e-commerce vue

Manteniéndolo Simple

React Summit Remote Edition 2021

9 min

Manteniéndolo Simple

Mathias Biilmann Christensen

Netlify

React brought simplicity to building browser-based applications, but as new concepts like context, hooks, server components, and streaming are introduced, it's important to know the current state of the application. The JAMstack simplifies reasoning about the state of web properties through immutable assets and atomic deploys. However, as the JAMstack evolves, challenges arise in areas such as build times and API caching for large projects, especially e-commerce.

react jamstack

Desarrollo API-first con WordPress sin cabeza

React Summit Remote Edition 2021

33 min

Desarrollo API-first con WordPress sin cabeza

Matt Landers

WP Engine

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.

react jamstack headless