Increasing Your OpenCart Store Security

I thought I would post this one as I have been getting a lot of messages recently from people who have had their site hacked or disabled by some shady characters. Some people have had site data taken and others appear not to have lost anything apart from face but getting your site hacked can leave that shaky, intrusive feeling attributed to those who have their house robbed!

So, I’m going to share a few tips here on how to increase the security of your OpenCart store and protect yourself from shady people who want your store down for fun or fortune! Remember, you should approach things like passwords with due care as well as following the tips in this tutorial. I’m not saying that choosing “password” for your password is asking for it exactly, but you’re definitely not doing yourself any favours…

Security Tip #1: Delete Your OpenCart Installation Folder

This is a fairly common tip across any software which you install on a site but remember to delete the installation folder once everything is up and running. OpenCart has a little error message which pops up when in the Admin section if the folder is still present but do yourself a fovour and delete it right away, you don’t want people to be able to reset all of your connections and overwrite all of your hard work!

Security Tip #2: Secure The OpenCart Config Files

Second to deleting your OpenCart store’s installation folder, you want to be making sure that no one can trick their way into your config files. If they get in then they know the details of your site structure as well as your database details. Keep the files safe and change the permissions to 444 for both of these files

  • config.php
  • admin/config.php

Security Tip #3: Change your admin folder

OpenCart, much like WordPress, has a default admin login page which anybody who has used the software before will be familiar with. As WordPress has wp-admin, OpenCart has the www.[DOMIAN_NAME]/admin section which anybody can get onto. not many people realise that it is fairly easy to change this folder and hide it somewhere else, easily telling OpenCart where it is for later.

Rename your admin folder to something else which is far harder for a hacker to get into, such as www.[DOMAIN_NAME].com/RJKJKSU. The just open up:

  • config.php
  • admin/config.php

Then just do a quick “Find and Replace” to change all instances of the word admin with the folder name you have chosen, in this case RJKRSU. Your config file should look something like:

<?php
// HTTP
define('HTTP_SERVER', 'http://domain.com/ocart/');
define('HTTP_IMAGE', 'http://domain.com/ocart/image/');
define('HTTP_ADMIN', 'http://domain.com/ocart/RJKJKSU/');

// HTTPS
define('HTTPS_SERVER', 'http://domain.com/ocart/');
define('HTTPS_IMAGE', 'http://domain.com/ocart/image/');

// DIR
define('DIR_APPLICATION', 'domain.com/httpdocs/ocart/catalog/');
define('DIR_SYSTEM', 'domain.com/httpdocs/ocart/system/');
define('DIR_DATABASE', 'domain.com/httpdocs/ocart/system/database/');
define('DIR_LANGUAGE', 'domain.com/httpdocs/ocart/catalog/language/');
define('DIR_TEMPLATE', 'domain.com/httpdocs/ocart/catalog/view/theme/');
define('DIR_CONFIG', 'domain.com/httpdocs/ocart/system/config/');
define('DIR_IMAGE', 'domain.com/httpdocs/ocart/image/');
define('DIR_CACHE', 'domain.com/httpdocs/ocart/system/cache/');
define('DIR_DOWNLOAD', 'domain.com/httpdocs/ocart/download/');
define('DIR_LOGS', 'domain.com/httpdocs/ocart/system/logs/');

// DB
define('DB_DRIVER', 'mysql');
define('DB_HOSTNAME', 'localhost');
define('DB_USERNAME', 'USERNAME');
define('DB_PASSWORD', 'PASSWORD');
define('DB_DATABASE', 'DATABASE');
define('DB_PREFIX', 'pre_');
?>

Then just login into the OpenCart admin panel at the new URL and you will be one step closer to protecting your store.

 

Security Tip #4: Password Protect your Admin folder

Whatever you decide to name your folder in the previous tip, make sure you set a password on the directory in order to boost access to the OpenCart admin area. It means you have to login twice but in terms of security having a password before they can even <i>see</i> the login area is a blessing. Make sure it is a decent password which is difficult to guess with a mix of numbers, letters and symbols.

Although it may bug you to begin with, you’ll soon be typing it without thinking and keeping your hackers at bay.

Security Tip #5: Restrict access to your admin area

You can create a simple .htaccess file which will deny access to anyone accessing your admin area who are not from a specified IP address. Some people may crop up saying that IP addresses can be faked which is of course true, however, they would need actually know your IP address in order to access it which puts the odds in your favour. It’s also just a step in the process of securing your site and should be completed in addition to the other steps.

Just copy the simple .htaccess file below, substituting the example IP address which all of the IP addresses of people who will need to access your administration area:

# BAN USER BY IP
<Limit GET POST>
 order deny,allow
 deny from all
 allow from XX.XX.XX.XX
 allow from YY.YY.YY.YY
</Limit>

Then just upload the .htaccess file to your administration folder on the website to begin restricting access by IP. Note that many broadband plans do not come with a static IP so make sure that you add your different IP addresses when they change and sign up for a static one if you’re able.

Security Tip #6: Restrict FTP access to your site

