Masterclass de Comercio Electrónico con Storyblok, Gatsby, Shopify

Rate this content
Bookmark

En este masterclass, integrarás un sitio web desacoplado de Gatsby Shopify en el editor visual en tiempo real de Storyblok.

  1. 1. Conecta Gatsby con Shopify y construye el catálogo
  2. 2. Construye la funcionalidad del carrito de compras utilizando shopify-buy
  3. 3. Conecta Gatsby con Storyblok
  4. 4. Construye componentes editables para el editor visual de Storyblok, incluyendo productos y colecciones de Shopify


Requisitos previos

Computadora lista para Gatsby.


Nivel del masterclass

Intermedio en React y Gatsby.

94 min
20 Oct, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Construiremos un sitio web completo de Shopify Gatsby que integra comercio electrónico con narración y contenido de un CMS sin cabeza. Conectaremos Gatsby y Shopify, crearemos colecciones y productos individuales, y construiremos un menú y un carrito de compras. También integraremos Storyblock CMS con un editor visual en tiempo real y solucionaremos cualquier problema. El masterclass cubre la construcción de componentes de comercio electrónico, incluyendo productos individuales, cuadrículas de categorías y los más vendidos. En general, el masterclass proporciona una guía completa para construir un sitio web de Shopify Gatsby con varias funcionalidades.

Available in English

1. Introducción al Sitio Web Shopify Gatsby

Short description:

Vamos a construir un sitio web completo de Shopify Gatsby sin cabeza. La página de inicio integrará comercio electrónico con narración y contenido del CMS sin cabeza, Storyblocks. Construiremos catálogos, colecciones, carrito de compras, proceso de pago y los integraremos con componentes de Storyblock. Clona el repositorio, instala los paquetes y avanza por ramas.

♪ De acuerdo. Así que voy a compartir mi pantalla, y te mostraré lo que vamos a construir. Entonces, ¿qué? Lo siento. De acuerdo. ¿Puedes ver mi pantalla? ¿Sí? De acuerdo. Entonces, por favor, voy a publicar. No sé cómo quitar esta barra porque realmente me molesta. Voy a eliminar el script de todos los talleres. Todos los talleres. De acuerdo.

Así que aquí está todo el taller, y, primero, tienes el enlace de la vista previa del sitio web final, que está aquí. Así que vamos a construir un sitio web completo de Shopify Gatsby sin cabeza. Que funciona perfectamente. Así que si vamos allí, podemos agregar al carrito. Este es un catálogo de Shopify. Ves el carrito, tenemos un producto, más tenemos el producto individual, podemos agregarlo al carrito, y podemos realizar el pago. De acuerdo. Y en la página de inicio, estamos enriqueciendo nuestro comercio electrónico, nuestro contenido con, estamos fusionando nuestro comercio electrónico con narración y contenido que proviene de nuestro CMS sin cabeza, Storyblocks. Entonces aquí, estos son dos componentes de Storyblocks, un héroe y un texto, pero esto se extrae de Shopify. Y veremos que es el editor visual de Storyblocks. Y aquí hay un producto de Shopify. Esto es de Shopify y esto proviene de Storyblocks y de este producto. Y estos productos se extraen de Shopify y el título proviene de Storyblock. Y a partir de ahí, puedes construir lo que quieras. Por ejemplo, puedes tener un blog donde incluyas productos para mejorar las ventas. Y si lo vemos en Storyblocks, se ve así. Primero, tengo que lanzar mi... Así que aquí está el código. Entonces, aquí está el repositorio. Ahora lo que tienes que hacer es clonar este repositorio en la rama principal y escribir YARN para instalar todos los paquetes. Y a partir de ahí, vamos a avanzar por ramas y te explicaré cómo funciona todo. Vamos a construir todos los catálogos de Shopify, luego vamos a comprar las colecciones, luego vamos a importar el carrito de compras, el proceso de pago y luego lo integraremos con Storyblock y construiremos los componentes de Storyblock y los usaremos en el editor visual. ¿De acuerdo? Así que este es el repositorio inicial.

Y entonces, si tengo una advertencia aquí, pero no pasó nada y no lo resolví. Entonces, si voy a mi localhost, este es el proyecto inicial. Solo tenemos una página de inicio y la página del carrito. Así que empezamos desde cero. Acabo de instalar Tailwind para estilizarlo fácilmente. Y, Alexa, tienes comentarios en el chat. De acuerdo. Están tratando de acceder. De acuerdo. Están tratando de acceder. Sí, lo siento. Sí, tengo que... Por favor, si tienes comentarios, no dudes en abrir el micrófono y hablarme porque no veo el chat. Realmente prefiero la interacción directa si es posible. Gracias. Entonces, sí. Olvidé compartir. Lo siento, es realmente... Aquí está. Pero, Alba, gracias.

2. Configuración de Gatsby Eats y Conexión con Shopify

Short description:

Acabamos de crear los componentes esenciales para el sitio web de Gatsby Eats, incluyendo el diseño global, encabezado, página de tarjetas y página de inicio. También hemos configurado el archivo de configuración de Gatsby e instalado los complementos necesarios. He proporcionado documentación sobre cómo configurar una tienda Shopify y he compartido las variables para este taller. En el siguiente paso, conectaremos Gatsby y Shopify instalando el complemento de origen Shopify para Gatsby y agregando el código necesario a la configuración de Gatsby. Avísame si tienes algún problema.

Entonces, tengo a Alba que está revisando los mensajes por mí. Pero, por favor, si no puedes interactuar, no dudes en interrumpirme. Estoy feliz de escucharte y hablar directamente. Realmente es mejor para mí.

Entonces, bien. Avísame cuando estés listo. Avísame cuando estés listo. Continúo comentando este repositorio. Acabo de crear los componentes esenciales que son como un diseño en Gatsby Eats. Este es el componente global que envuelve el sitio web. Con este diseño, coloco mi encabezado dentro. Mi encabezado es muy simple. Solo uso Gatsby. Que es un componente de Gatsby para crear enlaces. Y un ícono de carrito que está vinculado a la página de tarjetas. Así que esto es realmente simple. Luego tenemos la página de tarjetas con solo el H1 que envuelve el diseño y el índice, la página de inicio. Que también envuelve el diseño. Luego tenemos un archivo esencial de Gatsby, una configuración de Gatsby. Aquí es donde instalamos nuestros complementos. También tengo este js.config que nos permite tener una ruta absoluta con solo esta tilde para hacer la ruta a los componentes y facilita con este código en Gatsby node. Gatsby browser a donde tengo mis estilos de Tailwind. Por supuesto, Tailwind y la configuración de PostGSS para Tailwind. Este es el repositorio. También aquí, he documentado cómo puedes configurar una tienda Shopify, y también he proporcionado la exportación de productos y cómo hacer colecciones, etc. Como no está muy bien explicado y está cambiando todo el tiempo, pero para este taller, no vamos a perder tiempo aquí, pero podrás hacerlo.

Así que prefiero darte mis variables, mis variables de entorno de esta tienda que he creado para este taller, así que aquí están en N. Voy a ponerlas en el chat y puedes copiarlas. Voy a ponerlas aquí. Bien, avísame cuando las hayas copiado y todo esté bien para que pueda continuar.

En el siguiente paso, vamos a la rama uno conectar Shopify y vamos a conectar Gatsby y Shopify. Para eso, vamos a instalar el complemento de origen Shopify para Gatsby, escribiendo yarn add gatsby-source-storyblock. Copio esto en el chat. Y luego puedes agregar este código a la configuración de Gatsby, con la URL de la tienda, la contraseña, que es el token de acceso de la API de administración y las conexiones de Shopify. Entonces, en el código se ve así y todo ya está escrito en la rama. Vamos a cubrir muchas ideas, es mostrarles el código y luego pueden explorarlo mejor después del taller. Entonces, aquí en Gatsby Config, tenemos este origen de Shopify de Gatsby. Y ahora vamos a ejecutar nuevamente para detener esto y ejecutar nuevamente Gatsby develop. Bien, y ahora. Hola Alexandra. Sí. Oh, lo siento, ejecuté eso y obtuve un error de GraphQL que puedo publicar en el chat cuando ejecuté Gatsby develop. De acuerdo. No estoy seguro si alguien más tal vez también lo obtuvo. Espera un minuto. Oh, parece que tal vez hay un error tipográfico en algún lugar. Oh sí, creo que sí, necesitas... ¿Estás en la rama uno? Porque en la rama uno, no hay Storyblock ni nada. Sí, lo estoy. En la rama uno, Storyblock no está instalado, así que no creo que haya una entrada de Storyblock.

