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
<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
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
beforeis used to insert the content before the search string.
afteris used to insert the content after the search string.
topis 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.
bottomis 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.
offsetis an attribute designed to work in conjunction with the
positionattribute. So, for example, if
positionis set to
offsetis 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
regexattribute is useful if you want to perform a regular expression based search for your operations. In that case, you'll need to set
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.
- Download and extract the OpenCart-specific vQmod library.
- Upload the
vqmoddirectory to the root of your OpenCart installation.
- Please make sure the
vqcachedirectory that is under the
vqmoddirectory 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.
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
<?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
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
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.
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.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post