Related Links…
OpenCart Open Source shopping

This tutorial will show you how to extend OpenCart and retrieve a random product from your product catalogue to display on the homepage. Each time a user refreshes the page, or a new visitor goes to your site, a different product will be shown.

First, a big thank you to the author of article on Gregg Website Development who showed a method for quickly retrieving random rows from MySQL on large datasets with minimal performance impact.

Step 1. Extend your product model with a getRandomProduct() function

The OpenCart MVC model shows it’s power here as we add a new function to the product model. Edit the ‘product.php’ file located in your site’s /catalog/model/catalog/product directory and add a new function called getRandomProduct() to the class as follows:

// Retrieve a random product from the database
public function getRandomProduct() {
   $maxminid = $this->db->query("SELECT MAX(product_id) as max_id, MIN(product_id) as min_id from ". DB_PREFIX . "product p");
   $maxrow = -1;
   $minrow = -1;
   if ($maxminid->num_rows) {
        $maxrow = $maxminid->row['max_id'];
        $minrow = $maxminid->row['min_id'];
    }
   $randomrow = mt_rand($minrow, $maxrow);

   $query = $this->db->query("SELECT DISTINCT *, pd.name AS name, pd.short_description as short_description, p.image, m.name AS manufacturer, ss.name AS stock FROM " . DB_PREFIX . "product p LEFT JOIN " . DB_PREFIX . "product_description pd ON (p.product_id = pd.product_id) LEFT JOIN " . DB_PREFIX . "manufacturer m ON (p.manufacturer_id = m.manufacturer_id) LEFT JOIN " . DB_PREFIX . "stock_status ss ON (p.stock_status_id = ss.stock_status_id) WHERE p.product_id >= '" . (int)$randomrow . "' AND pd.language_id = '" . (int)$this->language->getId() . "' AND ss.language_id = '" . (int)$this->language->getId() . "' AND p.date_available <= NOW() AND p.status = '1' order by p.product_id ASC limit 1");

    if (!$query->row) {
        $query = $this->db->query("SELECT DISTINCT *, pd.name AS name, pd.short_description as short_description, p.image, m.name AS manufacturer, ss.name AS stock FROM " . DB_PREFIX . "product p LEFT JOIN " . DB_PREFIX . "product_description pd ON (p.product_id = pd.product_id) LEFT JOIN " . DB_PREFIX . "manufacturer m ON (p.manufacturer_id = m.manufacturer_id) LEFT JOIN " . DB_PREFIX . "stock_status ss ON (p.stock_status_id = ss.stock_status_id) WHERE p.product_id < '" . (int)$randomrow . "' AND pd.language_id = '" . (int)$this->language->getId() . "' AND ss.language_id = '" . (int)$this->language->getId() . "' AND p.date_available <= NOW() AND p.status = '1' order by p.product_id DESC limit 1");
    }
    return $query->row;
}

What this function does is find the maximum and minimum product ids in your database and generates a random value in this range.

It then looks for a product row with an ID >= the random ID. If none is found, it selects an ID less than the random ID. The product row is returned.

Step 2. Change your homepage controller to ask for a random product

Now, you can change any of your OpenCart controller pages to retrieve a random product. In this example, we will use the homepage controller. Find the file ‘home.php’ in your site’s /catalog/controller/common directory.

Insert the following lines into the code:

$featured = $this->model_catalog_product->getRandomProduct();
$this->data['featuredproduct'] = array(
    'name' => $featured['name'],
    'thumb'   => image_resize($featured['image'], 165, 165),
    'href' => $this->model_tool_seo_url->rewrite($this->url->http('product/product&product_id=' . $featured['product_id']))
);

This example just uses the product’s name, image thumb and URL but you can use any other available product fields returned by the SQL you created earlier. This code will create an array called $featuredproduct[] containing a single random product that can be used on your home page.

Step 3. Add the featured product to your home page

The last step involves rendering the featured product on your home page. How and where you place the product will depend very much on your site’s template and styles. The example below just shows how to display the results – you will probably want to wrap the code with css for styling.

Edit the home.tpl file with your site’s /catalog/view/theme/[your theme]/template/common directory and insert the following lines at the point you want the featured product displayed:

<b>Featured Product...</b>
<?php echo '<a class="image" href="' . $featuredproduct['href'] .'" title="' . $featuredproduct['name'] . '"><img src="'.$featuredproduct['thumb'].'" alt="' . $featuredproduct['name'].'"/></a>'; ?>
<?php echo '<b><a href="' . $featuredproduct['href'] .'" title="' . $featuredproduct['name'] . '">'. $featuredproduct['name'].'</a></b>'; ?>

This code uses the $featuredproduct[] variable that you just created in the controller code and places a featured product thumbnail image, link and description on the home page.

More OpenCart features

This is just one example of how OpenCart can easily be extended. We have also implemented full SEO friendly URLs, news pages, product image watermarks and an updated product export/import system.

If you would like to discuss implementing an e-commerce solution based on OpenCart, please get in touch.

Related Links…
OpenCart Open Source shopping

