Hands-on E-commerce Storytelling With Storyblok, Gatsby, Shopify

♪ Okay. So, I'm going to share my screen, and I'm going to show you what we are going to build. So, what? Sorry. Okay. Can you see my screen? Yes? Okay. So, please, I'm going to post. I don't know how to take out this bar because it's really annoying me. I'm going to delete the script of all the workshops. All the workshops. Okay.

So here is all the workshop, and, first, you have the link of the preview of the final website, which is here. So we are going to build a complete Shopify Gatsby website headless. That works perfectly. So if we go there, we can add to cart. So this is a Shopify catalog. You see the cart, we have one product, more we have the single product, we can add it to cart, and we can check out. Okay. And on the homepage, we are enriching our e-commerce, our content with, we are melting our e-commerce with storytelling and content that come from our headless CMS, Storyblocks. So here, these are two components from Storyblocks, a hero and a text, but this is pulled from Shopify. And we will see that it is the visual editor of Storyblocks. And here is a product from Shopify. So this is from Shopify and this comes from Storyblocks and from this product. And these products are pulled from Shopify and the headline comes from Storyblock. And from there, you can build whatever you want. For example, you can have a blog where you include products to make a better sale. And if we look at it in Storyblocks, it looks like that. First, I have to launch my… So here is the code. So, here is the repository. So, now what you have to do is clone this repository and on the main branch and type YARN to register all the packages. And from there, we are going to progress by branches and I will explain how everything works. We are going to build all the catalogues from Shopify, then we are going to buy the collections, then we are going to import the shopping cart, the checkout process and then we will integrate that with Storyblock and build the Storyblock components and use it in the visual editor. Okay? So, this is the initial repository.

And so, if I have a warning here, but nothing happened and I didn't solve it. So, if I go to my local host, this is the initial project. We just have simply a home and the cart page. So, we begin from scratch. I have just installed Tailwind to style it easily. And, Alexa, you have comments in the chat. Okay. They are trying to access. Okay. They are trying to access. Yes, sorry. Yes, I have to… Please, if you have comments, don't hesitate to open the mic and talk to me because I don't see the chat. I really prefer direct interaction if it's possible. Thanks. So, yes. I forget to share. Sorry, it's really… Here is it. But, Alba, thank you.

So, I have Alba that is looking at the messages for me. But, please, if you can't interact, don't be afraid to interrupt me. I'm happy to hear you and to talk directly. It's really better for me.

So, okay. So, let me know when you're ready. Let me know when you're ready. I continue commenting this repos. So, I have just created the essential components that are like a layout in Gatsby Eats. This is the global component that is wrapping the website. So, with this layout I put my header inside. My header is very simple. I just use Gatsby. That is a component from Gatsby to make links. And a card icon that is linked to the card page. So, this is really simple. And then we have the card page with just the H1 that is wrapping the layout and the index, the homepage. That is also wrapping the layout. Then we have an essential Gatsby file, a Gatsby config. This is where we install our plug-ins. I also have this js.config that allows us to have an absolute path with just this tilde to make the path to components and it makes it easier with this code in Gatsby node. Gatsby browser to where I have my styles from Tailwind. Of course, Tailwind and PostGSS config for Tailwind. This is the repo. Also here, I have documented how you can set up a Shopify shop, and I have also provided the product export and how to make collections, etc. As it's not very well explained and it's changing all the time, but for this workshop, we are not going to pass time here, but you will be able to do it.

So, I prefer to give you my variables, my envars from this shop that I have built for this workshop, so they are here in N. I'm going to put them in the chat and you can copy them. I'm going to put them here. Okay, let me know when you have copied that and everything is alright and so I can go on.

So, in the next step, we are going to the branch one connect Shopify and we're going to connect Gatsby and Shopify. For that, we're going to install the Gatsby Shopify source plugin, typing yarn add gatsby-source-storyblock. I copy this in the chat. And then you can add this code to Gatsby configure, with the store URL, the password, which is the admin API access token and Shopify connections. So, in the code it looks like that and everything is already written in the branch. We are going to cover lots of the idea, it's to show you the code and then you can explore it better after the workshop. So here in Gatsby Config, we have this Gatsby source Shopify. And now we are going to run again to stop this and to run again Gatsby develop. Okay, and now. Hey Alexandra. Yes. Oh sorry, I ran that and I got a GraphQL error that I can post in chat when I ran Gatsby develop. Okay. Not sure if anyone else maybe got that as well. Oh wait a minute. Oh, it looks like maybe a typo somewhere. Oh yes, I think yes, you need... Are you on branch one? Because on branch one, there is no Storyblock or anything. Yes, I am. In branch one, Storyblock is not installed, so I don't think there is Storyblock entry.

