shopify timber bundle how to code

alright guys so i recently made this,tutorial where i showed you how to,display your stock level on your product,page this was like a simplified tutorial,for products that did not have variants,like size color and what you do is,simply add a custom liquid block and,then with just a few lines of code you,can display your stock count however,like i said it doesn't work when you,have variants so you see i'm switching,these variants,and this number does not switch and,that's because we need more code than,this we need to use javascript to,update this number every time when we,switch,similar to the price for example how it,changes every time when we switch so in,this tutorial i'm going to show you how,you can do that and i'm also going to,help you make it a little bit better,rather than using this custom liquid,where we add code in here we're going to,make it a whole new,block type okay so you'll be able to see,this new block called inventory count,under this drop down uh you don't see it,now because i'm already using it but,you'll be able to see inventory count,and when you add it it will appear like,so,you will be able to drag it around,you'll be able to add it to different,templates so it's more useful in that,way and i've also added some settings,for it so you can change the color you,can make it red for example if you want,a sense of urgency and you can also,change,the threshold at which this message,shows up so if you only want it to show,how many are left in stock when there,are maybe less than 10 in stock then you,can do that by inputting the number 10,so now you will see that i only have,five left in stock of the 200 mil but,when we change to 500 mil of which i,have 20 in stock it will disappear if,you want to show the stock at all times,regardless of how many are in stock so,you don't want any threshold just put,the number 0,and it will always show so here we have,20.,here we have five,now you will need to copy and paste code,for this tutorial and you can find all,of that on my site go to ed.codes and,then go to tutorials and then find this,tutorial called display variant,inventory count,okay,and i'm going to take you through the,steps so let's get started with the,tutorial i'm going to switch to a,different theme that does not have this,work done,we're going to go through it together,the theme i'm using is dawn if you do,have a little bit of coding experience,you probably will be able to take my,idea and apply it to any other theme but,if you don't,then i think you will probably need some,help from a developer feel free to,contact me and i may refer you to the,right person or company here i am on the,themes page and i'm going to go into the,customizer for the theme that i want to,edit so the first thing that you want to,do is open up the customizer and,navigate to any product page i'm going,to navigate to my test product here and,the second thing that you want to do is,open the code editor so click on these,three dots here and click on edit code,and i'm going to control click to open,that in a new tab,because i want to be,looking at both of these things at the,same time and working on both so when we,enter the code editor the first thing i,want to do is find a file called main,product dot liquid,that's where we will add the block,schema okay the block schema is what,defines a new block what creates a new,type of block so let's open main product,i mean let's search for main product the,liquid,here it is and we want to add this code,all of that code and we want to add it,into the schema which is usually at the,bottom which is always at the bottom of,of a liquid file okay,so here's the end schema,here's the um,the start of the schema,and this defines all of our block types,so you can see that there's like,collapsible tab custom liquid,text,there's the pop-up block type,in dawn i'm just going to go to this one,quantity selector and you can search for,it by the way using control f for,command f and so after this comma here,so this is the quantity selector block,this is where it's defined,after this comma we're going to go new,line you're going to tab in because we,want to keep this neat all in one line,and readable,and you're going to copy,from here,including that last comma,and paste into here okay,if it doesn't paste like this if it's,somehow screwed up you know if it's like,this try to fix it you can use tab and,shift tab,to,move things all the brackets have to be,in line if you see a bracket and you,don't see any other brackets,then line this up and after each one,there should be a comma except for the,last one just to explain briefly this is,our inventory threshold setting that i,showed you and this one is our color,setting you can hit save this should,appear as a new type of block here so,hit refresh,in your theme editor theme customizer,and click on add block and you will be,able to see inventory account it's a new,block okay,so we've added it but nothing appears,here right that's because,we haven't actually written,anything that should be output when you,add this block we've just created the,setting in the schema now we need to add,the actual code that will be output when,you add this block so that's step to,create the html that is output,when,you see when inventory count meaning,when that block,is,added to the page so,let's go back up and see where,blocks are actually added to the page we,can see for block in section.blocks,and these are all the block types when,app when text when title when price,right when custom liquid,when quantity selector when pop-up so as,before i'm just going to put it after,the quantity selector it actually,doesn't matter,where you put these but for me just,makes sense i think it's like this,relates kind of to quantity,so we're going to do this again we want,it to be neat we want all these whens to,line up so i'm going to highlight this,by holding shift clicking,and then i'm going to tab in,so that these divs are inside,and then this when,oops,i'm just going to line it up like that,so that looks good now i can see all,different block types when when when,when okay,and hours fits right in really nicely,let's hit save and now it should,actually output something so here's our,inventory account block right at the end,and it says only five left in stock,great,so it's working,let's move it under the quantity,selector here,okay and by the way,this is just the,old method that i showed you,in the previous video,so i might actually hide that for now so,it's not confusing i'm also going to,make that red just so we can easily see,it and we can test,so it's not working yet for variants and,that's because we need to add the last,part which is the javascript that,changes this number whenever we change,variance so let's save for now and just,before we do the javascript part i want,to show you,what this code actually says so this is,a div it's just a container,with our section id and so it's the,container for the block but inside,we have an if statement and then inside,of that we have our actual text our,paragraph,so,you can change this if you want to,change the wording because i know you'll,want to change this you may not only,want it to say only five left in stock,you may want it to say,we have five remaining,or something like that so yeah that's,where you would change this text so i'll,explain what's going on here,here in between the curly braces is the,part that you should not change this,actually outputs our inventory quantity,so it's the product,selected our first available variant and,then inventory quantity so that's the,most important part don't lose this part,now this part is wrapped in strong tags,meaning it's bold you can remove these,if you want so you would just remove the,closing tag and remove the opening tag,okay and it will stop being bold and,then you of course have the text left in,stock here and the word only here at the,start so you can completely you know,remove that,and change that text to whatever you,want however don't change the paragraph,tags,and most importantly don't get rid of,this part which outputs the number so,finally let's add the javascript so that,actually switching the variants will,update our number here okay so,we're looking for a file called,global.js,and once again we can just search for,that file,global.js,and in this file because this is a,rather long file we're going to look for,a function called render product,info,okay like so you'll find it here,and you'll find it defined lower down,the page,so render product info we're gonna add,our code in here we're going to look at,how the price is being updated and kind,of piggyback of that so the first line,is this const inventory just as price,variable is being defined we're going to,define our,inventory,like so make sure it lines up that it's,nice and neat i put it under the price,right,and then the next line is going to go,under this if price because we're also,going to have if inventory,if inventory,we're going to unhide,and,run the function update inventory,so paste this here and you might want to,save this is the first part done,next we're going to add our actual,update inventory function,this is what does most of the work,and we're going to add this,directly below,this render product info function so,find the last kind of the last curly,brace of that,make a few spaces,i mean a few enters,and paste that in,at the same,level right the same level of,indentation,keep things neat and readable so we're,going to save and that should already be,working,we're just going to do one last thing,and that is set unavailable so this is,just just in case type thing so the,price is usually hidden if a variant is,unavailable or if a variant combination,is unavailable,so once again here under const price,we have our const inventory,that i got from here and at the very,bottom,we,hide the inventory if the price is,unavailable if the sorry if the variant,is unavailable so the same as price,we're just literally copying what the,price is doing that is all now we,refresh,and,fingers crossed,this should work,i did not try this before recording so,yes,it works,and there we go that's the end of the,tutorial once again if you don't want to,show 20 if you want to show less than 10,you know put a 10 in here it won't show,20 left in stock but it will show five,left in stock i hope you enjoyed that,tutorial now it's time for my little,advertising of my upcoming course it's,called shopify coding for store owners,it's going to help you do a lot more,things like this things that are easy,enough to code on your own without the,use of an app or at least to,better understand what's going on here,and be able to make your own,modifications if you want to i haven't,released it yet but you can subscribe,and you'll get an email when i publish,my course it's really i think the only,course of this type because i think most,courses are focused towards people who,want to be developers towards junior,developers or people learning shopify,development but this one is really for,you for the store owner and it's going,to introduce you to the very basics of,html and css and then in a very,practical way show you how you can use,that immediately on your shopify store,without a lot of the theory and without,wasting your time so it's going to be,maybe like a three or four hour course,and it's going to be very direct very to,the point and show you immediately how,you can start doing things on your,shopify store so that's all i want to,say if you have any questions leave a,comment and i'll see you next time

Congratulation! You bave finally finished reading shopify timber bundle how to code and believe you bave enougb understending shopify timber bundle how to code

Come on and read the rest of the article!