Webstore Main Column

For this one design of Webstore I’m using a horizontal dropdown menu instead of a vertical one. When a category tab in the menu is selected, if that category has child categories, a submenu is displayed, floated to the left of the main column that has the product list. I really needed to be able to use a narrow column if the subcategory list was shown and a wide column if it was not. I needed to use an if, else statement.

I added an else statement so that after the first if fires off and the submenu is to be shown, a div named main will be used. If it wasn’t to be shown div.mainwide was to be used. It’s a small change but it solved the issue of having one style for the product list pages just because of a submenu that is visible only when when a category has child categories. Now instead of 2 views and 1 style I have 2 views and 2 styles.

Original code in productlist.tpl.php.

<?php  if($this->subcategories  && (count($this->subcategories) > 0)): ?>
<div style="display:inline; float:left;"><br />
<p style="font-weight: bold; margin: -10px 0 8px 15px; "><?php _p("Browse subcategories"); ?></strong></p>
<ul style="margin: 0 0 15px 0;">
<?php  foreach($this->subcategories as $categ): ?>
<li style="margin: 0 0 3px 15px;"><a href="<?= $categ['link']; ?>">&#62;&#62; &nbsp;<?= $categ['name']; ?></a></li>
<?php endforeach; ?>
 </ul>
</div>
<br style="clear:both"/>
<?php endif; ?>
</div>
<div id="main_panel" class="rounded {2px transparent}">
        <?php $this->dtrProducts->Render(); ?>       
        <br style="clear:both"/>
</div>

My code:

<?php  if($this->subcategories  && (count($this->subcategories) > 0)): ?>
<div class="subcatlist">
<ul>
<?php  foreach($this->subcategories as $categ): ?> 
<li><a href="<?= $categ['link']; ?>">&nbsp;<?= $categ['name']; ?></a></li> 
<?php endforeach; ?> 
</ul>
</div>
<div class="main">
<?php $this->dtrProducts->Render(); ?>
</div> 
<?php else : ?> 
<div class="mainwide">
<?php $this->dtrProducts->Render(); ?>
 </div>

**edited Nov19th,2009**
In case you are scratching your head about this post I don’t blame you. I sometimes publish a post without proofreading that much!
To clarify what I am rambling on about above: I am trying to present a workaround if you have removed the left or right column of webstore because you only need to show a left or right column when the sub category list is being shown.

Perhaps you decided to use a horizontal menu or feel no need to have any other columns but the main content panel? How then might you show the subcategory list without needing to use an inline style?

By default the template uses an inline style to show the subcategory list. I happen not to like using inline styles because I find them hard to manage and they can end up giving code bloat. Besides with 76 template files, you’re going to want to streamline as much as you possibly can!

Because it is sort of hard to style one div for 2 views (one with a left or right column and one without), I used a php statement to show one div if we are going to be seeing the subcategory list and another if we are not. When we see the subcategory list we use a narrower px div. When we don’t see the list we can use a wider px div. This frees us up from having to use a div sized to accommodate another div that is only visible if we are browsing a category that has subcategories.

Accordion Menu for Lightspeed Webstore

Lightspeed Demo Store

Where have I been? Chained to my desk customizing Lightspeed Webstore templates. Lightspeed is Point of Sale software exclusively for Mac. And Webstore is Lightspeed’s shoppingcart. Webstore is not “standalone” you have to have Lightspeed — it makes sense for people who have real stores–and it is an additional cost to the POS.

The Webstore 2 series is much more advanced than the Webstore 1 although the new templates are harder to customize and therefore many people opted to use it as is rather than DIY or pay someone like me to do it. Luckily a few people have hired me to do it for them… In the course of all this work I found it necessary first of all to redo the Product Category navigation menu. It used to drop down a large category tree menu from one tab. Once you made your selection the menu snapped back up into the one tab leaving you to use the breadcrumbs to know where you were. I redid it to show all top level cats instead and click open to reveal child cats, accordion style. Building an accordion menu from a nested list of static links is super easy. The hard part was integrating it with the template php so that it would be dynamic.

Here are examples of 3 different menus, all using similar markup:

This is not a complete Deluxe template package download, it only contains the files needed to build an accordion menu. Plus the markup is ugly. But it works in Opera, Safari, Internet Explorer (6,7,8) and Firefox.

Download includes:

  • menu.tpl.php
  • index.tpl.php
  • Snippet from webstore.js
  • Snippet from webstore.css

Download here: Accordion Menu for Lightspeed Webstore (1701)

**edited Nov19th,2009**
I hope you noticed my menu adds in a “view all Category” link under the main category title/tab.
The reason I did this is – my menu disables the original Category tab/link so it becomes just a toggle open/close tab. This took even more usability away from an already usability-beleaguered menu! Older versions hoped that the Breadcrumb function would be enough but a client pointed out that users should be able to browse the top level categories as well as their subcategories. And the reason I used < h2 > tags instead of < li >for the main category tabs is…did you look at menu.tpl.php? That’s why! The subcats are in proper lists, don’t worry.