So I don't know why you should be on branch one. You know, for some reason, I'm on branch 14 when I cloned it. That's very strange. Yes, sorry I didn't check that. Yes, that is the last branch, so. I'll switch to that now. Okay, no problem. Thank you.

Okay. So, I don't know what to put all that in one screen. So, now, yes, we are going to localhost GraphQL, and here we see that we are effectively connected with Shopify, so this is GraphQL from Shopify into Gatsby. Gatsby has this data layer, and it brings all the data into GraphQL. And now, so now we are going to create the collections. So, we go, so I show you more about this GraphQL. Here we have all Shopify collections. So, this is our collections, and the nodes, and the title, for example. You see you've got jackets, women, and men is a free collection I have created, and the handle to make the links. And here we have all Shopify products and here we have all our products. So, you put the handle here. We have all our products here, well 10 products I think. I don't put another limit. Okay, so now we are going to create the collection. So, for that we go to Branch 2, Create Collections. And into we go to Templates, Collections, we have three parts of code here. And we are going to create these collection pages using the create page API from Gatsby that we use into Gatsby Node. So let's look into that. And this is how it looks.

Okay, so we are in branch two. And first, I'm going to show you that it works. So, I relaunched again, Gatsby. Okay, and now if we go to local host, and if we go to another page, you see that we have collection woman, collection man, and jacket. So if I go to collection woman here, I have just the title because that's what we're going to do first to show how it works. So this is our templates and collections. Here we bring the layout, GraphQL from Gatsby. Here we make a page query, and we get these handles. This handle that determine on which page we are. We get it from this page query function which is in utils here. I make create collection. This function, I show you how it works. It goes into Gatsby node, but I prefer to separate it so I bring it to create collections, and we create pages. I make this create collection, and the function is here. Also, yes, I have installed Paginate from Gatsby Awesome Pagination. So you need to type yard to make it work to install this plugin that it's used to make pagination. I have not built the pagination component here, but imagine if you have 1,000 of project, you we need pagination, so almost it works. So I get my template from collection. So this is the template that we build. Then I make my query to get what I need here. So I need the handle and the product count, and then I filter my collection to not get collections that I remove the collection that don't have products. And then I map around my collection and I paginate the context. That's why we use the page query because we need additional data in the context and the data we need here is the handle because this is how we filter our pages by the handle.

We see, we will see later for the single product that we use another method that is simpler but that cannot bring additional data. So we get our collections to have the titles, the handle and the description and we get all our products and we filter them by collections and by the handle to be for example, woman or jacket. The limit is a number of products we want to paginate and this is where I put it, items for page 50. So here we don't have pagination but if I put 10 for example, we will, and every launch, we will have 10 products only, so we can do that also.

