Tracking OpenCart Customer Activity with Google Analytics Events

This is part two of the blog series concentrating on integrating OpenCart and Google Analytics even tighter to get more data from your online store. See the complete list of the series here

 

The more data you can pull from your OpenCart store, the more detailed a picture you have of your customers and how they are engaging with your business. Most people are of the assumption that you can track visitors and referral rates etc with Google Analytics but the rest is a bit of a blur.

The good news is that this is wrong! With the ‘Events’ section of Google Analytics you can track any number of enlightening things which your customers are doing on your online store. In this blog post we will be looking at how to track things like which products people added to their basket, tracking product selectors and finding out what has been downloaded, how many times by which customer types. All of this can be analysed in the Google Analytics ‘Events’ section on the dashboard.

It is nice and easy (the hard part is discovering where to put what but I will walk you through it here) but first we will look at the basics of what we need to do to create an event when a customer interacts with your OpenCart store.

How to create a Google Analytics ‘Event’ in OpenCart

OK, so in order to start tracking events in OpenCart we first need to know how to make the site send information to Google Analytics. I will say it now, you will need to have a Google Analytics account (which is free of course at www.google.com/analytics) and have it installed on your OpenCart store.

The code you will need is very simple and Google have loads of helpful information on the topic but below is a sample of an event tracking JavaScript code which tracks an event when I click on a button.

<input type="button" id="button" value="Track Me" onclick="_gaq.push(['_trackEvent', 'Button', 'Click', 'Tracker Button']);" />

So if we look into more detail we see the structure of the Event tracker sends all of the right information off to Google Analytics and places it in different places depending on the order of the values. See below for more detail on how to build your tracker link:

  • Button
  • The first value is called the “Category“. This is the group which is being interacted with, in my example I have chosen a button because a button is being clicked but it could be something like Videos…Audio…Files…etc etc
  • Click
  • The second value is called the “Action“. This is what is happening to the category item we specified before. In my example I have set it to click because the button is being clicked. In other examples this could track the stop button on a video…the pause button on an audio file…a file download…etc etc
  • Tracker Button
  • The third value is called the “Label“. This should something unique so when you look at it in the Google Analytics Dashboard you know instantly what it is. I have named mine Tracker Button. Now when I see it in a report, I know which button, out of all the ones on my website, has been interacted with.

There is also a fourth value which you can add to the end which can hold a numerical value. This can be used to see at what point along the video or music file it was paused, or what time of day exactly it was when a button was clicked, or how many items a visitor had in their basket when clicking something but for the sake of keeping things simple, I’ll leave that out for now.

So now you can see how to create a piece of code which tracks an event. In the example I have used the “onclick” JavaScript handler which tracks the event when something is clicked but there are other JS Event handlers like “onmouseover” which will track an event if a user’s mouse is hovered over an element but I won’t go into that too much. It can be useful for some things such as: tracking a user hovering over a download button and tracking again when they click it. Then you can see how many were tempted to click the button but didn’t by subtracting the two numbers. Lots of things can cause it to be inaccurate though so let’s start on the easy things first.

I’ve made a tool below which you can use to generate your Event Tracking code if you are unsure with HTML. Just enter the values in the right fields and it will give you the end code as you need it.

Google Analytics Event Code Generator

Please ensure that JavaScript is enabled in your browser

Category: 

Action: 

Label: 

 

So there we are, you have the basics of how the Analytics Event Tracking works we can get started with a few examples of how to start tracking. The limit with this kind of thing is really your imagination. You can pretty much track anything in a roundabout way. Below I’ll show a few examples and show you what kind of data you might find useful from tracking.

Tracking which OpenCart products are added to a shopping basket

OK, I thought I would start with the trickiest first, just to be difficult! In this section we will be adding an Event tracker to see when a product has been added to a shopping basket. I will be working on a default 1.5 OpenCart theme but the principle works exactly the same no matter what you use.

Open up your favourite FTP program and open up the following file:

  • catalog/view/theme/[YOUR THEME]/template/product/product.tpl

Use the code generator above to create your code and place it as an “onclick” event on the Add To Cart button as I have demonstrated below:

<div class="cart">
        <div><?php echo $text_qty; ?>
          <input type="text" name="quantity" size="2" value="<?php echo $minimum; ?>" />
          <input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" />

//<!--THIS IS WHERE I ADDED THE TRACKER CODE-->

          <input type="button" value="<?php echo $button_cart; ?>" id="button-cart" class="button" onclick="_gaq.push(['_trackEvent', 'Cart', 'Add To Cart', '<?php echo $heading_title; ?>']);" />

//<!--END TRACKER-->

          <span>  <?php echo $text_or; ?>  </span>
          <span class="links"><a onclick="addToWishList('<?php echo $product_id; ?>');"><?php echo $button_wishlist; ?></a><br />
            <a onclick="addToCompare('<?php echo $product_id; ?>');"><?php echo $button_compare; ?></a></span>
        </div>
        <?php if ($minimum > 1) { ?>
        <div class="minimum"><?php echo $text_minimum; ?></div>
        <?php } ?>
      </div>

