We have pre-variance and here the variant has to be a private read. Now, if I inspect my banners. I can see I have a field for title, for text and for the image, but I have also a user type field and by default is empty. But here I have another component which has the original user type and here's the image and the title and content are different and here I have a performance user type and same principal for the personalized grid. I have the products I can choose here and I have a user type which is empty by default and I have two other components which has a performance user type and original user type.
Okay. So, now let's see how these, like, these blocks are built. So the simple ones, the banner one, we have the schema, title text and the user type which is a single option field and okay, the personalized banner, as I was saying, it's a block field name variant, same thing for the personalized grid and with a limitation to allow only specific components. Let's see the single product. So, in the single product, we have a headline, a description and a layout, say if we want left or right and we have another field which is a product type field, a product, no, a plugin type field and we have named it product. So, if I open it here, so, Storyblok, it's extendable and we can build any plugin as soon as you have an API, you can build a plugin, but this one, the Shopify one, BigCommerce and other platforms are available and pre-built for you on certain plans, so the Teams plan for Shopify and Enterprise plan for Storyblok and other ones. But you can also build your own plugins extensions if you use a platform that we have not created the plugin. So, to connect it, we use here in the dropdown list, we choose SB Shopify, and we connect here the endpoint and tokens that you get from Shopify, and here I have limited to one product and select only product. We could also choose category here, but here it's for product. So this is for the single product, and for the product read is the same principle, we have the user type, and we have the product but here we have a limit to four products. Okay, so this is how it works in the back office. And now in the code, so we continue here. So we have stored the user-type cookie, which is the collection handle, and now we create the banner component. And in this banner component, Okay, this is very simple because we get from the blog, the user types, the UID, the titles of the text and the image, and we pass StoryblockEditable, and then we have all the data to build our banner with the JSX and Tailwind. And here we pass the user type in the link to, so it will link to the right collection. So if it's original board, it will be collection slash original boards. Okay. So this is for the banners. And now we create a personalized banner component. So here we import get cookie, and we create the user type by getting the cookie with get cookie. And then we get the variant by filtering the block variants. So we choose one which has the same user type. And from there, we map, there is only one variant, but it's an array. So we need to use again, a map function and use Storyblok component. And from there, it will display the right banner or the right, or the right product tree depending on the navigation from the user if you have visited the performance board or the original board. And then we need to pass all these components to Storyblok init in the root file, okay?
Any question? No, nope. Okay all the people, all good? Mirko, have you finally, solved Thomas? Yeah, yeah, yeah. Yeah, Thomas, yes? The problem was just run the yarn dev command because I shut down before when I install the dependencies and now I run a yarn dev and then I run back local host the command one. Okay, so it works now? Yeah, yeah. Okay, great. Okay, great. So here, if I go to the... Okay here, I just made the banners in this branch. So now, okay, we are going to create the Shopify components in the code. So we go to the branch seven Shopify components. Okay. So here, I created Shopify folder into the blocks one. This is my way of doing thing. Again, you can make it different, but I think it's handy. And, oops. So here, I create the single product. Okay. So I get from the blocks your UID, the headlines, the layout, the description and the products that I rename here as the product. Because I'm going to show you, I don't have all the data I need from Storyblok. So from Storyblok, if I go here, okay, I have my product field here, my product component and I have my items inside, well, only one item. And from there, I get the IDs, the names, the types, the image, but this image is small, it's 140 so I don't want to use this one and the description, but I want to link this product so I need the handle and I need a bigger image. So I need to map it with all the products. So for that, I didn't do it the better way, I have to correct that because for that, what I have done in the page root, in the splatch root here, I have query all all the products. I think we can query only the right one with a variable but for the moment I have done it like that, I have to correct that and so from there, I get all my products in my in my loader here. Okay so here products start from query products query and I return it here products nodes in my return from my loader. So from there in my single product, I can get all the products from used loader data. And then I find a filter the product that has the same ID because both have an ID. So it gives us a parameter to filter and to get the product that corresponds to this one. And from there, I get the handle and variance and I get my image from there. And from there, I have all the data to build my single product here. Okay. Any question about that? So it's just because you're missing the data from the plugin? It's not giving you all the data? Yes. The plugin pulls data from Shopify but not all the data. So we need to get the missing data and to map things with that. But I think, yes, I need to do it in another way because I'm loading too much data. More, it's not the live website, it's a demonstration. No, no, no, no. I understand, I understand. But with 10,000 products it will not work, I think, I guess? Yes! No, no. I know it is, that's why I say it and yeah.