Okay. As you can see now, we have only 10 products, but we have a page 2 here, okay? So let me know if you have questions. No questions? I go on. No. Okay, so next we're going to create the Product Card, so we go to Brand 3, Create Product Card. First, we are going to create an image component that uses Gatsby image. So Gatsby image come from Gatsby Plugin Image, and it makes a really optimized image, and it has several parameters, several props. Loading that we put by default lazy, but if an image is on top of the page, we put ingest so the image will load faster. The image, so the image uses Gatsby Image Data, and alternative text, and props. Then we create, I will show you where we see Gatsby Image Data. Then we create the product card components here. And two components. Yes, I have to change range. Okay, if we go to, okay, here is my image component, and here is my product card. So, I bring this image component and here's a prop, this product, and from there, I get my title, my handle, my variant, my feature and image. So, the handle I make the link, and the image is a featured image from the product. So, let me show you where is it in GraphicQL. In GraphicQL, so, in my product, if I put my featured image, here we have Gatsby image data, okay, and this is how it looks. So, it brings different sizes and re-optimizes the image. So, here is our product card and then, of course, we add the product card to the collection templates, so we import the component. Also, we need to add the fragment, who's the page query, I will need to show you that, and we include the component in the collection template. And also, we need to correct Tailwind because Tailwind by default has only two pages and components and we need to include templates here. So, let's look at this, so if I go to my collection now, template collection, I bring my product card here and I map around my products and here I pass my product and as see I pass my product handle and I put all the data I need here in my page queries so I need the titles, the handles, the featured image, gatsby image data and from the variants I need the price and then in Tailwind here, I put my templates and now if we go to our portal, God, I hate this toolbar, I don't know what to do with it. Somebody knows how to hide it, tell me because I'm used to several screens and oh, it disappears if I do that and I really feel bad with one screen. Okay, so you see now we have our collections. Okay, and the price title but we need to do the single products because we have done it and for the moment it leads to the four page. So now we are going to create the single products on branch four, create single products and here we are going to use the other method which is the file system with API to have the documentation and guides here if you click. And for that, we go to pages and we create this file like that Shopify product.handle because the handle will define the URLs. So if we go in GraphQL you can see that in, Shopify product, Share, Handle, okay. Yes. We have to enter it by product. But if we go to old Shopify products and then we will have the URL. So here's in old Shopify product, now then, handle, okay. So that will be our URL. So it's Shopify product.handle here my page is, so I go to branch four. And so if I go to my pages here, I have my products. So here I do a page query and I filter by the handles of my Shopify products and I query the data that I need. So the title of the description, the featured image again, the price from the variant and yes, I have two times a featured image. So this is the one we have to remove, I think. And so I get this data here and I destruct it and I get my title, my description, my variants, my featured image. And from there I build my product. So here we take, we have only one variant in a more advanced, and we real world shop, we will have several variants for the colors, the sizes, et cetera. But for this workshop, we keep it simple and we do only one variant to take. So first of the array with the price. Okay, so now we should see our single product. So, and while I sort the image, the title, the price, and the description.

Let me know if you have questions. Everything is good? So, something you want to see? Okay, Alba, you're fine? Yeah. Okay, so next.

Next we are going to do something simple. We are going to create the menu from the collection and for that we are going to provide gadgets that really like, just like the query and this book allows you to query data statically at the component level. So, when you need things in the header, in the footer, things that are global, you don't have to make props drilling across component to get your data, you just query it in the component you need and that's also, I love this. So, let's do that, branch five.

Okay. Okay, and here we go in AFK Disk Component Menu. So I from Gatsby, I impose GraphQL new static query and the link component. And in my menu component here, I use this OQ Static Query with GraphQL and I query the data to get the handle and the title from all my Shopify Collections. And then I create this variable collections, which is equal to, that I filter because I don't have a front page collection here, but it's something that you can use. For example, you make a collection of products that you want to display only on the homepage. You don't want front page or homepage or whatever to be in your menu. So I filter to remove the collection with the handle front page. And so I get my collections and then I just map around my collections and I make a link with the handle. And this is the result. We have this super menu and we have an error. I don't know why. Perhaps I have to re-launch that. But we will see. Wait. You know what I have here is a credit card. We have the credit card here and a credit card at left. Now I can type something? What should I do? You know what? Bひt iq n's f i n d p i a c e r. I would like to Рe-zoom the conversation a little bit. I have their number, but I don't have their credit card. I'll do this. It's nice to know. Because it's hard to be alone in front of the computer. I was hoping that it was an in-person workshop, but it's not. I was hoping to be in time, but I'm not. I was hoping to have a sticker screen, but I have it not. But fortunately, I have Halba. I'm still here in person. Okay. So I hope this will all disappear. The error disappeared. And our menu is working. Okay. Any questions? I don't think you have big questions on the menu, but... Because now we are going to part two to create the shopping cart and the checkout process. Now we have built all the collections and products. So let me know if you want to know something about this. Or if I go to the part two directly. Okay. So, let's go to part two. So we go to branch six. So here, we are going to create context and we are going to build the function to add the product to the cart and then to remove products from the cart to build the cart page and have the checkout process. Okay.