You can see where I have added the “<?php $heading_title; ?>” actually puts the product name into the “Label” section so that you can see which products are being added to the shopping basket. I may update this blog later on to show how to track the quantity as well but for now I will leave this as it is.

And that’s all there is to it! OpenCart will now send data to Google Analytics whenever a customer adds a product to their shopping cart through the product page.

Tracking which OpenCart products are removed from a shopping basket

Equally important, perhaps even more so, is tracking when a product is removed from the shopping basket. If a high percentage of people add a certain product to the shopping basket then it is likely that the Marketing Campaign is ensuring people start to convert into paying customers but something is preventing them from actually making the sale.

This could be down to poor information, dodgy looking conditions or anything to do with that particular product or it’s images. With this code we will track when people remove the product from the mini-cart in the top right of the screen. This time, open up the following file:

  • catalog/view/theme/[YOUR THEME]/template/module/cart.tpl

Again, use the GA Event Tracking code generator above and follow the example below:

<?php foreach ($products as $product) { ?>
        <tr>
          <td class="image"><?php if ($product['thumb']) { ?>
            <a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" /></a>
            <?php } ?></td>
          <td class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a>
            <div>
              <?php foreach ($product['option'] as $option) { ?>
              - <small><?php echo $option['name']; ?> <?php echo $option['value']; ?></small><br />
              <?php } ?>
            </div></td>
          <td class="quantity">x <?php echo $product['quantity']; ?></td>
          <td class="total"><?php echo $product['total']; ?></td>

//<--THIS IS WHERE I ADDED THE TRACKER-->

<td class="remove" onclick="_gaq.push(['_trackEvent', 'Cart', 'Add To Cart', '<?php echo $product['name']; ?>']);">

<img src="catalog/view/theme/default/image/remove-small.png" alt="<?php echo $button_remove; ?>" title="<?php echo $button_remove; ?>" onclick="(getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') ? location = 'index.php?route=checkout/cart&remove=<?php echo $product['key']; ?>' : $('#cart').load('index.php?route=module/cart&remove=<?php echo $product['key']; ?>' + ' #cart > *');" />

</td>

//<END TRACKER CODE-->

        </tr>
        <?php } ?>

You will notice in this example that the image inside the td class=”remove” actually already has a JavaScript handler due to fire onclick so we will set our code on the table cell instead of the image itself. Works exactly the same apart from that. We use the “<?php $product[‘name’]; ?>” value to assign the product name to the label, showing us in the Google Analytics Events Dashboard which product has been removed.

Tracking a download in OpenCart

If you have a free PDF or document which doesn’t require your customers to be signed into their account, it can be tricky to track how many times it is downloaded. In this example we will be assuming we have a simple link on the OpenCart homepage which looks like:

  • <a href=”download.pdf”>Download our new brochure</a>

Everytime a user downloads the brochure Google Analytics will track it as an event and you will get a good idea of how much your information is being utilised and can help you draw conclusions on sales performance from when the information was available.

By now you know the score, choose a good set of data which allows you to know exactly what it is in the Google Analytics Events Dashboard and use the code generator above to get what you need then add it in as an “onclick” JavaScript event. See the example below for what I would do:

  • <a href=”download.pdf” onclick=”_gaq.push([‘_trackEvent’, ‘Link’, ‘Download’, ‘Home Page Brochure’]);”></a>

That’s it!

Like I said at the start, the limit really is in your creativity. Think about what might be useful to know for your business and see if you can find where you would need to put your code to track events on your OpenCart store. You can also track things by using other attributes like “onmouseover” but bear in mind that someone may move over your image or link but have no intention of clicking. This would be tracked regardless so can be a bit more unreliable. If you leave a comment below I will add examples or instructions to this blog as we go on.

 

Tracking OpenCart Searches Through Google Analytics

This is part three of the blog series concentrating on integrating OpenCart and Google Analytics even tighter to get more data from your online store. See the complete list of the series here

OK, so one of the best things about OpenCart is that it offers a search function which allows your customers to find the products they’re after. Once you have this information it can be used to determine which of your stock are most popular with potential customers and possibly bring it to the front page of the site or include it more often in your Marketing materials.

However, OpenCart by default doesn’t easily give us that information. In this quick blog post we will be looking at how we can set up Google Analytics track all of the searches made by a customer and store it handily with the rest of your eCommerce data for mining and examining.

Setting up your Google Analytics Account to track OpenCart searches

This is a simple process, but it’s turned off by default in your Google Analytics account so you will have to activate this property before you can use it to track all of your customer searches in OpenCart.

Firstly, login to your Analytics account and choose the account which you want to track. Then click “Admin” in the top right hand side of the screen.

From here you will see a list of profiles associated with this account, choose the one you want to track searches for and then click on the “Profile Settings” link. This will take you to a page with of options, right at the bottom will be an option to allow Analytics to track Site Search.

Click the radio button for “Do Track Site Search” and this will pop up with a text box where it will ask for the parameter to find the search term. On OpenCart there are multiple extensions and vqMods which change this normal filter but in most cases it will be “filter_name” (without the quotation marks). If you want to check simply go to your OpenCart store and search for “test search”. On the search results page it’s unlikely that it will show any products but have a look at the URL and look for the term test search in it.