3. Creación de Colecciones con Gatsby

Short description:

Vamos a crear colecciones utilizando la API de creación de páginas de Gatsby. Utilizaremos las plantillas y colecciones, haremos una consulta de página y obtendremos los handles. Luego filtraremos la colección, mapearemos a su alrededor y paginaremos el contexto. El handle se utiliza para filtrar nuestras páginas por el handle.

Entonces, no sé por qué deberías estar en la rama uno. Sabes, por alguna razón, estoy en la rama 14 cuando la cloné. Eso es muy extraño. Sí, lo siento, no lo comprobé. Sí, esa es la última rama, así que. Cambiaré a esa ahora. De acuerdo, no hay problema. Gracias.

De acuerdo. Entonces, no sé cómo poner todo eso en una sola pantalla. Entonces, ahora, sí, vamos a localhost GraphQL, y aquí vemos que estamos conectados efectivamente con Shopify, así que esto es GraphQL de Shopify en Gatsby. Gatsby tiene esta capa de data, y trae todos los data a GraphQL. Y ahora, ahora vamos a crear las colecciones. Entonces, vamos, te muestro más sobre este GraphQL. Aquí tenemos todas las colecciones de Shopify. Estas son nuestras colecciones, y los nodos, y el título, por ejemplo. Ves que tienes chaquetas, mujeres y hombres, es una colección gratuita que he creado, y el handle para hacer los enlaces. Y aquí tenemos todos los productos de Shopify y aquí tenemos todos nuestros productos. Entonces, pones el handle aquí. Tenemos todos nuestros productos aquí, bueno, creo que 10 productos. No pongo otro límite. De acuerdo, ahora vamos a crear la colección. Para eso, vamos a la Rama 2, Crear Colecciones. Y dentro vamos a Plantillas, Colecciones, tenemos tres partes de código aquí. Y vamos a crear estas páginas de colección utilizando la API de creación de páginas de Gatsby que usamos en Gatsby Node. Así que vamos a ver eso. Y así es como se ve.

De acuerdo, estamos en la rama dos. Y primero, voy a mostrarte que funciona. Entonces, vuelvo a lanzar Gatsby. De acuerdo, y ahora si vamos a localhost, y si vamos a otra página, ves que tenemos colección mujer, colección hombre y chaqueta. Así que si voy a colección mujer aquí, solo tengo el título porque eso es lo que vamos a hacer primero para mostrar cómo funciona. Así que estas son nuestras plantillas y colecciones. Aquí traemos el diseño, GraphQL de Gatsby. Aquí hacemos una consulta de página, y obtenemos estos handles. Este handle determina en qué página estamos. Lo obtenemos de esta función de consulta de página que está en utils aquí. Hago crear colección. Esta función, te muestro cómo funciona. Va a Gatsby node, pero prefiero separarlo, así que lo traigo a crear colecciones, y creamos páginas. Hago esta creación de colección, y la función está aquí. Además, sí, he instalado Paginate de Gatsby Awesome Pagination. Así que necesitas escribir yarn para que funcione e instalar este complemento que se utiliza para la paginación. No he construido el componente de paginación aquí, pero imagina si tienes 1,000 proyectos, necesitarás paginación, así que casi funciona. Así que obtengo mi plantilla de colección. Esta es la plantilla que construimos. Luego hago mi consulta para obtener lo que necesito aquí. Así que necesito el handle y el recuento de productos, y luego filtro mi colección para no obtener colecciones que he eliminado las colecciones que no tienen productos. Y luego mapeo alrededor de mi colección y pagino el contexto. Por eso usamos la consulta de página porque necesitamos data adicional en el contexto y el data que necesitamos aquí es el handle porque así filtramos nuestras páginas por el handle.

4. Creación de Colecciones y Productos Individuales

Short description:

Filtramos nuestros productos por colecciones y handle, y los paginamos con un límite de 50 elementos por página. Creamos un componente de imagen optimizada utilizando Gatsby Plugin Image y Gatsby Image Data. El componente de tarjeta de producto muestra el título, handle, variante, característica e imagen. Agregamos la tarjeta de producto a las plantillas de colección y corregimos Tailwind. A continuación, creamos productos individuales utilizando el sistema de archivos con el método API. Filtramos los productos de Shopify por handle y consultamos los datos necesarios. Por último, construimos el producto individual utilizando el título, descripción, variantes, imagen destacada y precio.

Veremos más adelante para el producto individual que utilizamos otro método que es más sencillo pero que no puede traer datos adicionales. Así que obtenemos nuestras colecciones para tener los títulos, el handle y la descripción, y obtenemos todos nuestros productos y los filtramos por colecciones y por el handle, por ejemplo, mujer o chaqueta. El límite es el número de productos que queremos paginar y aquí es donde lo coloco, 50 elementos por página. Así que aquí no tenemos paginación, pero si pongo 10, por ejemplo, lo tendremos, y en cada lanzamiento, solo tendremos 10 productos, así que también podemos hacer eso.

De acuerdo. Como puedes ver ahora, solo tenemos 10 productos, pero aquí tenemos una página 2, ¿de acuerdo? Avísame si tienes preguntas. ¿No hay preguntas? Continúo. No. De acuerdo, ahora vamos a crear la Tarjeta de Producto, así que vamos a la Rama 3, Crear Tarjeta de Producto. Primero, vamos a crear un componente de imagen que utilice la imagen de Gatsby. Así que la imagen de Gatsby proviene de Gatsby Plugin Image, y crea una imagen realmente optimizada, y tiene varios parámetros, varias props. Carga que por defecto ponemos como lazy, pero si una imagen está en la parte superior de la página, ponemos ingest para que la imagen se cargue más rápido. La imagen, por lo tanto, utiliza Gatsby Image Data, y texto alternativo y props. Luego creamos los componentes de la tarjeta de producto aquí. Y dos componentes. Sí, tengo que cambiar el rango. De acuerdo, si vamos a, de acuerdo, aquí está mi componente de imagen, y aquí está mi tarjeta de producto. Así que traigo este componente de imagen y aquí hay una prop, este producto, y a partir de ahí, obtengo mi título, mi handle, mi variante, mi característica e imagen. Así que el handle hago el enlace, y la imagen es una imagen destacada del producto. Permíteme mostrarte dónde está en GraphQL. En GraphQL, así que, en mi producto, si pongo mi imagen destacada, aquí tenemos los datos de la imagen de Gatsby, ¿de acuerdo?, y así es como se ve. Trae diferentes tamaños y reoptimiza la imagen. Así que aquí está nuestra tarjeta de producto y luego, por supuesto, agregamos la tarjeta de producto a las plantillas de colección, así que importamos el componente. Además, necesitamos agregar el fragmento, que es la consulta de página, necesitaré mostrarte eso, y incluimos el componente en la plantilla de colección. Y también, necesitamos corregir Tailwind porque Tailwind por defecto solo tiene dos páginas y componentes y necesitamos incluir plantillas aquí. Así que veamos esto, así que si voy a mi colección ahora, plantilla de colección, traigo mi tarjeta de producto aquí y mapeo alrededor de mis productos y aquí paso mi producto y como puedes ver paso el handle de mi producto y pongo todos los datos que necesito aquí en mis consultas de página, así que necesito los títulos, los handles, la imagen destacada, los datos de imagen de Gatsby y de las variantes necesito el precio y luego en Tailwind aquí, pongo mis plantillas y ahora si vamos a nuestro portal, Dios, odio esta barra de herramientas, no sé qué hacer con ella. Alguien sabe cómo ocultarla, dímelo porque estoy acostumbrado a varias pantallas y oh, desaparece si hago eso y realmente me siento mal con una sola pantalla. De acuerdo, ahora ves que tenemos nuestras colecciones. De acuerdo, y el título del precio pero necesitamos hacer los productos individuales porque lo hemos hecho y por el momento lleva a la página cuatro. Así que ahora vamos a crear los productos individuales en la rama cuatro, crear productos individuales y aquí vamos a utilizar el otro método que es el sistema de archivos con API para tener la documentación y guías aquí si haces clic. Y para eso, vamos a las páginas y creamos este archivo así, producto de Shopify.handle porque el handle definirá las URL. Así que si vamos a GraphQL puedes ver que en, producto de Shopify, handle, de acuerdo. Sí. Tenemos que entrar por producto. Pero si vamos a los productos antiguos de Shopify y luego tendremos la URL. Así que aquí está en producto de Shopify antiguo, ahora entonces, handle, de acuerdo. Esa será nuestra URL. Así que es producto de Shopify.handle aquí mi página es, así que voy a la rama cuatro. Y así que si voy a mis páginas aquí, tengo mis productos. Así que aquí hago una consulta de página y filtro por los handles de mis productos de Shopify y consulto los datos que necesito. Así que el título de la descripción, la imagen destacada de nuevo, el precio de la variante y sí, tengo dos veces una imagen destacada. Así que esta es la que tenemos que eliminar, creo. Y así obtengo estos datos aquí y los destruyo y obtengo mi título, mi descripción, mis variantes, mi imagen destacada. Y a partir de ahí construyo mi producto. Así que aquí tomamos, solo tenemos una variante en un caso más avanzado, y en una tienda real tendremos varias variantes para los colores, los tamaños, etc. Pero para este taller, lo mantenemos simple y solo tomamos una variante. Así que primero del array con el precio. De acuerdo, ahora deberíamos ver nuestro producto individual. Así que, y mientras ordeno la imagen, el título, el precio y la descripción.

