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

♪ 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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í.

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í.

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.