OpenCart - How to modify the admin panel using OCMOD

This post is about how to use OCMOD to add a new menu item under the Extension section of the navigation bar in the admin panel of OpenCart. Unlike VqMOD which requires manual installation in OperCart 3 and OpenCart 2, OCMOS is installed by default in OperCart 3.

The version of the OpenCart used for this post is 3.0.3.2.

Before making the modification, there are 5 items under the Extension section:

- Marketplace
- Installer
- Extensions
- Modifications
- Events

After making the modification, a new item called "Modules" will be inserted between Extensions and Modifications.

- Marketplace
- Installer
- Extensions
- Modules
- Modifications
- Events

How OCMOD works

Ref.: https://github.com/opencart/opencart/wiki/Modification-System

Installation

OCMOD files can be uploaded via the OpenCart admin under Extensions -> Installer.

File Name & Structure

The OCMOD file to be uploaded must follow the "*.ocmod.zip" naming convention. This is to reduce the chance of none OCMOD files from being uploaded by accident.

Below is the sample file structure of an OCMOD compressed files.

upload
install.xml

upload
All files under this directory will be uploaded to the to directory of your OpenCart installation.

install.xml
The XML modification file.

Below is a sample install.xml file.

<?xml version="1.0" encoding="utf-8"?>
<modification>
    <name>Modification Default</name>
    <version>1.0</version>
    <author>OpenCart Ltd</author>
    <link>http://www.opencart.com</link>
    <file path="catalog/controller/common/home.php">
        <operation>
            <search><![CDATA[
            $data['column_left'] = $this->load->controller('common/column_left');
            ]]></search>
            <add position="replace"><![CDATA[
            test123
            ]]></add>
        </operation>
    </file>  
</modification>

Below is a bare bone version of the "install.xml" file. Note that the <code>*******</code> section is missing from the example given in the modification system documentation.

<?xml version="1.0" encoding="utf-8"?>
<modification>
    <name>*******</name>
    <version>*******</version>
    <author>*******</author>
    <link>*******</link>
    <code>*******</code>
    <description>*******</description>
    <file path="*******">
        <operation>
            <search><![CDATA[ ******* ]]></search>
            <add position="*******"><![CDATA[*******]]></add>
        </operation>
    </file>
</modification>

Creating the xml file that performs the modification

1. Create the content of install.xml as shown below.

<?xml version="1.0" encoding="utf-8"?>
<modification>
    <name>Show Module Link At Left Menu</name>
    <version>3.0</version>
    <author>Rupak Nepali</author>
    <link>https://webocreation.com</link>
    <code>webocreation_show_module_link_at_left_menu</code>
    <description>Show module link at left menu</description>
    <file path="admin/controller/common/column_left.php">
        <operation>
            <search><![CDATA[ if ($this->user->hasPermission('access', 'marketplace/modification')) { ]]></search>
            <add position="after"><![CDATA[
                $marketplace[] = array(
                    'name'     => "Modules",
                    'href'     => $this->url->link('marketplace/extension&type=module', 'user_token=' . $this->session->data['user_token'], true),
                    'children' => array()
                );
            ]]></add>
        </operation>
    </file>
</modification>

2. Zip "install.xml" and save the result as "oc_test.ocmod.zip" or any other name that follows the naming convention of  "*.ocmod.zip".

Note,
Since we don't have any file that needs to be uploaded with the modification, there is no need to create an empty "upload" folder and zip it into the "oc_test.ocmod.zip" file.

Install and activate the extension

1. In Extensions -> Installer, click the "Upload" button to upload the "oc_test.ocmod.zip" extension.

The upload is completed when you see the message "Success: You have modified extensions!".

2. In Extensions -> Modifications, select the Extension to be applied then click the Refresh button on the upper right hand corner.

 A new item called "Modules" is now inserted between Extensions and Modifications.

Check the result

In the screenshot below, the code on the left is the backup of the original "admin/controller/common/column_left.php" after the OpenCart is installed on the server. The code on the right is the "admin/controller/common/column_left.php" running on the server after the OCMOD is applied.

It's clear that changes applied through OCMOD doesn't alter the core OpenCart code installed on the server.

References:

Opencart 3 OCMOD tutorial
https://www.youtube.com/watch?v=NCtiqTyEoUA&t=73s

Opencart 3 OCMOD coding tutorial
https://webocreation.com/blog/opencart-3-ocmod-coding-tutorial/

Opencart OCMOD documentation
https://webocreation.com/blog/ocmod-documentation/

Building your first Opencart 3 extension
https://medium.com/@justinasjbeinorius/building-your-first-opencart-3-extension-d766df28821b

Modification System
https://github.com/opencart/opencart/wiki/Modification-System

Opencart Modification System
https://webkul.com/blog/opencart-modification-syste