Today we'll look at the Product page and how to put it into Miva Merchant. So here we have a completely static html page. This was created based off of a Photoshop design. We took that design and sliced it up into a fully static html CSS page. Now that we have this, we can take this and put this into Miva Merchant. Let's take a look at the raw html source. So this is very similar to what we've seen in the last videos. We have our same global header, here's a nav bar here which we already have set up in our store. Then we have the column right, which this is different. It starts with the breadcrumbs and we have this new section for product wrap which contains all the product image information. So we have the image, the main image and we also have the additional views. If we keep scrolling down we have the product content. So here's the brand, the name and the price. Then down here we have the attributes for the size and the color and the add to cart button right here. Down at the bottom we have the right column footer. So this is the html that makes up this product page. So let's look and see how we would take this html, put it into Miva and make everything dynamic.
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.
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.
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.