Jamstack eCommerce 101

Hi everyone, so sorry I kept you waiting for a while. Welcome to today's workshop. We will be talking about jamstack e-commerce and this is just a one-on-one kind of workshop. My name is Bola G, IODG and I'm a developer advocate at Commerce Layer. What I do at Commerce Layer is to try to be a mediator between developers using our products and the company. I try to help developers be successful with our products and one of such ways is this workshop we are having today. So pumped up to meet you all. If you can, you can just introduce yourself here at the chat, just say hi so we can catch up and know each other. So before we delve into the actual hands-on workshop, I will just take a few minutes to talk about jamstack and headless Commerce so we can all be up to date with the core concepts of what we're talking about today before we delve into the actual workshop. Like I said, I'm Bola G, I'm a software engineer, content creator and all that. So I didn't see anything in the chat but just a few things before we start. I would be sharing some links in the Discord channel and that would include a link to the repository and some other resources we'll use for this workshop. If you have any questions, you can pop it up in the chat or just drop anything there or also in the Discord server and I will be responding as we proceed. So before we move right into the workshop, I would like to introduce you to jamstack, headless Commerce and what Commerce Layer is basically. Yes, so jamstack is pretty much an acronym for javascript APIs and Markup Stack and this is a modern architecture used to build modern web applications and you know with the jamstack websites are just plain html pages regenerated by SSG static site generators during build time and you deploy to a CDN. I know most people say jamstack is nothing new so why do we just have jamstack now? But jamstack is actually just an architecture, it's a way, it's a modern architecture of building websites as compared to the previous ways we had it in a traditional web development age and what this means is you can have server-side functionalities and dynamic content encapsulated into APIs and these APIs can be plugged into several applications and served as normal html pages rather than having a monolithic application with several core functionalities bonded into each other. So with this approach there is more room for flexibility and you can use third-party APIs to enhance development. A tweet from Cassidy which I love so much that says jamstack is about building web applications in the same style as building mobile applications. You have your UI on one aspect and then you have your data pulled in whenever you need it. This can be during build time or whatever time you need your data and that's the beauty about jamstack. You can leverage on javascript, leverage on APIs and your Markup to build as much as you can imagine on the web and we'll be using this concept today to show how e-commerce has evolved on digital web today and how we can use jamstack approach alongside headless Commerce to evolve the shopping experiences we provide to our customers in the 21st century. So yeah let's just take a look at what headless Commerce is. Traditionally there's what we call the monolithic application or rather the monolithic architecture which is how e-commerce platforms were built many years ago and this means you have several functionalities in one single application, one single code base. The presentation layer, the backend, the business functionalities all coupled into one application. Now this brings several issues with web engineering and the e-commerce industry today because over time we've realized that e-commerce is evolving. The demands of consumers are increasing day by day. There is more demand for fast experience, there is more demand for more appealing user experiences and why these demands are growing. It is necessary for businesses to try to adapt to the increasing demands because that's one thing that's all business is all about when it comes to e-commerce. You're trying to satisfy your customers and you're trying to do that the best possible way you can and one other thing we need to note is that while your customer demands are increasing you're also having more competitors. There's a lot of storefronts out there in the world today a lot so if you fail to satisfy one customer that customer can go right to the next store and you know get what they want and that's not good for your business. You're trying to grow your business right and this is why we need to think about new technologies that can help us to adapt to the evolving e-commerce industry and also be able to satisfy the demands of our customers and one of such technologies is the headless commerce and like I earlier mentioned whatever engineering decision you want to make as an e-commerce business you want to ensure that it is proportional to the goals of your e-commerce platform so if you're trying to make a business decision you know it's proportional to the engineering decision they all link together and that's why we're here talking about headless commerce today. So there are three major factors that affect the success of e-commerce businesses performance I mentioned this already scalability and user experience so performance basically how fast can users access and interact with content on your platform and you know scalability how can you maintain the same high performance as traffic increases on your platform lastly you want to give them you know an appealing user experience that would satisfy them and either keep them on your platform or keep them coming back to your platform and these three major factors affected by the traditional e-commerce architecture because we have a code base with all the functionalities coupled into one it's going to be harder for you to adapt to new technologies without affecting the entire application if there is any issue in your code you literally have to redeploy everything if there is any security vulnerability you have to you know go right into the entire application and try to do some workarounds and if some particular components in your application require some upgrading or some scaling you really cannot scale them independently but you have to scale the entire application and this is just one among most of the challenges faced with the traditional e-commerce architecture right so headless commerce is one of such technologies that is designed to curb many of the limitations of traditional commerce now with headless commerce developers can independently view the front end layer the back end business and business logic the database layer integrations and you can utilize several commerce api solutions with no interruption to your customer experience because with the traditional e-commerce while you're trying to make these changes to adapt and serve your customers you end up affecting the experience they get because all your system is coupled into each other but now it's different with headless commerce so headless commerce is a practice of separating the front end and back end of an e-commerce store i think this is the simplest and kind of summarized definition of what headless commerce is and what this means is that you are decoupling the components into independent models hence you can have your front end layer which is the head and this is separated from the back end layer and it allows for more flexibility better performance and efficient development this is just a visual representation of what a monolithic architecture looks like as compared to the coupled headless architecture you can see here we have the front end and back end coupled into one application whereas in the headless commerce architecture you have your presentation layer on one end as an independent model you have the commerce api and you also have the back end now you should note that with the headless commerce architecture there is no head there's no front end basically because you just have api's and this api communicates with the back end and communicates with the front end and what this means is you can use your architecture on any presentation layer you decide to use it on all you have to do is plug in your api's into that particular front end and that's why each of them are all independent models so some of the benefits of headless commerce like i've mentioned earlier speed and flexibility now with the headless commerce architecture it's easier for you to leverage on the jamstack approach to build your presentation layer pages during build time you know use your static site generators and cache them serve them on cdns and that's a very much more less expensive architecture and it's much more faster and much more flexible and the fact that now your your components are all independent models your front end engineers can work on a presentation layer independently from the back end engineers and your content managers can also work on content there's no friction between each team working on a particular architecture and that's how flexible it gets when you're using the headless commerce architecture and security and reliability i mentioned earlier that if there is any vulnerability in your application in the monolithic architecture it's kind of hard because now you have a large code base to try to find what's wrong and even when you do find what's wrong fixing what's wrong might actually require you to touch several parts of the application which can bring down everything at once because now there are no independent models but with the headless commerce architecture you can easily work on independent models you can you know bring down some models for other models and it becomes much more flexible and reliable for you to work on your system and last is modularity and what this means is with the headless commerce architecture you can encapsulate some several functionalities into independent models and you can reuse them across several parts of your application this is harder when it comes to the traditional monolithic architecture where you have everything in one and then you know it's hard for you to work with models so this is just a brief introduction to what headless commerce looks like and throughout this workshop we'll be using this core concepts to explain more by you know building something that we'll talk about soon and yeah just quickly introduce you to commerce layer which is headless commerce platform and auto management system that lets developers you know add global shopping capabilities to their presentation layer with ease so commerce layer is a headless solution for global brands and just like we've mentioned earlier on how headless commerce work currently in the e-commerce industry commerce layer is one of those platforms that help you to you know get started with headless commerce so we provide you with several commerce api's and this api is handle your transactional functionalities of your e-commerce platform and you can integrate with any cms of your choice to manage your content and you know add international shopping capabilities to any presentation layer there is no limits to what you can do with commerce layer and just to mention there there are several key building blocks of commerce layer it's headless we've discussed about this several before now you can decouple your presentation layer from your core business transactions and that's one of the flexibility you get because commerce layer handles your business functionalities transactions and some other stuff we'll talk about today and your presentation layer is something that you have to deal with on the client side with your own engineers you know there's a kind of division here and the next is it's composable and what this means is there's a provision of several essential components and tools available for you to pick and customize your commerce flow based on your business requirements there are several commerce api's alternative and api's for several stuff tools and components available and with commerce layer you can decide to you know mix several tools together based on your business requirements to you know build up something that works for your e-commerce business and we'll talk more about this as we proceed in the workshop and the last thing is commerce layer is global you can sell in multi-markets with independent business logic without any data duplication what this means is you can literally have one data and you can have different logics for different markets in the u.s in europe in africa and several other locations without having to duplicate your data across each of these markets and that's just a summary of the core building blocks of commerce layer which leads you to more flexible world so just to show you a visual representation of what it looks like working with commerce layer the headless commerce architecture and jam stack you can see here that you have commerce layer so your merchants come into commerce layer to do cool stuff and handle all the transactional functionalities and from here you can set your prices stocks and some other things which we'll talk about more here and then your content editors work with the headless cms and this is where all your content is being handled and you don't manage content in commerce layer it's only transactional functionalities and you know the link between your content and your your commerce basically is your skus which we'll talk about soon and this is pretty much it you can deploy from here to a cdn deploy from here to cdn your code the business logic is entirely independent and everybody works independently and that's really cool i can see some hands i don't try to check i'm not sure if you want to ask a question or because i can't see you anymore so all right so i don't know if we are all following before we delve into the workshop can we just you know wave hands something in the chat so i can be sure we are on the same page before we delve into the workshop and while we are doing that you can just scan this QR code to get access to the workshop material which is a github repository and we'll use that to talk you know do all the talking today and you know so hi everyone are we still together okay it's working now okay discord cool all right so please if you have any questions just pop them in discord it's going to be easier for me to see see that so i'll just give you like one minute if you're scanning please just scan and then we can move right into the workshop all right thank you so much and this is the workshop material okay i'll send a link to the now if you find an issue and i'll keep sharing any other link i have while we proceed so yes so this workshop material is something that you can you can use even after the workshop so you can just follow along so we are on the same page so i'll just show you what we are going to be building today it's a simple static products page and the reason why we're doing this is because it's a one-on-one workshop and i want to show you the core functionalities and the basic core concepts that follow in the headless commerce architecture and how you can utilize that with commerce layer so we have a product page you have your product image product description product name price variants and functionalities to add to your cart and you know we're just going to walk through everything that falls into the headless commerce architecture and how you can do this with commerce layer and yes so if you're following along with me we are going to first of all start with uh just start with yes good i hope you can still see can you still see my code editor and the browser can you yes cool all right so we just have an html page so yes so we have a single html page and then we're going to have a bunch of javascript files and just few styling we're going to be using bauma i don't know if you're familiar with bauma but it's quite similar to tywin css this is not the css kind of workshop workshop but you can just check it out if you want to just send a link also in case you're wondering what it is and yes why is this popping up okay cool so just create an html file we're also going to create a css directory and also a source directory which is where all our javascript files is going to stay oh directory not a file oh i got a question from someone do we clone the project to start from scratch so please just follow along there are instructions in the material you can clone maybe after the workshop but for now and just let's start from scratch so you don't fall into issues there are some stuffs here that i would probably tell you to copy and paste you could just come grab them here while we are moving together i hope that's clear right so we are going to initialize a new npm directory so let's just quickly initialize a new package that json filed by running npm in it i hope you can see clearly so we have one and i have a bunch of packages we'll be using today babel we're back and some of the core um sdks and some cookies and loaders but this is a sample package edition file which you can grab now and just pump into your package adjacent file i think github has a new feature now where you can easily copy the package adjacent file and this is all what we are going to use today so if you're following you can just paste this package adjacent file and then try to install those packages so you don't have to do each of them one after the other so i'm just going to run npm install now so we can have these packages so i hope you're all following but while that is going on we are going to be using webpack because we're we're going to have several modules and different we're going to split javascript windows several models and we want to compile that into just one minifile javascript file so we can put that into our index um dot html file so you just create a new file called webpack.config.json sorry .js not json the js and by now i think our packages should be installed and then you have your package lock.json file by now and this is the script that is going to bundle all the javascript files we're going to have into one minified javascript file called commerce layer.main.js here so let's create the entry point for this script which is the main.js file that's where webpack would check for all the other models and you know compile them together into one file so in source let's just create our first javascript file main.js and let's test to be sure everything works if you look at your package.json you would notice there is a start script which runs webpack and sets it to watch for any changes and we're just going to run that now so we don't have to come back to do this anymore so just run npm run stats and i think everything should start working yeah so webpack will be running now but it's not compiling anything but if you notice now you have a dist folder with commerce layer dot main dot js and this is a file you are going to add to the html page cool right so now that we have our project folder set up let's now move ahead to talking about how we can get started with commerce layer so first you need to create an account and we need to do some get some tokens and some configurations so head to this url i'm going to paste it on the chat if you already have an account cool just log into your account i'm going to log in because i have an account already so now we are going to create a new organization i would recommend maybe now or later to check out the data model on commerce layer which shows you a link between all the functionalities and commerce layer users organizations marchands and everything you need to know about the building blocks of commerce layer and there's also like some database relational relationships between each of them and i want you to know now that each of them and i want you to know now that you've signed up your user and that user is assigned to one membership or one or more and then you can assign that to an organization so to get started with building an ecommerce experience you need to create an organization and you're going to be assigned to that organization so i have a bunch of them but let's you can start by creating an organization we'll call that geos nation for today now there is an option for you to see the organization with test data and this is what that test data looks like i think i have it somewhere here yeah you know there's a bunch of seed with just demo content basically addresses catalogs skus and all the resources required and ecommerce experience but for the sake of this workshop i'm going to show you how to do this with a cli but you can decide to see it if you want just double this and seed the organization else you can just create that organization and it's going to be empty with nothing so now you need to do all this for you to start using your organization your organization need markets it needs some shipping details it needs some products for you to you know start getting ready for your first order it's kind of blank currently and that's cool for us now so if you skipped the previous step i mentioned now you'll be wondering how to seed your organization with this test data we have here you can come here and you know see the the test demo data because that's what we're going to be using today so we would use the commerce layer cli to try to see and try to make some configurations to our application so first and first is for you to install the cli if you're using npm you can npm install the cli if it's yarn yarn global add the cli so if you can see my screen please run this command i already have commerce layer installed so if i run this yeah i have it installed so can you just do that quickly and once you install it gives you access to the commerce layer command or the c layer command or the cl command for lazy people like me i prefer to use the cl command or probably you might want to use the full command and yeah that's pretty much it with installing the cli now for you to use the cli you need to get your client id client secrets from commerce layer so if you're still on this your admin dashboard just there's a settings button below the page at the left hand side here i think this is covering this somewhere here okay yeah this is it if you scroll down a bit you will find applications under the developer section just click on it and we're going to create a new application two applications the first one is going to be the website which is what we are going to use when we are building the actual sales channel why the second one is going to be a clm cli kind so let's start with the websites and the kind is sales channel and the difference is with the cli you get access to your client secrets which you need you need while working with the command line or with the sales channel you just get your client's id so let's create that and also create another application we can call it cli and choose a kind of cli right there are several other application kinds when you're trying to build different authentication flow what we are doing so we can get the ids we need to authenticate with our application to commerce layer and you know just create that so now you should go into websites you should have a client id now and if you go to your cli you should have your client id and client secrets cool right so i hope by now you've installed commerce layer cli so let's try to log in into our js nation organization now this name is going to be different for you i must say because i already picked this name it's unique so probably yours might be anything you want but just make sure you note down this log you can find it here under the base end points so we're going to try to log in and the command for doing that is commerce layer which is the command you can ucl or c layer you put your organization's log right here mine is js nation so i'm just going to type in js nation and i'm going to grab my client id don't worry these are and i'm going to grab my client id don't worry these are all demos so it's in for you to see this okay i'm going to grab my client id and grab my client secrets and i'm going to yeah and i'm just going to eat the antipod oh as a stock in invalid so let's check again and be sure everything is fine oh i use the wrong slog there's supposed to be a hyphen in between the js nation yeah so that should fix it should log me in now yeah so automatically when you log into an organization the default organization becomes the last organization you logged into if i try to applications you can see i'm logged into several applications but just nation is the current one that's because i just logged in now right and now let's try to see the organization with test data i just i showed you the test data earlier this one which covers several resources for now if you go back to your dashboard you see that it's empty there are no shipments no skus no orders ideally when you're working for your business you do this manually yourself you want to add actual data for your skus for your inventory prizes and all those different resources please don't forget to check out the the data model if you're confused about what each of this mean like shipping shipping methods as we proceed we'll talk about them one after the other anyone will come across but this is like a comprehensive resource center that shows you all these different models so you can check it out after the workshop so the command to get started with sitting the application you need to install one plugin which is the commerce layer cedar plugin so if you already have the cli installed just run this command which is cl plugin install cedar to install the cedar plugin i already have it installed but i'll just put a command here so you can see if you're following can you just raise your hand so i'm sure we are on the same page are we all together okay i'm together with us just one person are we all together still one person are we all together still one person okay two three two so i'm only with two just two that's not cool are we together um you can there's a raise hand feature on zoom so if you want to raise your hand just click on the button or just say something in the chat you can just say hi i'm with you oh yes i'm just in the chat now a lot of yeses okay cool we can proceed now thank you very much just keep that somewhere here all right so now install your cedar and we're going to use this to seed our organization with test data and the command to do that is commerce layer seal but before you do that we need to generate an access token for your application because each time you try to access commerce layers api there needs to be a token from the com from the command line and this is something you would only do once once you run commerce layer app talking you don't need to run it again probably it's going to expire after a while but once you do this it generates a token for you and automatically saves it so if you don't do this you would not be able to see the organization via the command line interface and once you do that let's just see the application with commerce layer seed you can do cl i do cl so throughout this workshop you i would only be using cl rather than typing the full commerce layer and once we do this note that there is a resource url here which is the one i showed you earlier here and this is where the the cli is fetching this data from and where we are trying to see to is this end point yours would not be just just nation it'll probably be something else right and you can see here that it's creating each of these resources one after the other if you come back to your organization and refresh you should see that your your market now has a merchant stock location event remodel and priceless and it's going to keep checking the more the cedar keeps working you can see here so ideally if you're not using the cedar you're doing this manually the moment you add your stock the stock location this is going to check automatically by itself so very soon this would finish let's just give it some time and this is something you probably want to do yourself when you're working with your own data you can decide to see the organization with your own seed data like this and all you have to do is just to pass in a resource url or a seed url so this url this seed is a resource url because it has all the data you need for the entire organization addresses delivery times images skus and some other stuff right but if you want to see just a particular resource which let's say would be maybe just skus so rather than passing the entire seed resource url you can just passing that sku url into the same command you used earlier which is seal seed and then you use the u flag and then just pass this in so this is something you should note when you're working on your own actual ecommerce platform and you're trying to import your data from maybe your previous setup or you have a cedar somewhere it might be easier for you to just see everything in at once and i mean that might be the way you want to go for it as a developer because coming right here to start creating skus one after the other is is going to be tedious right you can just put this in a json file and deploy it somewhere and then seed it into your organization so by now i think we should be done with seeding let's see okay it's still seeding let's just give it a while well yours might have finished by now but maybe in a few more seconds it will be done already you can see that we have some skus here right products we have some sku options we already have inventory yeah we have some stock locations already these are all demo data from our seed right soon we're going to have some test orders and some test customers just all draft demo data it's still working let's give it some time but while we are waiting for that let's go ahead and start working on our html page right so now we have our organization sets and soon we're going to have all the details we need the resources we need skus prizes and some other resources so you can just set up an html page and first thing we want to do is to configure our application to access commerce layer and now throughout this workshop we're going to be using the static approach to working with commerce layer ideally if you're building your actual e-commerce platform you'll probably be using something like react or any ssg static site generator and you would be interacting maybe using the sdk and all and you'll have your content on the content management system like either graph cms or something and you're going to put all of that together but today we're going to have everything static the content is going to be right in our html page and then we're going to use commerce layer to add headless commerce capabilities stuffs like the prizes variants availability of the products and much more right so let's just drop this configuration somewhere around here at the bottom of the page so if you notice here we have an id called commerce layer config and some data attributes so if you're wondering what this is just drop a link for you now what data attribute means it's yeah so it's an html syntax where you can give a custom attribute to your html tag like for example we have database url and we're going to use this tag right in javascript to assess some key values that we're going to put into this tag so if you want to assess something like this database url in javascript it's going to become something like data base url and there won't be data anymore right so this is just what this means you're going to see a lot of this a lot of custom attributes database url data cache and lots more like this so i just dropped this link in the chat so you can check them out all right so by now i think organization should be done oh i'm still working so yes so in your own html file replace this organization url with your actual url remember where we found it you can check your tab here and just grab your jsnation or you can go to settings scroll down to applications now you're working with the search channel so you can just come to websites and you find your end point here so grab the entire end point and put it here yours will be different like i said earlier grab your client id also put it here yeah now remember if you're working with your actual application this is sensitive secret so you would not make this public like this you're probably going to put them in like an amv file but this is all tests so it's all fine and we just want to ensure that you get the basic core concepts without having to you know worry about the entire architecture next you need to add is your market id so in every organization they are going to be markets for the sake of our test contents we have two markets already three rather we have europe usa and uk so if you come here you should be able to see that or rather i can show you from the cedar there should be a market here yeah so we have three markets we have usa europe and uk and each of these markets have their own market id right so if you come back here and scroll down you're going to see the market id for europe for us and for usa right so for the sake of our workshop you can pick any of the markets i'm just going to go with usa but ideally when you're building your entire your actual e-commerce platform this is a decision that you're going to give to your customers to select someone trying to shop from the us would select us and it gives them access to the us markets which is this market id so you can now begin to imagine the flexibility and the functionality you can build with the headless commerce approach where you have multi-markets serving your customers from different locations right but for now since we're just working with one resource type we have just one product we are working on and one market we're just going to assume that our customer is in the us and we would put that in the market id and the data country could ensure it's the us because you choose us here and same for the the language code now for these this is the data cut url return url privacy url times url we wouldn't be using this because we are not actually going to have a checkout page i'm going to talk more about that at the end of the workshop but you can just put example data here ideally if you have your own if you have a functionality that has like a return page when your users finish placing the order this is going to redirect them to this page and all but you can just put them like example for now and leave the rest as true because these are just debug settings console settings and use that just for development so let's see what our organization looks like by now now okay everything looks pretty let's see shipments customers returns stop transfers skus yes all right so we can proceed more and next i would want you to create a config.js file in the source directory this is where we are going to do some of the configurations needed so we are going to grab these values from your html page and save them somewhere here right right so let's just have const file it's here config and set that to document that query selector now we're just going to query the selector commerce layer config now notice that we already put that id here right so this is where we're getting all our secrets from right so just put that here and yes now we can use this file so let's and right in this variable we're going to put all this data attributes we have here like i mentioned base url would now become base url using the camel case so just grab you can just grab these so you can type them out the same thing you have on your html page but now all the hyphens are out and you just have the actual data so this variable is going to try to fetch each of these values we provided here right and then next we are going to try to check if you've added some values to your html page and if this is there you know set the config to those values so base url you're going to set it to commerce layer config remember we already queried the selector oh sorry i forgot to put this remember we already queried the selector so let's just get the attributes and the attributes we're trying to get is the data base url right so what this means is we are setting the value from this data attribute to this variable right and we're going to do that for all the other resources we listed out there so just to save us time i'm just going to grab all the other resources it's the same thing make sure you add a comma after all of them and then you have this and the next thing we would want to do is to export this configuration of file so we can use it in other places okay so yeah we're done with our configuration and we can now proceed to the html so for now i'm going to start up just start a server for this i'm using the live server plugin which helps it's it's easier for you to open html pages and it has fast reloading and all fast reloading i know just let me find a link to it in case you don't have it i think it's called live server vs code yeah i think this is it you can download it if you don't want to so now we have an empty page so let's try to add something to our products page right like i showed you the demo this is what we are trying to build where's the demo i'm going to bring this very close here so we can all see i think the demo is here static comma yes let's keep the demo right at one side and then the actual page here so we want to have a product page where we have the image and this is all static contents you know description and we have the ability to select some variants and you have prices this is dynamic it's coming from commerce layer and then when you select the size you can select quantity add to bag and you know have your cart and all that right so let's start by adding the actual product page content so if you're following me i already have the boilerplates here you can see all of them so you don't have to work with this together first and first you would want to add bauma css which is what we are going to be using today i think i'll just change the name to something so i can see it we just call it static commerce demo and when we include bauma we are also going to include our own custom css just for a few styling we're going to do so you link route style sheet and we're going to set that to the css file in our css directory slash custom dot css did we create the css file oh we didn't so create the custom the css file in the css directory and yeah so we are getting closer if you want this is just for fancy for now you can add a fabric on to your html page i just use this image that i have on this cdn here which is commerce layers logo you can decide to use whatever you want if you have an image right so now we can see that this shows us i think i'll just take it out so we are not confused with what we are building on the actual demo so let's just leave it like this yeah cool so next now is to go into our body and add a section give it the class of section all right so inside this section we're going to have an h1 with a class of store name and i'm just going to call it commerce layer store you can call it jsnation store whatever you want to call the store you can call it my name store and let's have an hr so let's see what we're building here yeah cool um are we all together just to confirm i'm facing this error okay sorry i should put my chat somewhere where i can see it maybe here i'm actually okay bash syntax uh unexpected token new line and so you should not remove the what do they call the angle brackets just include only the name right so for your slog there should not be that angle brackets the angle bracket is just to symbolize that you are supposed to put in something there's like a variable same for your token and for your client id your client secrets remove the angle brackets and it should work if you noticed here this is how i did mine yeah this is it there are no angle brackets here just jsnation and just my client secret and my client id so if you do that i should fix your error sorry i'm just seeing this now so are we all together thumbs up raise hand chart all right cool thank you thank you so now let's go back to adding so now we have the name of the store right if you're following you can just come here you can see what we're going to be doing right so let's add the custom styling we're going to be using today right there's the stylings are just a few of them i'm not a css expert but yeah we're going to be having a few classes while we proceed you see where we're going to be using them but the first one is for our store you can see we gave you the class name of what earlier i think store name which should be somewhere here we just increase the font size align it to the center transform the text set some margin and you know add a border of superx and that's that with this and the next is now to add the title of the product and the product image so right inside your section you're going to add a container so let's create a div with the class of container styling for this is coming from boomer css and inside this container we're going to have two columns right one if you look at the demo you see that there is one okay let me bring this down a bit you have one column for the the image and there's another column here right so let's just create another div with the class of columns and inside these columns you're going to have another div with a class of column you don't have to worry about this this is just boomer css so you can just copy and paste it from right inside there and inside this column we're going to have a box for the image right so let's create a class of box and inside that we're going to have an image with a source attribute coming from this file this is a product we're going to be working on today it's a special hoodie you can decide to pick any any product you want to work with so if you come to your organization there are a bunch of skus here and in case you're wondering what an sku is if you go straight to the data model you can come to products and just come here to read an in-depth description of what an sku is so an sku just means stock keeping units and this is the single unit that a warehouse uses to track the availability of your product items and also the variations right so what this means is that each item you want to sell in your business is going to be associated with one stock keeping unit called sku and this sku covers each variation of each item so for an example you're going to be selling let's say this pen right and then you have different colors or you have different sizes of this pen each of those variations will have one single sku so let me just show you what an example you can see for an example uh this baby baby what's it called baby bodysuit for this particular one it's it has a black logo on it right but the size is for 12 months old and that's the variation but if we go back there's going to be another variation of that same product with maybe white color and the the size is going to be for six months old so you get the gist right so sku is a just bunch of combinations letters numbers that look something like this and it's going to contain information about each variant so if you look at this now this might be the initial products right and then the end can be the size maybe xxl or the color maybe red right so the variants can include the color quantity and all those information so you can come here and just check and to learn more about skus right but for the sake of this project we're going to be using one sku or rather one um one item which is a hoodie let me just search for the hoodie it's a gray hoodie yeah gray hoodie gray is one of my favorite colors oh we don't have a gray hoodie why let's try searching with the sku let me just grab the sku code and let's try to search oh okay everything is imported so why don't we have this sku probably the sku has changed but let's see let's see if i can find the hoodies okay yeah here we go yeah the hoodies so let's pick this gray hoodie this looks nice okay cool now remember this is cd that you have all this information on your dashboard because you said you used a cedar ideally you're going to put all these details yourself right and already this online item is already associated with shipping category and this is the sku code which we are going to be using so much here and this is the name of the product gray men hoodie with black logo and it's this is the medium size of it so if i go back here if i come here just to see all the variations of this particular hoodie i'm just going to do this yeah so i don't know if you have the same sku with me but you can check you probably should have the same thing so if you if you put this in your sku and search you're going to see the different sizes large medium small extra large can you try searching this in your sku dashboard you see all the variations that you're going to have right so we're going to get the image of just one of them right let's just use that image i'll just remember this is static right ideally if you're working on your actual ecommerce platform you're going to want to fetch this detail from your cms right cms will give you all the product information and everything remember from the presentation i mentioned that commercial doesn't manage content for you the only reason why you have a link to your image somewhere around here is just so you can see something in your dashboard right when you're working on your actual ecommerce platform you're going to link your content from your cms to your actual project using skus this is how important skus are i can show you an example of the content for data and content so that has this some of this data so i have some contents right here and in there i can pick one product let's just pick a sample product right so i have these dudes right in here this is all the content right and as a reference here which is the sku so in your actual application you're going to link this product using this sku to the actual line item on commerce layer so let's keep that in mind that there is a division between content and commerce right they are both independent we are not working with content here we are only trying to work with the transactional functionalities regarding this particular product item so let's just grab this image you are just for demo you can download the image and use it yourself so we have that and then we try to you know you can add the whole text with the name of the item you can grab that here grey men hoodie black grey men hoodie with black logo right so we should have that showing yeah cool now let's try now we have our product image let's add the product name and description which is going to be on the right side of the page so we need a new column remember we created one column here so just inside this where you have the first column let's create another column if you are on the workshop material it's all here so you you can either follow me or just come here and grab the details you need another column and we have another div and we'll call it content i think we should speed up this html part so we can focus more on the actual ecommerce functionalities so let's have an h4 tag with the name of the item we'll grab it here grey men hoodie right and we also want to just put the SKU code below it's just as a cool UX you can grab the SKU here the reference for this particular item put it here and then let's have the product description another p tag and i have a bunch of contents for this somewhere here so you can just grab this description for the product just some random stuff or you can just put anything you want here okay now we have a product description pop in somewhere there next you we want to have the price if you notice here we have description we have the price and we have the ability for you to select variants which i mean i already explained how this works for you with the SKUs so the medium size is an SKU the large size and another SKU the extra large another SKU right so if you come here let's just work on the size the price rather we have another div and we call that just to give you the class of commerce layer price now remember that the price is dynamic content we are going to be fetching that from commerce layer because you really don't know the price of the product this is going to change every time and this is a work of the merchants to come to the dashboard and update the prices you know add promotions and some other cool stuff so let's just keep that class there and give it an id of price we're going to be using this later on and also a data attribute of data SKU code and passing the SKU code which we have here already i think this is it put it there now remember that this is a reference code and not the SKU code if you come back to the SKU if you notice where is it this is it right there is a reference code and there is an SKU code we are in the large variant of this product so this product is actually having a different SKU so if i go to medium medium is going to have a different SKU code right but we are trying to fetch the price and we know that each of this item the medium large they all have the same price so we can just pick one of the variants and use to fetch the price in your actual e-commerce application you never can tell your variants might have different prices the large might be more expensive than the small size i can you never can see so when you're building actually you know something like this is going to be based on what the customer selects so if i select large it goes and fetch the large SKU right it's not it's not going to be static like this but for now let's just add the large SKU so we can use that to fetch the price since we know that it costs the same thing so with that we should have a div for a price so let's add some span which we are going to feed with our contents sorry with a price so first we want to have the amount of the product right and then next we are going to have the comparable amounts and i'm sure you're familiar with something like this where you have one price and then there's like a promotional price for the products so for an example the actual price of the hoodie is 50 dollars but because you have a promotion running or you just want to cut down the cost you can make the price you're selling for to be 20 dollars sometimes people do this just for marketing you know just to let the customers know that we are giving you at a shorter price or a smaller price but ideally you have some promotion running for you to have this comparable price so now nothing should pop up for that because we are not we've not integrated that yet but yeah that's pretty much it with the product page let's add the ability for you to select variants like i mentioned this is a large size we have four different variants for this and i'm going to try to speed this up so we can move right into the actual integration so we want to create a select tag that has several options right so i'm going to do that right after this div remember this one is inside this one inside this column so we are coming out of the column give it a select class and right inside that we're going to have the select tag and inside the select tag we're going to have a bunch of details first is the class of c layer variants you can give it whatever you want but just know that you need that in the javascript so let's try to keep it the same thing give it the name of variants and we're going to create a bunch of data attributes now the first one is data availability message container i just grabbed that so it's kind of long and what this is is we're going to be providing your customers with some kind of availability message let them know if that particular product is available or not so we'll use these attributes to fetch the container where we're going to display this next is the add to bag data attributes which are going to use later to get the selection from your customer and you know send it to the cat of your e-commerce platform the last thing is you're going to try to get the quantity selected and this is just stuff we need in javascript remember i already told you what data attributes are so now let's put these options right there i'm just going to copy one and we're going to use it for the others so inside the select tag let's have the first option if you come there now we should see a select tag oh it's in the wrong position looks like we've put it in the wrong column or something class select see layer by and select option value what have we done wrong did we not close a span or a div but anyways let's proceed we'll figure that out as we proceed right so let's start with the first size of the variance which is the small size grab the sku code for that and just change that here because they're going to have a different sku code and grab the name also from here and just change what you have here this is a small size and grab the reference code put that in the sku reference set that to these let me just check the chart there's an extra edge at the beginning of the data sku code let's show here you're talking about okay and then we already have these data attributes for the price and we're just going to put small for the side the name of the option so there's one size there now small right or we want to have that for four different variants so i will just copy this option and you know duplicate it three more times so and each of them we are going to where's the second one we change this to medium change this to large don't forget to put the m anchor change this to large the second one or rather the third one is going to be extra large xl and now we need to change the sku because they are all different remember if you notice this is the reference and for these particular variants it is sxxx so a trick to well depends on how you want to name it on your own e-commerce but you probably have something like lxs well let's check so we are sure if you go back and check yeah i'm correct lxx for large mxx for medium xlxx for extra large so this is medium so it should actually be mxxx and large should be lxxx and this should be xl xl xx okay and now we have different variants yeah it's too strange why it's popping at that corner maybe there's something we've not closed yet but let's see this is closed oh it's supposed to be in the column okay okay okay now i see what we've done wrong we're supposed to put that inside the column for the price so here should be somewhere around here i think yeah so now we have it at the right place so yes now we have all the the select tag next is for you to add the add to back quantity we want your customers to be able to select the price your customers to be able to select the number of a particular variant they want to purchase and let's do that still inside the column let's not make the same mistake we're going to have an impute tag you know what let's just grab it so we don't waste so much time this is the add to back impute tag i'm just going to format this we have more space and if you look at this we have the impute id which is add to back quantity please note this the type number minimum value 1 to 50 and then we added another class and i think that should pop now strange why is it not working yet line it's it's a nine okay oh yes thank you for that that's okay cool now we have the this working so let's try to add the add to back button you can call it add to cart or buy purchase order whatever you want to call it we're just below this you can have an a tag we're going to set it to this class and in fact i'm just going to grab everything here so what we are having here is the class of bots in all this styling is coming from boomer css the only one we have here is some additional changes just some bad things and some stuff there's a typo here oh fixed right and you should see that working here so this is full width just makes the button large to contain the entire column and then this class we're going to be using it for ourselves and the add to back functionality so for now nothing works so last thing is for us to include the availability message container i mentioned earlier that we want to provide you customize with some information about the variants or the the line item you're trying to buy right so just below the add to back button just add this div which includes the class of this and an idea of availability message we're going to create some templates which we are going to use we are going to provide customers with two kind of information there is going to be availability message and non-availability message for an example if you've run out of stock if you only have one quantity of the variants and your customer is trying to purchase five then that should not go through so the sku is not available and let's work on those templates next so if you're following along you can just keep popping up those toggles so at the end of everything now this is outside the entire column all right the second one outside the column but still inside the container we're going to have a template tag so this is a new tag that is automatically hidden it doesn't work on older browsers like ie and and um what's it called explorer and the others so you probably want to use a div tag if you're using an old browser and try to hide that tag because this is something you want to show um when a particular event has happened right so please if you i want to assume we are using modern browser so this should work so if we write this template here it will not pop up on the dome yet or it will be on the dome but to be hidden right so just grab all these templates if you take a close look you would see that the first template is this p tag which shows you that oh this product is available in this minimum this number of days to that number of days uh let me show you what it looks like in the actual demo if you see here this is an sku this is a delivery um what's it called an availability measure that shows you that the medium size of this hoodie will be available in three to four days with this particular shipping method and this is the cost so this is what that template message contains and it's going to accept dynamic content when we get to the javascript aspect of this so if the sku is not available for example let me select let's say 100 which i don't think we have it should return the selected sku is not available so that's going to be the other templates so if you look here you will see the p tag which the selected sku is not available so just grab the entire templates and let's just put that here nothing will pop up on our screen because we have that set up and yeah page is coming up to date so now that we have this let's forget about the shopping bag for now and try to work on getting our prize so let's go back to javascript and so to proceed we're going to use the commerce layer sdk and the javascript authentication library to work with this application we already installed it earlier it's here i guess yeah the sdk and the authentication sdk right so let's start by just a minute let's try to authenticate by creating another file called api.js but for now user main.js just empty right so you already have this sdk installed i guess by running npm install but if you don't have it you probably want to install this again right and this is just a boilerplate of how it works you want to import commerce layer from the sdk and try to put in your your access token your endpoints and all right so we would not be needing this right so you can decide to use this import method or just use the other one whichever one you want but let's import the init cli function from the sdk and let's also import the sales channel token in from the authentication library which you can install using this method if you haven't yet and from there we can create an init variable and just have an async function too oh i spelled that wrongly okay and inside this we're going to create a variable called authentication and let's set that authentication variable to this stuff we have here but i'm just going to grab that out and in here we're going to have sorry that should be on our weeds and let's try to get the sales channel token from the authentication library and yeah are we all together can there was a chat i hope i'm not missing the chat i'm sorry can you hear me raise of hands if we are together because now is the time for us to okay cool all right so we're going to create the search channel token and first of all let's first of all check if we have the access token from the authentication library so let's get access just call for the function and inside that is where we would want to put this so if we have gotten the access token from the authentication library we want to set the authentication to a wait for this and then inside that we're going to put in the client's id which we already have from our config remember we're going to set that to config so we have not imported config yet so below here we can import config from i think it should be this yeah so now we are going to get the config of the client id and let's set the base url or the endpoints rather to config.base url and next is to set the scope remember we had a market scope somewhere there and the market scope is something like this if you remember it's where is it we have to go back to the settings i want to show you something if you notice the market scope is like markets and then we have some numbers and in the html file we only provided the number somewhere here i think oh we did provide everything okay cool so oh i just lost the file what file are we working on just our main.js where are you okay so just set the scope and then we're going to use a template literal to add the markets before it and then the dollar sign and you just put the config dot market id and that should be the last one i guess why are we getting this error down here so so so once this ifs checks the next thing if it doesn't check we want to set the access token oops access token cookie the same one we created earlier set it to the authentication dot access token and we want to ensure that it expires at some point that's why we are doing this right remember in the cli we got a token from the cli and it saves for a while but now we are no longer using the cli application type we are using the sales channel application type so we need to create some cookies for this and if this doesn't work if this doesn't work we set the access token to get the access get the access token cookie okay we're having a bunch of errors what's happening this is okay we haven't initialized commerce layer yet i think i took that out earlier at the end of okay yeah we should have the access token here and set that to arts dot access token and we should also have the base url which is the endpoint and set that to config dot base url so now this is the function where you pass in the token and passing the endpoint same thing we did with the cli right now we have our token coming from this function and we can pass in that particular endpoint here for it to work so we're still missing one more column listen oh sorry about that okay thank you and so now that we've initialized that we want to get some setting stuff so now we already this should authenticate us with commerce layer and just so we are sure that that works we are just going to come down here and create another async function and call it in its commerce layer and let's set let's just set that to in it remember we created this particular variable for the async there and we will just set it to in it here and it should await for in it just to be sure that everything works first and if the document is in a ready state let's check if the state is still loading if it's loading then we want to add an event list now and we want to add an event list now so all through this we are all going to be listening for several events because we are using this and then let's set it to ready state change and inside that we're just going to put the and then let's also check if the document that's ready states is in a state of interactive and then let's also check if the document that's ready states is in a state of interactive if it's in an interactive state let's initialize commerce layer now and yes everything should work fine now so if that doesn't work let's just set an else and then let's also check if the document that's ready states is in a state of interactive and initialize commerce layer so now we should have we should be authenticated with commerce layer now we've gotten our access token and we are listening to be sure that first of all we are authenticated and if it's loading it has to load first and then when it's loading we change the states to an interactive state oh i spelled else wrongly oops oh yep cool so now everything should work and we should be authenticated with our page but we're doing nothing yet right so this is the first step in authenticating this is how you would want to authenticate is to get the token and then try to get fetch get access to your endpoints which is your base url here and later on we are going to fetch some data from the api we're going to try to get prizes get variants variant quantity we're going to try to add to bag set of variants add different shopping to bags toggles and we're also going to like add others right so that's going to come somewhere around here and let me just put them out there because we're going to call this function so my api so we're going to build this later on but just note that we're going to have we already have the api page here we're going to have a listmas javascript file that's spelled out right so we're going to listing for several events the we're listing to set up to set up variants to set up the quantity to set up add to bag which is from each of these elements we have here and we are also going to build some functions for api.js where we get prize get variants get variant quantity and also add to bag and the last one is to refresh the order and changes where we're in cases where we are trying to update some certain resource right so let's just import the api first of all we might need it let's import api from api and also import import the config sorry listmas from listmas cool right and yes so now we want to select a particular variant select a particular quantity and attach these resources to a line item so that when you add to bag it fetches this data from from the data variables we created already this right you know it gets the sku reference and tries to add the quantity from here and attach it to line item and then you are able to make a purchase right so let's go right into our api first thing we want to do is to import our config again because we're going to be using this at several levels of this project from and we already installed the sdk so let's just import the sdk import let's leave that for now from i think the name is this one yeah so we would need them three functions resources let's get the sku first we are also going to get the order which we are going to use and the line item so the line item is the the particular sku you're trying to buy which is already added to a list of items that you want to purchase so if i'm doing something like small you know another one medium they are all going to be added to a list right and this order is from the sdk and it allows us to interact with the other function same applies for the sku so let's import lodash we're going to use lodash from lodash just to make things easier at some point all right so first and first we want to get prizes and we're going to create a variable called get prizes and this variable is going to be assigned to a function so let's create the prizes remember we already have a tag for the prize somewhere around where uh okay it's here the id is prize and the class is commercially a prize and we have the data sku code right there okay so let's try to get that document and query selector all wherever we get and then fetch that class called silly uh prize that's what we call this that's what we called it now we have prizes right so let's check if the prize is is greater than zero so we can i think something is i think uh cool so if the prize is greater than zero we want to create an sku code for it and for now it's going to be an empty array we're going to fetch so ideally when you load the page you want to get the prize for this particular sku so what we're trying to do is check the variant get the sku code check for the prize and populate the the page with the prize right so for now it's going to be an empty array and for each prize for each prize now we have several prizes coming in right so for each of those prizes we want to select the prize that match this particular sku and remember i mentioned earlier from data attributes that if you want to assess a particular data attribute you are no longer going to call it um these let's say you have these hyphen url is going to become these url in cameo case now to listen to that particular data attributes there's something called data sets so if we do prizes.datasets this is going to fetch us that data attributes we have and let's get the sku code from it and then push that particular sku code to the empty array we created earlier okay i see this is making some some sense right so we have this is the first if statement and in it we are also checking to be sure we are getting the right prize and we are pushing it to um this empty array over here so now let's check for the skus we've fetched so we had the the code id is pointing to we created an sku code around here and this is coming from the api so you should also note that while we are getting the sku code we are also getting the we should also note that while we are going to be interacting the client side we are making some api requests to this particular endpoint and you know something what's it called slash api slash line item you know slash skus and we're going to be fetching this data from your own organization right so let's try to join the code okay and what we are trying to do here is we're going to have a request that looks something like where can i find one to show you for example this is a prize we're getting here in the api you're going to have the prize not formatted right so let's try to um put a space here yeah and then to include them prizes and then trying to do something like that or and when that happens we want to sync and we are going to try to update the page with the prize so let's create an update prizes function and the same array we created earlier sorry that was wrong and that's that's for the update prizes so once that is done we want to dispatch a new event this is on once the page loads we want to create a new event so remember we created the data variable with prizes ready and yes so if if the prize is empty we want to return new events are it is empty this can mean there is no prize attached to the sku or the sku doesn't even exist anymore so we'll assign it to the data attributes of sku empty and yeah that should be all for this we're having a bunch of errors why is that that's let's see what is happening where did we miss okay um i'm pushing to sku it's not sku code array um where is the push push sku code yeah uh this is correct we're checking this and pushing here yeah there's a missing column after the r line 12 okay so if sku push the prize that i said sku code this is actually correct join this and then then i think okay yeah got it thank you so yeah this and then we are updating the prizes are to array we dispatch the new events and if it is empty we return this so probably we need this we're still getting one more error so if it is empty we're dispatching a new event and that is kind of correct what are we doing wrong nine nine and nine 12 it's supposed to be sku code it's not sku code thank you so much eric um so we are pushing um this this so there's one last thing we need to fix not sure what it is so let's just look at it once more we have our prizes for each prizes set the data set and push price to this particular sku code and once that is done where we get these sku codes to join we include prizes whoops that's it all right so that should work now so for now we're just going to build out all the api this is just the idea among everything we're trying to fetch data from the api and then we're trying to dispatch a new event to the client side we'll build some ui um help us that would help us to send this data back to the front end but for now let's let's try to be sure that the prizes work so the next one we're going to create here is going to be somewhere here right but anyways let's export this particular one for now before we proceed we're going to have a bunch of orders which we might not even have time to build out at work so exports defaults and let's just export get prizes for now and for us to be able to get these prizes we need to create the ui.js file and inside here they're going to be having several events to update prize basically it's going to be more of updating the the DOM with either availability message prizes shopping back summary and all the other details right so before we go to that let's create some utility functions that we're going to use to set our token for each of the requests we are going to make so create a new file called gtus.shares and we're going to import loader.js cookie and our config file i'm just going to paste this so we can save more time so remember we already have our access token from the config and from the authentication file where is that what we did here right so now let's try to set some cookies and get inventory from our api just to save us time um so what we are doing here is we're trying to get this inventory over here which as we can see here we have an inventory that contains several SKUs and like i mentioned earlier you should come here you can learn about what inventory models are and you know when you try to purchase an item a line item you need to check the event to determine the products availability and some other information and there's like an hierarchy for different stock locations available so i'm coming into the US market which is what we are doing here i want to check the stock locations in the US market and check the event tree model in that stock location right so right here we are just fetching inventory and then we are setting it to a first level the first level of the inventory which is the US market right and then we're trying to check for quantity so the things you want to check when you want to provide feedback to your customer first what's the quantity available and is it greater than zero return that and that's pretty much it and every other thing here is just setting the cookie access cookie name and stuff so just for the browser right and now we can import this gtus file back in our main.js so we created two cookies here we created the get access cookie name guess get access cookie should be somewhere here yeah get access token cookie and set access token cookie so we need that in the main.js file let's just import that after the config did we already add that here yeah we did while we try to run this and we also set access yeah this too so this utility function just basically sets a new cookie right and that's why we are using this js cookie library you can read more about js cookie the link is in the the materials and so yeah let's get back to making sure our prizes work first we need some helpers because we want to display a prize so we want to have like a display elements kind of function so first we would export something that enables one element before before elements and let's set that element to so if the element just remove an attribute of disable you know this will just help us just because we are working with attributes and elements we want to remove a particular attribute which is disabled remember for the availability message it's not working for now and also for our select tag we set it to disabled and why we are doing this is you want your customer to select the variant first before you or she can add to bag right because you want to be sure that the selected variant is available and the selected quantities are variable so until i select a variant that's when i can select a quantity and that's when i can add to bag right so this this particular helper function is just to remove the disabled attribute from one of the any element is being used and the class list disabled so we have a bunch of these just help us a lot of them we have one to enable elements we have another one to disable elements we have to hide elements sets elements and bunch of others right so i'll just put them all here you can find them somewhere in the demo so if you come here there is a directory called demo yeah you can find the helpers here and if you want to clone that you can clone that probably after the workshop so it's not confusing for you yeah in the source file there is some helpers here that you're going to know so this is basically all of them right so this is to enable a particular element this is i lost my charts oh my screen is not visible is it visible now can you see my screen now i can't see the charts also so okay a question from an i go sorry you could not install commerce layer cli oh okay um is it possible to create the dashboard and upload the items from there to fuel the store so i'm guessing you mean is it possible for you to create an organization and then upload the items from there yes you can do that manually you can create an organization and add some items i lost the charts okay i found it cool yes it's visible now cool all right so this is all the helper functions we're going to be using all of them here and let's go back to ensure that our prizes work so remember we created a get prize here and we've exported this get prize api and in main in our main our entry points javascript which let me just bring that closer remember that we had some points we called api.get prizes right so we are basically calling this we are basically calling this function from here which we've exported right so let's try to make sure that that works oops i'm not sure i did this but it should not be update this should import everything so import stars this yeah i should do it oh i have it twice okay cool so now let's import some of the functions we need from the utility remember we just created some of them now right so we need to set other token we need to get other token we need to delete other token and get elements from templates this is for the availability message so let's set those the token we created right here no yeah right here we got our variables from the config and now let's use our token to fetch the actual prize are taking to fetch the actual prize so next thing is for us now to work on the the ui elements now remember we created bunch of data you know data data sku bunch of them right and you want to be sure that we can work with all of them so we already have our helpers let's confirm that yes we have all the helpers we need so in the ui we're going to import loaders first and what's that from loader and the less imports the helpers we need pretty much most of them so we need disable elements enable elements set elements update shopping bar accounts and all the other ones some of them we're not really we're not really using them because we're just trying to focus on the product page for now right and in the uts we are going to need to get the inventory level remember the one we created earlier so import the gets inventory first level from it's used which is this particular variable here right and then let's also get the hide elements from helpers which is going to help us to hide the add to bag button and to hide some other functionalities so for now let's see what let's put this somewhere here should come here let's check the console and see we should be getting some how do i move this yeah and i'm making any request yet so let's see so and let's start with updating the price on the page so we're going to be exporting a lot of function i hope we have so much time to cover all of this then we'll just paste them so we can save them so we're going to call really function of updates prices and set that to the sku and the prize container id you right inside here we create the prize now we're getting the prize from the first level which is the first market wherever your your customer is in and using loaders you can just do this first and set an sku.prices and this is now let's create the variable for the price container and now we query that particular selector where we have that prize now we are working with the ui now so the first thing we want to add is the amount right so let's create the selector of the price container first now we can check if the price container id is the price container let's set it to the price container let's query select the amount now if you go back to the index at html it says that for the price we have an amount class and then we have the compared amount so the first thing is the actual price the second one is the comparison price and if we go back to the ui now let's query select that particular class so we can populate it with the data inside that let's still check if the price amount is formatted so if the price amount exists let's set the price amount i think i've spelled the amount wrongly yeah we set the amount that's in our html and what this is doing is if you look at each of let's for an example let's check one sku let's check one of the sku each of the prizes are in cents sorry when you go to the skm the prices tab and you check one item it's in cents right so there's a formatted you need to format this from cents to dollars which we are trying to use which you can see here 99 dollars and the compare ad price is also in cents and it's going to be formatted to the actual price so we want to set you know the price to the formatted one and not to the actual amount right and that's it for the first prize amount and let's do the order for the compare amounts it's pretty much the same thing so let's just have this so so same thing we did at the amount there we set the price container and then we query selector gets the compare amounts class here at amounts rather and yes so we also want to check if there is the price of the amount and if that exists let's also check if the price is is greater than that of the actual price so actual price so now we are comparing the amounts in cents with the actual price so if you have two prices and then the compare amounts is greater than the actual amount we want to do something like this where we you know cancel this because this is the expensive price and this is a lesser one right so if the compare amount in cents is greater than the price so then we can set the compare price compare amounts set it to the price dot formatted here amounts remember all this is coming from the api so I don't worry about and yeah so we have our dead price is UI set and we're going to do this for every other functions so let's check once more we have all our U2s we have all the upper functions we need and our listeners are in there yet which is the last thing I think we need to do to ensure that our price is working so now we need to listen for so for an example now when I come here we need to listen for each of these clicks and make some requests as all this goes on and all that is going to be in these listeners that's just fine remember in the main.js we called something like this listeners that set up these listeners that space these listeners check for all these and pops each of these back so let's try to add that I think we are running out of time or yeah if you have the demo page if you have the demo let's just go into the business and I'll show you what we are doing here so first things first we are importing all this from UI and I think we are not even done with the UI for now we only have to get prices which is to update prices so let's just include the other prices we need we need to update price we need to update by and we need to update um by and quantity and add to tag so the listeners let's just import our api and our order to him again and okay we don't need this for now so okay so the first thing we are supposed to get is the price and then we are supposed to have another function where we export the where we update all the prices from each of the because remember that we are fetching different variants right so if you look into the demo we're running out of time but you are the chairs you see here the update prices function where we pass an SKU and then we try to map the SKU and find the first price the amount pretty much the same thing we're doing here but right now we are dealing with uh the actual eyes so I think after here we do have the same thing the same thing we did here but now we are checking for the actual price and then for each of these prices we pass the value to the html and you know same thing we're going to do for the other variants right so let's just check once more we're still not getting our prices yet but we should have a pop-up for the prize at least yeah let's see once more our configuration is correct oh oh oh we are not getting our other token from the chairs why is that did we spell it wrong import all of these and then so I'm low dash let's import the prices for now from right so why are we not using it yet we did not get okay so we have the gets prices function right and we've exported that function and we already have now it's used the access token and everything we need and we also have our helpers which enables all the elements we need and we have our api and I just want to make sure everything is working perfectly fine yes everything is fine here spelled listeners wrongly here aside from that I think every other thing is fine this now is a set of variants and we already have our get prices if they are here you we already exported all these helpers so why is it not working okay okay we don't have the display elements function yet I used it yet do we have more questions all right it seems to me something wrong with api here so so now know we have we've gotten all the prizes that we need right it should pop up here but we'll figure that out soon we want to get the variants right and if you take a look at just because we are running out of time if you go to the demo and go straight to the api.js file you would find all the functions we need to fetch several of the variants from the api so we have a variable called get variants we have another one called get variance quantity and the one to add to back to select SKU and all these are the ones the functionalities you need for the order we would not have all the time to you know cover through all of them basically this is just the javascript implementation of trying to fetch this data and populating it into the data attributes we created already so we need to get the quantity and all these other functionalities to add to back and we also want to select an SKU before we can place an order so this is an anatomy of an order this is how it works so the first thing first is the customer visits the sales channel either as registered customer or not they select an item they want to purchase which is what we are trying to do with the select tag right and if you have some discounts available it's optional you apply the discounts to the order and then the order is set to a draft state in the cart we don't have a cart yet and this draft order is labeled with pending right until the customer enters their shipping address billing address and all these other details so this is what we are doing in the api.js right all the functionalities to select the SKU to add your order to add the line item and the line item is associated with the quantity and all this is all of them right here and then we wait to export them right so I just grab all of that because we're running out of time and we still need to cover the CLI so I just already we had to update prices before I just added the orders right here and and we have our api and remember that already in the main.js we are fetching the get price, get variance, get variance quantity and we are setting up these listeners so let's check the listeners and be sure we have them on and if you go straight to the source you would also find the listeners here remember we are trying to you know listen to all these events and make some changes to the html right so we have the first function which is to set up the variance and what we are doing here is we are targeting the events and we are trying to target the option we select so for every option remember we already set some values there the first one there is the value there is the data SKU code data SKU reference you can see all of them here becomes data cell dot SKU code we just fetch all of that and that's what we are doing for here for the um the variance and we also want to do the same for the variant quantity remember we have these imputes here where we have one to 50 so we are checking for the minimum value and the maximum value checking whichever one is greater add them to the line item same thing for adding to bag we are just checking to see if you click the add to bag button and then we want to send it down to the page which we actually did not create the shopping bag this is what the shopping bag look like this one down here so before we come to the listeners let's just grab the html for this shopping bag what we have here is just a table and the table also have all the data attributes the same thing we've been doing so far creating several data attributes and we will put that somewhere below the availability message i know we created a template right here yeah so below that templates we want to have this and if we come to we should have this yeah shopping bag with those details but we disabled that already remember we had that disabled elements double so we want to have some values there before you can top there's nothing here so you cannot see anything yet right so let's go back to the listeners and try to wrap that up so i'll just grab that and if you're following along you can also find this in the demo source file and once we do this it should be able to make some requests so we have all the ui and we have all the listeners we have all the helpers our api is is complete the last thing there is just the user interface which we already have the one to update price and so update prices but we need we need the others so if you come right here to the ui the js you should find the same thing we already have the update price and update prices we've done that already ourselves but then we need to update the variance right and then variance quantity same for the others just like we've been discussing so far we are just targeting several data attributes on the html page and then we are trying to populate it with each of these data and just to be sure we are all on the same page can you just maybe wave your hands or something just so i know you're together and this has been some hours right are we together are we together are we together all right so would you mind if we take like a five minute break would that help and you can probably shoot some questions if you have just a five minute break and then we can wrap this up so if you want to ask anything if you want to you can just send a text or discord i haven't or discord i haven't checked that since okay anything at all and then let's try to i'm not sure if you want the break or you want this to just continue probably you can see something in the chat so i'm sure what you want us to do hello and if you want to talk you can just raise your hand and i can allow you so hello okay since no one is talking i'll just assume that we don't want the break right and then let's just get right back to adding each of these functions to update the ui just so we can get with this and we can move over to the cli and then i can show you how to go from creating an order from start to finish with the cli right we should make up for the time we can spend to implement each of these functions and also implement the checkouts page right so in a ui i just grab each of these selectors and let's see what we are missing now wait a minute we've been working so far since and we did not include the javascript file to the html so wow that's why we've not been seeing the prizes and seeing everything we've been we've been doing since so far we should have been seeing some things so we are compiling each of this file into this minify javascript file here but then we did not include it into our file wondering what's been happening since okay now we just need to call that this and then put in this no no not this because we already had a function we should have been getting some questions and you know close that out and now we should get some should be able to get our prize now let's just go back to our api and then check once more what's left so we have set the order token and we have the update prize add prize get prize get buy-in get buy-in quantity select sql create an order and all the others and our configuration is correct we are getting the right values and we've expected that and our helpers we also have the helpers we need to ensure everything works well all right and then the listeners we have set of variants we have add to bug and all of this and our main the chairs which is the entry point to each of the functions we also have everything right and our ui.js with each of the elements that updates dom we also have everything we need display available message enable available quantity yes we have that and are you tears we have it also so the sensitivity wise is not working oh our education is having some issues so let's go back to i mean the chairs and let's see what we did wrong here client id the markets config market id access token did we pass in the rights database id let's just check and be sure that we have a client id we have a market id oh we are not supposed to pass in market here because if you remember while we were working with the main we did pass in market here so what we are literally doing here is having markets markets right anyways that doesn't solve the problem but glad we found that out we have the right values here so is there something we are missing in the config let's just check one more time config base url client id country code the language code death sentence we did not add the cat's url and return url privacy url right which we do so market id country code we also need to do the same for the cat's url return url privacy url the same url just before the death sentence let's add them here i mean we've exported that config file right so something is still wrong somewhere let's just confirm that we actually have the correct code so first this should actually be the name of the item not the name of the sk not the sku code all right so the sku name for this should be the medium one so we block global medium we put the sku code there again same for this so what we are doing also at this options is we are passing all these resources this data attributes as resource the line item so when we create an order when you when you select this option here we click small we are passing all the data associated with this small to the api and then you are making a request for that particular line item right so let's just note that's why we try to change the sku names to the actual name tissue this is correct as large and then this should be right so let's just figure out what is wrong with our authentication if we know what's something that we need are we still in the chat are we still are we still together hello so yeah i think everything here seems to be fine okay um there's yeah something looks wrong with the odd url i don't know let's see okay we put in the right url yeah just nation right and we set the right values there is a norm that means it's not making the right request so our base url seems to be wrong or something database url yeah should be correct so let's just check the application one more time i'm sure that we are using the right values so yeah we are using the 4802 yeah just nation dot commerce data yeah and our client id is correct it's so why is it making the wrong request let's go back and see if it looks it looks correct here anyway it's supposed to make the right one this has nothing to do with the UI I'm guessing there's something that was spelt wrongly or typed incorrectly here so so let's see how soon we can find this so so we have a base URL client ID market ID country code and this and we have a base URL client ID so yeah there's a null in the post URL but then we are passing the correct base URL here so except what we have here is not the actual base URL because it should make a request to JS nation and that's what we have in the index right just change that in case we spell I doubt we spell something wrongly there it should make the request to the right URL but it's not getting it it's empty so we are not getting a token and then we cannot make any request to the server because we don't have a token yet you know what let me just create a new application type and see if that would scale to first I'll just destroy this one and create a new application and set the name to website the kind is to sales channel and create and then when we do that we should get new client ID and we should also the same end point right and then a market ID should still be for it let's see if we still get the same error same thing wow yeah I agree with you let's see what the base URL looks like so there is the hash line 22 in the selector yes yeah and that was the fix thank you Basu yeah that was it we had a hash here so it was making the request to the wrong base URL and yeah so now we have a variant but we still are not getting a prize I think that should be something with the index it's supposed to be a prize somewhere after the description where did we put that yeah CLR prize ID prize and data SKU code so just to be sure that we have we are using the price of this particular SKU and we still have it right so oh looks like we don't have this SKU doesn't exist anymore oh now I get why we're not getting a prize the gray hoodie doesn't exist anymore why did we delete it I don't think we deleted it yeah this was what we use right 7flxx this is it and then we try to add how did the SKU change did I mistakenly put in the wrong value here but now it's working it's getting the prize for that particular SKU which also means that if I try to select medium yeah everything works fine now and now you can select different variants and it's basically fetching for this particular SKU reference and then you can add it to bag so if I select medium and you can remove we already added some of these functionalities for you to remove and and yeah so this is just pretty much how it works when you're trying to add commerce layer to your e-commerce storefront ideally like I said you're not going to be with your platform like this you're going to have your content on a CMS and you're going to make requests to the api once you authenticate get your token you make several requests to several of our APIs so you can come here to see the api reference each of the right you can come here and just get started and see all the sources we have right for the line item you're making something like let's check it so you can see so we're trying to fetch yeah the line item and then you can see for that particular line item we have the attributes this is blocking this you can see the formatted prizes all the resources you need to display to your users and each of these events clicks and everything trigger a fetch or a post or a get to the api and all this is going to reflect on your dashboard at the end of the day when an order is completed and that's why we also have an order management system for you to manage all this we are out of time but just so you can see that how this gets to the end of the tunnel we're going to use a CLI to try to place an order for this particular hoodie and if you come to the the document you can find the step-by-step guide here where is it yeah and then I start here yeah you can find a gist that contains a step-by-step guide for creating an order when you say like so what we're trying to do is what we've been working on so far on the client side right but we do not have a checkout functionality so you can only add an item to cards right and it just stays here you cannot you know check this out literally but with the CLI we're going to create a line item select and ask you add your shipping address and add several resources and then place the order and then it can pop up right so let's just run through that quickly and the first thing we want to do is we want to get the resource type what we want to work on so I just opened the time terminal for time for you to see so let's try to get the particular SKU that we want to buy or that we want to yeah they want to buy so resources sorry you need to install the resources plugin earlier I think you only installed the cedar plugin right so for you to be able to try to make some changes to your resources you need to go back and install this right so this same command just install resources you're doing this resources right I already have it installed so I'm not going to do this anymore but just come ahead and just install the resources plugin and then we are good to go I just give you a few seconds to do that and once you do that let's get back to trying to so if you do resources you should you should get all the resources that is available and the addresses you know career coupons gift cards line items promotion rules all of them and you can also find link to each of the reference which you can just you know open up in your browser to go see what is it what is it what the attributes that come with each of these resources right so I guess by now you should have installed the resources so let's just go ahead and just commerce layer resources and now we are trying to use the get and then you're looking for the sku resources and we are trying to search for the name contains all so let's search for an sku with I think we have gray hoodie so we put gray and then we put hoodie so what we are doing here is you're trying to search for an sku and we want to check that it contains the following names the following keywords gray and hoodie right so if you run that is going to refresh your access token but you cannot find any record named gray and hoodie strange so let's go back again and check um our skus gray hoodie gray man hoodie okay oh the gray is g-r-a right so gray hoodie so we should get yeah some skus that match the name gray keyword and hoodie keyword right so we just pick one that we want to buy let's pick the gray man hoodie with black logo medium size which is the same thing as this hoodie but we want to buy the medium size right so what you do is to note the id of the particular sku right just write that down somewhere it might be different for you I would just call it sku id and just keep that somewhere here and then the next thing we want to do now is to get the market right so if you do commerce layer resources and you get markets oh I was typing on the wrong place commerce layer resources and you get markets it's going to show you all the markets in your organization so for now we have USA UK and Europe so we are trying to purchase from the US market so let's copy the id of that particular market and save it in this file right so call that the market id you need to note this down because this is the command line so every single thing we are doing oops is going to be based on each of these ids now we fetch the markets we want to purchase from we want to create a new order an empty order right so first is to you know use the commerce layer resources and create an order to the particular market we just selected and that is going to be to market slash the market id you can just follow the steps and you know try to add the id now we have an we're going to create an order and this is an empty order you can see the order is in draft it's not fulfilled everything is null and empty ideally if you're working with the client side you get all the information you need from your customer before you create the order right so now let's grab the id of the order that is being created somewhere here and you can keep that here because we'll need it for the id right and then now let's create the line item i've mentioned earlier how the line item contains the variance of the sku you want to buy and the quantity right and all the other resources required so for this let's just grab this because time is going this is the command we are creating a line item we are assigning the quantity so let's set it to let's say four we want to buy four of this hoodie and we want to set the order to the order id so just grab this so if you're following the step by step guys remember to change the ids because it's not going to be the same thing for you right and then put in the sku id which you already have saved here and this should create the line item with that particular sku so now you have a line item created you can copy the id and in that line item you have the sku code you can see that that and this is pretty much what you're doing the client side but then it requires you to implement all these functionalities yourself right and you see it's assigned with the sku and all the details so let's just keep the line item id and then next we want to check if the line item has been added correctly which we just saw right now but just to be sure we can get that particular order and check the line items so grab your line item id here and replace it with this one here remember the step by step guide only has sample ids record not found it looks like we put in the wrong oh order id not the line item id so we're putting the wrong order id okay so that should give us yeah so now we can see in the order there's a line item added to it right and it contains what you're trying to buy okay so next now let's try to update the order with the customer and we just create a demo or a test customer so let's set the address to biology at yes.com and grab the other id you saved somewhere because we are trying to add this customer to this order and this should add that so let's verify that the customer has been added correctly that's the customer has been added correctly right if you check yourself currently you see this command would help you to fetch the customer customer data which is by adding the i flag which means include include this particular resource in this command and it's going to fetch the customer down here you can see there is now a customer attached to the order biology at yes.com and is a prospect customer now if you come here you understand why we are having prospects and ordered status codes i think it's in the anatomy of an order where you can see the draft shipping and all that let's just run through because of time now we need to create an address and we need to assign that address to the customer we just created if that makes any sense so be very careful when you're trying to do this because we are buying from the US markets we have to ensure that our address is from the US because if your address is not in the US you would not be able to get the shipping method so shipping methods are the available methods of shipping to the customer in a particular shipping zone right this might be confusing but please ensure you come back and check out the data model for you to understand what the shipping method is shipping zone shipping carrier and all of that so shipping zone just covers a certain geographical area which can be let's say US or US and Canada you can decide to set that however you want it in your dashboard right and in that particular shipping zone you've provided some shipping methods are available it can be express delivery standard shipping and all of that right so if i put in an address that is not in the US that means you cannot ship to that address because it has to be in that shipping zone right so we'll come here and ensure that we select a state code of let's say texas which is in the US and we set the zip code to something in the US i think texas should be 77005 or something like that and then we can set the city to maybe Houston and then we can set the name or we can leave the name as it is right and now we've created an address so let's save the id of this particular address because we are going to be needing it soon address id and in now let's update the order with the actual address we just created all right this is kind of right so if you grab the other id here put it into the actual other id remember these are all demo ids so you should change it so it doesn't yep and set that to the address so we are going to set the billing address and the shipping address the same address remember this is a CLI ideally you get all this information from your customers but we just want to show you the run through of how this works behind the scene how each of those attributes have been added to the api now this should update the order with the address so yeah we now have our order updated let's check that that is working correctly let's just check that we have the right billing address grab your other id again but now you should have memorized it i haven't memorized mine yet so if you come here you should be able to get the billing address and the shipping address yeah so we are one step closer to completing our purchase right so next step is to get the other shipments and the available shipment methods now if you come to your dashboard you would see somewhere here in the settings that there are some shipping methods available all right we have standard shipping we have express delivery now there is no shipping method for the US market so let's let's do this why we don't have anything there to show you that it's not going to return any value because we don't have a shipping method for the US market and i'm trying to purchase from the US market right so put in the other id and let's run that we're going to get an empty array yeah there's no shipping method but then there's no shipping method to attach to our shipments right but let's save the shipment id first because now we have the shipment id equals this but now let's create a new shipping method for the US market and set it to US and merchandising category the price of the shipping method can be let's say it's in cents so if i put five it should be like 50 dollars and let's call the name flash delivery we'll create two so we will be able to see it to another shipping method for the US with the name let's say splash delivery and we have a shipping zone of US shipping category merchandising and let's make this one maybe four or five cents now we have two shipping methods for the US so if i run that same command again we should get two shipping methods now oh it's wrong that means we've done something wrong with our address oh the country code we left it at Italy and it should be US like i mentioned earlier if you put in the an address that doesn't match the shipping zone it would not you know give you the actual shipping methods available for your own country so we'll create a new address and get that id and that would mean we have to change this the address here to the new address and if you go back to the step where we are to add the address updates the order with the address this one here we're just going to do it again and change the address grab the other id which is here so we would soon be done let's just get this up here and then grab the new address id and then you know populate that to the billing address and the shipping address and now we should be able to get that shipping method i think let's hope we don't run into any errors again so now we should assign it to a new address if you come here and run the same command we just ran to get the order we should be able to get this is your available shipment method now since we are assigned yes so now we have two delivery methods we have splash delivery and flash delivery so like i said note that this is this is the logic behind when this model when you're trying to build your business model build your e-commerce you need to set up your shipping zones and all those stuff a lot more of these things you can learn them after the workshop i'll provide you with resources so let's pick the flash delivery which is ideally what your customer would want to do they would pick a particular shipping method that works for them right and we'll just save that id somewhere here and then the next thing for us to do is to update the shipments with that shipping method now we have a shipment i want to use this particular shipping method right and now we can see how everything works behind the scene so just change that remember to put the shipping id you can always come back and take a look at this these steps are all outlined and then once you do this it should assign the method record not found job attack the resource id shipment id of this and shipment method of this what have we done did we copy the wrong shipping method the shipment id has changed oh when we made a change to the address it created a new shipment id okay cool so now that we have a new shipment id just go and change that right here it will be done soon please hang in there and i hope you actually trying this along with me i made a typo there it's not going to run so yeah now the shipment has the shipping method right so let's now get the available payment methods for that particular order now you need to make some payments and for each market you already set some payment methods if we come here and check the payment method you would see that we have no payment method right so let's create one for the us market and let's select maybe wire transfer and the payment gateway there's no payment giving for wire transfer if i'm doing something like credit card then you can set your payment gateways and you can set the payment gateway for any source type you want right so let's just you know no pricing just creates oh we don't have a payment gateway yet let's see the payment gateway oh yeah we should create one first so we're going to create let's say manual payment and this one is to create this is a wire transfer wire payment gateway ideally if you're doing something like let's say a paypal you can put in some your values you know and all that stuff the cool stuff you can do with this here and then now we already have a wire transfer payment gateway let's go and add the payment method for wire transfer so we can use that to complete our order so payment method create a new payment method us market wire transfer payment gateway sss i just is a random name and then now we have a wire transfer payment source type so if we come back here we will try to check whether they are available payment methods for this particular order i remember the order is in the us market so so if i put the other id should return wire transfer as the only payment payment source type yeah so we have just wire transfer so copy the id for the payment method and keep that somewhere here payment method and yeah i think we're almost done now let's update the order or the selected payment method now we know the method we want to use to pay i want to pay with wire transfer and we're just putting the id here and update the order id and with this we can oh i use the wrong order id so please ensure you're checking this i hope you try this out even if you don't try it now maybe later so you can get an overview of how this works in the background so now order is being updated with a payment method we can check that using the other command but now let's just now create a new wire transfer now you you want to make you want to make an order with the wire transfer payment method you've added as your order so you actually need to make that wire transfer right and let's assume you're making a wire transfer now by putting this and now we've created a new wire transfer with this particular id right so we just keep the wire transfer id and just set it to this and then lastly let's check that we've added the payment method and the payment source type to the order correctly before we finally place the order so now we assume that we've made the payments and it's successful so yes we have the payment source type and we have the payment method so now we just place the order with this command right and we just grab the order id and replace the sample we have there with this and this should place the order so now we have our order placed so if you go back to your order management system here you should see an order with BolaJRDS.com I tried to purchase four of the hoodies which cost about $42 and it's placed my payment has been authorized but I have not fulfilled the order and for something like this in an actual you know inventory in your actual e-commerce business you have your merchant coming here to like approve the order you know and the order being being approved it's in approved states you the order now is ready for shipment to come to shipments you can select the order oh I'm packing the products I start packing and you know you keep changing states and all of these functionalities and you can read more about all of that in the inventory model and the anatomy of an order and that's pretty much it with how the headless commerce architecture work you can see how we are able to decouple every single parts commerce layer manage all your transactional functionalities you are able to manage your contents on the CMS like strappy and you can work on any front end you want we're trying to implement that with just javascript and static html and you can see how that turns out here right we can just use basic javascript and html to implement this and we can do this on several storefronts you can do this on a single storefront you can replicate from your own organization into your mobile app into any form of presentation layer you want and that's the beauty of it and there's tons of other cool stuff you can do with commerce that we didn't touch today like promotions and all the others you can see some discounts here shipping and all that same as a checkout and every other functionality so this is just a starting point for you to get around or play around with the headless commerce industry and see how everything works and you can come here and read more on all the important what's it called resources we did not touch right so i just wanted to note that it's very dangerous to have unsatisfied customers in this modern and competitive age and that is why we need new architectures like this to eliminate the factors causing the satisfaction and improve your business technical logic right it might seem like a lot because it requires you to build or and implement every single functionality you can see what we're trying to do you have to implement the get prizes get that and every single thing but then all this functionality has been handled by commerce layer and you are able to make several requests make several transactional functionalities to your e-commerce platform without affecting your ui all you have to do is just get your data and expose it and then you know with our let's say dummy api just like a fake api you are able to make some interactions to your ui and that's pretty much it so if you want to maybe get started with building an actual storefront you can check out the commerce layer sanity starter i'm going to send all these links to the discord channel and you know this is like a full developed react next application with strappy and integrated with commerce layer and tons of other cool stuff we also have an open source checkout application that you can use as a reference case in case you want to develop your own checkout application or you want to use our own checkout application we have that for you and these are all the resources we have don't forget to check out the data model check out the core concepts our comprehensive guide to headless commerce and bunch of all the other resources here we've run out of time but i hope you were able to understand how headless commerce work and some of the technical logic that go into implementing it and yeah the cli order was really fun it's nice to be able to place an order for a t-shirt via the cli and you can implement something like this for your storefront for example if you have a swag store and you're selling swags for developers you can have them buy store via the cli i mean it's hectic but developers love stuff like that so yeah thank you so so so so much i hope you learned one or two so if you have any question please just raise your hand i would allow you to talk or you can send them in the discord server