5. Creación de Menú y Carrito de Compras

Short description:

Vamos a crear el menú a partir de la colección utilizando gadgets que te permiten consultar datos estáticamente a nivel de componente. Utilizaremos la consulta estática de GraphQL de Gatsby para obtener el handle y el título de todas las Colecciones de Shopify. Luego, filtraremos las colecciones para eliminar la colección de la página principal y mapearemos las colecciones restantes para crear enlaces. Es posible que nos encontremos con un error, pero lo solucionaremos. A continuación, pasaremos a la segunda parte, donde crearemos el carrito de compras y el proceso de pago mediante la creación de un contexto y la adición de funciones para agregar y eliminar productos del carrito.

Avísame si tienes preguntas. ¿Todo bien? ¿Algo que quieras ver? ¿De acuerdo, Alba, estás bien? Sí. De acuerdo, continuemos.

A continuación, vamos a hacer algo sencillo. Vamos a crear el menú a partir de la colección y para eso vamos a utilizar gadgets que realmente me gustan, como la consulta y esta herramienta te permite consultar datos estáticamente a nivel de componente. Así que cuando necesitas cosas en el encabezado, en el pie de página, cosas que son globales, no tienes que pasar props a través de los componentes para obtener tus datos, simplemente los consultas en el componente que necesitas y eso también me encanta. Así que hagamos eso, rama cinco.

De acuerdo. De acuerdo, aquí vamos en el componente de menú de AFK Disk. Así que desde Gatsby, importo la nueva consulta estática de GraphQL y el componente de enlace. Y en mi componente de menú aquí, utilizo esta consulta estática de GraphQL y consulto los datos para obtener el handle y el título de todas mis Colecciones de Shopify. Luego creo esta variable colecciones, que es igual a, que filtro porque no tengo una colección de página principal aquí, pero es algo que puedes usar. Por ejemplo, puedes crear una colección de productos que deseas mostrar solo en la página de inicio. No quieres que la página principal o la página de inicio estén en tu menú. Así que filtro para eliminar la colección con el handle de la página principal. Y luego obtengo mis colecciones y simplemente mapeo alrededor de mis colecciones y creo un enlace con el handle. Y este es el resultado. Tenemos este supermenú y tenemos un error. No sé por qué. Tal vez tenga que volver a lanzarlo. Pero veremos. Espera. ¿Sabes qué tengo aquí? Una tarjeta de crédito. Tenemos la tarjeta de crédito aquí y una tarjeta de crédito a la izquierda. ¿Ahora puedo escribir algo? ¿Qué debo hacer? ¿Sabes qué? Búscame un lugar. Me gustaría reanudar un poco la conversación. Tengo su número, pero no tengo su tarjeta de crédito. Haré esto. Es bueno saberlo. Porque es difícil estar solo frente a la computadora. Esperaba que fuera un taller presencial, pero no lo es. Esperaba llegar a tiempo, pero no lo hice. Esperaba tener una pantalla de pegatinas, pero no la tengo. Pero afortunadamente, tengo a Alba. Todavía estoy aquí en persona. De acuerdo. Espero que todo esto desaparezca. El error desapareció. Y nuestro menú está funcionando. De acuerdo. ¿Alguna pregunta? No creo que tengas grandes preguntas sobre el menú, pero... Porque ahora vamos a la segunda parte para crear el carrito de compras y el proceso de pago. Ahora hemos construido todas las colecciones y productos. Avísame si quieres saber algo sobre esto. O si quiero ir directamente a la segunda parte. De acuerdo. Así que vamos a la segunda parte. Vamos a la rama seis. Así que aquí, vamos a crear un contexto y vamos a construir la función para agregar el producto al carrito y luego para eliminar productos del carrito para construir la página del carrito y tener el proceso de pago. De acuerdo.

6. Creación de Contexto e Inicialización del Pago

Short description:

En esta rama, creamos un contexto y un proveedor de almacenamiento. Probamos la función de agregar al carrito y confirmamos que funciona. Luego, instalamos Shopify usando yarn. A continuación, inicializamos el estado de pago y creamos la constante de inicialización del pago. Modificamos la función de agregar al carrito y creamos un cliente con la URL de la tienda y el token de acceso de la tienda. Por último, creamos un botón de comprar ahora que abre una nueva ventana con el pago para el producto.

