This Post will serve two purposes. First is a reference for me on what I did, second is to hopefully help someone else out there along the way in building their site. If you find anything in this post helpful, comment and let me know!

Unless I decide to break this up, this is going to be one LONG post when finished, so here are some jump links for those who only care about certain aspects. For the rest, read on…

• Intro
• Planning the Site
• The Template
• Setting Up Virtuemart
  • Default Modules & Components Used & Modified
  • Add-on Modules & Components

Intro

I’ve used Joomla! many times, and have been meaning to set up a full e-commerce site, using Joomla! and Virtuemart, to give it a full evaluation on it’s e-commerce potential (I usually prefer Interchange).

An idea struck me to set up a giant “multi-family yard sale” website, that all of my friends, family, and I could use to unload various items. So, I decided it was time to stop procrastinating, and get to work. Meanwhile, I might end up with a site structure I can reuse on future sites. On with th fun…

Planning the Site

I started planning the site like I would any client site; this includes Photoshop mock-ups, sitemap plans, component/module plans, research, and testing, the whole nine.

During the planning, I knew the most important factors in this site were going to be usability, showcasing products, and making the sell. The layout was designed minimalistic, with plenty of space for promo banners, product rotation, and full, easy to use navigation. And, as I tend to do, I reviewed winning sites that fit the class of site I’m building; in this case, sites like eBay, Amazon, and New Egg. Once plans were in place, I started building away.

The Template

I’m not going in to the details of template creation, as that is outside the scope of this post, but instead, will detail what I did different than normal, that is making my life easier now, and will in the future.

Most base Joomla! templates use component areas named user1, user2, etc, and I tend to keep this when building a template. In the case of Wanda’s Bargain Basement, I wanted tighter control over the various ‘pieces’ of the site, and I didn’t want to have to remember which generically named placeholder went where.

All of my component areas are named for the component they are going to hold and, when needed, I use conditional statements. For example, the rotating “Featured Products”, shown only on the homepage, is defined as:

[code]<?php if( $this->countModules('ProductRotation') && JRequest::getVar('view') == "frontpage" ) : ?>
<div id="product-rotator">
<b id="featured-item-title">Featured Items</b></div>
<div id="product-rotation"><jdoc:include type="modules" name="ProductRotation" style="xhtml" /></div>
</div>
<div id="product-rotation-pager"></div>
</div>
<?php endif; ?>
[/code]

One final thing, as with all of my sites, the template is full CSS. The ability to easily make changes later is important, and dynamic (database driven) sites are a pain if everything is built using tables and hard coded in to the HTML.

Other than that, everything is your basic custom Joomla! template.

Setting Up Virtuemart

This was by far the most complex part of the whole job. As mentioned, I want a mostly reusable system; on top of that, I want to keep the costs down, to provide an option to future clients who need an e-commerce site that doesn’t break the bank.

After making a copy of the default templates, named for the Wanda’s Bargain Basement site, I could begin my customizing.

Default Modules & Components Used & Modified

Featured Items
There were certain things i knew from planning, that I wanted the site to do. Unfortunately, my desire to customize and a programmer’s desire to let me, doesn’t always agree; as is with most software you’ll come across.

There were no free Featured Items plug-ins available that would easily let me tie the jQuery Cycle plug-in to them, so this is the one time I broke the “don’t hack the core” rule.

The Featured Items module: ./modules/mod_virtuemart_featureprod/mod_featureprod.php
is hard coded to display the items in a table, even when it’s completely pointless to do so; I removed those lines by adding my own $notables variable, adding to the if statements, and adding additional if statements to the file.

With that done, I could clean up and modify my custom copy of the template: ./components/com_virtuemart/themes/ThemeName/templates/common/productsnapshot.tpl.php
and create the “Featured Items” rotator on the home page.

Mini Cart Display
With the design I was building for Wanda’s Bargain Basement, I wanted the mini cart to be shown in the top right of the page. By default, the mini cart shows a LOT of information, as it is intended to be added to a side bar with plenty of room.

I simply trimmed down the template file: ./components/com_virtuemart/themes/ThemeName/templates/common/minicart.tpl.php
added lots of CSS rules, and ended up with a clean, simple display.

Add-on Modules & Components

CSS Menu
I find it amazing how complicated it was to simply have a bullet list menu of Virtuemart categories, without any fluff, add-ons, or loading of countless amounts of extra code. But, I found one; and it was free. The CSS Menu for Virtuemart did the trick, and allowed me only a bullet list, which I could style as I please.

Joomla! SEO
The ACE SEF Joomla! SEO plugin makes Joomla! “Search Engine Friendly”. Me, I wanted to get rid of those horrendous URLs Virtuemart makes. Not for search engines, but for my own sanity and that of my users.
Unfortunately, to have really nice URLs in Virtuemart, you have to buy an add-on; for the moment, I’ll live with the “1/2 way ok” URLs the free version creates.

To elaborate, the final result would be:

The”Text Link” shoud be positioned using absolute positing, height, width, and padding/margins so that it over-layed the entire icon.

The HTML would look like this:

[php]
<div class="services-box">
<a class="link-mask" href="/services/network-maintenance/"&>Managed Services</a>
<div><img src="/images/pc-1.png" alt="" width="77" height="78" /></div>
managed services text
</div>[/php]

Initially, I set up the CSS as follows:

[css].services-box a.link-mask {
position: absolute;
width: 290px;
height: 83px;
text-decoration: none;
font-weight: bold;
color: #fff;
padding: 4px 0 0 112px;
z-index: 2;
}[/css]

This worked great in every browser I tried, except for IE. It seem Internet Explorer will not let a simple link cover another element. As you can see, I attempted setting the z-index value, which did not work. Hovering over the image ([image]) or text( “Additional text”) still produced a default/text icon and was not a link.

I also attempted using hasLayout hacks, by adding the zoom css property to the link, and that did not work.

After Googling the heck out of this and not finding a solution, which is why I’m making a post out of it, I started playing.

The solution?
If a background is applied to the link, Internet Explorer will force the link to be on top of text and on top of images. Since I did not want a background, as it would cover the other elements, I came up with a little hack.

I added the following css to my link’s CSS

[css]background-image: url(/images/services-boxes.png);
background-repeat: no-repeat;
background-position: 999px;[/css]

What this did, was make IE *think* there was a background, and position it over the text and image, while pushing the non-repeated image far away from the viewable area. I used the background image of the icon itself, which prevented the browser from having to load another image.

The icons now work perfect in every browser, including the pesky IE.