Tenemos pre-varianza y aquí la variante tiene que ser una lectura privada. Ahora, si inspecciono mis banners. Puedo ver que tengo un campo para el título, para el texto y para la imagen, pero también tengo un campo de tipo de usuario y por defecto está vacío. Pero aquí tengo otro componente que tiene el tipo de usuario original y aquí la imagen y el título y el contenido son diferentes y aquí tengo un tipo de usuario performance y el mismo principio para la cuadrícula personalizada. Tengo los productos que puedo elegir aquí y tengo un tipo de usuario que está vacío por defecto y tengo dos otros componentes que tienen un tipo de usuario performance y tipo de usuario original.
Vale. Entonces, ahora veamos cómo estos, como, estos bloques están construidos. Así que los simples, el banner uno, tenemos el esquema, título de texto y el tipo de usuario que es un campo de opción única y vale, el banner personalizado, como estaba diciendo, es un campo de bloque llamado variante, lo mismo para la cuadrícula personalizada y con una limitación para permitir sólo componentes específicos. Veamos el producto único. Así que, en el producto único, tenemos un titular, una descripción y un diseño, digamos si queremos izquierda o derecha y tenemos otro campo que es un campo de tipo de producto, un producto, no, un campo de tipo de complemento y lo hemos llamado producto. Así que, si lo abro aquí, Storyblok, es extensible y podemos construir cualquier complemento tan pronto como tengas una API, puedes construir un complemento, pero este, el de Shopify, BigCommerce y otras plataformas están disponibles y preconstruidas para ti en ciertos planes, así que el plan de Teams para Shopify y el plan Enterprise para Storyblok y otros. Pero también puedes construir tus propias extensiones de complementos si usas una plataforma que no hemos creado el complemento. Así que, para conectarlo, usamos aquí en la lista desplegable, elegimos SB Shopify, y conectamos aquí el punto final y los tokens que obtienes de Shopify, y aquí he limitado a un producto y selecciono sólo producto. También podríamos elegir categoría aquí, pero aquí es para producto. Así que esto es para el producto único, y para la lectura del producto es el mismo principio, tenemos el tipo de usuario, y tenemos el producto pero aquí tenemos un límite de cuatro productos. Vale, así es como funciona en la oficina de back. Y ahora en el código, así que continuamos aquí. Así que hemos almacenado la cookie de tipo de usuario, que es el manejador de la colección, y ahora creamos el componente de banner. Y en este componente de banner, Vale, esto es muy simple porque obtenemos del blog, los tipos de usuario, el UID, los títulos del texto y la imagen, y pasamos StoryblockEditable, y luego tenemos todos los data para construir nuestro banner con JSX y Tailwind. Y aquí pasamos el tipo de usuario en el enlace a, así que enlazará a la colección correcta. Así que si es original board, será colección slash original boards. Vale. Así que esto es para los banners. Y ahora creamos un componente de banner personalizado. Así que aquí importamos get cookie, y creamos el tipo de usuario obteniendo la cookie con get cookie. Y luego obtenemos la variante filtrando las variantes de bloque. Así que elegimos una que tenga el mismo tipo de usuario. Y a partir de ahí, mapeamos, sólo hay una variante, pero es un array. Así que necesitamos usar de nuevo, una función de mapeo y usar el componente Storyblok. Y a partir de ahí, mostrará el banner correcto o el árbol de productos correcto dependiendo de la navegación del usuario si ha visitado el tablero de performance o el tablero original. Y luego necesitamos pasar todos estos componentes a Storyblok init en el archivo raíz, ¿vale?
¿Alguna pregunta? No, nope. ¿Está todo bien para todos? Mirko, ¿finalmente has resuelto Thomas? Sí, sí, sí. Sí, Thomas, ¿sí? El problema era simplemente ejecutar el comando yarn dev porque lo cerré antes cuando instalo las dependencias y ahora ejecuto un yarn dev y luego ejecuto de nuevo el comando local host one. ¿Así que funciona ahora? Sí, sí. Vale, genial. Vale, genial. Así que aquí, si voy a la... Vale aquí, acabo de hacer los banners en esta rama. Así que ahora, vale, vamos a crear los componentes de Shopify en el código. Así que vamos a la rama siete componentes de Shopify. Vale. Así que aquí, creé una carpeta de Shopify en la de bloques. Esta es mi forma de hacer las cosas. De nuevo, puedes hacerlo de manera diferente, pero creo que es útil. Y, oops. Así que aquí, creo el producto único. Vale. Así que obtengo de los bloques tu UID, los titulares, el diseño, la descripción y los productos que aquí renombro como el producto. Porque voy a mostrarte, no tengo todos los data que necesito de Storyblok. Así que de Storyblok, si voy aquí, vale, tengo mi campo de producto aquí, mi componente de producto y tengo mis items dentro, bueno, sólo un item. Y a partir de ahí, obtengo los IDs, los nombres, los tipos, la imagen, pero esta imagen es pequeña, es 140 así que no quiero usar esta y la descripción, pero quiero enlazar este producto así que necesito el manejador y necesito una imagen más grande. Así que necesito mapearla con todos los productos. Así que para eso, no lo hice de la mejor manera, tengo que corregir eso porque para eso, lo que he hecho en la raíz de la página, en la raíz de splatch aquí, he consultado todos todos los productos. Creo que podemos consultar sólo el correcto con una variable pero por el momento lo he hecho así, tengo que corregir eso y así, obtengo todos mis productos en mi en mi cargador aquí. Vale así que aquí productos comienzan desde la consulta de productos y devuelvo aquí los nodos de productos en mi devolución de mi cargador. Así que a partir de ahí en mi producto único, puedo obtener todos los productos de used loader data. Y luego encuentro un filtro el producto que tiene el mismo ID porque ambos tienen un ID. Así que nos da un parámetro para filtrar y obtener el producto que corresponde a este. Y a partir de ahí, obtengo el manejador y las variantes y obtengo mi imagen a partir de ahí. Y a partir de ahí, tengo todos los data para construir mi producto único aquí. Vale. ¿Alguna pregunta sobre eso? ¿Es sólo porque te falta los data del complemento? ¿No te da todos los data? Sí. El complemento extrae data de Shopify pero no todos los data. Así que necesitamos obtener los data que faltan y mapear las cosas con eso. Pero creo que, sí, necesito hacerlo de otra manera porque estoy cargando demasiados data. Más, no es el sitio web en vivo, es una demostración. No, no, no, no. Lo entiendo, lo entiendo. Pero con 10,000 productos no funcionará, creo, ¿supongo? ¡Sí! No, no. Lo sé, por eso lo digo y sí.
Comments