Basics of Layout, Templates, and Blocks 02/10 | Magento 2 Tutorials for Beginners (2019) | MageCafe

0:01 hello amigos this is joy from chordal our technologies bangalore working on my spanish and by this time most of you might come to the understanding that Magento is an MVC architecture meaning it has a model a controller and of you so in this video we're going to be looking at the view part of it which is further subdivided into layouts blocks and templates what the hell are they so let's get started so I'm just created a very simple module called code alert demo so it has very basic files if you are not familiar with how to create a module you can go over to our web site and you can see the tutorial which we

0:46 have on that so this has a very basic registration or PHP files and the module dot XML and it has a version of zero point zero point one all right awesome so what we're gonna try to do here is we're gonna try to inject some HTML into our page so I already created a product called test and this is how it looks like it's 100 dollars that's pretty expensive for a product which doesn't have any image but bear with me here so let's say I want to insert something here so in between test and be the first to review this product I want to insert some HTML so I haven't decided what I want to insert it yet but let's say I want to insert something let's go with

1:34 hello world all right so very original I know for that I create a file in side view front end layout so all our layouts is kept inside layout okay I didn't explain what layout is so first let's see what layouts are so this view part of Magento is divided so let's go to the front and that'll make things easier the view part of Magento is divided into or let's say further divided into three distinct parts one is called the layout one is called the block and one is called the template so what the layout is is so this page is can we I mean the space might be divided into further sub components for easier management like

2:21 let's say this part here is the header this part here is the left side of the page this part here is the right side of the page and this part here is the information or review section and this part is the footer and then this part is the copyright message so all these divisions of a page is taken care of using the layout so the layout itself is kind of like so it's an XML we have to write the layout in XML and the way out serves as sort of a skeleton for the entire page you can see so it's it's just so it doesn't have it doesn't actually have any data inside it it's just a div here in the header div here in the content if here in the footer just a skeleton of it then what happens

3:07 is the other the HTML part along with the data is inserted into these containers which the layout has created like the header at the footer and so on and these data part which is inserting of the data inside the layout this is taken care of by the block so the put a block is so even in English if you think what a block is a block is like a block of the page so this header let's say this header is a block so this block will have all the data like the logo the search the sign-in create account blah blah all these informations will be served by the block of header so what the header block will do it will insert itself in the layout first first and then it would insert the data here and

3:52 the block alone cannot do much because the block is a PHP file I'm going to show you those files in some time they're with me now so this PHP file itself is only responsible for the logic like what should the logos image be what should the name me what should the search be wha what is the total content in the customers card things like that the actual HTML is rendered by one more part one more division called the template so remember this a block and a template always go hand and without a template a block is useless without a block a template will not even be rendered so it's useless so that's the layout block and template in a very simplistic example so we're going to

4:38 what we're gonna do now is so this page obviously has a layout we're gonna have to find out that layout file and then we're going to insert this section I mean our data in this section between the tests which is the name of the product and the be the first to review this product for that let's go back to our code so I have this front-end layout and I have created a file called catalog underscore product underscore view dot XML and if I go inside that file you can see inside the body tag I have created reference container name is equal to product info main and inside that I have inserted my block which is which has a class which I'm going to show you real soon and it has name so this name just has to be unique that's all you need to care take care of you can name it

5:24 anything you want I don't give I don't care and then inside that I mean it also has a template because like I said a block alone is pretty much useless so the template is chordal our demo inside that we have a stop underscore left dot P HTML the reason I named them stop left is because my plan is to show the actual stock which is left for that product at that point of time so we'll show something like only 100 left only 50 left by now things like that you know so that should pretty much render this template so you can see I have named it stopped and asked or left or P HTML so all the templates needs to be put under the temporary directory just like all the layouts needs to be put under the layout directory it's not layouts by the

6:11 way and it's templates I know that can be confusing don't get confused and then finally block is there in the block directory the block with the capital B by the way and here we have a PHP file which is pretty much empty right now it just extends this because all templates need to extend all blocks need to extend this so I didn't write anything inside that it's a very basic block and the template also has nothing this is just a comment to make the developer know where the block exists so now you might ask me joy where the hell did you get that information from and I'll say good question but then I'm also going to say that I went ahead in the

6:57 vendor directory and I went to the Magento directory inside binder and there you can see that it's written model back and model back up so they have a lot of modules for all the functionalities so everything is segregated and if I use a little bit of common sense I might come to the understanding that the model catalog might be responsible for rendering the product because it's a part of the catalog so I go inside the catalog I go inside view I go inside front-end I go inside layout and we have a couple of different layouts here again using common sense we come to the understanding that catalog product view dot XML might be the file which is responsible for rendering the view the product thing make sense so then I open

7:44 that file and I saw here that we have a container called product info main and that's what I used this is all the information I got just by looking at Magento school and then I use that container name here and since I am referencing that container I call it reference container and inside that then I inserted my block makes sense it's good now coming back to our code so I'll close this for now not a problem in our P HTML first let's do this something very basic like hello world again very original and then I'm gonna I'm gonna have to clean the cache by the way so I'm just really in the cache really fast and I will refresh the

