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

May 23rd, 2010 by Tiny Queen

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.

Posted in Miva Merchant, Web Site Design | Comments Off on Miva Merchant Quick Tip: How to Create On-Page Anchor Links

Miva Merchant Quick Tip: Styling Your Category Tree

February 21st, 2010 by Tiny Queen

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 […]

I hate to break it to you, but your web site isn’t about you

January 17th, 2010 by Tiny Queen

I got my issue of Website Magazine this weekend, and a line in one of the articles caught my attention. The article was specifically about keeping your graphic designer on a short leash, but this particular line is applicable to anyone who operates a web site. According to the article, effectively designing a web page […]

Cool Finds in My Bookmarks

January 2nd, 2010 by Tiny Queen

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 […]

WordPress Tips and Tricks: Securing Your WordPress Installation

October 31st, 2009 by Tiny Queen

This morning, while I was sipping my morning coffee, my WordPress-based website was subjected to a SQL-injection attack attempt. For those of you who are saying, “Huh?” WordPress uses a MySQL database to store the actual data that makes up your WordPress blog or site, including the contents of posts and pages, user names and […]

I Wish PHP Could Read My Mind

October 4th, 2009 by Tiny Queen

I’ve been working on a fairly large project, doing some ‘renovations’ on a php-based site.  So far the project has been a great deal of fun.  I enjoy working in php, and the original developer clearly followed the golden rule of starting with a plan and building from there. He also had the courtesy to […]

Miva Merchant: Excel Tips and Tricks for Import and Export Files – Part 1

August 15th, 2009 by Tiny Queen

It may seem odd for a Miva Merchant web designer to be posting tips for using MS Excel, but for Miva Merchant store owners who use the flat file import and export features of their store, learning a few little Excel tidbits can come in pretty darned handy. There are so many things you can […]

Miva Merchant Quick Tip: Some Handy Conditionals

July 15th, 2009 by Tiny Queen

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 […]

IE6 Select Z-Index Bug: A Workaround

July 9th, 2009 by Tiny Queen

I’ve been using this flexible and easy to configure dhtml popup script on a client’s site for some time now, with great results. Today, however, I was setting up a new sale promotion on a page where the popup was to appear over top of a select dropdown. A quick preview in IE6 revealed the […]

Miva Merchant Quick Tip: What to Do When Your Payment Gateway Fails

July 3rd, 2009 by Tiny Queen

A fire at the Authorize.net data center has caused massive disruptions in payment processing for ecommerce sites across the country today. Fortunately for Miva Merchant store owners, having your gateway go down doesn’t have to mean that you stop taking orders. By switching your payment method to Credit Card Payment with Simple Validation, you can […]