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 (1731)

**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.

Download Color-Cart Green for Free!

Color-Cart Green I’m finally done, Whew!
Here is Color-Cart Green ( I know, I couldn’t think of a good name.All my brain cells went toward making the thing).

Download: Color-Cart Green (12078)

Demo



Color-cart BlackAlso introducing Color-Cart Black, a 3 Column,2 sidebar fully widgetized more toned down(color-wise) theme for WordPress. This theme was also designed specifically for the WP-E-Commerce Plugin.Special features include: Random Product in Sidebar and breadcrumbs in single posts. And just looking good if I say so myself. Demo| Buy .

Compatible with 3.7 if you use out of the box without the extra files.
If this new venture goes well I plan to release more free themes. In fact I think I will release one free theme for every paid one. That’s a tentative promise!

PS There are a few extra goodies included in the zip file. Please read the readme.txt for all infos. If you need help please allow 24 hours for answers as I am crazy busy!

Changed homepage_product_functions.php For WP Shopping Cart plugin 3.6.12

example of 3 product categories in one page
example of 3 product categories in one page

Revision!
When I was checking the file I noticed a few minor mistakes and un-needed HTML. I also wanted to show an example image from my shop which is installed on this website but is not in production,yet. The example image shows that I have inserted 3 product categories into a WordPress Page. This is not the default WPSC Products_Page but a new page I made just for this purpose. The products are displayed as if I had Grid View even though I deleted my Gold Cart files when I last upgraded to wpsc version 3.6.12 and never had Grid View installed on this server.

Changes to version 5 of my homepage_products_functions.php:
Removed div.goddamn
Replaced class=”product_image” with class=”center”
Removed div.clear
Removed a division id that would render pages invalid

Download the changed file here

Home Page Products Functions PHP (1416)

New CSS
.homepage_products{overflow:hidden;width:100%;position:relative;}
/* Adjust for your product images w+h & if using variations and want them visible in the product box*/
.homepage_products .category_view_product{position:relative;width:200px;height:205px;float:left;margin:8px 3px; text-align:center;}

/* styles the product title I’ve left it blank*/
.homepage_products a.wpsc_product_title{}

/* centers the product thumbnail image*/
.homepage_products .center{padding:4px;text-align:center;margin:0 auto;display:block}

/*styles the product price-I’ve left this blank*/
span.pricedisplay{}

Disclaimer

In case anybody cares I am not providing this file as a way to rob the plugin authors. The changes I have made to the file do not give you anything but a product thumbnail image that links to the single product page instead of to a thickbox pop up image. Buying the Gold Cart allows you to have more payment gateways,multiple product images and other great stuff.

The rest is all simple CSS and not using “full display” when inserting a wpsc category id into a Page or Post.

I myself have purchased the Gold Cart and have encouraged all my clients to purchase it as well. I fully support the WP-Ecommerce plugin authors. I began working on this file as a way to perfect SEO for shopping cart pages because being able to use one’s own WordPress Pages along with the venerable All In One SEO Pack plugin vastly improved the SEO for my client’s carts. Not to mention the fact that if they have Grid View they ought to be able to have Grid View site-wide not just on the plugin’s pages.