OpenCart: display stock levels in storefront, as numbers or colour icons

As I mentioned here, a military, police and adventure gear store has hired me to set up their online presence and an e-commerce platform for them (not 100%  ready yet, but soon!). I had a tough time finding the adequate solution for their needs, because even though OsCommerce is the typical script used by similar stores in the country, I agree with critics regarding its security issues, complex code architecture and too long delays when releasing updates. So I tested other scripts (Zen Cart, Magento, Prestashop, etc.) but definetly, the one which gave me the best overall impression is OpenCart: fast, simple yet powerful and highly customizable, and above all, very well rated by its reviewers. So that was my choice for the project.

Two weeks ago, I had no idea OpenCart existed; but today I am pleased to post my first humble contribution as new OpenCart’er: a tutorial on how to customise storefront appearance!

Our goals: 1) a cooler way to display stock levels, AND  2) display stock levels in the shop front page too, not only in the product screen

OpenCart allows you – the seller – to choose whether to display the stock level for each product or not, in the product’s page. If you choose yes, you can then opt for displaying the remaining units in stock (e.g. 40), or a simple message (’in stock’ / ‘out of stock’). After seeing a preview of the shop, the shop owner told me that he disliked both of the options because on one hand, it is unusual for a shop to show its exact stock levels for each product; and on the other hand, the mere ‘in stock’ message was too ‘boring’. So he suggested replacing it for sort of a traffic light, where green would indicate product is in stock, yellow that product will be soon again in stock, and red when the product is out of stock and discontinued. I had already seen that system operating in other shops, and found it a good idea; but I also missed the stock levels being displayed in the front page, something OpenCart seems not yet to allow out of the box. Therefore, what I did is to find out how to make the two modifications, and here is how I did it.

NOTE: this tutorial has been successfully applied to OpenCart version 1.3.2, released August 13th 2009, monolingual (english) and with default template only (out of the box).

Stock level displayed: 55

1. Showing the stock levels in the front page: part ONE

Firstly I will address how to show in the front page the number of items in stock for each product, so that customers needn’t view each product individually to find out. The number appears, in the example, next to the price; you can see an example screenshot on the right side: 55 units of PASGT helmet in stock.

For this part of the tutorial, we will be modifying 10 files. Like always I strongly recommend you to backup each of them before making ANY changes, even when such changes are minimal.

The files to be modified can be actually divided in two groups, according to the folder they’re located in: controller files and view files. According to OpenCart’s documentation about the folder structure:

• Controller files are the main controlling code base
• View files are template files

Let’s start first with the controller files. You will have to repeat the process for the 5 files in this group. They are:

catalog/controller/common/home.php

catalog/controller/product/category.php

catalog/controller/product/manufacturer.php

catalog/controller/product/search.php

catalog/controller/product/special.php

Let’s deal first with the controller files. You will have to repeat the process for the 5 files in this group.

In each of those files, find the following line:

'model'   => $result['model'],

And add the following lines immediately below it:

'quantity' => $result['quantity'],
'stock_status_id' => $result['stock_status_id'],

What you just did is simply add two more keys and values in the array, so that it also stores the quantity of items in stock for each product, and the stock_status_id, which I will explain in the 2nd part of the tutorial. Once you’ve done that step, save the files.

2. Showing the stock levels in the front page: part TWO

Now let’s deal with the view files. You will have to repeat the process for the 5 files in this group. They are:

catalog/view/common/home.tpl

catalog/view/product/category.tpl

catalog/view/product/manufacturer.tpl

catalog/view/product/search.tpl

catalog/view/product/special.tpl

In each of those files, you will find the following piece of code in TWO occasions:

<?php echo $products[$j]['price']; ?>

The first of them shows the normal price, whereas the second shows a crossed out price (because there’s a discounted price available), for certain products.

For the first match – normal price display ,-  AFTER this:

<span style="color: #900; font-weight: bold;">
 <?php echo $products[$j]['price']; ?>
 </span>

ADD the following:

<?php
 echo '&nbsp;&nbsp;&nbsp;&nbsp;';  // Make some space between price and stock
 if ($products[$j]['quantity'] <= 0) {
 if ($products[$j]['stock_status_id'] == '5'){
 echo '(d)'; // Product discontinued, show 'd'
 } elseif ($products[$j]['stock_status_id'] == '6'){
 echo '('.$products[$j]['quantity'].')'; // Product temporarily not in stock, show '0'
 }
 } else {
 echo '('.$products[$j]['quantity'].')'; // Product in stock, show remaining
 }
 ?>

For the second match – special price display -, it is slightly differently placed but the new code is the same. Right AFTER the following:

<span style="color: #900; font-weight: bold; text-decoration: line-through;">
<?php echo $products[$j]['price']; ?>
</span><span style="color: #F00;"><?php echo $products[$j]['special']; ?></span>

ADD this:

<?php
 echo '&nbsp;&nbsp;&nbsp;&nbsp;';  // Make some space between price and stock
 if ($products[$j]['quantity'] <= 0) {
 if ($products[$j]['stock_status_id'] == '5'){
 echo '(d)'; // Product discontinued, show 'd'
 } elseif ($products[$j]['stock_status_id'] == '6'){
 echo '('.$products[$j]['quantity'].')'; // Product temporarily not in stock, show '0'
 }
 } else {
 echo '('.$products[$j]['quantity'].')'; // Product in stock, show remaining
 }
 ?>

Once you’ve made the specified changes to all of the files involved, you should see storewide the stock levels next to the price of the shown products.

Green: product is in stock

3. Showing stock level as colours, not numbers

If you wanted to show just numbers, then that was it. But if you wanted to show colours instead of lousy numbers – like in the right image – then keep reading.

In step one, I talked about stock_status_id, remember? This is a number which identifies the “Out Of Stock Status” selected for each specific product from the backend product editor (read more info on “Out Of Stock Status” here). OpenCart’s database has a table called stock_status. You will need to open it using PHPMyAdmin or similar, to see its contents, which should look like below.

Alright: note those stock_status_id numbers, because we’ll need them. Our goal is to show a different colour for each of the possible cases:

• Green for products in stock
• Yellow for products temporarily out of stock
• Red for products out of stock which are discontinued

You can download the sample colour icons here.

Contents of stock_status

However, you must first understand that stock_status_id does is ONLY RELEVANT when a product becomes out of stock: it does not mean that when a product is still in stock it has a stock_status_id of 7 meaning it; it means that when this product goes out of stock, if it’s stock_status_id is 7, it will show as nevertheless in stock!!!! An example to clear this is, when a product goes out of stock…

• If its stock_status_id = 5 , it will show OUT OF STOCK or red colour.
• It its stock_status_id = 6 , it will show TEMPORARILY OUT OF STOCK or yellow colour.
• If its stock_status_id = 7 , it will show IN STOCK or green colour (even when it is out of stock!).

Once you understood this, we can proceed with the code. If you have different values assigned for stock_status_id in your table than the ones in the picture above, replace them as appropriate in the new code.

Before anything else, place the 3 colour icons in the directory where your shop is. I recommend you to place them at the path below, because the paths in the code I provided point at that location (if you place them elsewhere, be sure to change the paths as appropriate):

catalog/view/theme/default/image

Now you have to repeat PART TWO of this tutorial, but using a slightly different new code instead of the one provided there (in part two), because this one will show the colour icons instead of numbers:

<?php
 echo '&nbsp;&nbsp;&nbsp;&nbsp;';  // Make some space between price and stock
 if ($products[$j]['quantity'] <= 0) {
 if ($products[$j]['stock_status_id'] == '5'){
echo '<img src="catalog/view/theme/default/image/stock_red.gif">'; // Product discontinued, show red.
 } elseif ($products[$j]['stock_status_id'] == '6'){
echo '<img src="catalog/view/theme/default/image/stock_yellow.gif">'; // Product temporarily out of stock, show yellow.
 }
 } else {
echo '<img src="catalog/view/theme/default/image/stock_green.gif">'; // Product in stock, show green.
 }
 ?>

And finally, you must make a last change so to replace the stock text with the colour icons in the product details page. Open the following file:

catalog/controller/product/product.php

REPLACE this:

if ($product_info['quantity'] <= 0) {
$this->data['stock'] = $product_info['stock'];
} else {
if ($this->config->get('config_stock_display')) {
$this->data['stock'] = $product_info['quantity'];
} else {
$this->data['stock'] = $this->language->get('text_instock');
}
}

WITH this:

if ($product_info['quantity'] <= 0) {
if ($product_info['stock_status_id'] == '5'){
$this->data['stock'] = '<img src="catalog/view/theme/default/image/stock_red.gif">'; // Product discontinued, show red.
} elseif ($product_info['stock_status_id'] == '6') {
$this->data['stock'] = '<img src="catalog/view/theme/default/image/stock_yellow.gif">'; // Product temporarily out of stock, show yellow.
}
} else {
if ($this->config->get('config_stock_display')) {
$this->data['stock'] = $product_info['quantity'];
} else {
$this->data['stock'] = '<img src="catalog/view/theme/default/image/stock_green.gif">'; // Product in stock, show green.
}
}

If everything went well, now your product page should look like:

Product page displaying product is currently in stock

Final notes

I hope this tutorial was useful and that you were successful implementing it in your OpenCart shop, as I’ve implemented it without problems in mine. I cannot guarantee it is bug free, but after thorough testing I’ve not come across any problems yet, apart perhaps from having messed up the code a little bit. I’d be glad to know if it could somehow be simplified, so that not code must be redundantly used again and again, any ideas?

Let me add, that for not making it too tedious and more complicated than it already looks like, I’ve not explained with detail some parts of the code provided. I believe it is really self-explanatory for anyone with a bit of PHP knowledge, but if you have further doubts I refer you to the excellent PHP reference found in W3Schools.

If you however have questions, suggestions or alternatives, please comment this post so we can discuss them!

Related posts:

• Custom data in EventList frontend event submission form
• Hide modules from registered users in Joomla 1.5
• Saving multiple selections from drop down list to database
• Performing MySQL queries with the help of AJAX
• AJAX add content to favourites script