A recurring question about working with Miva Merchant is how to use on-page anchor links without the entire page reloading. Don’t know what I mean by an on-page anchor link? Click here.

Because Miva Merchant pages by default are built using a base href tag that loads all content relative to the Miva Merchant directory, using anchor links is problematic. Typically, if you wanted to link to a section of the page that you have identified with the id “more-details,” you would write your link as follows: <a href=”#more-details”>Click here for more details</a>

Unfortunately, because of that pesky base href tag, clicking a link written like the one above will take the visitor to http://www.domain.com/mm5/#more-info, which typically resolves to the site’s storefront or SFNT page. Not exactly the desired effect.

The alternative is to write out the full link to the page (I’m assuming here that you are not using short links, but all of the links used in this post can easily be adapted to short link styles) like so: <a href=”http://www.domain.com/mm5/merchant.mvc?Screen=PROD&Product_Code=mycode#more-details>. This method will work, at least so far as it will take the site visitor to the
desired section of the page, but it will also cause the entire page to reload. This can be an unnecessary drain on server resources, as well as being annoying to the site visitor.

So what’s a store owner to do?

The answer lies in my nemesis…javascript. A tiny snippet of javascript is all it takes to cause the browser to jump to the desired content. And if it’s written correctly, the link will still work just fine for visitors who don’t have javascript enabled.

<a href="http://www.domain.com/mm5/merchant.mvc?Screen=PROD&Product_Code=mycode#more-details" onclick="javascript:window.location.hash='more-details'; return false;">

This clever little trick works in all the browsers I’ve tested it in (Firefox, IE, Google Chrome, Safari & Opera). Adding return false to the onclick action means that browsers with javascript enabled won’t follow the link, they’ll just jump to the desired section of the page. Including the full url link means that browsers without javascript enabled will still be able to use the link, although the page will reload for them. A small compromise for an oft requested functionality if you ask me.

What is an anchor link?

If you clicked the link above, your browser jumped to this part of the page. (If you didn’t click the link, and know what an anchor link is, you can skip this part.) The link that brought you here is known as an anchor link, and can be used both within the same page and from an external page to send the site visitor to a specific part of a page. Anchor links are created by using a hash mark and an id keyword that identifies a specific tag in the source code, like so: <a href=”#thishere”>
Click here to go back to where you were.

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” <li> 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:if expr="l.settings:cattree:stack EQ 0">
  <mvt:item name="category_tree" param="cattree_header" />
</mvt:if>

<mvt:if expr="l.settings:nextcount GT 0">
  <ul id="catlevel&mvt:cattree:stack;">
    <mvt:item name="category_tree" param="nextlevel">
      <mvt:foreach iterator="cattree_category" array="categories">
          <mvt:if expr="l.settings:cattree_category:image">
            <li><a href="&mvt:global:sessionurl;Screen=CTGY&Store_Code=&mvta:store:code;&Category_Code=&mvta:cattree_category:code;"><img src="&mvte:cattree_category:image;" alt="&mvte:cattree_category:name;"></a><mvt:if expr="l.settings:cattree_category:id NE l.settings:cattreenext"></li></mvt:if>
          <mvt:else>
            <mvt:if expr="l.settings:cattree_category:code EQ g.Category_code">
		<li class="thiscat"><a href="&mvt:global:sessionurl;Screen=CTGY&Store_Code=&mvta:store:code;&Category_Code=&mvta:cattree_category:code;">&mvt:cattree_category:name;</a><mvt:if expr="l.settings:cattree_category:id NE l.settings:cattreenext"></li></mvt:if>
	    <mvt:else>
		<li><a href="&mvt:global:sessionurl;Screen=CTGY&Store_Code=&mvta:store:code;&Category_Code=&mvta:cattree_category:code;">&mvt:cattree_category:name;</a><mvt:if expr="l.settings:cattree_category:id NE l.settings:cattreenext"></li></mvt:if>
	    </mvt:if>
          </mvt:if>
          <mvt:if expr="l.settings:cattree_category:id EQ l.settings:cattreenext">
		<mvt:item name="category_tree"/>
		</li>
          </mvt:if>
      </mvt:foreach>
    </mvt:item>
  </ul>
</mvt:if>

<mvt:if expr="l.settings:cattree:stack EQ 0">
  <mvt:item name="category_tree" param="cattree_footer" />