A lot of store owners like the idea of having an FTP account on their server which can be dished out to any developer who needs it but I would always recommend deleting any FTP accounts which aren’t being used regularly as they provide a route to your store which is unnecessary. If you do have an FTP account then restrict who can see your store by using a .ftpaccess file.

A .ftpaccess file works in almost the same way as a.htaccess file but defines which directories are visible for anyone who connects via FTP by their IP address. Simply copy the code below, save it as .ftpaccess and upload to a directory which you want to hide (remember to put your IP address in):

DenyAll
Allow XX.XX.XX.XX
Allow YY.YY.YY.YY

The same limitations apply for an .ftpaccess file as a .htaccess file regarding static IP addresses so remember this when restricting access to your OpenCart store.

Security Tip #7: Remove the powered by OpenCart link

Whilst I would always recommend supporting OpenCart with a backlink if you haven’t donated, it is also a great (and effective) way of letting hackers know that you run an OpenCart store. Get rid of it by following my previous blog on removing the OpenCart footer link or you can buy the vqMod to do it automatically if you want it.

Security Tip #8: Hide OpenCart PHP Errors

Its useful to see errors displayed on a page if something goes wrong so you know what needs fixing, however, it’s also convenient for hackers. Turn this feature off by logging into your admin area and going to System->Settings->Edit->Server and switch the “Display Errors” option to “No”. You can always see your error log by looking at the link further down the page.

Security Tip #9: Get yourself some secure hosting

If you’re paying $3 a month for web hosting then don’t expect much in the way of security or support. Shared hosting is simply a folder on a server which is shared by thousands of others. If you are running a store then consider getting a more professional hosting service on a closed system like a Virtual Private Server or a Dedicated One.

So that is it for now, I will add to this blog post when I think of anything else but in the meantime, feel free to recommend any security tips of your own and I will add them as well!

 

Editing The OpenCart Homepage Nivo Slider

Once again I’ve left it a while without writing a new blog on OpenCart, I’ve worked with a lot of new people and received some fantastic feedback so far. In this blog post I am going to be looking at the OpenCart Nivo Slider which shows up on the home page by default and isn’t set quite right for most online stores so I will be showing you how to customise the speed it shows slides and the effects/transitions between them. I will be working on OpenCart version 1.5.2.1.

Changing The Speed Of The OpenCart Home Slider

So you can define your slides through the admin panel (default width is 980px I believe for those who asked) and set up your Slideshow through the Modules tab but the slides go way to fast for the average customer to read through, interpret and then act upon. Trust me, if it is going too fast then you will lose customer conversions because people need a reasonable amount of time to decide on something. The slides, by default, only stay up for about 2-3 seconds before fizzing away. In a few minutes however, you will know how to adjust the slideshow to make the slides stay as long as you like.

OK, so there is very little coding involved in these two guides so don’t worry. I will warn you be careful though as it can be easy to look at the wrong thing, just follow the steps exactly and you will be OK. So the file you will need is:

  • catalog/view/javascript/jquery/nivo-slider/jquery.nivo.slider.pack.js

Open this file and you will be presented with a horrifying amount of JavaScript for one slider but you can just ignore most of it. I think it is best to do a Quick Find (usually by pressing CTRL+F or CMD+F in your editor) as its quicker than scanning through, just enter “a.fn.nivoSlider.defaults” and it will take you to where you need to be.

There will be an equals sign just after followed by a list of variables and you are looking for the one called “pauseTime”. It will have a comma following it which should be followed by a number (although I had the strange “3e3″ as a value…). Simply change this number to something like 9000 or 12000 to increase the amount of time each slide stays on the screen and upload then check if it is long enough for your customers. Rinse and repeat until it is perfect!

Changing The Transition Effects Of The OpenCart Home Slider

Right, that was easy enough to change the speed, now we are going to be looking at changing the effects shown as the slides change. By default it is random and can look a bit messy, I won’t go into what each individual effect is like (you’ll have to experiment a bit!) but I will show you what to change.

Luckily, it is almost the same process as before except this time we are performing our Quick Find for “a.fn.nivoSlider.defaults” and looking for the variable “effects” which should be just before the “pauseTime” one from earlier. The effects value will be “random” which you can change to any of those listed below:

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

Remember, if you want to put it back to normal, just put the word “random” in there instead of an effect name to have the random transitions again!

So, that’s it for today. I hope you enjoy this guide and feel free to get in touch with any questions and leave comments! Don’t forget I’m for hire as an OpenCart freelancer!

 

How To Avoid Google’s Duplicate Content Penalties In eCommerce Search Pages

Hello again! Normally I mainly blog about OpenCart and customisations but this one can be applied to any eCommerce store whether using software such as Magento or osCommerce or just have your own PHP/ASP store built up. We will be looking at Google wrongly penalising websites for having duplicate content on website search results because of extra parameters in the URL. Don’t worry if you’re not following so far, like most things Google, it is just a case of jumping through the hoops.

What is a URL Parameter?