Entonces, en esta rama creamos un contexto, creamos un contexto, una carpeta de contexto y un componente de contexto de almacenamiento e importamos create context de react. Establecemos algunos valores predeterminados para el carrito, un array vacío y para agregar al carrito una función vacía. Luego exportamos un contexto de almacenamiento que obtenemos con create context y pasando los valores predeterminados y también exportamos el proveedor de almacenamiento y dentro creamos, nuevamente, la función de agregar al carrito que pasaremos aquí en el proveedor de contexto de almacenamiento y veremos que reemplaza la función vacía y ajustamos el registro en la consola porque queremos ver primero si todo funciona. Luego en Getty Browser e importamos los proveedores de almacenamiento que hemos creado aquí y exportamos los componentes del elemento wrapRoot. Entonces este elemento wrapRoot lo podemos encontrar en la documentación de Gatsby y devolvemos el elemento envuelto en el proveedor de almacenamiento y luego vamos a crear un botón básico de agregar al carrito y al hacer clic ejecutamos la función de agregar al carrito y agregamos este botón al carrito de productos y vamos a probar si funciona. Así que hagámoslo. Voy a la siguiente rama y cierro todos estos archivos. Veamos. Aquí están mis contextos. OK, muy simple. Función super simple aquí en el navegador de Gatsby. Entonces el navegador de Gatsby envuelve toda la aplicación. Así que es por eso que lo hacemos aquí. Y mi componente que creé para el carrito de compras porque es un carrito de compras con este botón simple y lo agregamos a nuestras colecciones. OK, ahora lo agregamos a nuestro carrito de productos. OK, aquí está mi botón Agregar al carrito. Creo que tengo que reiniciar aquí. Está en ejecución. OK, así que vamos a probarlo. Abramos la consola. Oops. Entonces agregar al carrito. Y verás, funciona, agregado al carrito. Así que estamos bien. Nuestro contexto funciona, nuestra función funciona, aunque solo haga el registro en la consola. Así que podemos continuar. A continuación, vamos a inicializar el pago. Primero, vamos a instalar Shopify usando, usando yarn en Shopify. Así que en la rama 7, simplemente escribe yarn para instalar esto. Luego vamos a crear un estado de pago, pago y establecer el pago con un nuevo estado de react. Y vamos a crear una constante de inicialización del pago. Vamos a activar esta inicialización del pago con useEffect. También creamos una constante es navegador es navegador para verificar si estamos en el navegador y no elegir una ventana cuando no lo estamos. Luego vamos a modificar la función de agregar al carrito. Todo esto sucede en el contexto. Y sí, también construyo mi cliente con el cliente. Esto proviene de Shopify buy. Y aquí integro mi URL de la tienda y mi token de acceso a la tienda. Luego, OK, mi pago y el pago es tipo de ventana y está definido. Y aquí inicializo mi pago con try catch. Así que creamos una constante nuevo pago y esto proviene del cliente. Así que puedes registrar en la consola este pago y obtenemos esta función crear. Y luego establecemos el pago en este nuevo pago. Y lo inicializamos en useEffects. OK, y ahora también creamos un botón de comprar ahora. Así que desde el nuevo pago, vamos a la URL web, y esto abrirá una nueva ventana con el pago para este producto. Y también necesitamos agregar el ID de variante al botón de agregar al carrito, porque lo usaremos para el pago. Creo que es esto. El botón de agregar al carrito necesita un ID de variante para obtener el producto correcto. ¿Dónde está mi función? Agregar al carrito.

7. Prueba de Pago y Botón Comprar Ahora

Short description:

Consultamos el ID de variante de Shopify y lo pasamos al carrito de productos. Probamos la funcionalidad y abrimos el nuevo pago para la página. El botón Comprar Ahora funciona y tenemos un registro en la consola para el nuevo pago. Avísame si tienes preguntas.

Sí, está aquí. Aquí se necesita el ID de variante. Y este ID de variante es el ID de Shopify del producto variante. Bien, así que aquí consultamos el ID de variante de Shopify. Y en el carrito de productos pasamos los valores al ID de variante. Entonces, el ID de variante cero de Shopify está aquí y luego probamos la funcionalidad. Así que veámoslo en el código aquí. Bien, en mi contexto de almacenamiento... Veamos... Bien, mi pago, mi pago inicial está aquí. Lo inicializo aquí y aquí, paso mis argumentos de ID de variante a mi y la cantidad uno porque podemos hacer, pongo uno por defecto, pero podríamos hacer un componente para elegir si queremos más. No lo he hecho aquí, pero podemos hacerlo, no es muy complicado. Y este nuevo pago, es otra función del pago del cliente, agregar elementos de línea y aquí necesitamos el ID del pago y los elementos de línea que creamos aquí. Y sí. Y luego, si estamos en el navegador, abrimos este nuevo pago para la página y creamos un botón, el botón Comprar Ahora. Entonces, en mis, bien, en mis colecciones aquí. Veamos, consulto mi ID de Shopify y en mi carrito de productos, bien, paso mi ID de Shopify, mi ID de variante aquí que es el ID de Shopify de la variante. Y en mi botón, agregar al carrito, paso el ID de variante. Bien, veamos si esto funciona. Bien, no necesito la consola. Bien, esta vez no necesito la consola. Así que ahora y verás, tenemos esta ventana y el pago que se está abriendo aquí, así que todo funciona. Quizás he creado, sí, he creado un registro en la consola desde el cliente para que también podamos ver el nuevo pago. Así que aquí podemos ver la función de pago. Y puedes explorar todo eso y luego el pago de la aplicación también se registra en la consola. Avísame si tienes preguntas. Todo bien, todo claro, genial.

8. Haciendo la Tarjeta Persistente y Creando el Carrito de Compras

Short description:

Hacemos que la tarjeta sea persistente verificando si existe un pago en el almacenamiento local. Si existe, lo obtenemos de Shopify; de lo contrario, creamos un nuevo pago y lo agregamos al almacenamiento local. También agregamos el botón 'Agregar al carrito' al producto individual. A continuación, creamos la página del carrito de compras, donde mostramos los elementos del carrito, el precio total del pago y el número de elementos en el carrito. También agregamos un ícono de carrito de compras al encabezado. Ten en cuenta que puede haber una ligera demora al agregar elementos al carrito, por lo que se recomienda incluir un indicador de carga en una aplicación real.

Bien, ahora vamos a hacer que esta tarjeta sea persistente porque no queremos recargar la página y perder nuestra tarjeta. Entonces, en la función de inicialización del pago, verificamos si ya existe un pago en el almacenamiento local, si existe, lo obtenemos de Shopify. Si no existe, lo creamos y lo agregamos al almacenamiento local. Luego enviamos el pago al estado, y luego agregamos el botón 'Agregar al carrito' al producto individual.

Veamos esto. Esto siempre está en el contexto de la tienda. Verifico si el pago existe. Si está en el navegador, verifico el almacenamiento local, obtengo el ID del pago allí. Inicializo esto, valor del pago, y si el ID del pago actual existe, lo obtengo de Shopify con esta función de búsqueda, y paso el ID del pago actual. Y si no existe, creo un nuevo pago, y lo agrego al almacenamiento local. Entonces creo el nuevo pago con la función crear, y establezco el ID del pago en el almacenamiento local, y luego establezco el pago en el nuevo pago. Creo que eso también, veamos si todo funciona. Ahora, si voy a mi almacenamiento local, puedo ver que tengo aquí un ID de pago, bien. ¿Alguna pregunta? También agregué el botón al producto individual porque antes no lo tenía, así que ahora podemos ver este producto individual y también este botón, Agregar al carrito. Es muy simple en el código. Si vamos a mi botón, botón Agregar al carrito, paso nuevamente el ID de Shopify. También traigo mi ID de Shopify aquí en mi variante y traigo mi ID de variante. Bien. ¿Alguna pregunta? Bien, entiendes más rápido que yo cuando lo aprendí.

Bien. Ahora vamos a crear la página del carrito de compras. Así que vamos a la rama nueve y creamos este componente. ¿Dónde estoy? Estoy perdido en mis documentos. Bien, creamos un carrito de compras, el elemento del carrito. Muy simple, pasamos el elemento como prop y la imagen es la fuente de la imagen de la variante del elemento y el título, la cantidad del elemento y el precio de ese elemento que estará en el carrito en el contexto de la tienda. Agregamos diferentes valores para estos elementos de línea. Estos elementos de línea, cada elemento que estará en el carrito. Los inicializamos con un array vacío para evitar errores que podrían ocurrir y cosas así. En la página del carrito, traemos este elemento del carrito y traemos el pago. El pago, simplemente lo hice para hacer una carga en la consola así que no lo necesitamos. Y luego mapeamos estos elementos de línea. Que sí, no necesitamos el pago, lo siento. Vienen de los elementos de línea del pago. Los mapeamos y luego renderizamos el componente del elemento del carrito pasando el elemento y el ID del elemento como clave. Y luego creamos un botón de pago con la URL web del pago. Y revisamos, tenemos este valor del precio total del pago y la cantidad. Y también creamos un ícono de carrito de compras para mostrar el número de elementos en el carrito y lo agregamos al encabezado. Aquí importamos nuevamente el pago desde el contexto de uso, y la cantidad la reducimos a partir de los elementos de línea del pago para obtener el total. Y simplemente lo agregamos encima del ícono del carrito de compras y le aplicamos estilo adecuado. Veámoslo en el código. Así que carrito de compras... Supongo que tengo que ir a la siguiente rama. Entonces el elemento del carrito está ahí. Ese es mi elemento, mi imagen. Luego en mi página del carrito, mi página del carrito, traigo mi elemento del carrito, mi pago, y mapeo mis elementos de línea. Y mi pago está aquí. Y mi ícono del carrito está ahí con la cantidad aquí y el carrito de compras y un estilo para que se vea bien. Una cosa a tener en cuenta también, cuando agregamos al carrito, etc., hay una pequeña demora. Así que en una aplicación del mundo real, deberías poner un indicador de carga o algo para que la gente tenga paciencia.

