Building a Miva Merchant Website with XHTML and CSS
April 12, 2008 by Susan Petracco · Leave a Comment
For web development purists, the holy grail of coding an ecommerce site using an off-the-shelf package is the ability to write a fully standards-compliant site. The upcoming Miva Merchant 5.5 release brings this desire into full reality for Miva Merchant developers. Version 5.5 offers a completely-open page templating system, where all aspects of the site are fully customizable at the HTML and CSS code level.
Historically it was much more difficult to code a Miva Merchant site with XHTML and CSS. We pioneered the effort, using a variety of add-on modules such as OpenUI and OpenUI Supermod templates to provide access to the code around the page elements. But the method also involved a couple of hacks of the core Miva Merchant files, to add a doctype declaration and to change the <HTML> tags from upper-case to lower-case. OpenUI Supermod templates were slow, so we often added Merchant Optimizer to speed up the site. It worked well, but building a site in this manner was akin to applying band-aid upon band-aid to force a system, never intended to allow standards-compliant code, to produce the desired effect.
The release of Miva Merchant 5.0 provided a huge step forward. With the addition of pages that can be templatized nearly from start to finish using Miva Merchant's Store Morph Technology, developers now had the ability to code almost the entire site according to modern standards for markup and layout. A few third-party modules were still needed, to gain access to "black box" code areas such as the category tree. But Miva Merchant 5.0 was already much faster, thanks to the ability to run the shopping cart on a MySQL database (instead of the older DBF files). And with native templating support, which renders quickly due to its compiled nature, several layers of complexity (and those "band-aids") were removed.
Miva Merchant 5.5 brings this all into fruition, as developers can now access all of the code that builds the site. To get started, the first thing to do is to make sure every page in the site conforms to the proper doctype. I prefer XHTML 1.0 Strict, though we've sometimes used Transitional for various reasons. A doctype paves the way for CSS positioning by bringing Internet Explorer out of quirks mode, allowing the site to look very similar in all modern browsers, when designed properly.
Next, all the tables should be removed from the pages, except when used to display actual tabular data. XHTML and CSS websites rely on CSS positioning to define their layouts, instead of putting images and content within the cells of HTML tables. Typically the only table we use on a CSS-based Miva Merchant site is the layout of the basket contents, since that is tabular data by nature. Instead of using tables, content is placed within other elements according to the nature of the content - <div> tags for block-level elements; <span> tags for inline content, <p> tags for paragraphs, etc. Elements can be assigned a class or an id so that they can be styled via the CSS stylesheet.
Larger Miva Merchant sites often need to consider the fact that the site may also include other packages or custom-coded sections that reside outside of the Miva Merchant framework. To reduce the load on the filesystem and to keep the assets organized - as well as to make it easy to switch between one client and another - we try to standardize the location of the site's assets. For example, all site-wide graphic files are stored in a /images/ path, just off the document root, and not within the /mm5/ directory tree created by Miva Merchant. (This /images/ folder may be further subdivided into subfolders such as /images/buttons/ as needed.) JavaScript code is placed in external .js files located in a /js/ directory. And the stylesheet(s) are stored in /style/, with the main site stylesheet being named style.css. Additional CSS files may be added for popup windows, printing a page, or page-specific elements, but are almost always stored in the same directory.
Once the CSS file has been created, it can be linked into Miva Merchant by adding a <style> tag into the head section of the site. This can be done on each individual page, but for a site-wide stylesheet, the easiest way to manage it is to add the style tag into the HEAD Tag Content found in the Miva Merchant administration by clicking the name of the store on the left side. The tag looks like this:
Probably the most difficult part of building a Miva Merchant website using XHTML and CSS is the addition of features from third-party modules that don't support XHTML and/or CSS. This can be hard to ascertain while shopping for modules, so one often has to ask the developer whether it can be done. If not, certain sections of the site may simply not conform to the standards in use, which occasionally causes rendering problems in some browsers, but often has no effect other than generating errors when validating a site against the doctype. However, some developers are now starting to see the benefit in allowing this, and offer more granular components that allow developers to include the data within their own HTML - for example, by providing the price breaks in a volume pricing module in an array, for display in any manner desired.
The benefits of using XHTML and CSS, and moving away from using tables for layout, is reduced code bloat and, arguably, better on-site optimization for SEO purposes. It also allows site changes to be applied to the site globally, by updating the stylesheet - one file - instead of hundreds of table and font tags across multiple pages. Although the transition to CSS-based design involves a sizeable learning curve, it's one well worth the effort.
