Videos

I'm going to jump back to the Miva Merchant Admin and I'm going to go to the product page which has a page code of PROD. This is what controls the entire layout of the product display. Now the first thing we need to do is streamline this page to strip out all the stuff that we don't need, or like the Category Tree that we've already included this in the global header. 

The product page has a couple of things related to the Attribute Machine and image machine which are two functions that control the attributes and Miva's additional functionality. So there's a couple head tags here that you won't see in most other pages. These will output javascript that make all that function. There's also some code here if I keep scrolling down in the body for attribute machine. This actually prints a json object to the page that controls all the attributes. This is what allows Miva Merchant to dynamically change out the attributes when something is out of stock based off your size and color selection. So to save some time here I already have this page cleaned up. Let me paste the code in here. So here's my cleaned up page. I only took out a few things. I took out some extra html divs that we don't need and I left all the important items. The main one being this one, the product_display. The product display is what controls the layout of the product page. This is where all the product information is going to be output. 

As a test, let's take our static html code that we have and just put it in the product display to see if it displays correctly. So here we go, I'm going to start with the right column. So here are the breadcrumbs which are completely static at this point. Then the product image, go all the way down passed product information, the attributes, all the way down to right here, which is the close of the product content section. I'm going to copy that and go back to Miva and we want to put it in the product display layout. We can quickly get there by clicking on the jump menu and jumping down the page. The product display layout has a lot of important piece that make up the product page. But for now, just as a test, I'm going to delete everything that's in here and I'm going to replace it with our static html code. I'll go ahead and update this. Now let me jump back to the front end and see what this looks like. If we jump back to the front end of the web site and navigate to our product that we have set up here, you'll see that we pretty much have the same look and feel as our static page. However, the header and footer dynamics are driven by Miva, this left nav is dynamic as it's driven by a category tree, this whole static html that we just pasted in has the layout we want, but nothing is dynamic. So what we want to is go back in and make these different sections dynamic. Which means we want to place the static text with the actual entity or variable that controls that within Miva. So let's jump back to the Admin and let's go down to our Product Display Layout. So for now I'm going to ignore the breadcrumbs, we can go back and do those later. Let's start with some of the easy stuff here. So we want to do the product name, but you want to make this dynamic. So I can delete this and there's an entity within Miva Merchant that controls the product name. The easy way to see this is to come up and use Token List. I pull up token list under the "More" menu. Here, once we have this pulled up, we can search for our shirt, our product code that were working with, and then I can search for stuff related to product. If I scroll down here I can see some variables that have to do with the product. So here I have the product code, the product cost, the product description, what we're looking for is the product name, which is right here. So l.settings.product.name is the variable and the entity, the way I output that to the page, is mvt:product:name;. I'm going to go ahead and copy this now and close token list. So here I'm going to replace this static text with its entity. We can do the same thing for all the different parts of the page. So for the style number is the product code. The price is going to be formatted so product:formatted_price. There's also just a regular price field which wouldn't have the $ sign and decimal points. Here we have the description. You'll notice I'm using &mvte for all of these because I want to entity encode our output. That just means that special characters like less than or greater than or equal to signs will be encoded when it gets output. Let's go ahead and update this and let's take a look at our front end and see what changes. If I refresh this, I get the exact same look and feel. However, we now have things that are dynamic. Our name, the style, the price and the description are now all dynamic. Let's now take a look at the images. 

To understand how the images work we need to know a little about image machine and how it works within Miva. Here's some code that I pulled from the default Miva Page Template. Some key things I want to point out. So here you have an image tag with an id of Main Image and a source to a blank image, blank.gif. This is actually how Miva images work. The source of the image gets replaced by image machine which is all javascript. So by default, it loads a blank image and then this will get replaced at run time with the correct image. We also have this empty thumbnail ul. The ul with no li's. Those li's also get populated at runtime through javascript. Then we have a close up div, which is the same thing as above. Instead of Main Image it has an id of closeup image. Then there's this closeup_close link which is a link to close the light box. At the very bottom here we have some code for image machine which outputs all the javascript that makes image machine work. The key thing to remember is that javascript controls all of the image functionality. Because of that there are some ids that must be in the page template for the machine to work. Now let's go back to the admin and look at some of the configuration settings for image machine. So you see, image machine is looking for these five ids: main image, thumbnails, closeup_div, closeup_image and closeup_close. These all must be contained within the html in order for image machine to work. So, what we need to do is go back through our html that we wrote for our static html page and we need to add these proper ids where they should go. 

So here i have the static html code that outputs our images from our design. What we want to do is merge these two code sets together so that we can have image machine control all the images. The way we do that is by adding the ids that need to be there. So here the id for Main Image I want to put it on the main image over here. The same thing goes for the thumbnails. Here our additional images are contained within a div and they are just links. We're going to keep the div, but get rid of the links altogether and just paste in our ul. Now, at runtime, image machine will take that ul and populate it with any additional images as li's. Now, we notice in this code there is nothing related to a close up image or a closeup_close. So, we're just going to grab the default code that's up here. I'm going to add it after our additional images. The last thing we want to do is grab this item which outputs some javascript to the page and allows image machine to run. We'll just put it right at the end. Now we have all these merged so we can take this code, go back to Miva and paste it in, hit update and when we refresh the page you'll see that the page is slightly different. However, image machine is now controlling all of these images. I can click this and get the zoom. I can change it out to the back and click it and get the zoom. So you get all the functionality for free as part of image machine as long as you have the code structure correctly like we do here. Now you'll notice that this main image here is a little bit smaller than what we wanted. So we can go ahead and have Miva resize it for us automatically. If we come back here and look at the image size we want, so this image size is 253 x 380 pixels, so let's come back to Miva and we can tell it the image size we want it to display. Back in the Admin, I come down here to the Product Display Image Dimensions. So this will resize both our main image and our zoom image or close up image as well as our thumbnail images. So we want to make this 253 x 380 and Miva will automatically resize the image to as close as possible to those image sizes and still keep the proportion of the image that you uploaded. 

For our additional thumbnail images, we want 54 x 81. Go ahead and hit "Update." Now come back to your storefront and hit "Refresh" here. Perfect, it fills up the space just like the old one did. We still have our exact same functionality here as well as here. 

This is all we're going to cover in this video for the Product Page. However, the other things on the page which is the attributes, the quantity box, the add to cart button - all these are exactly the same thing. All these can be customized the exact same we we did the images, the description and the other elements on the page. You simply have to customize Miva's built in templates so you achieve the same look and feel as your design in your html css.