</mvt:if>

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;
}

For those users using the new CSSUI version of Miva Merchant 5.5, you’ll need to use a different set of code for your creating your list. I’ll be honest, this code below hasn’t been tested (the part I’m not positive on is the creation of the nested list if you’re in a subcategory) so don’t be afraid to let me know if it doesn’t work, and we can tweak it.

<ul id="category-tree">
<mvt:foreach array="cattree_categories" iterator="cattree_category">

	<mvt:if expr="((l.settings:cattree_category:level NE 1) AND (pos1 EQ 1))">
		<ul class="ul-level-&mvte:cattree_category:level;">
		<mvt:if expr="l.settings:cattree_category:code EQ g.Category_Code">
		<li class="level-&mvte:cattree_category:level; active">
		<mvt:else>
		<li class="level-&mvte:cattree_category:level;">
		</mvt:if>
	<mvt:else>
		<mvt:if expr="l.settings:cattree_category:code EQ g.Category_Code">
		<li class="level-&mvte:cattree_category:level; active">
		<mvt:else>
		<li class="level-&mvte:cattree_category:level;">
		</mvt:if>
	</mvt:if>
			<a href="&mvte:cattree_category:link;">
			<mvt:if expr="l.settings:cattree_category:image">
			<img src="&mvte:cattree_category:image;" alt="&mvte:cattree_category:name;" />
			<mvt:else>
			&mvte:cattree_category:name;
			</mvt:if>
			</a>
		</li>
	<mvt:if expr="((l.settings:cattree_category:level NE 1) AND (pos1 EQ 1))">
		</ul>
	</mvt:if>
</mvt:foreach>
</ul>

According to the article, effectively designing a web page “requires putting aside your own corporate and personal needs — instead considering everything from the perspective of your site visitors.”

In other words…your web site isn’t about you.

It doesn’t matter what you like, and it doesn’t matter what the latest craze in fancy web effects happens to be. Web sites that sell are the ones that tell visitors in simple terms how they can meet the visitor’s needs, and then make it very clear what the visitor needs to do next to get those needs met.

In other words:

1. Avoid the flashy (literally) stuff that you think looks cool but that distracts from your message
2. Tell the visitor in short and simple terms how you meet their need
3. Focus the visitor on what to do to get you to meet that need
4. Keep the layout simple and uncluttered — focus the visitor’s eye on that call to action
5. Sit back and watch the pennies roll in

Ok, so maybe it’s not quite so easy as putting up a simple page with a big fat “click me” button, but carefully thought out page design that focuses on what your customer needs can go a long way toward improving conversions on your site. Perhaps it’s time to take a more critical look at your site, and seriously consider whether your site suits you…or your all-important customers.

I always like to start the New Year with a little cleaning and organizing of my browser bookmarks. The fresh clean New Year seems like the perfect time to go in and review all those handy links I just knew I needed, but didn’t take the time to properly categorize or describe.

I’ve spent several hours this morning going through my bookmarks, clicking each link to make sure it was still live, and sorting them into proper categories. As I do each year, I came across some fun and useful things I had forgotten I had, and I thought I would share a few of them with you. I tried not to include too many of the links that, while good quality, can be found easily enough on your own with a quick search, but some were just too good to leave out.

CSS Stuff

Based on the number of links I had on the subject, I seem to have an obsession with 3 column layouts, although frankly I don’t design many sites that use them, so I can’t imagine why I’m so interested. Here are some of the better resources on the subject.

• CSS layout techniques: 3 columns, the holy grail
• CSS-P 3 Column Layout
• A List Apart: In Search of the Holy Grail

The quest for equal height columns creates another CSS layout issue that plagues developers. The best, most elegant solution I’ve found (I used it in the layout for this site) is one laid out in a Sitepoint forum post by Dan Schulz. His passing last year was a tragic loss; this layout technique is just one of the many gifts he gave the online community.

• Sitepoint Forum: Equal Height Columns by Dan Schulz
• Projectseven.com – Tutorials: CSS Equal Height Columns
• Position is Everything: Equal Height Columns

CSS and Browser Compatability

Every web designer who uses css-based layouts has spent many an hour tearing their hair out over trying to get their layout to work properly in all browsers. Here are a few handy references, and one interesting idea for managing browser issues using .htaccess.

