In the last video we saw how to take a static html file that was created as a photoshop file, split it up into its different sections, and put them in Miva's global header and footer in different areas where they should logically go in Miva Merchant.
In this video, we're going to talk about how to take a category page that's designed and mocked up like we see in the screen, and put that into Miva Merchant where all the products are dynamically written into the page depending on what category you're viewing. Now this page has the exact same header and footer as the storefront page. However, there are a few different things about this. The biggest one about this is this page being two columns vs. being a single column like the storefront. Here, we introduce the left nav for what Miva calls the category tree. There are also a few other elements specific to the category page. We now have the introduction of breadcrumbs up here, we have pagination up here, we have the products that are assigned to this category in the center of the content section here, then we have this newsletter sign up at the bottom. So let's take a look at the html code behind this page.
So for the most part, the global elements are exactly the same as what we saw in the last video. You have the stylesheet, the javascript and the head tag. You have the same global header section. You have the same nav bar. Now here's where it gets different. We now have this introduction to this right column div. Inside the right column, it looks like there's the breadcrumbs and actually the product data itself. So all of the products are part of the right column. If I scroll down past all the product data, we then have the end of right column and the beginning of a left column. In the left column here is a category tree. So you'll see here's the cat tree that has the navigation. Then underneath that we have our same footer. So from a page structure standpoint, the real big difference is the introduction of this left column and right column. Let's take a look at this left column a little bit. There's two places we can put this. Because it doesn't appear on every page, we can put this on the specific pages we want it. So for sure it's going to appear on CTGY or the Category Page. It may or may not appear on the PROD or Product page, and there could be a handful of other pages that we want to display this left column. So it's completely reasonable to put this left column section on the Page Template itself. However, another solution is to put this in the global header footer area and conditionally determine when it gets displayed. Now we're going to use this option as it keeps more of the global elements global. The other part to it as well is that we're going to put it in the global footer. The reason we do this is because what we're going to do is open up the right column in the global header and we'll close the right column div in the global footer. Then we'll open up the right column underneath that and we float the right column right and the left column left and that gives us our nice two column layout. Let's take a look at how this actually works in practice.
So we're going to take our left column here, which contains our category tree and I'm going to copy that. I'm going to come back to the Miva Merchant Admin. Now let's go to the global header footer. Ok, so above the code we pasted in last time I am going to paste the left category tree. This has the opening left column div and the closing left column div. However, even though we have the left column global footer, there's one more thing we need to do with the category tree. We want to put the category tree in its logical location. That means it should go in Miva's category tree section. So, what we want to do is take the actual cat tree itself, and I want to remove it from here and I want to replace it with the category tree item. This is very similar to what we did with the nav bar. We took the nav bar out of the global header and we put it in the nav bar location and then replaced it with the nav bar item. So we'll go ahead and update and save this and then I'm actually going to go into the category tree and replace what's there, which right now it's a complete dynamic category tree with the static html that we have. Now, ideally you don't really want to make the category tree static. You can, there's nothing wrong with it. However, if you ad a new category it will automatically display in the cat tree. Ultimately, what you want to do is style the existing category to match the current look and feel of your site. However, for this video, I'm just going to replace it with the static html. So here I have the h2 for the cat tree header, then we have our nested list for all the category tree items. Go ahead and save this. Let's go back to the original html. So now we have our left column in the footer. We have our entire category tree in the category tree item, with the item being called in the global footer.
Now let's look at the right column. The right column encapsulates all the products that are assigned to that category. So if we look at the front end of the web site real quick, you'll see the right column is this entire section over here. It has all the product data. So in Miva's case, we want all these products to be output by Miva, to be controlled by the category list. So let's start by opening the column right in the global header and then we're going to close it in the global footer. So I'm going to copy that here, come back to the Miva Admin and right after the nav bar we're going to open the div for column right and then in the footer above left column, we're going to close the div. Let's see what this does. Let's go look at the CTGY Page Template on the Category Page. So here, we want to do the same clean up that we did on the Storefront page. This has a lot of extra divs like this site container, this global_header that we don't really need within our code. Let's go through this and clean this up by removing them.
One thing I'm going to do is add the id of CTGY to this page, because that's how our design is coded. Now i'll start getting rid of these excess divs. Here we have the nav bar defined in the page template, but because we already moved the nav bar to global header, we can remove that altogether. Same thing with the cat tree here. I am going to leave the breadcrumbs for now. We're going to come back to those in a second. We're going to keep this Category Tree Image for now as it prints the category name, or the Cat Tree if that exists. Now, this Category Listing, this is an important item. This is the item that controls what products get displayed on the Category Page. It has a foreach loop that iterates through every category assigned to that product assigned to that category and outputs to the page. The code that this item controls is where we're going to style the individual item detail for the Category page. Get rid of this closing table because we don't need it, and we'll get rid of this closing div. So, if we look at what we did here, we have the global header here which includes our opening tag to our right column, our opening div to our right column, and then we have all this content in the middle which we'll just generalize that as content for now. Then we have the global footer which has our closing div tag and then our left column. So all this section is all going to be contained within that div, which is exactly what we want. It's a dynamic part of Miva. It's the part of the page that controls the products, specifically this category listing. So I'm going to update this, and let's take a look at our page and see how it looks. It won't look perfect because there's still some things we need to do. So here we are in the Category page, and it has a product here, it has our global header, our global footer, you'll see the cat tree is here but it's kind of off to the side, so we're still missing a few pieces. If I also go back to the homepage, which is the page we just did, you'll notice that the cat tree is now displaying here, which we don't want on the homepage. So let's modify that. Let's change it so that cat tree only displays on the category page. Now remember, we put the cat tree item in the global header, which is a good place for it, but we need to conditionally choose when it gets displayed. So in our global header, I want to wrap this right column in a conditional. This is because we only have a two column layout on certain pages. The storefront page doesn't have a two column layout, so we don't need this right column. What we're going to test for is if g.screen, which is the current screen you're on or the current page you're on, is equal or not equal to certain pages. Now, the conditional logic we use all depends on what pages the category tree is going to show up on. At a bare minimum, we know that this design is on the category page and the product page, but it's not on the storefront. So let's call out those two screens. So we're going to say if g.screen equal to CTGY (which is the category page) OR if g.Screen EQ "PROD" (which is the product page). If either one of those two conditions are true, we want it to display the opening div to right column. I'll update that and save it. 11:39