Basically, a URL parameter is used in choosing how content is displayed on a dynamic site. The easiest one to talk about would be if you go to your profile page on FaceBook and look at the URL (if you don’t have a username set on the website); you will see something along the lines of [FACEBOOK URl].profile.php?id=668491281481849816.  That little question mark starts off the parameters for PHP and each one has a name and a value; in this case the name is “id” and the value is “668491281481849816”.

When you have a search page there is generally one which holds the Search Query in question (it’s id is usually something like “q”) and other elements which change the way the information is displayed such as displaying more results at once or displaying them from highest to lowest price. Google sometimes has problems deciding which parameter does what and how to decide which is duplicate content or not.

Why Are My Parameters Causing Google Duplication Errors?

OK, so technically, Google isn’t wrong to think it is giving duplicate content because it sees the parameters showing different content and assumes they are different pages. When in actual fact it is the same content just shown a bit differently. All we need to do is get in the middle of the process to tell Google that it should only read one parameter and assume that is the content and the others are just a rearranged version.

How To Remove Duplicate Content Penalties With eCommerce Searches

Right, so, regardless of whether or not you have an OpenCart store or whatever you just need to go to your OpenCart store and open up a search page in question to check the URLs. In this case we are going to assume that Google is seeing www.[mystore].com/search/?q=trousers&sort=ASC as a different page to www.[mystore].com/search/?q=trousers&sort=DESC. When in actual fact they are the same and should be taken as such. So, the parameter which is causing us the trouble in this example is “sort”.

Go to your Google Webmaster Tools account and choose the “Configuration” option followed by “URL Parameters”. You may get a warning message here but just click through if you do and click the “Add Parameter” button somewhere near the top.

A dialog box should appear and just type in the name of the parameter (in this case “sort”) and then choose the option “Yes, this content changes the information” from the drop down menu just below. After that some more boxes will appear and you will need to provide some more details.

It will then ask you how the information is changed, in this case it “Sorts” and then underneath we have a radio selection with several options. By default, it has the “Let GoogleBot decide” chosen (which obviously doesn’t work for your site if you are reading this).

You can choose between the “No URLs” and the “URLs with the value of”. Which one you choose will be affected by your situation. In my case I would choose the “No URLS” option because my “sort” parameter doesn’t decide what information is displayed in my eCommerce store, it just decides what order it is displayed in. Or you can choose the value which Google should choose by setting the value of the default parameter which shows search results before you refine it (such as “ASC” or “DESC” in my example).

You must be really careful when choosing the “No URLs” and you must be absolutely sure that it is not going to remove any results from your pages and possibly get products deindexed. Never put the parameter which contains the “id” or “q” in Google Webmaster Tools URL parameter boxes and never put any parameters in there which you’re not sure of what they do, it’s better to have a few penalties until you’re sure rather than rushing and getting removed from the search results.

So there we go. I will update this blog soon with a guide to placing canonical URLs on pages but this will serve just as well for now. I hope you enjoy it and feel free to leave me a comment below!

 

How To Customise The OpenCart Homepage For Branding, Conversions And SEO

It’s been a while since I have posted up an OpenCart blog/tutorial so I thought today I would talk about customising the OpenCart homepage to make it look how you want.

By default the OpenCart home page is a grid based page with set content areas showing featured products,a Nivo Slider, Manufacturer carousels and so on and so on. From a marketing point of view, as well as design and conversion, this is an absolute nightmare and there is no website in the world which can fulfil its potential without you being able to change the page that the vast majority of your customers is going to see first.

So, all you need for this OpenCart tutorial is a small amount of Web Development skill, that is to say HTML & CSS. Of course you could add PHP and JavaScript in to create a more Dynamic homepage but for the point of this blog I will just show you how to style the page!

Getting Started With Customising Your OpenCart Homepage

Right, so the template file you will need to start working with is saved at:

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

You might be surprised to see that the OpenCart home page template actually only has five or six lines of code in it which means the file is surprisingly easy to customise. Now, you file should look a little bit like this:

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
<?php echo $content_top; ?>
<?php echo $content_bottom; ?>
<div style="clear: both;"></div>
</div>
<?php echo $footer; ?>

Making Sure You Don’t Mess Up Your OpenCart Home Page

Now, we have to be careful how you move ahead with this one because how the home page is displayed already is dependant on how you have your modules set up in the Admin panel. This OpenCart home template file is simply loading up the modules which you have activated in Extensions -> Modules and you might be better off to check where they are being loaded to. If you choose a module (for example “Featured”) and click “Edit” then you will see a drop down menu which shows whether it is being loaded into the “Content Bottom”, “Content top”, “Column Left” or “Column Right”. You will need to bear this in mind when you start adding in your HTML.

Adding In Your Custom Content Into The OpenCart Home Page

As I mentioned at the start of this tutorial, you will need a little bit of HTML skill here in order to build up your custom area. I would recommend using >div> tags rather than tables and keeping the styling down to a very basic level in order to keep browser compatibility at a good level. OpenCart by design is backwards compatible with older browsers and you don’t want to put off your OpenCart customers with a dodgy looking home page!

