Pages in Miva Merchant are the cornerstone piece to Miva Merchant’s power and flexibility. Pages and items go hand-in-hand. They usually have one along with the other. When we see Pages we're just referring to a set of templates which control the look and feel of the entire website. The functionality available to each page depends on what items are assigned to it. So the Storefront page will have different items assigned to it then say the Product page or the Category page. At its core, a page is just a container. The functionality is determined by which items are assigned to that page. Miva has about 50 built-in pages, but there's no limit to the number of new pages you can create. This is part of the power and flexibility of Miva Merchant.
You can create any number of new page templates you need. These page templates can be used for core functionality, or even just for content. Now there's nothing special about a page. In itself it has no functionality. It’s just a container. What makes up a page is HTML and CSS, Item Tags from the items that are assigned to it, Entities (which are variables that are output to the page) and Logic (if l statements, conditional statements, foreach loops), all these combined make up a page template that’s used to control the look and feel of the website. Now, here’s an example of the Storefront page visualized into different blocks so you can see how the different elements fit together. You'll see there's a global header, followed by a Nav Bar and then the left Category Tree, a Page Header, a Contents Section, a Page Footer and a Global Footer. So this is what makes up the Storefront page and these are different sections. All these sections are controlled by items, so in order for the Nav Bar to display and work on this page, a Nav Bar item must be assigned to the page and the Item Tag must be placed on the page where you want it to display. There's no set structure to a page template. This is just an example and is a pretty common layout for the Storefront page. Sometimes a Category Tree may not be there, and the Content will be 100% width, other times you'll see the Category Tree which is the left navigation. The key takeaway here is that a Page Template is very flexible. What displays depends on you the developer and where you put the item tags on the page. Let's jump over to Miva and take a look at the code for the Storefront page. Here I am back in the Miva Merchant 9 Admin. To get to Pages, you can either search for a page up here in the Search box or you can go to Menu and because they’re User Interface elements, they're going to be under the User Interface Menu option. So here we’re on pages and this lists all the pages in the store. We want to take a look at the Storefront Page we can search up here and I know that the code for the Storefront is SFNT. Here’s my Storefront page and I'm going to edit this page. And so you’ll see here the details of the Storefront page. It gives you the Page Code, the Page Name and then the Page Template. The Template is what makes up the entire page. As a Developer, you have complete control over the entire look and feel of this page.
Now I said earlier that a page is comprised of Items, so here we have the Item Tag which calls in an html profile, Entities, which here we’re using a store name, the populated Title Tag, regular old html and CSS, so here I have the body and here I have a Div with a DIV Site Container and so that can be used for styling and this doesn’t have any conditional logic or Foreach Loops. The other pages such as a Product page and the Category page will definitely have those elements. Now if you scroll down past the main page template you'll see the section for Content. This content is being called into this Item Tag here. In Miva there's an Item called Content that can be assigned to any page and by default it’s assigned to the Storefront, but it can be used on any other Page beyond that. It just needs to be assigned and the Item Tag inserted on the page where you want it to display. Here I just want to put in a test and hit update. I'm going to come back to the frontend and hit “Refresh.” See my text gets displayed here as we’d expect. Let me jump back. So what's happening to make that work is this Item Tag is grabbing the contents from this Contents Section and inserting it into the page. A lot of the Item Tags do that. For example the Global Header, the Nav Bar, the Cat Tree; they all go pull code from somewhere else and insert it here in the page. If I keep scrolling down here’s the Page Header and the Page Footer and that works the same way as the Contents Section except it's displayed above the content here and below the content here. Well, you may be wondering how do I change content of items that assigned to a page and the Item Tag is being called in on the page, but I don't see it down below here. Well these are global items and any change you make impacts it globally, so any other page that's referencing this item. To be able to change a global item you’re going to go under User Interface and then Settings. Let’s jump back here and then User Interface, and then the Settings Tab. Now here you can scroll down until you find the html profile, or you can use this menu here to jump right to it. I can make any changes I need to the html profile I need, hit update and it will Global impact every page that calls in the Item Tag. This is a common best practice when working with Miva Merchant Page Templates. You want to take as many Global elements as possible and keep them Global. That allows for a single location to make a change that will propagate through many many page templates.
Let's take a look at another page template. I’m going to go back to User Interface and I want to look at the Category page, which has a code of CTGY. Now the Category page looks very similar to the Storefront page, however, it has a few different items assigned to it and some different functionality because the counter page needs to be able to iterate through all the products assigned to that category. So there's an item that's assigned to this page that allows that functionality to work and if I scroll down here, we’ll see here there's this Category Listing Item. And this is not on the Storefront page because it doesn't need to be. If I keep scrolling down here you'll see this Category Product List Layout. So this code is actually what controls this item. Now this code handles things like pagination, category sorting, but the main thing I want to show you, if I scroll down here a little bit is there’s a foreach loop right here that loops through all products that are assigned to this category. So this is the core part to the Category page. This section is what controls the individual product layout for the Category page. So if I want to come in here and I want to change something maybe change the width to 50%, which would be two columns, or say 33%, I can come in here at make that change and hit update and they will update that on the site. So now I want two columns to three columns. We're going to dig into this a lot more later when we get into the Category page in more detail. Now I just want to introduce you to the concept to the page template and the different items that make up a page template and its functionality.