It will look something like …index.php?route=product/search&[SEARCH_PARAMETER_NAME]=test%20search. The text which lies between the & and the = symbols will be the term which you need to put into the text box. So, for example:

index.php?route=product/search&q=test%20search

will mean that the search term is “q”. So, I would put q into the search parameter box on the Google Analytics page.

There will be two other checkboxes underneath the text box to allow stripping the other parameters out of the URL and allowing category search, in the interest of keeping it simple I normally just leave these unchecked and click “Apply”.

There we have it! The searches can be viewed and filtered from the Site Search from the normal Reporting section of Analytics under Content -> Site Search.

Nice and easy one today! Any questions or comments, just leave a comment below!

 

How To Create An OpenCart vqMod File

In this blog post we will be looking at how to create a vqMod file which allows safe OpenCart customisations. First off, lets look at vqMod and why it is essential for scalable OpenCart Development.

What is OpenCart vqMod?

OpenCart is built upon a core system of template files, controllers and models which all interact with the database, shape the data and then display it in a certain way. OpenCart Developers, like myself, make a living from shaping the store to perform different tasks and enhance its abilities. However, what happens when you need to upgrade the OpenCart system or you install another module which overwrites another? Incompatibility issues and upgrading difficulties are one of the reasons that OpenCart is not as widely deployed as some other eCommerce stores.

Enter vqMod! This is a virtual file replacement system which offers a very useful “Search & Replace” which allows you to edit how files work without actually changing the original file. For example:

I have an OpenCart page which sits on the server. This file has a single line of text:

I am just a file!

Now, if OpenCart was working normally it would display the page as it was without changing anything and a developer might go into the file and change the text manually. With vqMod however, the file gets checked against any vqMod rules which sit on the store. If the filepath matches a rule in the vqMod folder then OpenCart runs the search and replace.

My example vqMod file effectively says:

  1. Check if this file is being displayed by OpenCart
  2. If it is, look for this line of code
  3. If you find it, change it for this replacement
  4. Rinse and repeat

So, the file on the server stays exactly the same but my vqMod file can change the text which is displayed safely by getting in the middle of the transfer process. So the output of the file would be:

I am a file which has been edited for the store!

This is a great system because it means that you can change the way OpenCart works but leave the core system intact which makes it much easier to upgrade and install modules without getting messy files all over! For all modules which are being installed I would recommend choosing ones which are vqMod files or modules which do not overwrite any files in OpenCart as it can cause you so many issues down the line.

How To Create A vqMod File

OK, now to the good stuff. Here I’ll show you how to create a vqMod file for OpenCart, it’s dead simple as it is just an XML file and the tough bits are finding the original code samples to replace and ensuring the filepath is correct. For the purposes of making this tutorial easier, I’ll show you how it is all laid out and then go through step by step as we build one from scratch to change the “Powered By OpenCart” link at the bottom!

Right, so here is a sample vqMod file:

<?xml version="1.0" encoding="UTF-8"?>
<modification>
   <id>Replace ABC with 123</id>
   <version>1.0</version>
   <vqmver>2.X</vqmver>
   <author>xxx</author>
        <file name="path/to/myfile.php">
                <operation info="replace ABC with 123">

                        <search position="replace"><![CDATA[
                        $var = 'ABC';
                        ]]></search>

                        <add><![CDATA[
                        $var = '123';
                        ]]></add>

                </operation>
        </file>
</modification>

Right, lets go through what it all means (I got this example from the OpenCart vqMod website whcih is definitely worth a look at as well as this post)

<!--THIS DECLARES TO THE BROWSER THAT IT IS AN XML FILE-->
<?xml version="1.0" encoding="UTF-8"?>