So in this branch create context, we create a context, a folder context and a component store context and we import create context from react. We put some default values for cart, an empty array and add to cart an empty function. Then we export a store context that we get with create context and passing the default values and we export also the store provider and inside we create, again, the add to cart function that we will pass here in the store context provider and we will see that it overrides the empty function and we adjust the console log because we want first to see if everything works. Then into Getty Browser and we import the store providers that we have created here and we export the components of the wrapRoot element. So this wrapRoot element we can find documentation in Gatsby and we return the element wrap into the store provider and then we're going to create a basic button add to cart and on click we execute the function add to cart and we add this add the button to the product cart and we are going to test if it's working. So let's do that. So I go to the next branch and I close all these files. Let's see. So here are my context. OK, very simple. Super simple function here in Gatsby browser. So the Gatsby browser is wrapping the whole application. So that's why we do that here. And my component that I created for the shopping cart because it's a shopping cart with this simple button and we add it to our collections. OK, now we added it to our product cart. OK, here is my Add to Cart button. I think I have to restart here. It's running. OK, so let's test it. Let's open the console. Oops. So add to cart. And you see, it works, added to cart. So we're good. Our contact is working, our function is working, even if it's doing just the console log. So we can go on. Next, we are going to initialize the check out. So first, we are going to install Shopify by, by tapping yarn at Shopify by. So in branch 7, you just type yarn to install this. Then we are going to create a check out state, check out and set check out with new state from react. And we are going to create a constant initialize checkout. We're going to trigger this initialize checkout with user effect. You also create a constant is browser is browser to check if we are in the browser and not choose a window when we are not. Then we are going to modify the function out to add to cart. So all this happen in the context. So and yes, and also I build my clients with the client. So this comes from Shopify buy. And here I integrate my store URL and my storefront access token. Then, okay, my checkout and checkout is browser type of window and defined. And here I initialize my checkout with try catch. So we create a constant new checkout and this come from the client. So you can console log this checkout and we get this function create. And then we set the checkout to this new checkout. And we initialize that into useEffects. OK, and now we also create a buy now button. So from the new checkout, we go to web URL, and this is going to open a new window with the checkout for this product. And we also need to add the variant ID to the button to add to cart, because we are going to use that to checkout. I think it's this. The button to add to cart needs a variant ID to get the right product. Where is my function? Add to cart.

Yes, it's here. The variant ID is needed here. And this variant ID is Shopify ID from the variant product. Okay, so we query here variant Shopify ID. And in the product cart we pass the values to the variant ID. So, variant zero Shopify ID here and then we test the functionality. So let's look at it into the code here. Okay, so in my store context... Let's see... Okay, my checkout, my initial checkout is here. I initialize it here and here, I pass my variant ID arguments to my and the quantity one because we can make, I put one by default, but we could make a component to choose if we want more. I have not done it here, but we can do it, that's not very complicated. And this new checkout, it's another function from client checkout, add line items and here we need the checkout ID and the line items that we create here. And yes. And then if we are on the browser, we open this new checkout for the page and we make a button, Buy Now button. So in my, okay, in my collections here. Let's see, I query my Shopify ID and in my product card, okay, I pass my Shopify ID, my variant ID here which is the Shopify ID of the variant. And in my button, add to cart, I pass the variant ID. Okay, so let's see if this work. Okay, so I don't need the console. Okay, so I don't need the console this time. So by now and you see, we have this window and the checkout that is opening here, so everything works. Perhaps I have create, yes, I have create a console log from the client so we can see also and of the new checkout. So we can see here's a check out function. And you can explore all that and then you check out the app also console logged it. Let me know if you have questions. All fine, everything clear, nice.

Okay, so next we are going to make this card persistent because we don't want to reload the page and lose our card. So, in the initialize checkout function, we check if a checkout already exists in the local storage, if it exists, we fetch it from Shopify. If not, we create it and we add it to the local storage. And then we send the checkout to the state, and then we add the button, add to cart to the single product.

So let's look at this. So this is always in store context. So I check if the checkout exists. So if it's in the browser, checking the local storage, getting checkout ID there. I initialize this, value checkout, and if the current check out ID exists, I fetch it from Shopify with this fetch function, and I pass a current checkout ID. And if it doesn't exist, I create a new check out, and I add it to local storage. So I create the new checkout with the function create, and I set the item checkout ID to the local storage, and then I set checkout to new checkout. I think that's also, let's see if everything works. So now if I go to my local storage, I can see I have here a checkout ID, okay.

I add also the button to the single product because I didn't have it before, so now we can see this single product and also this button, Add to cart. That's really simple in the code. If we go to my button, button Add to cart, I pass again the Shopify ID. So I also bring my Shopify ID here in my variant and I bring my variant ID. Okay. No questions? Good, you understand faster than me when I learned it.

