Altering the Core of OpenCart Using vQmod

OpenCart has been a successful framework for small-to-medium scale e-commerce sites. Although the core of OpenCart provides many features a shopping cart site needs in the front-end, it's also the third-party extensions that play a major role in its success.

Having said that, circumstances may arise in which you'll be forced to change the core of OpenCart. In this tutorial, we'll see how you can alter the core of the OpenCart using the vQmod extension.

vQmod is a popular extension that allows you to make changes without actually modifying core files. This is the excerpt from the official vQmod site.

"vQmod™" (aka Virtual Quick Mod) is an override system designed to avoid having to change core files. The concept is quite simple... Instead of making changes to the core files directly, the changes are created as xml search/replace script files. These script files are parsed during page load as each "source" core file is loaded with the "include" or "require" php functions. The source is then patched with the script file changes, and saved to a temp file. That temp file is then substituted for the original during execution. The original source file is never altered. This results in a "virtual" change to the core during execution without any actual modification to the core files.

So it's really useful in the way that it makes the upgrade process of OpenCart smooth even if you've altered the core files.

How vQmod Works

Before we go ahead and learn how to use vQmod with OpenCart, let's see how exactly vQmod works.

vQmod does all its magic using XML files. You need to create an XML file as per the conventions, and the rest of the functionality will be handled by vQmod. With that said, let's see how exactly the XML file should look.

This is a simple demonstration that shows how you could replace a certain piece of code in the file with other content.

<?xml version="1.0" encoding="UTF-8"?>
<modification>
   <id>Example of the vQmod</id>
   <version>1.0</version>
   <vqmver>2.X</vqmver>
   <author>Tuts+</author>
   <file name="targetfile.php">
       <operation info="Example of the vQmod">
           <search position="replace"><![CDATA[
           I am original content.
           ]]></search>
           <add><![CDATA[
           I am replaced content!!
           ]]></add>
       </operation>
   </file>
</modification>

As you can see, it starts with the standard <?xml> tag declaration followed by a <modification> tag. Other tags include <id>, <version>, and <author>. You should not change <vqmver> as it indicates the vQmod version.

The interesting work starts with the <file> tag. The name attribute indicates the file name that will be patched. It could be that you need multiple modifications to the same file. So that's where the <operation> tag comes into play. Each modification will be wrapped by the <operation> tag. The info attribute allows you to add some useful message.

In this particular example, the <search> tag is used for the replace operation. You can use the position attribute to tell vQmod which operation will be performed. The content which is enclosed inside the <search> tag will be replaced with the content which is enclosed within the <add> tag.

As you may have noticed, the content for search and replace is enclosed within a CDATA tag, which means that the content won't be interpreted as a markup but as character data.

Let's see the other options available for the position attribute:

before is used to insert the content before the search string.
after is used to insert the content after the search string.
top is used to insert the data at the top of the file. In this case, there's no need for the <search> tag. Even if you've used it, it'll be ignored.
bottom is used to insert the data at the bottom of the file. In this case, there's no need for the <search> tag. Even if you've used it, it'll be ignored.
In the case of ibefore, the data will be appended before the search data in the same line.
In the case of iafter, the data will be appended after the search data in the same line.

There are also a couple of optional attributes available for the <search> tag. Let's have a quick look at these.

offset is an attribute designed to work in conjunction with the position attribute. So, for example, if position is set to before and offset is set to 3, it means that the content will be inserted before the three lines of the searched data.
index: Sometimes you want to replace only couple of instances of a particular string, not all the instances of that string in the search data. Say, for example, there are five instances of the $abc variable in your search data, but you only want to replace the first two instances of $abc with $def. In this case you need to specify index to 1,2.
The regex attribute is useful if you want to perform a regular expression based search for your operations. In that case, you'll need to set regex to TRUE.

These are the quick highlights of vQmod's configuration options.

OpenCart and vQmod

Let's take a look at how we can install the vQmod OpenCart extension. We'll also review how you could use vQmod to alter the core of OpenCart.

Installation

Download and extract the OpenCart-specific vQmod library.
Upload the vqmod directory to the root of your OpenCart installation.
Please make sure the vqcache directory that is under the vqmod directory is writable by the web server.
Visit http://www.myopencartsite.com/vqmod/install and you should be presented with a success message. If that's not the case, it's likely a permissions issue.

Now you're ready to use any vQmod-specific extension, or create your own.

Usage

Now that you're armed with all the weapons, let's go through a practical example. Create an XML file vqmod_homepage.xml in the vqmod/xml directory. Copy and paste the following contents in the newly created vqmod_homepage.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<modification>
   <id>Replace the css property in heading title in Home page</id>
   <version>1.0</version>
   <vqmver>2.X</vqmver>
   <author>Tuts+</author>
   <file name="catalog/view/theme/default/template/common/home.tpl">
       <operation info="Replace the css property in heading title in Home page">
           <search position="replace"><![CDATA[
           <h1 style="display: none;">
           ]]></search>
           <add><![CDATA[
           <h1>
           ]]></add>
       </operation>
   </file>
</modification>

Now open your homepage and you should see that there is an <h1> title that is displayed. By default, it's "Your Store". All the files inside the vqmod/xml directory are detected automatically and the changes are applied accordingly. You could find the cached version of the files under vqmod/vqcache.

It's pretty straightforward if you look at the vqmod_homepage.xml file. We're using a replace operation on the home.tpl file. An important thing to note is that the path of the file is given relative to the vqmod directory.

Cherry on the Cake

At this point, you should know how to alter the core of OpenCart using vQmod XML files. In the same way, you could go ahead and create your own OpenCart custom modules which are based on vQmod.

Go ahead and download some of the vQmod-based extensions from the OpenCart site to study what you could do with this amazing little gem. There are more than 2,500 extensions which are based on vQmod.

Apart from this, if you feel bit lazy creating the vQmod XML file, then there is an OpenCart extension vQmod Generator, Editor and Log Viewer available which provides you an administrative interface for your vQmod files.

Conclusion

In this tutorial you've learned what the vQmod library is all about and how it can be used with OpenCart. Go ahead and do experiments, it'll be a fun!

And yes, don't forget to share your thoughts using the comment feed below.

HIGHLIGHTS OF THE DAY