QnA

Probando el Proceso de Pago y Eliminación del Carrito

Short description:

Si agrego el producto al carrito, aparece en el carrito. Se crea la función RemoveFromCart para eliminar elementos del carrito. Probamos el proceso de pago y realizamos un pago real para ver si funciona. Tengo una pregunta sobre la URL de GitHub.

Es rápido, pero no es inmediato. Veamos si todo funciona. Ahora, si agrego el producto al carrito, puedes ver que lo podemos ver aquí en el carrito y tengo dos productos. Y ahora abro el carrito y aquí tengo mis productos. Así que todo funciona.

¿Alguna pregunta? Alba, ¿alguna pregunta? No para mí. Es normal, eres la mejor.

De acuerdo. Ahora necesitamos crear una función para eliminar los elementos del carrito. Así que vamos a la rama 10 removeItems y creamos una función RemoveFromCart en el contexto. No sé por qué salta. Lo siento. De acuerdo, creamos esta función RemoveFromCart. Pasamos el ID del elemento de línea y hacemos un try-catch con nuestro nuevo proceso de pago. Y aquí, en el proceso de pago, tenemos esta función RemoveLineItems. Pasamos el ID del proceso de pago, el ID del elemento de línea, y volvemos a establecer el proceso de pago como nuevo proceso de pago. Luego agregamos un botón de eliminación al elemento del carrito. Importamos esta función RemoveFromCart desde el contexto de uso. Y agregamos este botón. Y al hacer clic, ejecutamos esta función, RemoveFromCart, pasando el ID del elemento. Y luego de eso, vamos a probar nuestro proceso de pago. Así que veamos el código. Es la rama 10 y RemoveFromCart. Nuestro nuevo proceso de pago, eliminar elementos de línea. Y establecer el nuevo proceso de pago. También inicializamos una función aquí, RemoveFromCart. Y luego pasamos todo eso, los valores predeterminados, agregar al carrito, eliminar del carrito. Y el proceso de pago al proveedor. Y aquí está nuestro carrito. Nuestro elemento del carrito, tenemos este botón, onClick, eliminar del carrito. Así que ahora vamos a probar todo eso y hacer un pago real para ver si funciona.

De acuerdo. Ahora puedes ver, tenemos nuestro botón de eliminar. Voy a tener algunos más en el carrito. Y voy a eliminar este. Así que funciona. Y ahora voy a realizar el pago. Ahora voy a poner mi correo electrónico aquí. De acuerdo. Ahora pongamos Madrid. No vivo en Madrid, pero la dirección aparece. Código postal, no sé. Pondré el mío. Y no nos importa eso. Y ahora continúo. Oh, tengo una pregunta. Karina. Ah, de acuerdo. Gracias, Evgenia. La URL de GitHub, por favor.

Refrescando el Carrito y Agregando Storyblock

Short description:

Continuamos con el envío y el pago utilizando la pasarela falsa. Sin embargo, nuestro carrito de compras no se vacía después de finalizar la compra, lo cual es un problema que debemos solucionar. Creamos una función para refrescar el carrito después de finalizar la compra. En nuestro contexto de la tienda, creamos una nueva función de ID para generar un nuevo ID de compra. Si la compra actual existe, la obtenemos de Shopify. De lo contrario, creamos una nueva y la agregamos al almacenamiento local. Ahora nuestro carrito está vacío nuevamente. A continuación, agregaremos Storyblock a la tienda, pero hay un problema con el complemento de Shopify. Alba ha encontrado una solución y podrás probarlo tú mismo. Por ahora, te mostraré cómo funciona todo y podrás hacerlo nuevamente utilizando el script proporcionado.

Sí, gracias, Karina, por entrar en mi lugar. Pero también necesitas esto. Este es el script del taller donde tienes todo aquí. De acuerdo. De acuerdo. De acuerdo. Continuamos con el envío y continuamos con el pago. De acuerdo. Aquí estamos utilizando la pasarela falsa, que es una forma de realizar el pago. Y ponemos uno para hacer un pedido exitoso. Ponemos cualquier experiencia data y cualquier código de seguridad, y pagamos ahora. De acuerdo. Así que todo funciona. Pero aquí podemos ver que nuestro carrito de compras no está vacío. Este es un problema que debemos solucionar ahora. Porque si compramos cosas, queremos que nuestro carrito de compras esté vacío. Así que ahora vamos a crear una función para refrescar este carrito después de finalizar la compra. Así que vamos a la rama 11, refrescar carrito después de la compra. Y en nuestro contexto de la tienda, creamos una función, nuevo ID, que nos permitirá crear un nuevo ID de compra que podamos reutilizar. Así que creamos la constante nueva compra con checkout create. Y si estamos en el navegador, establecemos este elemento en el almacenamiento local y devolvemos la nueva compra. Luego, en la función de inicialización de la compra, verificamos si hay una compra completada aquí. Entonces, si la compra actual existe, la obtenemos de Shopify. Pero si la nueva compra tiene el valor de completado en, significa que la compra ya se ha completado. Así que necesitamos crear una nueva. Así que creamos esta nueva compra con esta función obtener nuevo ID. Y si no existe, creamos una nueva compra y la agregamos nuevamente al almacenamiento local con obtener un nuevo ID. Así que si voy a la rama 11 y a mi contexto de la tienda, aquí está mi función obtener nuevo ID. Y en la inicialización de la compra, aquí verifico si la compra ya se ha completado. Y si no, creo una. Y veamos si eso funciona. Y puedes ver que ahora mi carrito está vacío nuevamente. De acuerdo, ¿alguna pregunta? No hay preguntas. Todo está claro. Fantástico. Ahora vamos a la mejor parte porque vamos a agregar Storyblock a esta tienda. Tenemos un pequeño problema. No sé si está resuelto porque el complemento de Shopify. Alba, sé que hablaste de eso. ¿Tenemos un complemento de demostración para eso? No hoy. No hoy. De acuerdo. Pero pueden solicitar acceso a esto. De acuerdo. Porque, de acuerdo. Sí, Alba lo explicará en el chat porque lo que sucede es que el complemento de Shopify de Storyblock requiere una cuenta de equipo y no está en la prueba. Lo que no sabía antes de comenzar este taller que también hice hace dos días. Pero Alba ha encontrado una solución. Así que podrás probarlo tú mismo, creo. Solicitando un complemento de prueba que puedes usar por un tiempo. Así que por ahora, lo que voy a hacer es mostrarte cómo funciona todo y a partir del script y todo, podrás hacerlo tú mismo, espero.

Conectando Storyblock y Configurando Proxy

Short description:

En la rama 12, conecta Storyblock iniciando sesión o registrándote en el sitio web de Storyblock y creando un nuevo espacio. Obtén el token de acceso e instala el complemento Gatsby source storyblock. Reinicia Gatsby para establecer la conexión. Accede a GraphQL para ver los nodos de entrada de Storyblock y su contenido. Para conectar el repositorio y Storyblock, agrega el Servidor de Desarrollo al Editor Visual de Storyblock. Instala y ejecuta el proxy para habilitar HTTPS para Storyblock versión dos. Soluciona cualquier problema con el proxy.