• Sitepoint: An Introduction to Browser Specific Hacks
• Hack Free CSS for IE
• Web Browser Standards Support
• Miva Merchant Forum: Serving Targeted Browser Stylesheets via .htaccess

PHP and MySQL

These resources are bits and pieces I’ve picked up in my travels as I’ve expanded my php skills. They are mostly aimed at php beginners, and are in no particular order.

• PHP/MySQL Tutorial (good beginner’s tutorial)
• Bytes: Understanding PHP Sessions
• roScripts: Understanding PHP Security
• PHP-based .pdf Generator (for use on servers that don’t have PDFlib)

Javascript

I confess. I hate javascript. I have a lot of respect for its ability to expand and enhance the user experience on the web, but working with it makes me crazy. Nevertheless, I have, over the years, found some nifty uses for it, a couple of which appear below.

• Diller Design: Javascript Library for PNG Transparency Support in IE6
• JQuery Cycle Plugin
• Replacing <noscript> for accessible javascript

Bits & Pieces

• Apache Rewrite Cheatsheet
• List of Free Photo and Image Editing Software
• Create Your Own Web 2.0 Buttons
• Bulk Rename Utility

And finally, because no one should work all the time, one of my favorite brain squish breaks: Mr. Picassohead.

One of the ways that hackers try to compromise your WordPress installation is to visit your website with special code appended to the end of the url, and see if they can either add, update or retrieve data from your database. This is known as a SQL-injection attack, and is one of the hazards of life on the web.

In this particular case, this hacker was trying to access my admin password (I’ll get to how I know this in a bit), presumably so that they could then log in and wreak havoc with my content, or modify the code in my site files and compromise the security of my site visitors.

Fortunately, because I had set up security precautions with my site, the attack was not successful, and I thought I should share the reasons why so that others who use WordPress can likewise protect themselves. These tips are in no particular order.

1. When I set up my WordPress installation, I added a special prefix to my database table names. So, when the hacker tried to access the table wp_users, he (or she!) didn’t succeed, because that table name doesn’t exist on my database.
2. I moved my configuration file above the root directory of my server. WP will still work if you move your config.php file one level up from the directory where you’re running WordPress. So, you can only move it above the root, and away from public access, if you’re running WordPress in the root directory of your site (instead of in a domain.com/blog subfolder for instance). Depending on your setup, you may need to ask your host to assist you with doing this.
3. I deleted the default admin user account.
4. I password-protected my admin folder at the .htaccess level, with a different username and password from the one I use to access the dashboard. Each password is unique and strong, consisting of a mix of upper- and lower-case letters, numbers and symbols.
5. I use the Secure WordPress plugin.
6. I use the WordPress FireWall plugin. This is how I know there was an attack on my site, and how I know what the nature of the attack was. Thanks to this plugin, I received several email notifications this morning advising me of the attack, enabling me to immediately check my database and files to verify that no changes had been made to either.
7. I update WordPress and my plugins regularly. Updating is now so easy, there’s no reason not to do it!

Unfortunately, when it came to web usability and database security, he didn’t quite put best practices into place.  So, instead of being able to forge ahead with the additions to the code the site owner was hoping for, I’m having to step back and redesign the scripts from a user’s standpoint, as well as put some basic security measures into place.

I’m learning plenty, finding lots of opportunities to get creative, and getting some good ideas from the prior developer, but I have one beef about this project.  Actually, it’s the same beef I have about all php projects.  When working in html and css, when the carefully crafted result isn’t quite what was expected, it’s very easy to point the finger at the browser (usually, though not always, Internet Explorer).  In the case of php, however, it’s not quite so easy to assign blame elsewhere.

The fact is, php does exactly what you tell it to do — which is not necessarily what you want it to do. In fact, I’m taking a break to write this blog post for the very reason that my %&#* script is doing exactly what I’m telling it to, and unfortunately, this seems to bear little relation to what I’d like it to be doing. So if anyone has a crystal ball for php, that I can just hand over to it and say, “Here, look into the ball and you’ll see just what I’m after here,” I’d love to know where to get one of my own.

Importing Data From Miva Merchant Into Excel

First, let’s go over how to get your data into the Excel file in the first place. When you run an export from the Utilities menu, Miva Merchant exports your data into a .dat file, which it stores on your server. The exact location varies from store to store; if you’re not sure where your files are being stored, check with your host. If you’re running all the current patches and updates, you also now have the option to have the export file emailed to you (I love this feature!).

