Today we’re going to talk about on the core building blocks of Miva Merchants Page Templates and these are Items. Now up and to this point we've talked a lot about the Template language. About how to use to use mvt:assign and mvt:eval to create and output variables, how to use foreach loops and while loops to loop through and iterate through arrays and lists and how to use all of Miva Merchants powerful built-in functions; things like substring, length, get token, time and many many others. Items in Miva Merchant add a whole new level to Miva Merchant’s Page Templates.
As I stated earlier, an item can be viewed as the building block of Miva Merchants Page Templates. They are a User Interface component that provides specific functionality to a page. Now, we’re going to look at some examples of this in just a few minutes. However, this is important concert to grasp; than an item is a self-contained thing that provides functionality to a page. Now, they're two types of items. There are Items that are built into Miva Merchant that are just part of the core software and then they're also third-party items. Now there's no difference between the two, other than some are written by Miva Merchant and others were written by a third-party developer. Because of Miva Merchant’s powerful API, we give developers the flexibility to add almost any functionality they can think of to the core software. That functionality becomes available in the Page Templates usually through items and item tags. Now an Item can’t be used on a page until it is assigned. Every page has an items tab and it will show you which items are assigned to that page. Once an item is assigned, all the functionality contained within the item becomes available to the page.
Okay, so that's the theory behind what an Item is, but what's an item really? Well, an Item is just a reference to a compiled module file, an mvc file. If you remember earlier when we were talking about the building blocks of Miva Merchant and what modules are, a module is just a compiled mv file which is written in MivaScript like is run through the compiler and that outputs an mvc file. Well, an Item is just a reference to one of those files. So any time you have an item assigned to the page, you can always go and look up what module it’s actually referencing. An item also provides a set of item tags, which are used within the Page Template to reference certain functionality. This is where the true power of Items exists. This ability to access in modules functionality and variables is what makes Items such a key piece of the Miva Merchant Temple Language. Let's take a look at the graphic to help illustrate what an Item is. So here on the left hand side we have a Miva Merchant Page Template. Now, we’ve lightly touched on this and we’re going to dig into this more on this on the next video. However, a Page Template has Items that are assigned to it. Once an Item is assigned, that functionality contained within the item and those item tags and variables are all available within that Page Template. Now we said an Item is a reference to a compiled mvc file, or a module. So that item points to that module. The compiled Miva script file for the module is what provides the item all the functionality that's available within the Page Template. It does the heavy lifting to communicate with the database to create and modify variables in any of the functionality that's needed within that module. Let's jump over to Miva and take a look at some Items.
Here I am, back in the Miva Merchant 9 Admin. Items are located under the User Interface Settings. If I come up here to the menu and go to User Interface. So here we have Pages and then Items. Now this will list every item that's currently available within Miva Merchant. This is an ever changing list. As you install and add new modules, most modules will register new items and these will also be found here. Let's take a look at the Store Item. The Store Item is a built-in Item. This Item is there by default in ever Miva Merchant store. So every item has a code and a module that references. If I edit this item, we’ll see that the Item Code is “Store” and the module reference is CMP which stands for component-mv and then stdstorefields, which are standard store fields. This Item, with a code of “Store” references this module and this module is just a compiled Miva Script file and provides functionality about the store. We've seen this in previous videos, so it contains the store name, the store code, the store address, all information about the Miva Merchant store. So if I click back to items here, you’ll see as I scroll through this, there's quite a few items that come by default. Each one of these provide specific functionality to the page. Once an Item gets assigned to the page, all the Item tags, variables and features of that item become available to that page. Now there are few different types of item tags and it’s important to understand the difference between them, because you'll see them used quite a bit within the page templates. Let's take a look at all three examples and when each one is used.
Back in our text editor I have three examples of Item Tags that are available within the Miva Merchants Page Templates. The first one is a self-closing Item Tag with no parameter. The syntax is always in the mvt:item and then it’s going to have a name. The name is the item you want to reference. This references the item code. Again, this item points to a module, which has all the functionality contained within it. Well you may be wondering what does item tag does. This Item points to the html profile module and its functionality is to take the contents of the html profile tab and insert that into Page Template. So you can link of this as an include, and a lot of items are like that. Where it'll take contents from some other part of Miva Merchant, some other Tab and Insert them onto the page. Now a second example of an Item tag defines a parameter as well as an Item name. So here we have the head item with a parameter of CSS list and this one has a parameter of head_tag. So both of these reference the same item, the same module, but they're passing the different parameter and depending on that parameter it will do different functionality. So this first one takes all the CSS files defined in the CSS section of Miva Merchant and will insert them as link tags on the page. The second one takes the head tag block, the head tag content and insert that into the page. So both of them are very similar as they insert stuff into the head tag of an html document. However, they each have their own individual Item tag. This allows you to move them around in the Page Template so you can define which one goes first, or remove it completely if you don't need it. The Item tag with the parameter is probably the most common Item tag which isn’t used very often is an item that has an opening and closing tag. So, instead of a self-closing item like you see here, this has an item that opens and there's content in the middle and then it closes. Now what this item does is it actually outputs the opening body tag and the closing body tag.
Let’s jump back to Miva and look at some code to help illustrate these concepts. So here I am back at the Miva Merchant 9 Admin, and I’m going to go to the Storefront page. So this is the Page Template that makes up the Storefront. Now before we get into the code, let’s take a look at this Items tab. Every page will have an items tab which will show you which items are assigned to the page. Here I can use the sorting features to see the signed and unassigned. This shows me all of the Item tags that are associated to this page. Any one that is green means it’s assigned. Any one that is grey means it’s not assigned. So, each of these items that are assigned provides specific functionality to the page template; the store Item, the header/footer item and is also quite a few that aren’t assigned and you can assign any item to any page. However, you do have to be very careful in doing that. Some items are defined only used on certain pages. For example tax, you wouldn't want to assign a tax item to the storefront page. It doesn't make sense and it will load unnecessary functionality on that page. As a rule of thumb, you only want to sign the items that are needed for that page. This will prevent unnecessary loading of data and variables behind the scenes that are never being used. If I jump back over here to the Page Template, so we see the html profile item tag here. This takes a contents of the html profile and inserts it into the storefront page. Now this is a global item, which means it gives me a single place to modify the html profile and that's used across all of the Miva Merchant Page Templates. Here we have the head item with the CSS list and the head item that calls in the head tag and both of these are defined within the html head. We have other atoms on the page such as the global header which takes the contents of the global header and inserts it into the page. Here this takes the contents of the navbar and inserts them into page. So you'll see that a Page Template is a mixture of items and item tags along with regular html and CSS and gives it to functionality needed for that page. So the important thing to keep in mind with items, is that a must be assigned to page before you can use them and they provide specific functionality to that page. You can get to that functionality through item tags which are referenced on the Page Template or through variables that are made available through the item itself.