Así que en la rama 12, conecta Storyblock. Primero, voy a cerrar cosas porque tengo demasiadas cosas abiertas aquí. De acuerdo, vamos al sitio web de Storyblock para iniciar sesión o registrarnos. Y yo, ya tengo el espacio creado con todos los componentes. Pero en tu sitio, puedes seguir estas instrucciones. Estamos creando un nuevo espacio.

Te mostraré cómo funciona. Vas aquí. Y creas un espacio. Tú React Londres. Y creas este nuevo espacio desde cero. Y aquí crea algún contenido, pero no lo necesitamos. Pero necesitamos este token. Este token también puedes agregarlo desde aquí en Configuración. Token de acceso. Luego, instala el complemento Gatsby SDK. Podemos agregar Gatsby source storyblock. Y quieres este complemento en la configuración de Gatsby. Con este token. Y ahora te mostraré aquí. Así que te mostraré mi espacio. Ya tengo un espacio creado. De acuerdo. De acuerdo. Entonces, en mi archivo final, tengo este token de acceso de Gatsby storyblock Y en mi navegador de Gatsby, mi configuración de Gatsby, lo traigo. Tengo que cambiar de rama. Así que rama 12, este Gatsby store storyblock con el token de acceso. Y ahora, si reinicio Gatsby, deberíamos ver la conexión con Storyblock.

De acuerdo, vamos a GraphQL. De acuerdo, ves todos los nodos de entrada de Storyblock. Y aquí quiero el contenido y el slog completo. Y ves que este contenido se representa como una cadena. Y si voy a mis componentes aquí, estos son los componentes, el contenido de estos componentes. Pero ahora vemos que nuestro repositorio y nuestro Storyblock no están conectados. Voy a hacer eso. Entonces, necesitamos agregar el Servidor de Desarrollo a Storyblock. Para eso, vamos al Editor Visual y agregamos Storyblock 3010 Server como entorno predeterminado. Y vamos a la configuración de entrada y agregamos esto como una ruta de lectura. Storyblock versión dos necesita HTTPS. Y para eso, necesitamos instalar un proxy. Para Mac, tienes las instrucciones para Mac y aquí para Windows, necesitas instalar eso y luego ejecutar el proxy, así que lo haré. Y mapeamos el proxy a local host 3010. ¿Por qué no funciona? De acuerdo. ¿Está funcionando mi cosa? Sí. De acuerdo. ¿Alguna idea, Alba, por qué el proxy no funciona? Siempre ha funcionado hasta ahora. No lo tengo. ¿Estás bien? Esto estará bien. ¿Estás usando 8,000 píxeles de eso? Sí, sí, pero siempre uso lo mismo, y siempre funciona.

Creando Componentes de Storyblock

Short description:

Vamos a crear componentes de Storyblock, incluyendo un componente de texto enriquecido y un componente de héroe. Estos componentes se renderizarán utilizando el renderizador de texto enriquecido de Storyblock y la función editable de Storyblock. Esto nos permitirá hacer clic en un componente y editarlo en tiempo real dentro del Editor Visual de Storyblock.

Así que no sé hoy. ¿Tienes una URL diferente del espacio? ¿Qué? ¿La URL en el espacio, en la configuración? Sí, sí, siempre es el mismo espacio que uso cada vez que lo hago. Lo hice el otro día para el cliente de demostración, así que es... ¿Refrescando el proyecto? Muy bien, vamos al correcto. Tengo esta barra de herramientas, me está volviendo loco. No. Me perdí el comando. Oh, Dios, habla el nivel. Sí, lo intentaré de nuevo. No hay forma de ocultarlo. Sí. Hay una forma. ¿Hay una forma? Sí, sí. Hola controles de misión flotantes. Sí. Gracias. Gracias.

De acuerdo, se hace más grande y más grande. Sí, porque siempre estás tomando las ramas, así que... Sí, no sé. Entonces, deberíamos tener el mismo tamaño que el primero, porque le damos como... No sé a qué se refieren. Y... Porque le damos un poco más grande, entonces tenemos que poner esta lengua, entonces tenemos que sacar y quemar un poco, no sé cuánto se encuentra y no sé qué significa eso y... No sé. No sé qué significa. ¿Estás ejecutando el proxy local dentro de la impresora? No, lo hago para otro... Necesitas volver a design, porque de lo contrario el host local... Ahora funciona con EPR, no sé si... Ha funcionado. Solo eso funciona. No sé... Siempre lo hice en la raíz de la computadora y ahora no sé por qué no funcionaba en la otra terminal. Así que, funciona. Normalmente lo hago por RACO. Funciona. De acuerdo, ahora deberíamos... Entonces, aquí en el Editor Visual, en Configuración, Editor Visual. Sí. Necesito... Este no es el correcto, voy a cerrar este, aquí en Configuración, Editor Visual. Tengo este localhost. Necesito tener la barra inclinada aquí y también ahora, en contenido. Ahora ves, estamos conectados. Estamos viendo nuestro sitio web en este Editor Visual. De acuerdo, este es un sitio web real y se muestra a través de un nuevo marco gracias al puente de JavaScript de Storyblock. Y también, aquí, lo que he hecho en la configuración de entrada, en lugar de ser home, la ruta real es solo la ruta aquí, ¿de acuerdo? ¿Alguna pregunta? De acuerdo.

Entonces, ahora, vamos a crear algunos componentes de Storyblock. Así que, en los componentes, creamos una carpeta de Storyblock, y también necesitamos instalar un renderizador de texto enriquecido de Storyblock porque tenemos un componente de texto enriquecido Tenemos un componente de texto enriquecido y necesitamos la función de renderizado de este componente para renderizar el campo de texto enriquecido, y creamos un componente de héroe. Así que, traemos editable de Storyblock desde nuestro SDK obteniéndolo a través de Storyblock, y eso nos permitirá hacer clic en un componente y verás que se abre inmediatamente como un componente y puedes editarlo en tiempo real.

Creando Componentes de Storyblock

Short description:

Creamos componentes utilizando un campo de bloque que nos permite anidar otros componentes y bloques. El campo de héroe contiene un titular, un área de texto y una imagen. El campo de texto utiliza un componente de texto enriquecido, mientras que el componente de producto se conecta al complemento de Shopify. Podemos seleccionar productos o categorías y establecer límites. La cuadrícula de productos muestra seis productos y la cuadrícula de categorías muestra solo categorías. Envolvemos el héroe en un componente editable de Storyblock y usamos la función de renderizado para el componente de texto. Inicializamos la API de Storyblock en el componente de diseño global y creamos la página de inicio utilizando una consulta de página para el slug home. Ahora podemos ver y arrastrar y soltar nuestros componentes.