Okay. So now we are going to create the shopping cart page. So we go to branch nine and we create this component. Where I am. I'm lost in my documents. Okay, we create a shopping cart, the cart item. Very simple, we pass the item as the props and the image is the item variant image source and the title, the item quantity and the price of that item that is going to be in the cart in the store context. We add different values for this line items. These line items, each item that will be in the cart. So we initialize them with an empty array to avoid errors which might happen and things like that. In the cart page, we bring this cart item and we bring the checkout. The checkout, I just did it to make a console loading so we don't need it. And so we map to this line items. That yes, no we need the checkout, sorry. They come from the checkout line items. We map them and then we render the cart item component passing the item and the item ID as key. And then we create a checkout button with checkout web URL. And we check out, we have this total price value and the amount. And also we create a shopping cart icon to display the number of items in the cart and add it to the header. So here we import again the checkout from use context, and the quantity is we reduce the checkout line items to get the total. And we just add it on top of the shopping cart icon and we styled it accordingly. So let's look at it in the code. So shopping cart... I guess I have to go to the next branch. So the cart item is there. That's my item, my image. Then in my cart page, my cart page, I bring my cart item, my checkout, and I map around my line items. And my checkout is here. And my cart icon is there with the quantity here and the shopping cart and some style to make it look nice. One thing to note also, when we add two carts, etc., there is a little delay. So in a real world application, you should put a loader or something to make people patient.

It's quick, but it's not immediate. So let's see if everything works. So now if I add the product to cart you see, we can see here in the cart and I'm getting two products. And now I open the cart and I have my products here. So everything works.

Any questions? Alba any questions? Not for me. It's normal, you're the best.

Okay. Now we need to make a function to remove the items from the cart. So we go to branch 10 removeItems and we create a RemoveFromCart function to the context. I don't know why it jumps. Sorry. OK, so we create this function RemoveFromCart. We pass the line item ID and we make a try, catch with our new checkout. And here in checkout, we have this function RemoveLineItems. We pass the checkout ID, the line item ID, and we set checkout to new checkout again. And then we add a delete button to the cart item. So we import this RemoveFromCart function from use context. And we add this button. And on click, we execute this function, RemoveFromCart, passing the item ID. And then after that, we're going to test our checkout process. So let's look at the code. So it's branch 10 and RemoveFromCart. So our new checkout, remove line items. And set the new checkout. And also we initialize a function here, RemoveFromCart. And then we pass all that, the default values, add to cart, remove from cart. And check out to the provider. And our cart is here. Our cart item, we have this button, onClick, remove from cart. So now we are going to test all that and make a real checkout to see if it works.

OK. So now you see, we have our delete button. I'm going to have a few more in the cart. And I'm going to delete this one. So it works. And I'm going to checkout now. So now I'm going to put my email here. OK. Let's leave it in Madrid now. I don't live in Madrid, but the address appears. Postal code, I don't know. I'll put mine. And we don't mind about that. And now I continue. Oh, I have a question. Karina. Ah, OK. Thanks, Evgenia. The GitHub URL, please.

Yes, thanks, Karina, to entering my place. But you need also this. This is the script from the workshop where you have everything here. OK. OK. OK. We continue to shipping, and we continue to payment. OK. Here we are using the bogus gateway, which is a check out to desk things. And we put one to make an order that is successful. We put any experience data and any security code, and we pay now. OK. So everything works. But here we can see our shopping cart is not empty. So this is a problem that we have to fix now. Because if we buy things, we want our shopping cart to be empty. So now we are going to make a function to refresh this cart after the checkout. So we go to the branch 11, refresh cart after checkout. And in our store context, we create a function, new ID, that will allow us to create a new checkout ID that we can reuse. So we create the constant new checkout with checkout create. And if we're in the browser, we set this item into local storage, and we return the new checkout. Then in initialize checkout function, we check if there is a completed checkout here. So if the current checkout exists, we fetch it from Shopify. But if new checkout has the value for completed at, it means that the checkout has already been completed. So we need to create a new one. So we make this new checkout with this function get new ID. And if it doesn't exist, we create a new checkout and add it to the local storage again with get a new ID. So if I go to 11, and to my store context, here is my get new ID function. And in initialize checkout, here I check if the checkout is already completed. And if not, I create a one. And let's see if that works. And you can see now my cart is empty again. OK, any questions? No questions. Everything's free. Fantastic. So now we are going to the best part because we are going to add Storyblock to this shop. We have a little problem. I don't know if it's solved because the Shopify plug-in, Alba I know you chatted about that. Do we have a demo plug-in for that? Not today. Not today. OK. But they can do this ask for access. OK. Because, OK. Yes, Alba is going to explain that in the chat because what happens is the Shopify plug-in from Storyblock requires a team account and is not in the trial. The thing that I didn't know before beginning this workshop that I did two days ago also. But Alba has found a solution. So you will be able to test it yourself, I think. Asking for a test plug-in that you can use for a time. So for the moment, what I'm going to do is show you how everything works and from the script and everything, you will be able to redo it yourself, I hope.