The complete instructions for importing the .dat file, including handy screenshots, can be found in my article on Creating a Useful Miva Merchant Order Spreadsheet, but here’s the nitty gritty:

1. Open a new workbook in Microsoft Excel.
2. From the Data menu, select Get External Data> Import Text File.
3. Browse to the location of your .dat file. Be sure to change the setting in the “Files of Type” box to All Files (*.*).
4. Select your file and click Import. On the following screen, be sure the data type selector is set to Delimited and click Next.
5. Select the appropriate Delimiter for your file and click Next.
6. Finally, click Finish. You will be asked to specify which cell you want your data import to start in. In a new worksheet you should not need to change this reference. Click Ok.

Breaking Data Out: Text to Columns

Sometimes you may want to break out data, such as category assignments, that’s in a single column. Or, you may have a url that you want to split out. The Text to Columns function makes this a snap. Let’s use breaking out category assignments as an example:

1. First, you’ll need to make sure that you have enough empty columns beside your CATEGORY_CODES column to accommodate the maximum number of categories assigned to your products. If you only have two or three possible categories, it’s easy enough to insert new columns beside the CATEGORY_CODES column, but if you have more than that, the simplest thing to do is to move the CATEGORY_CODES column to the end of your spreadsheet. Click to highlight the column, go to Edit > Cut. Scroll to the first empty column in your spreadsheet, and highlight it. Go to Edit > Paste.
2. Now, to break out your category assignments into individual columns, highlight the CATEGORY_CODES column and go to Data > Text to Columns.
   
3. For data type, select delimited.
4. Set the delimiter to Comma. In the preview pane, you will see your category codes, broken out into individual columns.
   
5. Click Next, then Finish. You will now have separate columns, with a single category code in each column, and can use various sorting features to work with your product data.
   

Putting it Back Together: Concatenate

Now that we’ve gone to all the trouble to break our data apart, let’s see how we can put it back together. The concatenate function is handy for all sorts of purposes, but one of my favorites is to use it to create file paths for product images.

I always recommend to new store owners that they use a structured system for naming product images, and one of the best foundations for a naming scheme is to include the product code as part of the image name. Not only does this open all sorts of possibilities for coding images within the store, it can make setting up your import spreadsheet a snap.

Let’s assume that you’re going to put your images in the default Miva Merchant graphics directory, and that your spreadsheet has your product codes in column A, the first column.

1. Click in cell J2 (or whichever cell is at the top of your PRODUCT_THUMBNAIL column in your spreadsheet) and enter the following formula:
   =CONCATENATE(“graphics/00000001/”&A2&”-thumb.jpg”)
   Let’s take a look at what this formula does. First, we have the beginning of our file path (the store 00000001 directory in the main graphics directory on the site), surrounded by double quotes. You can use double quotes to put any text string into a concatenate function. After the file path is an ampersand (&) and then a reference to cell A2, which you’ll recall is where our product code is. Following the reference to cell A2 is another ampersand, and then the text string -thumb.jpg. If you are using a different naming scheme to identify your product thumbnails, you can of course change this string accordingly.
   The first ampersand joins the file path to the content of cell A2, and the second ampersand joins those items to the file extension. You can concatenate as many strings and cell references as you like — just remember that strings must be enclosed in double quotes.
2. After entering the formula, you should get something like this (in this example, the product code is 01-347752):
   
3. To fill in the formula for the rest of your products, just hover over the lower right corner of cell J2 until the cursor turns to a thin black cross, then click and drag down across the rows containing product data. The formula will automatically fill in to the remaining products.
   

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

<mvt:if expr="l.settings:product:code EQ 'MyProductCode'">
My special content here
<mvt:else>
The content for all the other products
</mvt:if>

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

<mvt:foreach iterator="product" array="products">
<mvt:if expr="l.settings:product:code NE 'MyProductCode'">
Product Display Information Here
</mvt:if>
</mvt:foreach>

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

<mvt:if expr="NOT('MySpecialPrefix-' CIN l.settings:product:code)">
Display some content
</mvt:if>

Display certain content only if a product has attributes

<mvt:if expr="l.settings:attr_count GE 1">
Display this content only if the product has attributes
</mvt:if>

Logged in Customers

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

