The first time I added something to the OpenCart shopping cart I was momentarily confused as to where the Checkout link was. It’s not exactly hidden but nevertheless my brain said “Huh, wherezitat?”. So I decided to have it pop a bit when something is added to the cart (or the cart is not empty).

Here it is before:

And here it is after:

Now this change needs to occur if the cart has anything in it but it also needs to change as soon as something is added (assuming it was previously empty). I did this with some javascript (OpenCart uses jQuery… yay!) and one CSS style.

Here are the steps involved:

1. First we will add the functionality to change the tab as soon as something is stuck in the cart. The file to be edited is at:

   catalog/view/theme/yourtemplatename/template/module/cart.tpl

   . Inside the document ready function around near the bottom of the file (in version 1.4.x) look for the ajax method. It has a callback named “success”. Add the following line

   $('#tab_checkout').addClass('full');

   This will apply the “full” class to the checkout tab.

2. Now let’s create that “full” class. In

   catalog/view/theme/yourtemplatename/stylesheet/stylesheet.css

   add the following:

   #header .div4 a.full {
       color: #FFF;
       text-shadow: 1px 1px 2px #666;
       font-weight:bold;
       background: url('../image/tabGreenGlow.png') no-repeat;
   }

   Don’t forget to upload an image, in this case “tabGreenGlow.png”… just base yours on the default tab.

3. Now we will add the functionality to display this tab site-wide (assuming something is in the cart). Open the file:

   catalog/view/theme/yourtemplatename/template/common/header.tpl

   and in the document ready function add:

   var cartStatus = $('#module_cart .middle div').text();
       if (cartStatus !== '0 items'){
           $('#tab_checkout').addClass('full');
           }

   This will check the cart contents on page load and apply the “full” style if anything is in there. That’s it!