With regards to CSS, I would recommend keeping the styling in-page rather than linking out to an external stylesheet. But this might just be me being paranoid, however I think it is better to keep things contained as much as possible when inserting a whole block of design in the middle of other PHP code. And depending on what you want shown then you should choose where to insert the code into the home page template.

So, lets assume that I want to add a welcome message to the home page of my OpenCart home page which says hello and welcome to the store! I want it to be shown at top of the page before the slider or anything like that. I want the welcome message to be two thirds across the page with another box on the right hand side for Lead Generation or something like that. Now it is just a simple HTML/CSS jobby as shown below:

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>

//This is my Welcome Message and Lead Gen Box
<div style="clear: both;"></div>
<div style="width: 65%; height: 150px; border: 1px solid #3299CC; float: left;">
<h1>Welcome To My Store!</h1>
<p>This is my welcome message which I inserted into the home page using the Open Cart Home Page template file and my own coding. This message would include something about high quality, great customer services, competitive prices and fast turnaround times or give a nice overview to the company which would entice customers to stay!</p>
</div>
<div style="width: 30%; height: 150px; border: 1px solid #F00;">
<h1>Sign Up!</h1>
<p>This is our Lead Generation form which allows our customers to add in their email address and join the OpenCart company mailing list</p>
</div>

//End Custom Script

<?php echo $content_top; ?>
<?php echo $content_bottom; ?>
<div style="clear: both;"></div>
</div>
<?php echo $footer; ?>

And there we go! It’s as easy at that! Obviously, your needs will be different to mine but you just need to work out where you are putting your message and make sure you know where your other modules will be loaded and you will be set! Simple HTML/CSS that you can learn if you don’t already know it anyway.

Let me know if you have any questions or want anything clarifying with a comment below!

 

How To Install An OpenCart Template

A pretty easy tutorial on how to install an OpenCart theme or template to change the design of your OpenCart store. This is a vital part of eCommerce designing and there are a few other tutorials but I thought I would write my own tutorial on installing OpenCart themes and see how it got on!

The default template in OpenCart is very basic and not really much use if you don’t customise it heavily so buying new themes from template marketplaces or paying for web designers to create a new theme specifically is the best way to get a bespoke shopping website.

Creating A Folder To Install Your New OpenCart Theme

This is pretty basic but you will need FTP access to your website. Simply navigate to:

  • catalog/view/theme

Now, from here you will see a single folder (if this is a clean install of OpenCart) containing the default theme the store comes with. Named, conveniently, “default“! All you need to do here is create a new folder in this directory. You can name the folder anything you like but remember the name as you will need it later.

In my case I am going to name the folder “myTheme“.

Activating Your New OpenCart Theme

It might sound like we have this backward but bear with me! Login to the OpenCart Admin system and go to System -> Settings, then go to your store and click “edit“, the click the “Store” tab and find the drop down menu with the name “Template“.

All you need to do here is click on the menu and choose your “myTheme” name instead of the default. The click “Save” and your all done! Your new OpenCart Theme has been installed.

The OpenCart Template Installation Fallback

The reason I told you to activate the theme before putting the files in the folder is to show you that the OpenCart template automatically drops back to the default theme if there are any files missing. That is how the store can look exactly the same when you have activated the empty Opencart template; because the files are missing the store just uses the default package instead!

Installing Your New OpenCart Theme

Simply copy the folders within your new template file (there should be three: image, stylesheet & template) to your new folder sitting on the directory. In my case I will be copying the three folders to:

  • catalog/view/template/myTheme

And that’s it! Your new OpenCart theme has been installed and activated. Now you just have to refresh your page and you will be looking at a brand new template for your OpenCart store! If you want some free themes to play around with I have listed several on another blog post here.

 

Adding Custom OpenCart Contact Forms For Quotes, Leads and Marketing

OK, so a lot of people are asking about changing the Contact Page in the default OpenCart system so it doesn’t so…well, crap! I was going to write a short blog post about redesigning the page with stuff that is already there but I thought I would do it properly and show you a method of creating several different contact forms which you could use throughout your OpenCart website.

So, I will be creating three different contact forms:

  • Lead Generation Form
    This will be a form which sits on the homepage and encourages visitors to sign up to your Newsletter, RSS Feed or some other Lead Gen method.
  • Request A Quote Form
    Another popular request for OpenCart users, this will be a form which sits next to the product description which usrs can fill out for more information, or a quote, to be sent to them by the Store Owner.
  • A Bespoke Contact Form
    I will be replacing the original OpenCart contact page with a bespoke Information page with a new contact form. By doing it this way, we can define exactly how the contact page looks!

We will build up the forms individually and then build a PHP file to handle the different requests with an “IF” statement so we keep it all together. You will be able to customise the emails that get sent in the forms of confirmations to fit with your branding.

Adding a Sign Up form to the OpenCart homepage for Lead Generation

So, first we are going to be making up the form which will sit on the OpenCart homepage and allows your customers to sign up and for you to start getting leads from your store. In this example I will creating a Newsletter Form which only requires the visitors full name and email address.

