Videos

Today we're going to talk about the homepage and how to manage global elements such as the global header and footer and top navigation. When building a Miva Merchant store it's important to know where different elements go. A rule of thumb is to make sure all the global elements, meaning elements that are shared across multiple pages, are stored in the global header and footer. This way there's a single location to edit them any time you need to make changes. For this video, we have a demo store that we're going to work with. Here we're looking at the homepage. So this page started out as a Photoshop file. It was designed in Photoshop. We then took that Photoshop file and sliced it up into a static html file. Now in this video we're not going to go into the details of slicing up the Photoshop file into the html, but that would be the first step of this process. 

There's nothing special about this page. It's a totally static html page that uses html and css for the styling. You'll see it's broken up into a few different components. It has a global header up here, a nav bar and then a couple of homepage images; one big hero image here, followed by a smaller image here. Then a simple footer. Anytime you're working with a design and putting it into Miva it's going to be important to identify the different components of the design. What parts will be the global header, global footer and the page specific content. 

Let's take a look at the html code behind this page to see how it breaks up. Here's our html source. We have a head tag here that calls in a style sheet and some javascript. We have the body which calls in the SFNT which is the storefront page. This area here is the global header which has the links to Customer Service, Wishlists and Login. We have our shopping cart and items in cart. Here's our search. We have our navigation bar which has links to different categories. Now these two categories, "header-graphic" and "index-placeholder," these are the two graphics on the homepage. Right now these are empty divs, but actual images are called in as background images on these ids. We'll see that in a second. At the very bottom, we have the footer. So it has this simple navigation and then we call in the jquery at the very bottom. 

So this is the htm source that makes up that page. I'm going to jump back to it and inspect the element here so we can look at the homepage graphics. So we can see that this graphic here is the header graphic and you can see over here on the right the image is called in as a background image. Then this index-placeholder is this bottom graphic and the image again is a background image. 

The first step into putting this in Miva Merchant, is to split this page up into its different logical sections in the global header if possible. So if I'm going to split this up, I'm going to take everything from the nav bar all the way to the top and that's going to become my global header. These two images for the storefront page are going to be specific to the storefront page, so those will be on the page content of the storefront page. Everything below that down here will become the global footer. So this page gets split up in three distinct pieces at a very high level. Global header, global footer and some store specific content. So let's actually put those sections into Miva and let's see if we can get it to work. 

So here I am back at the Miva Merchant Admin. I'm going to go find the global header. It's under User Interface settings. So here it is. This is code for a CSSUI store. If I go look at the front end here's what it looks like. So this is a blank installation of Miva Merchant. I have a few categories set up here. Other than that, there's been no customization to the store. This is the default template. Now, what our end goal is, is to make the output of the html from Miva match the output of the output of that static page that we have coded. If those two things are the same, we have the css referenced, we should have the exact same look and feel as our static page, but driven by Miva Merchant. 

Let's take this global header for our content and we're going to erase all of it except the top part which is the maintenance mode warning message. It's recommended that you keep that in there. I'm going to paste in my code into the global header. Now let's do the same thing with the global footer. We'll come down here and grab everything that's in the global footer, and paste it over here. Go ahead and hit update and save. So now, if I go back and refresh this page It's not going to look like my design, because I haven't uploaded the style sheet yet. However, you will see some of the elements on the homepage now. Now let's take this one step further. Let's jump back to our global header and footer and let's look at what we pasted in. Here we have the DOCTYPE, the html opening tag and then the head tag. 

Miva has sections for areas where all the stuff should go. We want to put them in their appropriate areas. This makes maintaining the site much easier. You want to put things in the logical place. Let's start by chopping up the global header and move things out of here into it's appropriate location. So here we have the DOCTYPE and html, there's actually a tag for this in Miva. I'm going to copy it and remove it from here. so here, under html profile, is where this code should go. This is where it lives. So the doctype and the html opening tag should always live in Miva's html profile. Let's look where that gets called in. If I go look at the storefront page, the main page template you'll see the very first thing is the html profile. So the page template itself calls that in. So the next thing is the head tag. Miva's page template already has a head tag that prints the title, base href, and then it prints a CSS list and then the global head tag. So we want to utilize this as much as possible, but keeping our global head elements such as CSS list and javascript within the global head tag. So let's jump back to the global header and footer. We'll see that we have the global head tag defined here. But we don't need it here because it's already defined within the page template itself. What we want to do is take our global style sheet and our global javascript and put it in Miva's global head tag. So I'm going to copy these two pieces out and I'm going to delete the rest of this. We don't need this because this is defining the page template. I'll go ahead and update this. Let's go over to the HEAD Tag Content/CSS tab. This tag has a global location where we can put any elements we want to appear globally within the head tag. I'm going to paste my link into the stylesheet and a link to the javascript. Go ahead and click "Save." I could have also uploaded my stylesheet here. I can add a global style sheet and it will automatically insert this link for me. Both methods will work and it's really just a personal preference whether you want to manage your CSS files here or you want to manage them through ftp and call in a style sheet manually. 