Pasamos una propiedad de bloque. Y a partir de este bloque, tenemos todos los elementos del bloque. Entonces, primero, permítanme mostrarles cómo se construyen estos componentes. Entonces, aquí tengo el héroe y el texto. Verán que tengo un titular, una descripción y una imagen. Y en el texto tengo este texto largo, que es un campo de texto enriquecido. Y aquí está mi biblioteca de bloques. Y en esta biblioteca de bloques creo todos mis componentes. Primero, tenemos la página. La página es un tipo de contenido. Entonces, todo lo que se llama historias y la página es un tipo de contenido, por lo que es una plantilla con el modelo para crear las páginas y crear cualquier tipo de contenido. Entonces es una página, puede ser un artículo. Y aquí se hace con un campo especial llamado bloques. Y este campo de bloque significa que podemos anidar cualquier otro componente y otro bloque en él. Entonces es una forma de hacer un constructor. También podemos limitar el componente que queremos. Podemos permitir un máximo o mínimo, y podemos permitir solo componentes específicos o grupos de componentes. Aquí podemos crear un grupo. Entonces esto realmente puede ser muy detallado en lo que queremos hacer con él. Por supuesto, también podemos tener otros campos si queremos un titular aquí. Podríamos tenerlo. Pero aquí solo tenemos este campo de bloque. Entonces podemos tener cualquier componente en él. En el campo de héroe, tenemos tres campos en él, un titular, un área de texto y una imagen. En el campo de texto, tenemos solo un componente de texto enriquecido. Y luego tenemos este componente de producto, donde usamos el campo de complemento. Y este campo de complemento está conectado al complemento de Shopify, el que, desafortunadamente, no puedes probar ahora, pero espero que sea posible. Y para conectarlo, lo conectas a los puntos finales de la URL de Shopify y el token, y luego puedes seleccionar productos o categorías y puedes poner un límite en el número de productos, para el producto único que deseas. Luego está la cuadrícula de productos, como puedes ver, este es el resultado final. Entonces tenemos el producto único, la cuadrícula de productos y la cuadrícula de categorías aquí. Entonces aquí elijo mostrar un máximo de seis productos y la categoría es lo mismo, pero solo selecciono categorías. ¿Alguna pregunta sobre cómo funciona el componente? Lo verán mejor cuando lo construyamos en realidad. Entonces veamos cómo se conectan nuestros componentes de Storyblock. A partir de este bloque, obtenemos todos los demás componentes, todos los demás campos, quiero decir. Entonces, en el héroe, tenemos los titulares, la descripción y la imagen. Lo envolvemos en un componente editable de Storyblock y como clave le damos el UID. Y aquí obtenemos nuestra imagen, nuestro titular, nuestra descripción. Y para el componente de texto, obtenemos esta función de renderizado del renderizador de texto enriquecido de Storyblock, y tenemos que pasar nuestro texto largo a la función de renderizado para analizarlo y obtener todo el contenido de él. Luego inicializamos la API de Storyblock en el componente de diseño global. Importamos storyblock init y el complemento de API de Gatsby-sourced-storyblock. También importamos el componente que hemos creado. En storyblock init pasamos el token de acceso, el complemento de API y todos nuestros componentes. Y luego creamos la página de inicio. Entonces creamos la consulta de página para el slug completo home aquí. Entonces la consulta de página, filtramos nuestras entradas de Storyblock por el slug home para obtener solo los componentes de la página de inicio. Y aquí obtenemos los nombres de los contenidos del slug y sobre eso necesitaremos construir nuestros componentes. Así que les mostraré los resultados. De acuerdo. Y ahora, si voy aquí, verán, podemos ver nuestros componentes. Podemos arrastrarlos y soltarlos.

Usando Storyblock CMS con Editor Visual en Tiempo Real

Short description:

Podemos usar Storyblock CMS fácilmente, editable, etc. Si hago clic aquí, puedo editarlo en tiempo real. Imprimo en la consola la historia, para que puedas ver lo que tenemos aquí. Aquí hay una historia, el contenido, el cuerpo, porque el componente aquí se llama cuerpo en la página. Y aquí puedes ver que tenemos nuestros dos componentes, el héroe y el texto. Y en este héroe, tenemos la descripción, el titular, la imagen y aquí tenemos el texto largo. Componente con este contenido, verás que tenemos encabezados, párrafos, por lo que es la función de renderizado que hemos visto la que va a dispersar esto. Creamos esta variable componentes a partir del cuerpo del contenido de la historia y mapeamos alrededor de estos componentes que estamos viendo en el registro de contenido y renderizamos este componente de Storyblock pasando el bloque y el ID del bloque y este componente de Storyblock se encargará de la visualización condicional de este componente si existen. Y luego muestro mis componentes aquí. Así que aquí tenemos el diseño, aquí tenemos la página y con eso todo funciona. ¿Tienes alguna pregunta? No es un tipo de CMS, es un CMS, es un CMS sin cabeza con editor visual en tiempo real, es el único que tiene un editor visual en tiempo real, así que avísame si tienes otras preguntas sobre el Storybook. Puedes hablar, es más fácil para mí leer.

Podemos usar Storyblock CMS fácilmente, editable, etc. Si hago clic aquí, puedo editarlo en tiempo real. De acuerdo. Y también ahora, si imprimo en la consola mi historia, porque aquí en mi código, en el diseño, de acuerdo, en el diseño lo inicializo, te lo expliqué, pero en la página de inicio, así que importo el estado de Storyblock del usuario y el estado de Storyblock del usuario va a pasar este contenido que era una cadena y lo hace utilizable. Así que creo una variable historia a partir de este data. Así que consulto este data aquí y a partir de este data, obtengo mi historia. Así que he impreso en la consola la historia, para que puedas ver lo que tenemos aquí. De acuerdo. Aquí hay una historia, el contenido, el cuerpo, porque el componente aquí se llama cuerpo en la página. Y aquí puedes ver que tenemos nuestros dos componentes, el héroe y el texto. Y en este héroe, tenemos la descripción, el titular, la imagen, y aquí tenemos el texto largo. Componente con este contenido, verás que tenemos encabezados, párrafos, por lo que es la función de renderizado que hemos visto la que va a dispersar esto. De acuerdo. Luego también importamos Storyblock editable, por supuesto, que envolverá toda la página y el componente de Storyblock. Así que creamos esta variable componentes a partir del cuerpo del contenido de la historia y mapeamos alrededor de estos componentes que estamos viendo en el registro de contenido y renderizamos este componente de Storyblock pasando el bloque y el ID del bloque y este componente de Storyblock se encargará de la visualización condicional de este componente si existen. Y luego muestro mis componentes aquí. Así que aquí tenemos el diseño, aquí tenemos la página y con eso todo funciona. ¿Tienes alguna pregunta? De acuerdo, sí. No es un tipo de CMS, es un CMS, es un CMS sin cabeza con editor visual en tiempo real es el único que tiene un editor visual en tiempo real así que avísame si tienes otras preguntas sobre el Storybook. Puedes hablar, es más fácil para mí leer. De acuerdo.

Construyendo Componentes de Comercio Electrónico y Solución de Problemas

Short description:

Te mostraré cómo construir componentes de comercio electrónico, incluyendo un componente de producto único y una cuadrícula de categorías. Puedes navegar por las colecciones, seleccionar categorías y ver cambios en tiempo real. También puedes enfocarte en productos específicos, editarlos y personalizar el diseño. Además, puedes mostrar los productos más vendidos utilizando el componente de grupo de productos. Recuerda guardar y actualizar los datos para ver los cambios. Reiniciemos Gatsby y recarguemos la página para resolver cualquier problema.

De acuerdo, ahora te mostraré cómo construir los componentes de comercio electrónico. De acuerdo, así que en la rama 40, creamos los componentes de Shopify en Storyblock. Creamos una carpeta Shopify dentro de Storyblock, Storyblock uno, no storybook. Ese es el correcto. Y aquí está la forma en que lo hago, pero puedes organizar los componentes como desees. Y primero creo un componente de producto único. Así que nuevamente, importo storybook editable de Storyblock. Mi principio de sincronización fácil, así que creo mi componente con la propiedad bloque y a partir de ahí, obtengo mi UID, titular, descripción, diseños y producto. Y voy a la rama y te mostraré cómo se ve esto y qué se pone de Shopify y qué viene de storybook.