The form itself is pretty standard and you only need a bit of HTML knowledge to make one up, the form I will make will be unstyled but remember you can give each input type a different class to style them with the OpenCart CSS file to make it look how you want!

Building The Lead Generation Form

Open us this file:

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

And add in your form wherever you want it to appear on the home page. Simply follow the structure as shown below:

<form action="http://[YOUR STORE URL]/phpForm.php" method="post" enctype="multipart/form-data" name="leadForm">
<h2>Join Our Mailing List</h2>
<table>
<tr>
<td>First Name</td>
<td><input type="text" name="leadFirstName" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="leadLastName" /></td>
</tr>
<tr>
<td>Email Address</td>
<td><input type="text" name="leadEmail" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Join Our Mailing List" /></td>
</tr>
</form>

Right, so now we have a very basic form which just asks for a few details off our visitor to sign up for the OpenCart Store Newsletter. Remember to keep the input names otherwise it won’t work later on!

Processing The Lead Generation Form With PHP

Open up a blank file in your Text Editor and name it “phpForm.php“. This is the file we will be making to process the data when the user submits the Newsletter Sign Up form on your homepage. The add the following:

<?php
//Checks if the submitted form is the Lead Gen
if($_POST["leadFirstName"]){

//Secure The Submitted Data
$leadFirstName = stripslashes($_POST["leadFirstName"]);
$leadLastName = stripslashes($_POST["leadFirstName"]);
$leadEmail = stripslashes($_POST["leadEmail"]);

//Build The Email To The Admin
$to = "[PUT YOUR ADMIN EMAIL ADDRESS HERE]";
$subject = "Newsletter Sign Up Details";
$theEmail = "Please add $leadFirstName $leadLastName to the mailing list, email address is $leadEmail";
$headers = "Content-type: text/htmlrn";
$headers .= "From: admin@youropencartstore.comrn";
mail($to, $subject, $theEmail, $headers);

//Build Confirmation Email To The Customer
$to2 = "$leadEmail";
$subject2 = "Thanks for signing up to OpenCart Store!";
$theEmail2 = "
<h1>Thanks for joing our mailing list!</h1>
<p>We're glad to have you on board and hope you really enjoy the newsletter!</p>
<p>Kind Regards,</p>
<p>The OpenCart Store Team</p>";

$headers2 = "Content-type: text/htmlrn";
$headers2 .= "From: mail@youropencartstore.comrn";
mail($to2, $subject2, $theEmail2, $headers2);

//Redirect Customer Back To Store
header("location: http://www.youropencartstore.com/thanks");
}

?>

Adding A Quote request Form To Your OpenCart Store

In this section we will be building up the Quote Request Form to be placed on product pages where customers can ask for more information or a bespoke price for the product. We will be following a similar process to the Lead Generation form but changing the following file instead:

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

Again, just choose where you want the form to be shown and go ahead!

Building The OpenCart Quote Request Form

Build another HTML for for the user to fill out but this time we will be getting some hidden details from the page so the admin knows which product the potential customer is talking about.

<form action="http://[YOUR STORE URL]/phpForm.php" method="post" enctype="multipart/form-data" name="quoteForm">
<h2>Get A Quote / More Information</h2>

//Get The Product Name
<input type="hidden" name="quoteProduct" value="<?php echo $product["name"]; ?>" />

<table>
<tr>
<td>First Name</td>
<td><input type="text" name="quoteFirstName" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="quoteLastName" /></td>
</tr>
<tr>
<td>Email Address</td>
<td><input type="text" name="quoteEmail" /></td>
</tr>
<tr>
<td>Details</td>
<td><textarea name="quoteDetails"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Get A Quote" /></td>
</tr>
</form>

Adding The Quote Request Form Handling To Your PHP File

Now this needs to be added to the phpForm.php to handle the form when someone requests a quote through the OpenCart product pages.

<?php
//Checks if the submitted form is the Quote request
if($_POST["quoteFirstName"]){

//Secure The Submitted Data
$quoteFirstName = stripslashes($_POST["quoteFirstName"]);
$quoteLastName = stripslashes($_POST["quoteFirstName"]);
$quoteEmail = stripslashes($_POST["quoteEmail"]);
$quoteDetails = stripslashes($_POST["quoteDetails"]);
$quoteProduct = stripslashes($_POST["quoteProduct"]);

//Build The Email To The Admin
$to = "[PUT YOUR ADMIN EMAIL ADDRESS HERE]";
$subject = "Quote Request Details";
$theEmail = "$quoteFirstName $quoteLastName ($quoteEmail) is requesting a quote on $quoteProduct. Here is their message: $quoteDetails";
$headers = "Content-type: text/htmlrn";
$headers .= "From: admin@youropencartstore.comrn";
mail($to, $subject, $theEmail, $headers);

//Build Confirmation Email To The Customer
$to2 = "$quoteEmail";
$subject2 = "Thanks for requesting a quote!";
$theEmail2 = "
<h1>Thanks for asking for a quote!</h1>
<p>We will be back to you soon with some more details!</p>
<p>Kind Regards,</p>
<p>The OpenCart Store Team</p>";

$headers2 = "Content-type: text/html\r\n";
$headers2 .= "From: mail@youropencartstore.com\r\n";
mail($to2, $subject2, $theEmail2, $headers2);

//Redirect Customer Back To Store
header("location: http://www.youropencartstore.com/thanks");
}