<mvt:if expr="basket:cust_id">
You're logged in.
</mvt:if>

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

<mvt:if expr="basket:cust_id">
You're logged in.
<mvt:else>
You're not logged in.
</mvt:if>

Secure page content

Exclude content from secure Miva Merchant pages

<mvt:if expr="NOT g.Secure">
My content that I don't want on secure pages
</mvt:if>

Include content only on secure Miva Merchant pages

<mvt:if expr="g.Secure">
My content that I only want on secure pages
</mvt:if>

Controlling Content on Specific Pages/Screens

Include content only on a specific screen

<mvt:if expr="g.Screen EQ 'MyScreen'">
My content that I only want on a specific page
</mvt:if>

Exclude content from a specific screen

<mvt:if expr="g.Screen NE 'MyScreen'">
My content that I only want on a specific page
</mvt:if>

Include content on several specific screens

<mvt:if expr="g.Screen IN 'MyScreen,MyScreen2,MyScreen3,MyScreen4'">
My content that I only want on a specific page
</mvt:if>

Exclude content from several specific screens

<mvt:if expr="NOT(g.Screen IN 'MyScreen,MyScreen2,MyScreen3,MyScreen4')">
My content that I only want on a specific page
</mvt:if>

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

A quick preview in IE6 revealed the dreaded select z-index bug. For those of you who aren’t familiar with this plague of the web developer, the gist of this bug is that in IE6, select and text area inputs ignore normal z-index positioning, which means that instead of tucking neatly behind absolutely-positioned elements with a higher z-index, they pop their little selves right out front and center, as shown below.

Clearly, this was not what the site owner intended. So, I went poking about for a decent workaround. I found plenty of references to iframes, but I wanted something cleaner that didn’t involve messing with the markup. Finally, I stumbled upon the brilliant suggestion of using a javascript show/hide function to hide the select element when it wasn’t wanted, and pop it back into view when it was.

The following simple function, added to the head tag, and called when the popup is called, solved the problem nicely.

function hide_select(myelement){
var select = document.getElementById('myelement');
if(select.style.visibility == "hidden")
{
select.style.visibility="visible"
}else{
select.style.visibility="hidden";
}
}

Simply replace YourIDHere in the code below with the id of the select element you need to cover up (you may have to add one if it doesn’t already exist) and then call the javascript function with your call to load the popup. In the case of my example, the popup loads from a body onload call, as follows:

<body onload="javascript:loadpopup();hide_select('YourIDHere');">

The result is a dhtml popup with no pesky select box poking its nose where it doesn’t belong.

Finally, to restore the select box to visible when the popup was closed, I added the hide_select function to the link to close the popup, like so:

<a href='javascript:closeMyPopup();hide_select();'>X</a>

Set up Simple Validation and Disable the Non-Functioning Gateway

1. The first thing you need to do is to log in to your admin, and from the menu options at left, select Payment Settings. Check the box beside Credit Card Payment with Simple Validation and click Update.
2. A new tab will appear, which will allow you to configure your credit card settings. By default, this module accepts American Express, Discover, Mastercard and Visa. If you don’t accept one or more of those cards, simply check the box beside it, and click Update. This will remove it from your settings.
   
3. Next, you need to disable the crippled payment gateway so it won’t show up in your payment dropdown. You can’t simply unassign it, because it will likely have existing orders associated with it. Instead, click the plus sign to expand Global Settings, and click the link for Modules. In the search box, enter the name of your gateway, and click Go.
   
4. Find the gateway in the search results, and click the Edit button. Uncheck the box beside Active, and click Update.

Set Up Encryption

When you’re using simple validation, it’s very important to be certain that you have set up Order Encryption so that your data is securely stored.

1. In the admin, click Order Processing. Click Store Encryption. Click Add Encryption Key.
2. Choose an Encryption Prompt that will help you remember the key if you should forget it, and enter it in the Encryption Prompt input.
3. Type your Encryption Pass Phrase, and then verify it. Choose a strong pass phrase. It should be at least 6-8 characters long and include both upper and lower case letters as well as numbers and/or punctuation marks.
4. Write down your pass phrase in a secure location where you won’t lose it. If you forget your pass phrase, you will not be able to decrypt your orders and will be unable to process them.

Once you have your new payment method set up, test your store by completing test orders using each of the available methods.