Knowledgebase: Miva Merchant FAQ
The Anatomy of a Miva Merchant Page Template
Posted by Wayne Smith, Last modified by Wayne Smith on 11 March 2010 11:06 AM

One of the most powerful features of Miva Merchant is the ability to customize every aspect of the look and feel for every page of your store. Miva Merchant gives you full control for every design element through what Miva calls “Pages.” Pages are essentially different templates for different parts of your store. The storefront has its own page and so does the category page and the product page. A default Miva installation has 39 different pages. Each of these pages contains the HTML and SMT (Store Morph Technology–A fancy word for Miva Code–more on this later) that generate the way the page looks in the browser. Not only can you customize all the existing pages of Miva but you can also create unlimited new pages for things like About Us, Contact Us, policy pages or any other content pages you would want to add to your ecommerce store.

To see a list of the first 10 pages in Miva Merchant, just click on the left hand navigation link Pages.

First ten pages in Miva Merchant shopping cart software admin user interface

Understanding the Storefront Page

Let’s take a closer look at the Storefront Page. It has a page code of SFNT. This is a unique code used to identify the page. It is also used in Miva Merchant URL structure to tell Miva Merchant which page template it should use when rendering the page.

http://store20.coolcommerce.net/mm5/merchant.mvc?Screen=SFNT

In the link above the parameter “Screen=SFNT” is telling Miva to use the Storefront template when rendering this page. If you do not see the Screen parameter in the URL Miva Merchant still knows what page template it’s using usually by passing the screen code as a hidden field in a form. That’s why you don’t see the screen parameter explicitly defined in the URL of the checkout process. The screen codes are being passed in each of the forms and you move from page to page. Also, if you just typed http://store20.coolcommerce.net/mm5/merchant.mvc? with no screen parameter, Miva Merchant will always default to the SFNT page.

If you click Edit for the SFNT (Storefront) page you will see the code that makes up this template.

Storefront (SFNT) page template for Miva Merchant shopping cart software being edited in the admin user interface

At first glance it looks like HTML however as you look closer you will see that each page template is made up of standard HTML tags as well as Miva Merchant Item tags and other Store Morph Tags.

What is Store Morph Technology?

Store Morph Technology is a fancy name for Miva Merchant tags and logical operators that provide web developers with powerful constructs to build and customize Miva Merchant stores. These tags are parsed by the Miva Merchant Empressa engine and provide the core functionality of Miva Merchant. If you are new to Miva Merchant, a great background of Store Morph Technology can be reviewed here: Store Morph Technology

There are two important concepts that will make understanding the code in the Miva page templates much more clear and easy to understand: Miva Merchant Items and Miva Merchant Entities.

Miva Merchant Items

Just by looking at the SFNT page template you will see the very first line of code looks like this:

<mvt:item name="html_profile" />

This is a Miva Merchant Item. Defined correctly, a Miva Merchant Item is a single user interface element or a collection of elements that make up a distinct part of the store interface. An easier way to understand this is to think of an item as an “include.”

Take the

<mvt:item name="html_profile" />

as an example. When this item is assigned to a page you will see a new tab associated with that item for that page. By default all pages are assigned the html_profile item. If you click on this tab you will see code that makes up this item:

HTML profile item in Miva Merchant shopping cart software being edited in the admin user interface

So when the SFNT page is parsed by the Miva Merchant engine it simply takes the code in this box and replaces all the

<mvt:item name="html_profile" />

with this code. Essentially it is just an include. (Since Miva Merchant is very modular you will see this same concept in many different areas of the software. )

Behind the scenes an item tag is a callout to a Miva Merchant Component which is a compiled Miva Script file. This file contains functionality to make the item do what it is intended to do.

Once you understand that Miva item tags are essentially just includes, the SFNT page template starts to make more sense. Anywhere you see an item tag it is pulling in code from a different area of Miva Merchant. In order to use a Miva Item on a page the item must first be assigned to the page. Every page has a tab called items.

Items for selection and assignment in Miva Merchant shopping cart software

Here you can see all the items available in the store and which ones are assigned to this page. In order for this tag

<mvt:item name="html_profile" />

to work correctly the item must be assigned to the page. You can assign an item to a page by clicking the checkbox next to the item and hitting update.

When you assign an item to a page if it is going to act like an include (like the html_profile item we just examined) then a new tab will appear. You will also notice that some tabs have an * next to them. This means that they are global throughout all pages. If you make a change to it on the SFNT page it will also affect all other pages of the store.

As you dig further into the page temples you will notice that not all items act as includes and not all items create tabs when assigned to the page. Some provide functionality that the page needs to operate. To illustrate this concept let’s look at the store item.

If you are on the SFNT page and click the items tab you will see all the items assigned to this page. The third one down is the store item. However you will notice that there is no store tab like you have for html_profile and head. The store item gives you access to variables that you can then display on the page. It gives you access to the store information that is entered on the Edit Store screen, including the store name and contact information, weight and currency units, order minimums, maintenance mode settings, and so on. Because there is nothing to edit or format, when this item is assigned to a page, no new tab becomes available on the Edit Page screen.

If you look at the SFNT page template again you will see the title tag uses this item.

<title>&mvt:store:name;</title>

Here this will output the store name. If you update the store name in the admin this variable will automatically display the correct store name. You can see all the items and the variables you have access to here: SMT Items Documentation

Miva Merchant Entities

An entity is a bit of text that will be replaced with a single piece of information, like the store name. It is similar to a variable or token. When the information is changed for the store, any place an entity uses that information will reflect the change.

Entities start with an ampersand (&), and end with a semicolon. The first part, &mvt, tells us this is a Miva Merchant page template entity. The middle part, like store or colors, tells us what item is being referenced. The last part, like name, gives the specific piece of information to use from the specified area of the interface. The entity &mvt:store:name; will display the name of the store.

Understanding the Miva Merchant Page Structure

Now that you have a better understanding of a Miva Merchant Page Template let’s look at how the page is organized. You will see these main items in a Miva page template.

  • Global Header
  • Global Footer
  • Page Header
  • Page Footer
  • Navigation Bar
  • Category Tree

Below is a graphic to help illustrate how each of these items interact and create the page template. Since you have control of where these items go you could move them around the page however you like. And since you have access to the code for each of these section you have complete design control of how the website will look.

Store layout graphic image for designing your shopping cart with Miva Merchant ecommerce software

Summary

So now that you have a basic understanding of a Miva Merchant Page Template it’s time to take a leap and dig into some code. Experiment by creating new pages and modify existing ones. Don’t be afraid to break things since you can always revert to a previous template using Miva Merchant’s Page Version History. (also make sure you are not working on a live store as well)

Working with Version Histories

Here is an easy and useful exercise: See if you can add a global right sidebar just by adding html to the global header/footer. If you get stuck post your questions in the comments and I can help you out.

Miva Merchant Blog regarding The Anatomy of a Miva Merchant Page Template click here

(26 vote(s))
This article was helpful
This article was not helpful

Comments (0)
Post a new comment
 
 
Full Name:
Email:
Comments:
CAPTCHA Verification 
 
Please enter the text you see in the image into the textbox below. This is required to prevent automated registrations and form submissions.

Help Desk Software by Kayako support.miva.com/supportsuite/index.php?