8:35 page and hello world so it came here just where we wanted so this came here because this whole section this whole section here is the product info mean which we have given here and we are inserting this so this is getting inserted inside that and since it's getting inserted on the top the first thing to get inserted so it's showing up here alright so hello world is not much interesting so let's go ahead and change that instead of hello world let's do something dynamic let's create a function public function get beta and here I'm going to return

9:26 let's return something like date and the format should be let's see here one day so that's that's our function in the block and we can use that function inside our template as well I'm going to show you how so in our template we have access to a variable called block dollar block so we can use that variable anywhere we want to call the functions of our block I'll show you how our block off we created the function and we called it get it ah okay let's call it something else let's call it get date because get data might be confusing so get it as you can

10:14 see we have cut it and we also have another bunch of different functions here which we did not create and that is because we extended this template which has all these functions written so again coming to get it and saving that going and cleaning the cache so don't forget to clean the cash because malindo cache is the product page and the catechol page so if you don't think the cache not changes will not reflect alright so we have the date here so that is something dynamic that is something which PHP did and which the template just showed and now we are going to do something even more dynamic like let's rename this function get remain quantity and we'll call cat remaining

11:02 quantity so to get the remaining quantity here let's just return ten and see how to show it so we're gonna write something like only then this then left bunch of different exclamation marks because currently I'm very excited for that so cleaning the cache refreshing the page only 10 left awesome so now this ten is again hard-coded not very useful so to show the actual quantity left instead of n right here what we need to do is step one we need to fetch the product model so remember guys this

11:49 is MVC so the actual product information will be inside the product model next is we get the quantity drawn model and then finally here oh it's good all right so to get the product model what we're going to do is we're going to create another function and let's keep it protected get current product here we have this fetch the product model and we have to return that so the way we will do that is we're going to go to the constructor we will create the constructor and we're gonna inject another variable inside the constructor

12:35 using dependency injection so dependency injection is a whole different thing and it's it's going to take more than the scope of this video to explain so I'll probably going to make one more video for dependency injection for now know this whichever object you want we can put it inside the constructor and using dependency injection Magento will give that be pretty cool if you ask me so we're gonna insert something called Magento Framework registry so this registry here is women so this registry here in this emblem you just can store this in a private local variable called registry

13:21 so this registry is where Magento keeps the current product when we load the product page so that we don't have to load the product page again and again in different blocks so the more you know anyway so now here we can get the current product just by doing this of registry and inside the registry the key would be product that would give us an object of the class Magento catalog modern remember I told you it's a model and product so it's an object of this class and we're going to take that here in the first step so dollar product is equal to this of the current product next is we're going to have to return the quantity so we do

14:07 dollar product of that quantity all right and here we are anyway using that same variable so everything looks good let's clean the cache never forget to keep the cash coming here refresh from the page oh we didn't get the quantity the reason we don't get the quantities the quantity is not safe here clean this product model so we need one more thing we need the stock registry interface so I think this is pretty cool that whichever object we need we can just insert it into the constructor and we'll get that so we got the stock registry

14:55 interface which is inside the Magento Catalan 28px tourist interface and here we are gonna do something like dollar stock is equal to this of stock registry of get stock item and it takes one parameter which is the product ID so I'm going to give it product that ID which the product ID and here I'm gonna return dollar stuff of that quantity so this quantity is where the quantity is same so if we do not our product of that quantity that would not be said in this product yet because we haven't loaded its stock items on the stock and the product are separate entities and

15:41 they're saved separately we don't need to know that for now just know that if you want the quantity you need to load the stock registry and you know the stock item and from there we can get the quantity all right looks good let's go for round two taking the cash never ever forget to clean the cash that's clean these refreshed only 100 left because 100 is the quantity let's go to the backend and here we have sent the quantity 200 let's change that to 56 I don't know why I chose that number but if we save the product said I just got logged out no worries and nothing back again

16:31 and go to catalog products because that's where the products are I'm going to go to this product which I have created I'm going to come down and set the quantity to 56 again I don't know why I chose that number I'm gonna save the product I'm gonna refresh the page and see something like only 56 level so this is first from here that's pretty cool and that concludes this video I think so we have inserted one layout and

17:17 we have shown some dynamic data inside that layout using a block and a template and you can make your layouts as complicated or as simple as possible you can use anything you want any data you want from anywhere you want anything just show it on the page using the so we have inserted here sorry we have inserted here you might insert in the footer if you want you might inserted under the human and we'll get a very dynamic page based on the layout system so that concludes the layout system which includes the layout the block and the template of Magento do so if you have any doubts please feel free to ask me the questions in the comment section below and if you like this video please like it please subscribe to our channel so that I can continue making more videos not that I'm not gonna make more

18:03 videos if you don't subscribe but please do subscribe thank you