So on branch 12, connect Storyblock. First, I'm going to close things because I have too many things open here. OK, we are going to Storyblock website to sign up or log in. And me, I have already the space created with all the components. But on your site, you can follow these instructions. We're creating a new space.

I'm going to show you how it works. You go here. And you create a space. You React London. And you create this new space from scratch. And here it creates some content, but we don't need it. But we need this token. This token you can also add it from here in the Settings. Access token. And then you install the Gatsby SDK plugin. We can add Gatsby source storyblock. And you want this plug-in to Gatsby config. With this token. And so I'm going to show you here. So I'm going to show you my space. I have a space already created. OK. OK. So here in my end file, I have this Gatsby storyblock access token. And in my Gatsby browser, my Gatsby config, sorry, I bring this. I have to change branch. So branch 12, this Gatsby store storyblock with the access token. And now if I restart Gatsby, we should see the connection with storyblock.

Okay, so let's go to GraphQL. Okay, you see all storyblock entry nodes. And here I want the content and the full slog. And you see that this content is rendered as a string. And if I go to my, you see I have components here, so this are the components, the content of these components. But now we see that our repository and our Storyblock is not connected. I'm going to do that. So we need to add the Development Server to Storyblock. For that we are going to Visual Editor and add Storyblock 3010 Server as a default environment. And we are going to entry to the entry configuration and add this as a read path. Storyblock version two needs HTTPS. And so for that we need to install a proxy. So for Mac, you have the instruction for Mac and here for Windows, you need to install that and then to run the proxy, so I'm going to do it. And so we map to the proxy to local host 3010. Why is not working? Okay. Is my thing running? Yes. Okay. Any idea, Alba, why the proxy is not working? It has always worked until now. I do not have it. Are you okay? This will be fine. Are you using 8,000 pixels of that? Yes, yes, but I always use the same thing, and it does always work.

So I don't know today. Do you have a different URL of the space? What? The URL in the space, in the settings? Yes, yes, it's always the same space that I use each time I do it. I do it the other day for the demo client, so it's... Refreshing the project? All right, let's move to the right one. I've got this toolbar, it's driving me crazy. No. I missed the command. Oh, God, speak the level. Yes, I'm going to try that again. There is no way to hide that. Yeah. There is a way. There is a way? Yes, yes. Hi floating mission controls. Yes. Thank you. Thank you.

Okay, gets bigger and gets bigger. Yeah, because you are always taking the branches, so... Yes, I don't know. So, we should be the same size as the first, because we give like... No, I don't know what they mean. And... Because we give like a little bit bigger, then we have to put this tong, then we have to pop out and burn a little bit, I don't know much is found and I don't know what that means and... I don't know. I don't know what it means. Are you running the local proxy inside the printer? No, I do it for another... You need to re-design, because otherwise the local host... It works now with EPR, I don't know if I... It has worked. Just that works. I don't know... I always did it at the root of the computer and now I don't know what it was not working in the other terminal. So, it works. I usually do it by RACO. It works. So, okay, so now we should... So, here in the Visual Editor, in the Settings, Visual Editor. Yes. I need... This is not the right one, I'm going to close this one, here in the Settings, Visual Editor. I have this localhost. I need to have the treading slash here and also now, in content. Now you see, we are connected. We are seeing our website into this Visual Editor. Okay, so this is a real website and displayed through a new frame thanks to the Storyblock JavaScript bridge. And also, here, what I have done in the entry configuration, instead of to be home, the real path is just the route here, okay? Any questions? Okay.

So, now, we are going to create some Storyblock components. So, into the components, we create a Storyblock folder, and we need to install also a Storyblock rich text react renderer because we have a rich text component We have a rich text component and need the render function from this component in order to render the rich text field, and we create a hero component. So, we bring Storyblock editable from our SDK get this through Storyblock, and that will allow us to click on a component and you will see it opens immediately as a component and you can edit it in real time.