?>

Building A Custom Contact Page In OpenCart

I’ve saved the biggest and baddest for last in this blog post! Now we will be looking at how to develop a custom contact page for your OpenCart store and there is a little bit of prep before we build the actual form. First thing to do is set a new information page which we can use as our contact page!

Building Your New OpenCart Contact Form

Log into your OpenCart admin panel and hover over the “Catalog” tab and choose “Information“. Then click the “INSERT” button to create a new Information page. For SEO purposes, as well as being more user friendly, I would recommend having the SEO keyword just set to “contact”, that way your contact page will simply be “www.youropencartstore.com/contact” rather than having all the route rubbish which is in the default contact page.

Then you will need to add your form onto the information page directly through the OpenCart admin panel. Remember to make sure you have selected “HTML” in the content field so your form gets put in correctly! Then add the following form:

<form action="http://[YOUR STORE URL]/phpForm.php" method="post" enctype="multipart/form-data" name="contactForm">
<h2>Contact Us</h2>
<table>
<tr>
<td>First Name</td>
<td><input type="text" name="contactFirstName" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="contactLastName" /></td>
</tr>
<tr>
<td>Email Address</td>
<td><input type="text" name="contactEmail" /></td>
</tr>
<tr>
<td>Message</td>
<td><textarea name="contactMessage"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Send!" /></td>
</tr>
</form>

Nice and easy right? Now we just need to build up the final PHP handle to process the contact form when it is sent!

Processing The OpenCart Contact Form

This is actually very similar to the Lead Generation form we sent in the first part of this tutorial, we just need to change a few words around and we have the final addition to our phpForm.php file which processes when your new contact form is submitted.

<?php
//Checks if the submitted form is the Lead Gen
if($_POST["contactFirstName"]){

//Secure The Submitted Data
$contactFirstName = stripslashes($_POST["contactFirstName"]);
$contactLastName = stripslashes($_POST["contactLastName"]);
$contactEmail = stripslashes($_POST["contactEmail"]);
$contactMessage = stripslashes($_POST["contactMessage"]);

//Build The Email To The Admin
$to = "[PUT YOUR ADMIN EMAIL ADDRESS HERE]";
$subject = "Contact form Submitted";
$theEmail = "$contactFirstName $contactLastName ($contactEmail) sent a message through your form! Their message was: $contactMessage";
$headers = "Content-type: text/htmlrn";
$headers .= "From: admin@youropencartstore.comrn";
mail($to, $subject, $theEmail, $headers);

//Build Confirmation Email To The Customer
$to2 = "$leadEmail";
$subject2 = "Thanks, we have your message!";
$theEmail2 = "
<h1>Thanks for your message!</h1>
<p>We're reading it now and will be in touch shortly!</p>
<p>Kind Regards,</p>
<p>The OpenCart Store Team</p>";

$headers2 = "Content-type: text/html\r\n";
$headers2 .= "From: mail@youropencartstore.com\r\n";
mail($to2, $subject2, $theEmail2, $headers2);

//Redirect Customer Back To Store
header("location: http://www.youropencartstore.com/thanks");
}

?>

Finishing Up

Remember to put in your details where you can, and the emails are set as HTML so a reasonable amount of tags can be used buit always remember that different people will have different email programs which means your emails may look different to different people. It is always important to try and cater to all technologies when Marketing and try and include your logo if you can for branding!

You will also need to upload your phpForm.php file to the root folder of your OpenCart store or there will be nothing there to process the submitted form. If you have a store on a subdomain you will need to edit the form action tag and the redirect function in the PHP file to reflect this.

By having your bespoke contact form it means that you not only have an SEO friendly contact page URL, but you can also style the page to fit in with the rest of your website without having to deal with the contact page template. You may have to remove the old “Contact” link from the Nav Bar and replace it with your new contact URL, if you don’t know how to do this then have a look at another one of my blogs which shows you exactly how it is done here.

Apart from that, we’re all done. If you have a good working knowledge of PHP then you will be able to edit the form for different requirements. If you don’t you can hire me to work on your project, just send me a message from the Contact Page. If you have any questions as always just leave me a comment and I will get back to you!

 

How To Create A Free Blogging Module With OpenCart

OK, I might have misled you with the title a little bit. While this won’t be a module as such, it is a clever way to utilise the OpenCart system to create a blogging area on your OpenCart store.

Blogging is a fantastic way of engaging with your audience, covering more Search Terms and building trust for your customers. If you can prove through a blog that you know exactly what you’re talking about then you are setting yourself up as an authority in your chosen niche. While I talk to a lot of people who don’t think that blogging doesn’t fit with eCommerce software and isn’t a viable SEO tactic.