De acuerdo, aquí en Storyblock, Shopify, voy a cerrar todo eso. Aquí está mi producto único. De acuerdo, y ahora si voy aquí, voy a agregar los productos aquí. Así que ves el producto único, ¿verdad? Aquí estamos, producto único, bueno, quiero agregar primero la cuadrícula de categorías. Así que esta cuadrícula de categorías nos permitirá navegar por nuestras colecciones, por ejemplo. Navegar por nuestras colecciones, y vamos a seleccionar las categorías. Por ejemplo, hombre y mujer, ves y todo aparece en tiempo real. Y ahora quiero enfocarme en un producto como mostré antes. Y bien, selecciono mi producto, por ejemplo, este, y listo. Tengo mi titular, nuestra mejor camisa y alguna descripción aquí. Ahora, si quiero tener otro producto, así que copio este y lo pego aquí, y mi producto está aquí, ahora lo edito. Elimino este y agrego este. Y ahora quiero un mejor diseño, así que quiero que este se invierta, así. Y ahora quiero mostrar nuestros productos más vendidos, así que uso este componente de grupo de productos. Y bien, nuestros productos más vendidos, y selecciono mis productos. Así. Y aquí está. Y aquí también puedes arrastrar y soltar todo lo que ves. Pero ahora te lo mostraré aquí. De acuerdo. Tengo que reiniciar Gatsby de nuevo. Aquí uso Yarn Develop porque tenía este paquete de punto final Gson, que me permite actualizar la capa gráfica como un botón de actualización, y así puedo actualizar los datos sin tener que comenzar desde cero. Pero olvidé hacerlo antes. De acuerdo. Ahora deberíamos ver nuestros productos aquí. No. ¿Por qué? ¿Por qué no están aquí? Lo sé, porque no los he guardado. Así que necesito guardar. Esto es lo que estaba diciendo. De acuerdo. Aquí necesito actualizar los datos. Y ahora si recargo, recargo todo debería volver y todo desaparece y no es normal. ¿Qué pasa ahora? De acuerdo. Creo que se detuvo aquí. Algo salió mal. Así que lo voy a reiniciar de nuevo. De acuerdo. De acuerdo. Aquí está. Y también debería funcionar. De acuerdo, creo que está aquí.

Construyendo Componentes de Productos y Categorías

Short description:

Aquí tenemos el componente de producto único, que obtiene datos tanto de Storyblock como de Shopify. El componente de cuadrícula de productos también obtiene datos de Shopify para mostrar productos y permite a los usuarios agregar artículos al carrito. El componente de cuadrícula de categorías obtiene datos de Shopify para mostrar categorías. Utilizamos consultas estáticas para obtener los datos necesarios. Los componentes se construyen utilizando los datos obtenidos, incluyendo el identificador, variante, precio e ID de Shopify. También creamos colecciones utilizando el identificador e imagen de Shopify. Si tienes alguna pregunta, por favor avísame.

De acuerdo, creo que está aquí. Y aquí, si, déjame ver aquí tengo, sí el producto aquí, quiero que veas, sí, aquí está el contenido, nuestro contenido, nuestro cuerpo. Y aquí tenemos nuestros seis componentes. Y veamos, así que aquí está el producto único. Vemos los componentes, la descripción, los titulares, el diseño. Estos son los campos que provienen de Storyblog. Luego, este campo de producto es el que crea el complemento y renderiza los elementos, así que aquí tengo limitado a uno así que solo tenemos un elemento. Y aquí tenemos la descripción. Así que esta es la descripción obtenida de Shopify, el ID, la imagen que se obtiene de Shopify y el nombre obtenido de Shopify, así que esto proviene de Storyblog y esto se obtiene de Shopify, de acuerdo. Lo mismo ocurre con los productos aquí. Tenemos el titular de Storyblog y los productos que son elementos obtenidos de Shopify nuevamente. Y lo mismo ocurre con la cuadrícula de categorías aquí. Tenemos el titular y nuestras categorías que provienen del complemento obtenido de Shopify y aquí tenemos el nombre y la descripción. Así que aquí en mi producto único, obtengo este UID, titular, descripción, diseño y producto y luego el producto seleccionado es el primer elemento del IRA porque solo estamos usando uno. Y obtengo la imagen, nombre y descripción de este producto seleccionado. Y luego construyo mi componente de la misma manera con las claves de UIDs y Storyblock editable. Y este es el titular y la descripción de Storyblock. Y estos son los datos de Shopify. Así que esto está bien para el producto único porque tenemos todos los datos que queremos para construir nuestro producto único. Pero si vamos a la cuadrícula de productos y en la cuadrícula de productos, incluso podemos agregar al carrito. Podemos enlazar al producto único. Entonces necesitamos algunos datos como el identificador y la variante para obtener el precio, el ID de Shopify de, necesitamos mapearlo con el producto en Shopify para obtenerlo. Entonces, para hacer eso, estoy usando nuevamente, uso de consulta estática para obtener todos los productos. No creo que sea la mejor manera si tienes miles de productos, pero para el taller fue la forma más rápida de usar la consulta estática. Así que obtengo todos los productos de Shopify. Creo que puedes usar, por ejemplo, Apollo u otra forma. Y aquí obtengo los identificadores, el título, el ID de Shopify y el precio que necesito para construir este componente. Luego aquí obtengo mis titulares y mis productos. Creo esta variable, todos los productos de data o productos de Shopify. Y luego aquí mapeo los productos de Shopify. Así que los elementos de los productos, y obtengo este nombre, imagen, imagen e ID del producto de SB. Y luego tengo que encontrar en todos los productos de Shopify aquel que tenga el mismo nombre que el título del producto. Y luego de este producto, obtengo el identificador y las variantes. Y luego construyo mis componentes. Entonces enlazo al identificador, obtengo el precio de la variante y el ID de Shopify de, de la variante, y luego para la cuadrícula de categorías es lo mismo. Así que aquí hemos usado una consulta estática, obtengo todas las colecciones porque aquí quiero el identificador porque mi, mi categoría, ya sabes, enlaza a la página. Así que quiero el identificador y la imagen y, y así obtengo todas las colecciones que también son notas de colección de Shopify. Y luego mapeo las colecciones que provienen del complemento de Shopify. Obtengo el nombre y el ID y encuentro la colección correcta en todas las colecciones, que es la que tiene el nombre, que es igual al título de estas colecciones. Y construyo mis identificadores y mis imágenes y construyo mis colecciones. Y creo que hemos llegado al final. ¿Hay preguntas? No, tengo una cosa. Sí. Encontré el enlace que pueden usar para instalar el complemento. ¡Fantástico! Puedes agregarlo a la página de Notion si quieres. Sí, he perdido el chat. No sé dónde está. De acuerdo, entonces puedes agregarlo a tu página de Notion. ¿En qué sección quieres ponerlo? Tal vez podamos agregarlo en la sección donde comenzamos con Storyblock. ¿Storyblock? Sí.

Agregando Storyblock y Conectando

Short description:

La Parte 3 trata sobre agregar Storyblock y conectarlo. El orador anima preguntas y comentarios de la audiencia. Mencionan estar disponibles en el stand de Storyblock, jugar Tetris y aclarar la diferencia entre Storyblock y Storybook. El orador expresa gratitud e invita a la audiencia a disfrutar de la conferencia y utilizar su herramienta.

Entonces, en la Parte 3 agregamos Storyblock, así que conectamos Storyblock. Sí, agrégalo allí porque... Sí, genial. ¿Alguna pregunta? ¿Alguna reseña sobre este taller? ¿O algo que les gustaría decir? Todo es interesante para mí saber y por favor abran el micrófono y hablen conmigo.

¿No hay preguntas? He perdido el chat. Ahora, quiero excluir el chat y no sé dónde está. Gracias, Zahile. Otras personas, espero que les guste. Espero que disfruten de la conferencia mañana, así que no duden en venir a saludar. Estaremos en el stand de Storyblock así que pueden venir a charlar. También pueden jugar Tetris y ganar un teclado. Además, entenderán, creo, la diferencia entre Storyblock y Storybook, ¿verdad? Exactamente. Tenemos un desafío al respecto porque la gente lo confunde, pero realmente no es lo mismo y nuestro stand estará justo al lado del de Storyblock. Si no tienen ninguna pregunta, los dejaré y creo que me relajaré con una buena cerveza. Así es como los molestaré después de jugar, retrasado en el taller y disfrutar de Londres. Sí, Karin dice, sí, soy de Varsovia y sí, creo que se trata de Storyblock. ¿Eh? De acuerdo, así que espero que estén contentos de ver algo por lo que deberían quedarse hasta el final. Espero que les guste y que hayan aprendido algo nuevo y que utilicen nuestra herramienta. Adiós, gracias por asistir y espero verlos mañana.

Watch more workshops on topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
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!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!