Musings From the Throne » Store Morph Technology

Miva Merchant Quick Tip: Styling Your Category Tree

Tiny Queen — Sun, 21 Feb 2010 16:58:15 +0000

There have been several posts on the forums lately from people looking to style their category trees. Many of them need the tree to be in an unordered list format in order to implement a flyout or dropdown menu of some sort.

There are numerous methods available for creating accessible, cross-browser compatible flyout or dropdown menus, so I’ll leave it to you to search out the one that works best for your needs. What I will do here, however, is to provide you with the code you need for your category tree to create those unordered lists from your categories and subcategories.

The tree code below does not contain the conditional that removes the link from the current category — I’ve always thought that was a bit nonsensical. It does, however, include a css class that will allow you to highlight the current category in the list, making your Miva Merchant site more user friendly.

Some of the lines in the code below are pretty long — that’s just because I hate seeing “orphaned”

tags on their own line in the source code. If you need to break it out to make it more readable for yourself, by all means do so.


  



  
    
      
          
            
          
            
		&mvt:cattree_category:name;
	    
		&mvt:cattree_category:name;

This code will give you a tidy set of nested unordered lists that you can style in your css file using the id of the list item. When the tree is generated, each list will have an id of catlevel, with a number appended to it indicating which level of the category tree is being displayed (i.e. catlevel, catlevel1, catlevel2, etc).

As an example, the code below will get you a category tree that resembles the picture at the top of this post.

ul#catlevel {
list-style-type:none;
margin-left:0;
padding-left:0;
font-weight:bold;
}

ul#catlevel li a {
display:block;
border-bottom:1px dotted #ccc;
padding:5px 3px;
margin-right:5px;
font-size:1.1em;
color:#18316b;
}

ul#catlevel1, ul#catlevel2, ul#catlevel3, ul#catlevel4 {
list-style:none;
margin:5px 0;
padding:5px 0;
}

ul#catlevel li ul li, ul#catlevel li ul ul li, ul#catlevel li ul ul ul li{
padding:2px 0 2px 5px;
}

ul#catlevel li ul a, ul#catlevel li ul ul a, ul#catlevel li ul ul ul a {
border:none;
padding:3px 5px;
}

ul#catlevel1 {
border-bottom:1px dotted #ccc
}

li.thiscat a {
color: #cc0000;
}

Miva Merchant Quick Tip: Some Handy Conditionals

Tiny Queen — Thu, 16 Jul 2009 02:33:23 +0000

Miva Merchant users and developers frequently post on the Miva Merchant User Forums looking for guidance with some commonly desired conditionals to control the display of content on their ecommerce sites.

Below is a list of some of the more common requests, gathered together in one handy spot. Who knows, you may even see something here that sparks an idea for modifying your own store.

Conditionals for displaying products and their information

Only show certain content for a single product


My special content here

The content for all the other products