This is not true!!

In fact, I would say it is even more important to have a blogging area when you are selling something because your customers are going to be wary of buying online. Lowering your prices and adding loads of incentives can further worsen the situation because your customer isn’t sure whether it is “too good to be true”.

So, follow this blog and set up a blogging module on your OpenCart store without paying for any module and see how posting up regularly will help boost your ranking, traffic and ultimately (hopefully) your sales!

I will precede this by saying that is a hack, a non-official way of using Information pages to create your blogging system and you can get loads of good modules in the OpenCart marketplace which can do the job for a couple of dollars. I would advise that you try out my way first however because this might be sufficient for what you need and it doesn’t cost you anything to try out.

How Will My Free Blogging System Work In OpenCart?

Basically we are going to be using OpenCart Information pages to create a blog. We will be setting up a main page to use as the central home page for our blog and then using other information pages to create the actual blog posts and start linking them across. To follow this blog you will need to make sure that you have URL rewriting enabled on your OpenCart store!

Creating The OpenCart Blog Homepage

Nice and easy start, just create an Information page with the title “[YOUR STORE  Blog]”. If you don’t want to put your store name in the title then choose a keyword driven title that fits your brand for extra SEO points. You don’t have to write anything in this page yet just make sure that the SEO keyword box is set to “blog” under the “data” tab.

This is the page where we will be putting all of our blog snippets and and pushing the customers to read them. I would avoid making it too cluttered and definitely don’t put adverts in this blog section even if you are hoping to make a bit of money off them. It will drive your customers to competitor sites and makes it look like you have to rely on adverts because you’re not selling stock!

Creating The Blog Post

Did you know that you can put a “/” (slash) symbol in an SEO keyword box on OpenCart? Well, you do now and all you have to do to create a new blog post is set up a new information page which has your blog post (remember, 500 – 1000 words is best for Search Engines and Readers alike) and set your blog post SEO title to “www.[YOUR DOMAIN NAME].com/blog/[BLOG POST NAME]”.

So, if I had written a blog post on customising OpenCart Information pages to create a free ecommerce blogging section then I would set the SEO keyword to: “blog/How-To-Create-A-Free-Blogging-Module-With-OpenCart”. This is a keyword driven SEO title which says exactly what it is and makes it look like it is a subdirectory of the blog folder. Remember that adding a “-” (hyphen) tells Google that they are seperate words whilst using an “_” (underscore) tells it that they are part of the same word, so make sure you don’t fall into that trap.

Linking Your OpenCart Blog Page To Your Actual Posts

This is nice and easy, just add in a paragraph or two to your OpenCart Blog page which links to the actual blog post. Usually you start with a H1/H2 header with the blog post, followed by a short intro paragraph depicting a little more information about the article and a link to the author.

You can either set up an author page as another Information page or have a link going to your Google+ or Twitter profile instead.

Using Your OpenCart Blog

So you will start building up a blog library which will ultimately boost your profile, ranking and authoritativeness in your chosen Marketplace. Utilise it to talk about new releases in your industry, personal tips answer common questions (or better yet answer niche questions) or just to provide a real voice for your customers to engage with rather than an automated software solution.

I would seriously advise giving blogging a try as it could turn out to be very effective for your business and it doesn’t really put you out when you know a lot about your industry. Some people have said to be that “no one else in my market blogs so it obviously isn’t worth trying”. If you are working in a saturated market where none of your competitors are blogging then you have struck gold! By creating really good quality content and engaging with your customers then your traffic rate could skyrocket!

Integrating OpenCart And WordPress

Just a quick note before I close this one off. Loads of people are looking at using WordPress for blogging and OpenCart for selling the products themselves on the same domain. This isn’t good for user experience, Branding or general web development. It is extremely difficult to follow the branding across OpenCart onto WordPress and vice versa and could leave your customers confused about where they are actually buying from.

You could hire a designer who might be able to get the main features from one theme and copy it across to another template but this is likely to cost you a lot of money. If you have a free or low cost Web Host then there is likely a bandwidth and storage space limit which means having two feature-laden software solutions like OpenCart and WordPress could push you well over before you have made any money off either!

There are also security issues related to both softwares and if a hacker sees fit to break into one, then you are actually jeopardizing the other as well which could mean them hacking your WordPress and gaining access to your customers credit card details which is a PR nightmare!

 

How To Redirect OpenCart Customers After Logging In And Logging Out

Right, nice & easy one today but one that seems to trip up a lot of people who want to channel their customers around their OpenCart store. By default, OpenCart is not good for lead conversions but with this blog you will learn how to define which pages are shown after users login and logout.

This is a two-in-one kind of blog so just skip to the part you need if you don’t want it all!

How To Redirect User To OpenCart Homepage After Logging In

Now, when you (or your customer) logs into OpenCart they are immediately faced with the unimpressive Account section which has various links but I have had a few people ask me whether it is possible to make OpenCart redirect them to the homepage instead. And it is of course!

Open up the login controller file located at:

  • catalog/controller/account/login.php

