Miva Merchant Quick Tip: How to Create On-Page Anchor Links

The problem with anchor links and Miva Merchant

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.

Be Sociable, Share!

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>