Miva Merchant page templates use the base tag, which is a standard html tag that’s used to reset the basehref when using relative paths to images, css, javascript and other assets. What this means for you as a developer is that you have to reset your thinking when using a relative url. Because Miva implements a base tag, the web root gets reset to the mm5 folder so any web url you have will always be relative to the actually mm5 folder and not the web root. Understanding how this works will save you a lot of time and headache when trying to troubleshoot why an image or css file is not showing up as it should. Let’s take a look.
So here, in the Miva Merchant Admin I’m going to navigate to the Storefront page and you’ll notice inside the head tag right after the title there’s this base href and then it has a Miva entity for the global base href. So this gets output dynamically. This base href is on every single Miva Merchant page template. It resets the web root for all relative urls. Now, you may be asking, well where does this variable define that? Let me know you. It’s defined under domain settings. So here, under site configuration, we have this Base URL for Graphics: this is what Miva uses as the base href, so by default it’s always going to be defined to mm5, which is Miva’s root folder. However, say for example you wanted to change it to a different folder or remove mm5 altogether, this is where you would do it. Whatever value you have in this field will print out as your base href. Let’s just back to the front end and see how this works. So here I am on the Miva Merchant Storefront and I’m going to view the source of this page. So you notice, right after the title tag here is this base href and it’s exactly what was defined under our domain settings.
So what does this really do? What impact does this have on the site? Well, it’s impact is limited to just relative urls for any asset. It doesn’t matter if it’s an image, css files, javascript, any url that’s relative will be impacted by this base href. So we’ll see here that the default style sheet is a relative url with a relative path, it’s css/00000001/cssui.css, however, if I actually click on this and pull it up, you’ll see that it’s actually located in the mm5 folder. It’s the base href that’s resetting the web root to the mm5 folder. So all relative urls are relative to the mm5 folder. The same thing goes with this css file and so on.
I have a few examples that if I jump back to the text editor, so here’s that same stylesheet. So here’s a relative url where it has css which is the folder, 00000001 another folder and then cssui.css the file. Normally, when you write something like this you would think it’s relative to the web root. However, because we have the base href we set to mm5, it’s relative to the mm5 folder.
There’s also root relative urls. The big difference between these two is that this one contains a slash in the beginning and this one doesn’t. That slash resets the path to the web root. When you have a root relative url this will actually bypass the base href and go straight to the web root. So, in this use case the path wouldn’t be correct because the real path is /mm5, so using a root relative url in this case wouldn’t work.
The third type is an absolute path. This is when you have the entire url within the href. This works as well, but you would need to include the mm5 folder because that’s where the file actually exists. As a rule of thumb anytime you’re calling in images css, javascript, you always want to use relative urls. Having an absolute path will usually cause problems. Say for example if you’re on a secure page. If you have this hard coded http, not https the browser is going to give you a warning. Wherever possible, always use relative urls and it will make your life much easier. Knowing that Miva uses the base tag to reset the href will save you lots of time when trying to trouble shoot missing images or css files.