Now, in this file there are three redirects which you will need to change and all of them look like this:

$this->redirect($this->url->link('account/account', '', 'SSL'));

What this little script is doing is saying “when the user is logged in, change the url to end with this”. All we need to do is edit it to make it change to the homepage variable. So, just quickly change it to:

$this->redirect($this->url->link('common/home', '', 'SSL'));

Which is of course, the Route to the home page. If you don’t have SEO friendly URLS enabled in your OpenCart store you can easily find out the route of the page you are viewing because it will have it displayed openly.:

  • http://www.accesspanelshop.com/index.php?route=common/home

Now, the beauty with this is that we can put any route on your website in this, so you could redirect the OpenCart customer to the Order History page with ‘account/order’, special deals with ‘product/special’ or the contact page with ‘information/contact’. These are just examples of course! But now you know how to redirect to any OpenCart page on your website!

How To Redirect The OpenCart User To Any Domain After Logging In

Now, technically there is no reason to redirect the customer to another domain name after they have logged into your OpenCart store I thought I would show you how anyway!

All we need to do is take out the functions you don’t need and provide the URL directly to the redirect function as I have shown below:

$this->redirect('http://www.jackwdavis.com');

Remember to put in ‘https‘ if the domain you are redirecting to has an SSL certificate!

How To Redirect OpenCart Customer On Logging Out

Now, this part is very useful in defining a custom page to show to your OpenCart visitor when they have logged out. By default OpenCart shows them some boring, and useless page which gives them permission to turn off their computer but that space can be very valuable in capturing visitors as they are leaving! You can define a custom information page with some special offers to encourage them to log back in and spend money or just display advertisements/affiliate ads to try and capture some revenue from your departing customers.

The same process applies as above, simply open up the logout controller file located at:

  • catalog/controller/account/logout.php

Open it up and it have just one redirect function which you will need to change and it looks like this:

$this->redirect($this->url->link('account/logout', '', 'SSL'));

It is about 20 lines down usually and all you need to do it change the route to follow such as:

//To show the home page after logging out
$this->redirect($this->url->link('common/home', '', 'SSL'));

Or you can define an entirely new domain address with a full URL:

//To redirect to a new URL
$this->redirect('http://www.jackwdavis.com');

And there we go, we have a chance to show whatever we want to customers logging out of your OpenCart store. As I mentioned earlier this is great for increasing customer conversions, boosting sales and customer loyalty! Let me know if you have any interesting uses for this or want anything clarifying!

Buy the vqMod file to redirect your customers to the homepage after logging in and out of OpenCart

You can download this lightweight vqMod file which redirects your customers to the homepage after logging in or out of OpenCart. Buying this mod allows me to keep on blogging and ensures that you can channel customers more effectively around the store without having to risk making any modifications to the core system. This has been tested with openCart 1.5.3.1 and works all for just £2.99!

http://destrove.com/product/redirect-opencart-customer-to-the-home-page-after-logging-in-and-out/

 

How To Set A New Font In OpenCart Using Google Fonts

In this blog post we will be looking at setting a new font for you to use in your OpenCart store. We will use Google Fonts as they have hundreds of free, open-source fonts to use which are compatible and you save a lot of time by not having to download multiple files and install them manually into the system. This is a quick, (relatively) painless process. All you need to do is add a line to the header and edit a bit of code in the Stylesheet!

Choosing Your New OpenCart Store Font

This is the hard part! Just go to the Google Web Fonts page and choose a new font that you want to display in your store. There are a few hundred at the minute and a wide range of styles and looks so there is a good chance that there is something that fits your brand!

Go to Google Fonts and choose a new typography for your OpenCart store

When you have found a font that you like just click on the “Quick Use” link in the bottom right of the box and you will see a new page with a few bits of code you will need. Keep an eye out for the blue box about halfway down with a line of code (make sure the Standard tab is selected at the top!).

Integrating Your New Font Into OpenCart

Open up your OpenCart header template file located at:

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

And find the first line that looks like:

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

Now just copy that line of code on the Google Web Fonts page directly underneath this line of code and yo have just integrated a new Google Web Font into your OpenCart store! Remember to take out the “http://” section at the start of the Google Web Font link so it just looks like <link href=”fonts.google…>. This is to avoid problems when using an SSL certificate!

Defining The New OpenCart Font In The Stylesheet

Now you just need to tell OpenCart to start using this new font for all the text on the store. Open up your theme stylesheet file which is located at:

  • catalog/view/theme/[YOUR THEME]/stylesheet/stylesheet.css

Now you need to copy the code which Google Fonts has provided for the Stylesheets, it will look like:

Now, the theme stylesheet might use several different fonts throughout the file for different sections, you will need to find all of these blocks by doing a quick Find scan (usually by using “CTRL + F” or “CMD +F”) and replace all the instances with the “font-family” line from your Google Fonts page.

And that’s it, you now have a brand new font for your OpenCart store! Make sure to clear your browser cache if the font is not displaying straight away or check in another browser! If you have any questions or want to ask me anything then leave me a comment below and I’ll see if I can help.