OpenCart has almost every feature that you need to build an e-commerce solution quickly. More importantly, it can be extended easily and has a strong online community. We’ve recently made a simple enhancement to one of the stores we developed (the Orchid Store) to overlay product images with a watermark like this:

It’s a really simple change and I thought it would be useful to others if I posted how to do it. Please note, this solution is a ‘quick implementation’ and can be enhanced further.

Step 1. Create your watermark overlay image

The first step is to create a small image that will become the watermark overlaying your product images. I would recommend using a transparent PNG format. In the example above, the background of the watermark is transparent and the text is set to 50% opacity.

Save this image as ‘watermark.png’ in your site’s /images/userfiles directory.

Step 2. Create some new OpenCart image functions

The next step is to create a couple of new watermark functions within the OpenCart system area. Open the /system/library/image.php file. You will see that there is already a watermark() function available.

In this example, we are going to create a new watermark function as it makes handling any upgrades of OpenCart slightly easier and you are adding to rather than changing any existing functionality. You may prefer to edit the existing watermark() function directly.

The new function looks like this:

public function addwatermark($position = 'bottomright') {
        $watermark = imagecreatefrompng(DIR_IMAGE . 'userfiles/watermark.png');
        $watermark_width = imagesx($watermark);
        $watermark_height = imagesy($watermark);

        switch($position) {
            case 'topleft':
                $watermark_pos_x = 0;
                $watermark_pos_y = 0;
                break;
            case 'topright':
                $watermark_pos_x = $this->info['width'] - $watermark_width;
                $watermark_pos_y = 0;
                break;
            case 'bottomleft':
                $watermark_pos_x = 0;
                $watermark_pos_y = $this->info['height'] - $watermark_height;
                break;
            case 'bottomright':
                $watermark_pos_x = $this->info['width'] - $watermark_width;
                $watermark_pos_y = $this->info['height'] - $watermark_height;
                break;
           case 'middle':
                $watermark_pos_x = ($this->info['width'] - $watermark_width)/2;
                $watermark_pos_y = ($this->info['height'] - $watermark_height)/2;
                break;
        }

        imagecopy($this->image, $watermark, $watermark_pos_x, $watermark_pos_y, 0, 0, $watermark_width, $watermark_height);
        imagedestroy($watermark);
     }

What the function above is doing is creating an image object from your watermark (use imagecreatefromgif() if you have chosen a gif format) and then placing this watermark over the image (supplied in $this) in a position you specify (topleft, topright, bottomleft, bottomright or middle).

Now, edit /system/helper/image.php and add the following code as an additional function:

function image_watermark($filename) {
	if ( (!file_exists(DIR_IMAGE . $filename)) && (!file_exists(DIR_IMAGE . 'cache/' . $filename)) ) {
		return;
	} 

	if (file_exists(DIR_IMAGE . 'cache/' . $filename)) {
		$old_image = DIR_IMAGE . 'cache/' . $filename;
	} else {
		$old_image = DIR_IMAGE . $filename;
	}

	$new_image = 'cache/' . substr($filename, 0, strrpos($filename, '.')) . '-w.jpg';

	if (!file_exists(DIR_IMAGE . $new_image) || (filemtime($old_image) > filemtime(DIR_IMAGE . $new_image))) {
		$image = new Image($old_image);
		$image->addwatermark('middle');
		$image->save(DIR_IMAGE . $new_image);
	}

	if (isset($_SERVER['HTTPS']) && (($_SERVER['HTTPS'] == 'on') || ($_SERVER['HTTPS'] == '1'))) {
		return HTTPS_IMAGE . $new_image;
	} else {
		return HTTP_IMAGE . $new_image;
	}
}

What the above code is doing is being given a product image filename ($filename). It then checks in both the standard image directory and the cache directory for that product image. This is slightly non standard from the usual OpenCart which only looks in the main image directory. We added the second cache check because we will call this watermark function after the product image has been re-sized and placed in the cache directory.

What the code then does is create a new ‘watermarked’ filename for the image by appending a ‘-w.jpg’ to the existing filename. It then checks the cache to see if a watermark has already been created. If not, it calls the addwatermark() function we just created. The resulting watermarked image filename is then returned.

Step 3. Modify your OpenCart product template to show the watermark

The watermark function can of course be used in any templates and image fields you choose. In this example, we are using the ‘popup’ product image field. Locate the product.php file in your sites /catalog/controller/product directory. Look for a line similar to this in the code:

$this->data['popup']  = image_resize($image, $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));	

…and change it to this:

$productimage = image_resize($image, $this->config->get('config_image_popup_width'),$this->config->get('config_image_popup_height'));
$wmimage = image_watermark(basename($productimage));
$this->data['popup'] = $wmimage;

This adds an additional step to the process. After resizing the image, the $productimage file will be placed in the cache. Image_watermark() is then called to overlay the product image with your watermark.

Hopefully, if you’ve followed these steps your site will now be showing product images with watermarks added. As I mentioned at the start, this solution can be extended and improved further and it would be good to hear feedback from others.

The OpenCart image library also contains a number of other hidden features including rotation and cropping. We have also extended the OpenCart image helpers further with dynamic image scaling. If anyone is interested in this, please get in touch.