We pass a block property. And from this block, we have all the elements from the block. So, first, let me show you how these components are built. So, here I have the hero and the text. You see I have a headline, a description and an image. And in the text I have this long text, which is a rich text field. And here is my block library. And in this block library I create all my components. First, we have the page. The page is a content type. So all that is called stories and the page is a content type, so it's a template with the model to create the pages and to create any content types. So it's a page, can be an article. And here it's done with a special field named blocks. And this block field means that we can nest any other component and other block into it. So it's a way to make a builder. We can also limit the component we want. We can allow a maximum or minimum, and we can allow only specific components or group of components. Here we can create a group. So this is can really be very granular in what we want to do with it. Of course, we can also have other fields if you want a headline here. We could have it. But here we just have this block field. So we can have any component into it. So the hero field, we have three fields in it, a headline, a text area and image. In the text field, we have just a rich text component. And then we have this product component, where we use the plugin field. And this plugin field is connected to the Shopify plugin, the one that, unfortunately, you cannot try now, but I hope it will be possible. And to connect it, you connect it to the endpoints of the Shopify URL and the token, and then you can select products or categories and you can put a limit of the number of products, for the single product you want. Then there is a product grid, as you can see, this is the final result. So we have the single product, the product grid and the category grid here. So here I choose to display six products maximum and the category is the same thing, but I select only categories. So any questions on how the component works? You will see better when we're going to build them in real. So let's see how it's connected and our storyblocks components. So from this block we get all the other components, all the other fields, I mean. So in the hero we have the headlines, the description and the image. We wrap it in storyblock editable and as key we give the UID. And here we get our image, our headline, our description. And for the text component we get this render function from storyblock rich text react renderer, and we have to pass our long text to the render function to parse it and get all the content from it. Then we initialize the storyblock API into the global layout component. So we import storyblock init and the API plug-in from Gatsby-sourced-storyblock. We also import the component we have created. Into storyblock init we pass the access token, the API plug-in and all our components. And then we create the home page. So we create the page query for full-slug home here. So the page query, we filter our storyblock entries by the slug home to get only the components from the home. And here we get the names of the contents of the slug and over that we will need to build our components. So, I'm going to show you the results. Okay. And now, if I go here, you see, we can see our components. We can drag and drop them.

We can use easy storyblock, editable, etc. If I click here, I can edit it in real time. Okay. And also now, if I console.log my story, because here in my code, in the layout, okay, in the layout I initialize it, I explained to you, but in the homepage, so I import user storyblock state and user storyblock state is going to pass this content that was a string and make it usable. So I create a variable story from this data. So I query this data here and from this data, I get my story. So I have console.log the story, so you are going to be able to see what we have here. Okay. Here's a story, the contents, the body, because the component here is named body in the page. And you can see here we have our two components, the hero and the text. And in this hero, we have the description, the headline, the image, and here we have the long text. Component with this content, you see we have heading, paragraphs, so it's the render function that we have seen is going to dispersing this. Okay. Then we import also storyblock editable, of course, that will wrap all the page and storyblock component. So we create this variable components from a story content body and we map around this components that we are seeing the content log and we render this storyblock component passing the block and the block QID and this storyblock component is going to handle the conditional display of this component if they exist. And then I display my components here. So here we have the layout, here we have the page and with that everything works. Do you have any questions? Okay, yes. There is not a kind of CMS, it's a CMS, it's a headless CMS with real time visual editor is only one that is with time visual editor so let me know if you have other questions about the storybook. You can speak, it's easier for me reading. Okay.

Okay, so now I'm going to show you how to build the e-commerce components. Okay, so branch 40, create storyblog Shopify components. We create a Shopify folder into the storyblock, storyblock one, not storybook. That's the corrector. And here's the way I do it, but you can organize the components as you want. And I create first a single product component. So again, I import storybook editable from storyblock. My easy sync principle, so I create my component with the prop block and from there, I get my UID, headline, description, layouts, and product. And I go to the branch and I'm going to show you how this looking and what is put from Shopify and what comes from storybook.

Okay, so here in storyblock, Shopify, I'm going to close all that. Here my single product. Okay, and now if I go here, I'm going to add the products to here. So single product you see? Here we are, single product, well, I want to add first the category grid. So this category grid we're going to be able to browse our collections, for example. So browse our collections, and we're going to select the categories. So for example, man and woman, you see and everything up appears in real time. And now I want to focus on one product as I shown before. And okay, so I select my product, for example, this one, and okay. I have my headline, our best shirt and some description here. Now, if I want to have another product, so I copy this one and I paste it here, and my product is here, now I edit it. I remove this one and add this one. And now I want a better layout, so I want this one to be reversed, like that. And now I want to show our best sellers, so I use this product group components. And okay, our best sellers, and I select my products. Like that. And here it is. And here you can also drag and drop everything you see. But now I'm going to show you here. Okay. I have to restart Gatsby again. Here I use Yarn Develop because I had this endpoint package, Gson, that allows me to graphics layer as a button refresh, and so I can refresh the data without starting with that. But I forgot to do it before. Okay. So now we should see our products here. No. Why? Why are they not here? I know, because I have not saved. So I need to save. So this is what I was saying. Okay. Here I need to refresh the data. And now if I reload, I reload everything should be back and everything disappears and it's not normal. What happens now? Okay. I think it stopped here. Something went wrong. So I'm going to re-launch it again. Okay. Okay. So here it is. And also eight should work. Okay, I think it's here.

