OpenCart CDN Integration

This tutorial shows how to complete an OpenCart CDN integration with KeyCDN.

  1. Create a pull zone or a push zone before you start with the OpenCart CDN integration.
  2. Download the KeyCDN Integration module (zip file) from the official module web page.
  3. Upload the two folders “admin” and “system” from the KeyCDN Integration module to the root path of your website.
  4. Login to the admin panel of your OpenCart store.
  5. Navigate to the admin section and edit your usergroup to grant permissions on module/cdn (System -> Users -> User Groups).
    KeyCDN OpenCart permissions

    Grant permissions

    grant keycdn permissions

    Grant permissions for admins

  6. Open the modules list on Extensions → Modules and click the button “install” on the right side to install the module.
    install keycdn module

    Install KeyCDN Integration module

  7. When the installation is done, go to the modules overview and click on the “edit” button on the right side of modules list in the KeyCDN Integration module row.
  8. Enable the module by selecting the “Enabled” option on the drop-down list.
  9. Enter your zone URL that you get from the KeyCDN dashboard (e.g yourdomain-ab12.kxcdn.com) or the CNAME (e.g. static.mycompany.com).
    KeyCDN Integration

    KeyCDN integration with OpenCart

  10. Check the file types that you would like to deliver via the CDN and click on “Save” button.
  11. Optionally: If you are getting error messages like this or similar: “Notice: Use of undefined constant HTTP_IMAGE – assumed ‘HTTP_IMAGE’ in /path/to/your/webroot/system/library/response.php on line 79″, add the appropriate line to your config.php in the web root and admin:
    // HTTP 
    define('HTTP_SERVER', 'http://yourdomain.com/'); 
    define('HTTP_IMAGE', 'http://yourdomain.com/image/'); 
    // HTTPS 
    define('HTTPS_SERVER', 'http://yourdomain.com/opencart/');

    Once completed. Always check the new URL in the HTML if all the URLs have been rewritten correctly.

OpenCart 2.x Integration

For OpenCart 2.x users, there are a couple of modified / additional steps that need to be taken to integrate with a CDN.

  1. Verify that your OpenCart installation uses one of the following versions: 2.0.0.0, 2.0.1.0, 2.0.1.1, 2.0.2.0, 2.0.3.1, 2.1.0.1, 2.1.0.2, 2.2.0.0
  2. Download and install the KeyCDN Opencart 2.x extension available in the Opencart extension library.
  3. Modify the root config.php file by adding ‘HTTP_IMAGE’ or ‘HTTPS_IMAGE’ as follows :
    // HTTP
    define('HTTP_SERVER', 'http://yourshop.com/');
    define('HTTP_IMAGE', 'http://yourshop.com/image/');
    
    // HTTPS
    define('HTTPS_SERVER', 'http://yourshop.com/');
    define('HTTPS_IMAGE', 'http://yourshop.com/image/');
  4. Do the same for the admin/config.php file as follows:
    // HTTP
    define('HTTP_SERVER', 'http://yourshop.com/admin/');
    define('HTTP_IMAGE', 'http://yourshop.com/image/');
    
    // HTTPS
    define('HTTPS_SERVER', 'http://yourshop.com/admin');
    define('HTTPS_IMAGE', 'http://yourshop.com/image/');
  5. Upload this VqMod file into the VqMod/XML/ subdirectory.
  6. Clean out all cached VqMod Content, and clear out OcMod System + Cache Files.
  7. You can now navigate to the admin section and edit your usergroup to grant permissions for this module. opencart usergroups
  8. Once complete, go to your modules overview page and click the edit button for the OpenCart 2.x extension. opencart edit extension
  9. Enter the Zone URL or Zonealias from KeyCDN and select the file types you want to have delivered via the CDN and click Save. opencart keycdn configuration
  10. That’s it, now double check that your assets are now being delivered via the CDN by inspecting your page source.

OpenCart 3.x Integration

If you’re running OpenCart version 3.x follow the CDN integration guide below:

  1. Create a pull zone before you start with the OpenCart CDN integration.
  2. Install the VqMod plugin from the OpenCart marketplace and follow the installation instructions for OpenCart 3.x
  3. Upload the following XML file into the system/ folder. Make sure the filename ends with .vqmod.xml – e.g. cdn.vqmod.xml.
    <modification>
        <id><![CDATA[OpenCart CDN Integration]]></id>
        <version><![CDATA[2.4+]]></version>
        <vqmver><![CDATA[1.0.0]]></vqmver>
        <author><![CDATA[http://www.keycdn.com]]></author>
        <file name="system/library/response.php">
            <operation>
                <search position="replace"><![CDATA[echo $output;]]></search>
                <add><![CDATA[echo $this->cdn_output($output);]]></add>
            </operation>
            <operation>
                <search position="before"><![CDATA[public function output() {]]></search>
                <add><![CDATA[
    function cdn_output($result) {
        $cdn_domain = 'opencart-7bb7.kxcdn.com';
        $http_scheme = (isset($_SERVER['HTTPS']) && (($_SERVER['HTTPS'] == 'on') || ($_SERVER['HTTPS'] == '1'))) ? 'https' : 'http';
        $cdn_domain = $http_scheme .'://'. $cdn_domain;
    
        $result = str_replace($http_scheme . "://" . $_SERVER['HTTP_HOST'] . '/image/', $cdn_domain . '/image/', $result);
        $result = str_replace('src="catalog/view/javascript/', 'src="' . $cdn_domain . '/catalog/view/javascript/', $result);
        $result = str_replace('href="catalog/view/javascript/', 'href="' . $cdn_domain . '/catalog/view/javascript/', $result);
        $result = str_replace('src="' . $http_scheme . "://" . $_SERVER['HTTP_HOST'] . '/catalog/view/javascript/', 'src="' . $cdn_domain . '/catalog/view/javascript/', $result);
        $result = str_replace('src="catalog/view/theme/journal2/image/', 'src="' . $cdn_domain . '/catalog/view/theme/journal2/image/', $result);
        $result = str_replace('src="catalog/view/theme/default/image/', 'src="' . $cdn_domain . '/catalog/view/theme/default/image/', $result);
        $result = str_replace('href="catalog/view/theme/journal2/stylesheet/', 'href="' . $cdn_domain . '/catalog/view/theme/journal2/stylesheet/', $result);
        $result = str_replace('href="catalog/view/theme/default/stylesheet/', 'href="' . $cdn_domain . '/catalog/view/theme/default/stylesheet/', $result);
    
        return $result;
    }
    ]]></add>
            </operation>
        </file>
    </modification>
  4. Ensure you substitute opencart-7bb7.kxcdn.com with your CDN zone URL. If you want to use HTTPS only for your zone, you can set $cdn_domain as follows:
    $cdn_domain = 'https://'. $cdn_domain;

    Depending on your theme you might have to add additional rewrite rules.

  5. In the admin panel, go to Extensions > Modifications and click the refresh button in the upper right corner.opencart refresh
  6. That’s it, now double check that your assets are now being delivered via the CDN by inspecting your page source.

9 Comments

    1. Cody

      We have not yet tested the latest version of Opencart however I would recommend trying the process outlined in Opencart 2.x.

    1. Cody Arsenault

      The integration process should be the same regardless of which theme you use. Have you followed the steps to our OpenCart 3.x integration?

Leave A Comment?