Pre-amble/bitch about Cubecart

Cubecart is a difficult beast to develop for. Whilst the software is pretty stable (most of the stores I’ve worked with have been v4 based), the standard feature set is quite poor. Added to that, I find the Cubecart community a bit of a joke. Cubecart’s own support team (a payable service) will only help with problems relating to the ‘out of the box’ installation and the 3rd party Cubecart help forums (crazily you can’t discuss modifications on the official forums) seem to be dominated largely by a self serving (and aggrandising) few who push payable modifications and their own payable services on users rather than simply offer any help/support. I don’t begrudge anyone making money from their expertise but some of the mods are so trivial I just find it a little petty.

So, in the interests of giving, I’ll be posting up a few (hard won!) victories in Cubecart modding, completely free for your edification. Usual caveats apply – backup your site, database and files yada yada yada. I should also point out that whilst I got jack shit support from Cubecart or the 3rd party Cubecart forums, getting these hacks working, I did get loads of help from the lovely folks at the jQuery forums

OK, first off – here’s how to create an expanding category/sub-category sidebar menu in Cubecart with jQuery.

1. Pre-requisites: Install jQuery into your Cubecart installation. Here’s how to install jQuery in Cubecart if you haven’t already done so. This tip also follows on from ‘How to show sub-categories in your Cubecart sidebar‘, so again, if you haven’t already done that, you will need to.

2. Open your skins/{your skin}/styleTemplates/global/index.tpl file.

3. Add the following piece of code underneath the other Javascript file loads:

 

So your total Javascript loads should look something like this:

  
 
 

4. Download Ben Frain’s Expanding Cubecart menu jQuery script here
5. Save this file as ‘jquery.menubf.js’ in the js/ folder of your Cubecart store (note: the js folder is in the root of the store, not the skins folder).

6. Open skins/{your skin}/styleTemplates/boxes/categories.tpl

7. The content of my categories.tpl is this:

{LANG_CATEGORY_TITLE}

However, note that I have a ID style “mainmenu-nav” added to the UL element in the categories.tpl file that isn’t there by default. This is so that I can style the sub-categories with CSS. This ID is also reflected in the jQuery script so you may need to amend either your ‘categories.tpl’ or ‘jquery.menubf.js’ file so they match your own ID if it’s different.

Upload the amended files and the ‘jquery.menubf.js’ file to the relevant locations and you should have a nice expanding menu.

My latest book, 'Enduring CSS' is out now

Get $5 off HERE ↠

Write and maintain large scale modular CSS and embrace modern tooling including PostCSS, Stylelint and Gulp