Okay, I think it's here. And so here if, let me see here I have, yes the product here, I want you, yes, the story is here, our content, our body. And here we have our six components. And let's see, so the single product here. We see the components, the description, the headlines, the layout. These are the fields that come from a Storyblog. Then this product field is the one creating the plugin and it render items, so here I have limited to one so we have only one item. And here we have the description. So this is the description pulled from Shopify, the ID, the image that is pulled from Shopify and the name pulled from Shopify, so this is coming from Storyblog and this is pulled from Shopify, okay. Same thing for the products here. We have the headline from Storyblog and the products that are pulled items from Shopify again. And it's the same thing for the category grid here. So we have the headline and our categories that come from the plugin are pulled from Shopify and we have here the name and the description. So here in my single product, I get this UID headline, description, layout and product and then just selected product is the first item of the IRA because we are only using one. And we get the image name and description from this selected product. And then I build my componental way the same way with the UIDs key and Storyblock editable. And this is the headline and description from Storyblock. And this is the data from Shopify. So this is okay for the single product because we have all the data we want to build our single product. But if I go to the product grid and in the product grid, we can even add to cart. We can link to the single product. So we need some data like the handle and the variant to get the price, the Shopify ID from, we need to map it with the product in Shopify to get it. So for doing that, I'm using again, use static query to get all the product. I don't think it's the best way if you have thousands of product, but for the workshop it was the quickest way to using the static query. So I get all the products from Shopify. I think you can use, for example, Apollo or another way. And here I get the handles, the title, the Shopify ID and the price that I need to build this component. Then here I get my headlines and my products. I create this variable, all products from data or Shopify products notes. And then here I map around the products from Shopify. So the products items, and I get this name, image, image, and ID from SB product. And then I have to find in all the products from Shopify the one that has the same name as the title from the product. And then from this product, I get the handle and the variants. And then I built my components. So I link to the handle, I get the prize from the variant and the Shopify ID from, from the variant, and then for the category grid is the same thing. So here we've used a static query, I get all the collections because here I want the handle because my, my category, you know, link to the to the page. So I want the handle and the image and, and so I get all the collection from that are also Shopify collection notes. And then I map around the collections that come from the Shopify plugin. I get the name and the ID and I find the right collection in all the collection, which is the one that have the name, which is equal to the title of these collections. And I made my handle and my image and I build my collections. And I think we are at the end. So, are there questions? No, I have one thing. Yes. I found the link that they can use to install the plugin. Fantastic! So you can add it to the Notion page if you want. Yes, I have lost the chat. I don't know where it is. Okay, then you can add it to your Notion page. In which section do you want it? Perhaps we can add it in the section where we begin with Storyblock. Storyblock? Yes.

So, part 3 add Storyblock, so we connect Storyblock. Yes, add it there because... Yes, great. So, any questions? Any reviews about this workshop? Or the things that you would have to say? Everything is interesting for me to know and please open on the micro and talk to me.

No questions? I have lost the chat. Now, I want to exclude the chat and I don't know where is it. Thank you, Zahile. Other people, I hope you like it. I hope that you will enjoy the conference tomorrow, so don't hesitate to come to say hello. We will be at the Storyblock booth so you can come to chat. You can also play Tetris and win a keyboard. Also, you will understand, I think, the difference between Storyblock and Storybook, right? Exactly. We have a challenge about that because people mix it but it's really not the same thing and our booth will be just next to the one from Storyblock. If you don't have any questions, I will let you and I think I will relax with a good beer. That's how you will disturb after playing, delayed in the workshop and enjoy London. Yeah, Karin says, yes, I'm from Warsaw and yes, I think it's about the Storyblock. Huh? Okay, so I hope you are happy to see something that you should stay until the end. I hope I think you'll like it and that you have learned something new and that you will use our tool.