Hide a product from display (for instance, in search results or on a category page



Product Display Information Here

Hide a set of products from display. If you name each product with a specific prefix (this example assumes the prefix is separated from the code by a hyphen), hiding them from display can be easy


Display some content

Display certain content only if a product has attributes


Display this content only if the product has attributes

Logged in Customers

Display certain content if a shopper is logged in to an account


You're logged in.

Display certain content if a shopper is logged in, and alternate content if they are not


You're logged in.

You're not logged in.

Secure page content

Exclude content from secure Miva Merchant pages


My content that I don't want on secure pages

Include content only on secure Miva Merchant pages


My content that I only want on secure pages

Controlling Content on Specific Pages/Screens

Include content only on a specific screen


My content that I only want on a specific page

Exclude content from a specific screen


My content that I only want on a specific page

Include content on several specific screens


My content that I only want on a specific page

Exclude content from several specific screens


My content that I only want on a specific page

I hope to add to this post as I think of additional common needs for Miva Merchant store morph technology conditionals, so be sure to subscribe and get any updates.

P.S. Special thanks to the fine folk at accessify.com for their brilliant Quick Escape tool which converts raw HTML to escape characters

Miva Merchant Quick Tip: Matching Multiple Variables in a Conditional

Tiny Queen — Thu, 28 May 2009 03:00:00 +0000

This morning I was working on a small project to modify the layout of the attributes on a product page template, and it occurred to me that others might find this little trick about writing conditionals where you need to match a multitude of variables useful.

In this particular project, I needed conditionals for two purposes: one in one location of the template to check to see if the attribute template code was either the word “Length” or the word “Width” and the second in a separate location to check to see if the template code was either “LengthFraction” or “WidthFraction.”

Since I was trying to match the code against a list of variables, I could have written my conditional like so:

Anyone else see a problem with this though? The above conditional, which checks to see if the content of the template code variable exists in either the words LengthFraction or WidthFraction will return true not only if the template code is actually LengthFraction or WidthFraction, but also if the template code is merely Length or Width.

So, we need to be a little more specific. Since I was only trying to match one of two different variables, I could have written my conditional like this instead:

That’s fine when you only have a couple of variables to test against, but if you have several codes you want to match up, there’s a much cleaner and easier way. By making use of Store Morph Technology’s (SMT) concatenating feature, you can use the IN expression to check against a list of several codes, without the risk of inexact matches.

Here’s the code:

And here’s how it works.

The very first element in the conditional is a string (enclosed by single quotes) consisting of a pipe character, aka | . Next to the string is a $ sign. In many scripting languages the $ sign is used to indicate a variable, but in SMT, the $ sign is a concatenator. That is, it takes whatever string or variable is in front of it, and joins it to whatever string or variable is after it.

The next element in our conditional is the SMT variable we are wanting to test, in this case, the attribute template code. It’s followed by another $ sign and another string consisting of a pipe character. The result is that the first part of our conditional expression consists of the template code surrounded by pipes:
|Length|
|LengthFraction|
|Width|
|WidthFraction| etc.

The second element in the conditional is a string, consisting of a list of the codes we want to match. The list begins and ends with a pipe character, and the codes in the list are also separated with pipe characters.

So there you have it. A complex conditional made short and sweet.

Miva Merchant: Customer Account Creation on INVC Page

Tiny Queen — Thu, 26 Feb 2009 20:04:00 +0000

Recently there’s been lots of buzz on the Miva Merchant User Support Forum about moving the account creation process to the end of the checkout. There are a number of good reasons for doing this. First, you eliminate one of the checkout screens, and streamline the checkout process. Second, and more importantly, you eliminate a decision from the checkout process.

There’s a great usability book out there by a fellow named Steve Krug, called “Don’t Make Me Think” That book title couldn’t be more apt for the checkout process in a shopping cart. When your shoppers commit enough to hit the checkout button, don’t present them with a new decision to have to make before they can get started.

As one person put it, your shoppers aren’t looking to develop a relationship with you. You have something they want, and they want to give you their money so you can send it to them. Since you want to get their money and send them things, it seems you have a common goal. So why not make it easier to achieve that goal? Get the sale, and then offer them the opportunity to create an account if they think they’d like to come back and shop again. But don’t clutter the checkout process with an unnecessary decision.

So, to the meat of the matter. How does one go about creating an account for a customer using the information available on the INVC page? Since they’ve already provided their shipping and billing information, there are only two additional bits you need from them: a user name, and a password. The rest you can feed to the form from what they’ve already told you.

In your INVC page template, decide where you want to present the account creation option, and add the following code. The hidden input for PrevPage isn’t required, but it gives you a global variable to test against if you want to customize the ACED page to display a “Thank you for creating your account” message instead of the account edit form.

You’ll have to do your own form styling, but this should give you the bare bones you need to get started.






User Name

Password

Confirm Password

Miva Merchant: A Store Morph Technology Mini-Primer

Tiny Queen — Sun, 09 Nov 2008 17:17:00 +0000

When Miva Merchant released MM5, they revolutionized the way the software worked “out of the box” and opened a whole new world of customization to ecommerce store owners. Using Store Morph Technology (SMT), store owners could completely and…well, I was going to say easily customize their stores to suit their needs, but the truth is that at first glance, SMT isn’t in fact all that easy.

One of the common complaints from new developers of MM sites, is the lack of documentation about SMT and how it works. The new owners of Miva Merchant are working hard to remedy the documentation void, but in the meantime, here’s a mini primer on SMT and some examples of the things you can do with it.

You’ll see SMT in MM’s page templates in a variety of different forms.

Variables

There are two types of variables in SMT: local variables, specific to the page you’re on, and global variables, which are available sitewide. The best way to find out what variables are available on a given page is to download the free Store Helper Module from Latu.net.

Variables are displayed on MM pages in a variety of ways. Note that variables always begin with an ampersand (&) and end with a semicolon (;).

&mvt:product:code;
&mvte:product:code;
&mvta:product:code;

Variables that begin with &mvte are “entity encoded.” This means that any characters they contain will be displayed on the page in their exact form — they will not be interpreted by the browser.

Variables that begin with &mvta are “attribute encoded.” This means that any characters they contain will be converted to the correct format for use in a link.

Tags

SMT tags look similar to XHTML tags in that they are surrounded by < >, they include name / value pairs, with the values surrounded by double quotes, and all SMT tags must be closed, either by using a trailing slash, or with a separate closing tag.

Items

SMT tags may call in specific page items. These tags start with mvt:item, and use name=”xyz” to identify which page item is being called. They may also include parameters that more specifically identify the content to be called in. They are frequently self closing, but may have a separate closing tag depending on their form.




Some content here

Loops and arrays

SMT tags may be used to loop through an array, and display specific data associated with that array. Common uses for these tags include such things as displaying the products in a category or search result, listing all of the products in the basket, or listing available shipping methods. All loops must be closed with a separate closing tag after you’ve worked with the content you’re pulling from the array.


Some stuff about each of the items in this array

Conditionals

Finally, SMT tags may be used to create conditionals. This is far and away one of the most useful aspects of SMT, and is the building block of the store owner’s ability to customize his or her store (at least in my opinion!). Writing conditionals is probably worthy of a post all its own, but here are some basics.

All conditionals start with mvt:if and contain an expression to test for. A very basic conditional might look like this. This conditional checks to see if the product code is equal to the string 12345, and if it is, displays some text. Note that the string is enclosed in single quotes.


Display some text.

Conditionals can also be set up to do one thing if the condition is true, and another thing if it is false.


Display some text.

Display some other text.

Or even…


Display some text.

Display some other text.

Display yet some other text.

Expressions can be combined to create extremely specific situations to test against. For instance, if you want to display some text only if the product code is 12345 and the customer is logged in, you would write your conditional something like this:


Display some text

You can also easily test for a match in a single string or a series of strings, by using CIN or IN. CIN is case insensitive; IN is case sensitive. The strings to test against are enclosed in single quotes, and if there is more than one, they are separated by commas or some other delimiter such as a pipe. The conditional below will return true if the product code is 12345 or 45678 or 67890.


Display some text.

Note that the conditional above will also return true if the product code is 1234567, 012345, or 98712356789. It checks merely to see if the content of the first variable is included in the second. If you need to look for an exact match, you would be better to use a conditional like the following.


Display some text.

Once you get the hang of them, you’ll wonder how you ever did without the power of conditionals to control your shopper’s experience on your site. Below are some of the most common conditional operators, along with what they do.

Operator	Function
NOT	Returns true if the condition does not match the variable
ISNULL	Returns true if the variable is empty
AND	Returns true if both conditions are true
OR	Returns true if any of the conditions is true
EQ	Returns true if the variable matches the string
NE	Returns true if the variable does not match the string
GT	Returns true if the variable is greater than the string
LT	Returns true if the variable is less than the string
GE	Returns true if the variable is greater than or equal to the string
LE	Returns true if the variable is less than or equal to the string
IN	Returns the first position of string_a in string_b. Case sensitive
CIN	Returns the first position of string_a in string_b. Case insensitive

Comments

Finally, one of the most useful, and underused in my opinion, features of SMT is the comment feature. By carefully commenting your work, you make it so much easier on yourself or another developer when it comes time to try to make updates or changes to existing customizations. SMT comments take the following form. They are not parsed by the server, and won’t appear in your html source code.


Here is an explanation of what this section of code is going to do.

Restrict Access to a Product Page in Miva Merchant

Tiny Queen — Wed, 23 Jul 2008 03:37:00 +0000

I have received numerous requests for some code I wrote to password protect a product page in Miva Merchant 5 (or 5.5), so I thought I’d share it here. This code was originally written for a site that wanted to implement custom product pricing using the Emporium Plus External Product Purchase module, but wanted to ensure that only staff members could access the page.

Note: This code requires the Tool Kit from Emporium Plus. If you have a Miva Merchant 5 (or 5.5) store, the Tool Kit is an immensely valuable module that allows developers and store owners enormous flexibility in customizing their stores. It is beyond worth the money (and no, I don’t get anything for saying so except the satisfaction of spreading the word about an extremely useful tool).

To use the code below:

Set up an availability group, and assign authorized customers to this group.
Substitute your desired product code where indicated by the text YOUR_PRODUCT_CODE_HERE (2 places).
Substitute your availability group name (not code!) for the AVAILABILITY_GROUP_NAME in the code below.

This code is designed to work on the main screen of the regular PROD page. If you’re using a template manager, you can remove the conditional that tests for the product code.

If you’re using Miva 5 (instead of 5.5), you’ll want to replace with and with



&mvt:store:name;: &mvt:product:name;








   


   
      
      
      
      
      
      
      
   

   

   

      Test for desired product code
        

      Check to see if customer is logged in
      

      Check to see if customer is a member of your availability group
      
      

      Set test variable for use later in the page
      
      
      
      
      

      
      


      
      Related Item(s)

      

      
      
      
      

      
       End Availability Group Array
       End display product details if in Availability Group

      If customer is logged in but staffid variable not set, display continue shopping link
      
      This page is for internal use only.




     

     Otherwise, if customer is not logged in, display login
      

      This page is for internal use only.  Staff members may log in below.
      
      
      
      
      Username
      
      


      
      Password:
      
      


      
      


      

      

      For all other products, display the regular layout
      

      

      
      


      
      Related Item(s)
      

      

      
      

      

      

       End conditional to test for product code