<!--SET THE START OF THE VQMOD FILE  MODIFICATION-->
<modification>

   <!--GIVE YOUR VQMOD FILE A TITLE SO YOU KNOW WHAT IT DOES AT A GLANCE-->
   <id>Replace ABC with 123</id>

   <!--VERSION NUMBERS, LEAVE VQMOD THE SAME BUT CHANGE <VERSION> TO TRACK YOUR CHANGES-->
   <version>1.0</version>
   <vqmver>2.X</vqmver>

   <!--STEP INTO THE LIMELIGHT, PUT YOUR NAME HERE-->
   <author>xxx</author>

        <!--
        IMPORTANT: ENSURE THIS IS DEFINITELY CORRECT! IT NEEDS TO BE A RELATIVE LINK SO DON'T PUT HTTP://WWW.[YOUR DOMAIN].COM.

        YOU CAN ALSO PUT A * TO DENOTE A FOLDER YOU DON'T KNOW THE NAME OF. USEFUL FOR MAKING CUSTOMISATIONS WHICH APPLY NO MATTER WHAT THE THEME IS. AN EXAMPLE IS:

        CATALOG/VIEW/THEME/*/TEMPLATE/COMMON/HEADER.TPL
        -->
        <file name="path/to/myfile.php">

                <!--INFO ON WHAT THIS PARTICULAR FUNCTION DOES-->
                <operation info="replace ABC with 123">

                        <!--THE CODE TO LOOK FOR, WE'll TALK ABOUT THE POSITION LATER-->
                        <search position="replace"><![CDATA[
                        $var = 'ABC';
                        ]]></search>

                        <!--THE CODE TO REPLACE IT WITH-->
                        <add><![CDATA[
                        $var = '123';
                        ]]></add>

                <!--END THE OPERATION-->
                </operation>

        <!--STATE YOU'RE FINISHED WITH THE FILE CHANGES>
        </file>

<!--CLOSE THE VQMOD-->
</modification>

OK, so now you can see the basics of how to create a vqMod file for OpenCart. These work across all versions of OpenCart because you simply need to find what to replace and choose what you want to replace it with. Now, in the next section I will go through some of the more advanced search and replace filters and you can have a crack at them if you want.

Advanced vqMod search & replace filters

In the previous example I have used the basic “replace” function which is shown with the follow line:

<search position="replace"><![CDATA[

This line tells OpenCart to actually delete the line and then put something else in its place but with a slight change we can make it act differently. See some of the examples below:

vqMod: Add before the line

<search position="before"><![CDATA[

This line tells OpenCart to find the line but leave it intact, adding a line before it and then moving onto the next search term.

vqMod: Add after the line

<search position="after"><![CDATA[

Exact opposite of the previous example. OpenCart finds the line and adds the replacement as a line after it appears, leaving it intact.

There are more examples which can find on this page, however to keep this post relatively easy to follow I’ll just include what I have so far. If you have any questions feel free to leave me a comment below and let me know how you get on building OpenCart vqMod files.

 

How to Upgrade An OpenCart Store (1.5+)

OK, in this blog post I will be giving you a step-by-step guide on how to upgrade your OpenCart store. I will be assuming that you’re running a store which is at least 1.5, for those running 1.4 sites I will be writing another guide for you shortly!

You might have put off upgrading for a while because it is hassle, sorry to be the bearer of bad news but it is rarely simple mainly because of the huge variation in themes and extensions. It’s important though to keep your site secure and enjoy all the benefits which come with a new version.

The very first thing you should do is go through all of the extensions and themes you’ve installed on the site and make sure you get a copy which is compatible for the version with you will be upgrading to. Keep them safe for the moment in a folder somewhere.

The first thing I would suggest is creating a backup of your store and keeping it to one side. It is important to have an untouched version of your store ready to reinstall if anything should happen. Also, since many of my readers don’t have a test server to try it on I will write this guide as if I was working on the live site. However, I would always suggest working on a test site so you can leave customers to go through your live site with no downtime.

Backing Up Your Website

OK, login to your Web Hosting account panel and create a Zip folder with your entire store in it to keep as a backup. Next login to your PHPMyAdmin area and export your entire database to keep as a backup.

Get the latest version of OpenCart

Go to OpenCart.com and download the latest version of OpenCart to upgrade to. I would always suggest using the very latest version as it has all the new features and security updates but if for some other reason you’re upgrading to a version which is not the latest, you can find them all listed in the site.

Performing The OpenCart Upgrade

Unzip the folder which you’ve downloaded from OpenCart.com and look inside the upload folder within it where you will see the root folder of the new store (the folder which contains the admin, catalog, image folders etc). There will be a file called config-dist.php in both the root and admin folder which will need to be deleted. You will be keeping all of your config files from the live site as it contains the correct filepath and database connection details.

Navigate to the root folder of your live OpenCart store and then upload the new version on top of the current one. You will see a load of overwrite warnings but just dismiss these as you will need to overwrite old files with the new one. Also now upload all of the updated modules and themes you have, overwriting the old ones until you have updated everything. Then you’re done.

Resetting the system

OK, now everything is uploaded you just need to perform the upgrade and edit permissions for your user account. So, go to your store URL followed by “install” so it will look like: www.[DOMAIN-NAME].com/install where you will be greeted by a page detailing the next steps.

Click the “Upgrade” button below and OpenCart will update itself to the new version. Afterwards, it will tell you to login to the admin area so login using the same credentials as before and navigate to System -> Users -> User Groups and ensure that all of the boxes are checked for the permissions of all the user groups you have.

Next, go to System -> Settings -> Click “Edit” on each store name and then “Save”. Even if nothing needs changing, it’s just to make sure everything is saved into the database correctly.

OK, and that’s it! You’ve upgraded your OpenCart store, if everything has gone well then just ensure that you delete your “install” folder as you did when first installing OpenCart and your new store is good to go! If you have done all of this on a test server then see this blog post I wrote detailing how to move an OpenCart store across servers.

 

How To Set Up Subscription Payments In OpenCart

So this is the first blog post we will publish on OpenCart 1.5.6 and in it we will be looking at how to set up the new brand new subscription billing system. With this brand new feature exclusive to OpenCart 1.5.6 and higher, store owners can set up billing profiles which take advantage of PayPal’s popular subscription payments to expand the range of products and services they can sell through their store.

Creating A Subscription Billing Profile In OpenCart

So first off we will look at creating two different types of billing subscriptions for your OpenCart store, one to take advantage of trial periods and one to start billing straight away. Install the new OpenCart 1.5.6 version on your server or upgrade your store to the newest version (you can follow our handy guide to upgrading OpenCart if you’re running a store over 1.5+) and login to the admin section of your store.

If you hover over the “Catalog” link in the nav bar you will see the new “Profiles” link in the drop down. This section is for creating the billing profiles which can be assigned to particular products later on. By setting it up this way, you can have an unlimited number of pricing subscriptions for your OpenCart stock and assign the ones you need.

First off, lets create a billing profile which charges the customer every month with a one month trial period where no payment is taking. For store owners running an OpenCart store where they offer web hosting services, this is a popular billing profile and gives the customer a month to try out the service and decide whether they like it well enough to stick with it. In this example we will be under the assumption that it will be a £9.99 payment every month indefinitely. You will see a form like the image below on the new profile page:

OpenCart Billing Subscriptions

 

In the first section we set up the subscription settings and in the last section we create the trial period. Give your billing profile a name which will be obvious to you what it is later on and a sort order when listed with the other profiles. I’ll call my example billing profile “Monthly Billing With Trial”.

Set the status to “Enabled” and the price to “9.99”. Note that the price is worked out like products, the 9.99 will be in the default currency and it will be converted according to the current exchange rate if you offer other currencies to customers. The next option, “Duration”, means how many cycles would you like to continue the subscription for. If I wanted to bill the customer for 6 months then I would put 6 in this box, since I don’t want to set an end date, I will leave it at zero to keep the billing subscription going until the store owner, or the customer, cancels it.

The next two sections are linked together. The “Cycle” and the “Frequency” are combined to define how often the customer is charged. So, if I wanted to bill the customer every 6 weeks I would put Weeks as the “Frequency” and 6 as the “Cycle”. Since in this example I want them to be charged once monthly, I’ll put in the “Cycle” and Month in the “Frequency”.

Everything up to this point has set up the billing profile for the customer, so far the customer will be charged £9.99 every six weeks until the payment fails or is cancelled by me or the customer. If that is all you wanted then we could leave it there but since we will be offering a trial period to the customer we will follow the rest of the form.

Activate the trial by setting the next drop down box to “Enable”. The Trial price allows you to set up a discounted rate for the trial duration, since I am offering a free trial, I will set the price at 0. The “Duration”, “Cycle” & “Frequency” all work the same way as the main payment setup. Be careful not to leave the “Duration” as zero as that will mean the trial period goes on indefinitely, I’ll set it as 1, “Cycle” as 1 and “Frequency” at Month.

Now click save and the first billing profile is set up! My billing profile charges the customer £9.99 a month indefinitely with a one month trial period which is completely free for them. If you want the billing to begin straight away, you simply leave the “Trial Status” dropdown box as “Disabled” and leave the last four text boxes empty to not offer a trial period.

Assigning a subscription payment profile to a product

Offering subscription billing to your OpenCart store is done on a “Per Product” basis. So, if I’m working on a sample installation and want to offer a subscription payment profile to the MacBook then I will head to Catalog->Products and click “edit” on the MacBook to enter the product form. There is a new tab along the top called “Profiles” which you can see in the image below:

OpenCart Billing Profile on Product Admin Forms

 

Clicking on that allows you to assign multiple payment profiles to a product for customers to choose from. There is another option to only allow the subscription to be used by a particular customer group, this allows the store owner to only offer subscription billing profiles to customers who have already been vetted. This is useful for those offering monthly payments to customers who have already been credit checked or referenced externally. So, in my example, I will set the billing profile I have created to the default customer group and then click save.

Best uses for OpenCart Subscription Billing

The OpenCart 1.5.6 release expands the possibility for store owners in two ways: to offer customers services and products which require regular payments which can all be tracked and recorded via OpenCart and offering more advanced payment solutions to customers. OpenCart store owners can now use subscription billing to allow credit options for products which breaks down the price over a certain time period, or offer services like Web Hosting or IT support which require a regular payment from customers.

Moving forward I would like to see an integration with the popular PayPal service “Bill Me Later” which gives financing options to customers and allows store owners to credit check and secure themselves automatically without having to manually vet each customer personally and then update their customer group.

 

How To Integrate Google’s ReCaptcha Into OpenCart

Today we will be looking at how to integrate Google’s ReCaptcha software into an OpenCart installation. I will preface this post by saying there is a free extension in the OpenCart marketplace which allows you to add a ReCaptcha to the contact page here. This blog post is to show you how to do it manually so you can add it to other pages if you wish or any custom forms which you might want to add it to.

ReCaptcha is a free-to-use enterprise standard captcha form which stops software automatically filling out your forms or accessing services. Software can be written to automatically fill out forms, which is why your WordPress site might get so many spam comments, but they can be blocked by images containing words which it cannot read and therefore cannot fire off the form. With the growing intelligence of OCR technology we may find in a few years that Captcha forms are obsolete but for the moment they are the best method of preventing scripts filling out your form and spamming you or worse. OpenCart does come with a captcha system built in although more store owners may be more comfortable using a more tried and tested (and recognisable) system.

First thing to do is go to the Google ReCaptcha website and sign up your domain for API access. If you’re logged into your Google account there is no sign up process except to specify the domain name which you want the ReCaptcha to be used on. After that is done, you will be given two sets of keys (one Public and one Private) which you will need later on so leave this tab open.

Next, go to this link and download the PHP plugin. Extract the ZIP file and look inside for one named “recaptchalib.php”. This is the file which holds the class which will allow OpenCart to communicate with the ReCaptcha sever, rename it to “recaptcha.php”.

Now, open up the root folder of your OpenCart store in FTP and add the recaptcha.php file we’ve just downloaded to:

  • system/library

By doing this, we will be easily able to call on the ReCaptcha plugin later on without having to load it in every file. Now, we will integrate it with our contact form on OpenCart so open up the following two files:

  • catalog/controller/information/header.php
  • catalog/view/theme/[YOUR THEME]/template/information/contact.tpl

OK, so we now need to make some adjustments to these two files in order to call and display the ReCaptcha in place of the default captcha box which is available on OpenCart. First open up the contact.tpl file and look for the code which looks like:

<input type="text" name="captcha" value="<?php echo $captcha; ?>" />
<br />
<img src="index.php?route=information/contact/captcha" alt="" />

and replace it with:

<?php 
    $this->load->library('recaptcha');
	$publickey = "YOUR_PUBLIC_KEY";
    echo recaptcha_get_html($publickey);
?>

Remember that “YOUR_PUBLIC_KEY” should be replaced with the public key which the ReCaptcha website gave you when adding your website. It will be a long string of letters and numbers. Save your changes and upload the contact.tpl file to replace the old one and you should see the new ReCaptcha box on the contact form.

We’re not quite done though, in order to properly use it we need to know whether or not the visitor has filled it in correctly which requires us to get a response from Google’s servers which we will set up now. Open up your contact.php file this time and look for the code which looks like:

if (empty($this->session->data['captcha']) || ($this->session->data['captcha'] != $this->request->post['captcha'])) {
     $this->error['captcha'] = $this->language->get('error_captcha');
}

This section is for the original captcha form in OpenCart so we don’t need it any longer, replace it with this block of code which sends the completed (or not) ReCaptcha box to Google’s server for verification:

$this->load->library('recaptcha');
$privatekey = "YOUR_PRIVATE_KEY";
$resp = recaptcha_check_answer ($privatekey, $_SERVER["REMOTE_ADDR"], $_POST["recaptcha_challenge_field"],  $_POST["recaptcha_response_field"]);

if (!$resp->is_valid) {
     // What happens when the CAPTCHA was entered incorrectly
     $this->error['captcha'] = ' . $resp->error . ';    
}

Note that this time, you will need the Private key which was given to you by the ReCaptcha website when you set up your website.

This block of goes in a function which validates the contact form has been submitted correctly. If the ReCaptcha box has not been submitted correctly, or left blank, there will be an error message passed back to OpenCart and a error message will show to the user. We’ve kept the original error name so there is minimal edits required.

And thats it! Just a few lines of code to be changed and an extra file added to the system library means you can use an industry standard captcha to prevent malicious hack attempts and spam software filling out your form. Note that if you update your OpenCart software you will need to make these changes again but you shouldn’t have to re-upload the recaptcha.php library file again unless you are starting from a fresh installation. Now you have followed the process you will be able to add the captcha box to any form in OpenCart which you would like to add a little extra security to!

Got any experience with captcha forms or spam through OpenCart? Let us know your best methods of preventing it or other captchas you prefer in the comments below!

 

How To Edit Or Remove The Continue Button From OpenCart Information Pages

Pretty quick one again today! In this post we will be looking at removing the “Continue” button which appears at the bottom of every Information page and redirects customers back to the homepage when they click it. This is bad practice because; one) its annoying, two) it looks crap and, three) it keeps sending people back to the homepage when they have finished reading an information page and therefore you’re not channelling your customers around your store properly. And that is just bad marketing!

So, only a quick fix and you won’t need much experience in coding at all to quickly spot the line of code you’ll need to remove from the template file which governs how Information Pages are displayed.

Removing Or Editing  The Continue Button From OpenCart Information Pages

Just open up your file manager or FTP program and get onto your web host. Then find this file:

  • catalog/view/theme/[YOUR THEME]/template/information/information.tpl

Just open it up in your text editor and look for the line which looks like this:

<div class="buttons">
    <div class="right"><a href="<?php echo $continue; ?>" class="button"><?php echo $button_continue; ?></a></div>
</div>

So, what you do here is completely up to you! You can add another button, change the one displayed or remove the continue button entirely and all three have their pros and cons so I will show you how to do all things.

Adding Or Editing The Continue Button

Nice and easy, just copy the middle line from above and paste it back in to have the same button duplicated. Then you can change the values to edit what text the button shows and where it takes your customer if they click it. Like so:

<div class="buttons">
    <div class="right"><a href="http://www.[YOUR DOMAIN].com" class="button" style="margin-right: 10px;">Home</a></div>
    <div class="right"><a href="http://www.[YOUR DOMAIN].com/deals" class="button" style="margin-right: 10px;">Today's Deals</a></div>
    <div class="right"><a href="http://www.[YOUR DOMAIN].com/contact" class="button" style="margin-right: 10px;">Contact Us</a></div>
</div>

Create different buttons on OpenCart Information Pages

Remember to add in the style part of the CSS as this stops the buttons being too close and overlapping. The great thing about editing and adding your buttons is that you have a little more control over where your customers go after reading stuff on your OpenCart Information pages so it can be easy to create sales channels.

Remove The OpenCart Continue Button On Information Pages

Just remove the entire “buttons” div element to get rid of any buttons whatsoever on the bottom of your Information pages. So your blank page should look something like:

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
<div id="content"><?php echo $content_top; ?>
  <div class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
    <?php } ?>
  </div>
  <h1><?php echo $heading_title; ?></h1>
  <?php echo $description; ?>
  <?php echo $content_bottom; ?></div>
<?php echo $footer; ?>

And it is as easy as that! Now you know how to add, edit or get rid of the practically useless default continue buttons on OpenCart. I hope you’ve enjoyed this post and as always feel free to leave me a comment!

Buy the vqMod file to remove the Continue button from OpenCart information pages

Don’t want to play around with the core system in OpenCart, or just can’t be arsed? You can buy the vqMod file which does it automatically so you don’t have to do any coding! Purchasing this mod is supporting my blog and means I can continue to write tutorials on OpenCart and keep everyone in their bosses good books! It’s just £2.99 and you can download the vqMod file for different versions!

OpenCart version 1.5.3.1:

OpenCart version 1.5.1.3:

 

How To SEO Your OpenCart Store For International Targeting

OK, this blog today is one for all of the international OpenCart store owners who want to target their store specifically for international markets. With Google’s updates and the general war against SEO, it has actually become very difficult to target OpenCart against specific countries whilst maintaining a good search ranking in all of them.

For example, say you have an OpenCart store on gb.mystore.com which targets people in the United Kingdom, but you have another store on fr.mystore.com which targets French customers instead. Many people would believe, with the Google Panda update in mind, that you would need to rewrite the entire site with fresh content otherwise you would incur a duplicate content penalty from the Search Engines.

This isn’t true.

Of course you will need to translate the text properly (and I recommend you use a proper translator rather than using something like Google Translate :) ) so that your customers will feel at home in it but it can still be the same content as your GB store.

Optimising Your OpenCart Store For International SEO

All you need to do is tell google that the content is duplicated here in another language because you are targeting a different demographic, you will need to put a <link rel> into the OpenCart header of your French store which looks something like:

<link rel="alternate" hreflang="en-GB" href="http://gb.mystore.com" />

I would recommend always linking back to the English alternate if you can as this is Google’s primary language (or at least the language it most widely supports) and it keeps it neat if everything links back to one. This tells Google that there is an alternate version of the content, explains why and allows it to choose which version to show. Most likely if someone is searching for something on www.google.fr it will show up the fr.mystore.com version of the page rather than the english one so you can continue to target your store for the same keywords across different countries.

Adding Your Link Code To The OpenCart Header

You will need to add the code to the OpenCart header which can be found at:

  • catalog/view/theme/[YOUR THEME]/template/common/header.tpl
Just add in your new <link rel> to the header section just above where the default stylesheet is called so it will look something like this:
 
<?php } ?>

<link rel="alternate" hreflang="en-GB" href="http://gb.mystore.com" />

<link rel="stylesheet" type="text/css" href="catalog/view/theme/[YOUR THEME]/stylesheet/stylesheet.css" />

From a marketing point of view, I would always advise having different landing pages for different demographics, especially cross-country, so your content should change marginally and perhaps only the product descriptions are the things which stay largely the same. But make sure the link is displayed on all versions anyway!

 

Changing The Default Product Availability Options In OpenCart

OK, in this blog we will be looking at changing the availability options on product pages which come with a default installation of OpenCart. The good news is that these options are saved in the database and drawn dynamically so there is just a little bit of work and you can change these availability options to whatever you like.

Out-of-the-box OpenCart comes with four predefined availability options:

  • In stock
  • Pre-Order
  • Out of stock
  • 2-3 Days

Although these are useful for the vast majority of stores, there are some who might want to customise these options and bring it in line with their company branding, or if they have unusual stock then you might want to add unique options that fit in with your product.

Adding the new availability options in the OpenCart database

Login to your OpenCart store dashboard and go to Localisations->Stock Statuses where you will see a page like in the image below:

 

 

Click on the “Insert” button in the top right hand side of the page and create new stock availability options as you need them. If you’re store uses more than one language then you will need to enter a name for each language to be used.

 

 

Rinse and repeat as many times as required and you’re done. If you need to set one of your new stock statuses as the default option you can do so by going to System->Settings->Edit->Option Tab then go down to the Stock section and choose which of your options to set as the default stock status.

 

That’s it! Nice and easy blog tutorial on creating and defining default stock statuses in OpenCart. I hope you have found this OpenCart blog post useful and, as always, leave me a comment if you want to ask anything!

 

Adding Facebook Comments To OpenCart Product Pages

OK, so far I haven’t written an OpenCart blog on integrating social networks like Facebook with the eCommerce software because I had some qualms about how much people actually share online when buying anything. However, it is becoming a popular question from people visiting my blog and admittedly social media is now becoming more and more tied in with OpenCart so I decided to write this blog to show you how to implement Facebook comments into the product page on OpenCart.

For the purpose of this example I will be adding a “Ask A Question” tab next to the standard “Reviews” tab on the OpenCart product page and this tab will contain the Facebook comment box allowing people to post onto the store through their Facebook account. This can be beneficial as users can opt to “Also post to Facebook” which will appear in their friends news feeds and on their timeline which can lead to potential clicks and conversions. Be warned that you might put off users who are not signed up to the Social Network and will be unable to comment on your site but you can always add a message like “Don’t have a Facebook account? Why not email us instead?” above the comment box when we put it in.

Getting The Facebook comments code for OpenCart

Right so to add the Facebook comments box we will need to add in two pieces of script which Facebook has kindly made available for anyone at this link:

https://developers.facebook.com/docs/reference/plugins/comments/

The form on the page asks for a few details and I will guide you through the process here.

URL to comment on

Leave this field as it is without adding your OpenCart URL, this is for a good reason which I will explain in a moment. It should be left as http://www.example.com or some equivalent.

Number of posts

You can set the limit of Facebook comments to show on your OpenCart product page and it won’t make much difference. Just choose whatever limit you like, I chose 5 for this example.

Width

Right, so we want this Facebook comment box to look good right? We will need to know the width of the tab boxes on your OpenCart store in order to ensure the box fills the entire section. This can vary from theme to theme but you can find it out by hovering over your product description box, right-clicking and choosing “Inspect Element“.

If you can’t find it out, don’t worry. Just leave it as the default on the Facebook comment box generator and we can adjust it later.

Colour Scheme

Again this is all about preference so have a look at both versions of the colours and see which one fits your theme better. At the time of writing there are only two simple themes (Light and Dark) so chances are one, or both of them, will fit in fine.

Then just click the “Get Code” button to see a popup box with what you need.

Integrating the Facebook SDK with OpenCart

Next you will need to include the JavaScript SDK code into OpenCart. This is the top section with the block of code which looks like:

<div id="fb-root"></div>
<script type="text/javascript">// <![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// ]]></script>

I would recommend using the code which Facebook generated for you but you should be able to use this one if you’re feeling lazy.

Now open up this file:

  • catalog/view/theme/[YOUR THEME]/template/common/header.tpl

You will need to insert the above code as a block just after the <body> tag. Run a search for “<body>” in your text editor if you can’t see it and then just add it in, taking care not to delete or overwrite anything else!

NOTE: I have braced myself for tons of emails regarding performance issues but honestly it all gets loaded minified and everything is explained on the Facebook Developers website at developers.facebook.com. This will not cause your page to load slowly and I’m aware it will get loaded onto every page but it really is a minimal performance hit for the convenience of abiding by Facebook implementation advice.

The next piece of code down is what will actually call the comment box so make sure to copy it and keep it safe for the moment. It usually looks something like:

<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>

Before we use this though, lets create a space for your tabs.

Adding an extra tab for OpenCart Product Pages

OK, so OpenCart conveniently uses JavaScript to automatically work with tabs so there is very little to do here but actually physically enter the tabs themselves. No JavaScript needed!

To create a new tab, open up this file:

  • catalog/view/theme/[YOUR THEME]/template/product/product.tpl

and do a search for “#tab-description” which will take you to the following line:

<a href="#tab-description"><?php echo $tab_description; ?></a>

All you have to do is add in a new tab which will add another tab to the line which users can click on to get to the Facebook Comments. Like so:

<a href="#tab-description"><?php echo $tab_description; ?></a>
<a href="#tab-comments">Ask A Question</a>

Then we need to add in the actual box which holds the Facebook comments inside which we do by finding the following script:

<div id="tab-description" class="tab-content"><?php echo $description; ?></div>

And add an extra line for the comments section like so:

<div id="tab-description" class="tab-content"><?php echo $description; ?></div>
<div id="tab-comments" class="tab-content">
<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>
</div>

Now if you go to your OpenCart product page you should see a tab labelled “Ask A Question” and if you click on it, it’ll bring up the Facebook Comments box! Now, you’ll notice that there are a load of comments already on it which is because the URL of the comments box is example.com. Remember I said we would come back to the URL? Well here is the problem with using this on OpenCart!

Making The Facebook Comments box dynamic for OpenCart

OpenCart is a dynamic, database-driven website meaning that by putting something directly in the template file is, most of the time, going to make it show up every time that file is called. This obviously doesn’t work for product pages as whatever URL you put in the Facebook generator is going to show for all of them, some previous comment extensions have got around this by just showing the root URL of the store but with a little bit of PHP you can make OpenCart generate the code dynamically for whatever page it is on!

Edit the original Facebook Comments code which looked like:

<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>

And edit the “data-href” link by changing it to:

<div class="fb-comments" data-href="<?php echo $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>" data-num-posts="5" data-width="470"></div>

This will ensure that each product page has it’s own comment box by changing the URL for each different product. You can also adjust the width using the “data-width” parameter in the code to make it fit in with your theme design properly.

And there we go! You now have a Facebook Comment feature listed as part of your OpenCart product page under the “Ask A Question” tab!

As promised, here is the vqMod file which accompanies this OpenCart blog on adding Facebook Comments to OpenCart product pages if you’re new to OpenCart or unsure about editing the core files, all payments are securely processed via PayPal!