Let's jump back to our global header and footer. Let's see what else we can split out into its own section. So here we have the body with the id of SFNT. Well if you remember, the body is also defined within the page template itself. That's probably a better place to put it. Each body tag has its own id of SFNT, CTGY or PROD so we want that at the page specific level. I'm going to delete this, go ahead and hit "Update" here. Let's go  back to the storefront page. Here we'll see that the body is a class of SFNT. So let's also give it an id of SFNT. Let's focus on the storefront page here a bit. So we have our html profile being called in, we have our head tag which has the page title basehref, we have our CSS and javascript being called in here, we have our body with the id of storefront. So the next part to it is we want to output our global header and footer. This is already output here by this item tag. However, the default page templates have a div of site container and a div of global-header, but we don't really need these. Our global elements are referenced within our global header. So we don't need these containers. Each just comes default with Miva and you can easily remove them which we're going to do here. So we're going to strip this out and get rid of all the unnecessary divs that we don't need to match our html code. 

So here we have the nav bar. Now, the nav bar by default is defined in every individual page template. However, the nav bar is usually a global element. It's usually global across the entire site. So a common practice in order to keep the global things global is to move the nav bar into the global header. So I'm going to take this out of here, go ahead and click update to save our changes and we'll come back to this in a second. Let's actually go to the global header again. If I expand this, right here is where a nav bar is defined. So we already have it in the global header, it's just not in the nav bar location. Let's actually change that. We want things to live in their logical locations. This is for maintenance and ease of use. I paste in the nav bar item and then I'm going to remove the actual code for the nav bar. I'll just leave the item there and I'll go ahead and hit update. Then let's go to the nav bar and lets update the code. Miva is going to have some default code in here, which you can simply just remove. So here's our nav bar which has some links to our category navigation. So we'll go ahead and update this. Now let's jump back to the storefront page again and see what else we need to do to put things into their logical place. 

So we have our global header and footer, and if we come down even further the next thing is a table that contains two pieces. It has the left navigation of the category tree, and then it has the content section which is where the content lives for the homepage. Now, if you remember correctly from our design, there is no cat tree in this design. There's no left navigation over her. So that makes it simple. We can simply delete that from the storefront. The other part too is we don't need this table, so we're going to get rid of that too. We do want to leave this page specific header and footer. We're not currently using it, but we may use it in the future. So I'm going to get rid of everything up to here. Now we have a stripped own version of this page. We have all of our core elements that we need, our global header and footer which is where most of the global elements live, and then we have our closing body and closing html tags. So let's save this and then jump back to the global header and footer again and you'll notice you do that quite a bit when first building the store. The global header and footer is where a lot of elements live, so you'll be jumping back and forth from the page you're working on to the global header footer quite a bit. Now let's make sure our  global header and footer has everything we need. So our global header now has the header with the header links, our shopping bag, our search and it also calls in the navigation bar. 

Now let's look at the global footer. The global footer has some footer links and a link to jquery and originally we had the body and html closing tag behind the global footer, however if you notice the storefront page itself is actually a place where these live and that's a much better place for them. A page specific level. So we can get rid of them from the global footer and let the page control that part. I'm going to go ahead and update this. Now let's jump back to the front end and refresh one more time. Now you'll see we still don't have our full design, but it changed quite a bit more. The only thing we're missing right now is our images and our style sheet. Let's take a look at where to upload those. 

If I come back to the HEAD Tag Content/CSS Tab, you'll see that a path to my CSS is located at css/layout.css. Now this file would normally be relative to the root. However, because Miva rewrites the root, to the mm5 folder using the basehref, this file actually lives in the mm5 folder and then css and then layout.css. So over here in my ftp program I'm logged into the server, into my web root. You'll see I have my mm5 folder. This is the folder we want to add our css and images. Now, this css folder might not already exist. If it doesn't, you'll need to create it. Now let's go inside the css folder, I have two sub folders, which is what Miva creates to store its CSS, and I'm going to add layout.css, which is the main css file for the site. Now the actual location of the css file doesn't matter so much. You just want to make it consistent. So if you want to use Miva's default folder and put it in the sub folder for the store, you can do that as well. You can put it here in the main folder. Or you can even put it outside the mm5 folder in its own css folder parallel to the mm5. All these will work. You just need to keep it consistent and make sure a path you are referencing references the right path to the file on the server. So now I have my css file here. The last thing I want to do is add my images folder. 

Now the images folder is different than the graphics folder. The graphics folder contains all your product related images. The images folder contains all the images specific to the web site, so icons, buttons and things like that. Now you'll see I don't have an images folder here, so I'm just going to upload this folder here so it will automatically create one. Now, all my images are uploaded and my css is uploaded. Let's jump back to the front end and if we did everything correctly, when we hit refresh we should see a full functioning web site. Hey, look at that. We have our global header, we have our nav bar and we have our global footer. However, we're missing the content section that contains the two images. So let's go grab those. 

I'll jump back to my original html for the page. If you remember these two divs have background images which control the homepage graphics. So I'm going to copy those and come back to Miva, I'm going to go to the storefront page, and these two divs can live right here. I can just paste them in and that would work just fine. It's not the best place for them. We want to keep them organized and separated out, so a content item is the best place to put this. This content item creates a tab section down here for content. Really, it's just to keep things more organized so you don't have this huge giant page template. So I can paste this in here and hit update and now I go back to the front of the web site and hit refresh one more time, you'll see I have my two images being called in. Perfect. So this is a dynamically generated page from Miva. You can see I'm on the Miva SFNT page and it looks exactly the same as my static page that we were looking at earlier. 

So originally we had our Photoshop file, we then sliced it up into html and css and we took that and put it into Miva Merchant and we took the code and put it into its appropriate places. 

In the next video we're going to dig into the category page and how to display a list of products that match the exact same look and feel as what we have designed in our Photoshop file.