OpenCart CDN integration

Introduction

An OpenCart CDN integration delivers product images, theme files, CSS, and JavaScript through edge servers closer to shoppers. This can reduce latency for static assets and lower the traffic handled directly by the store's origin server.

This guide shows how to set up a CDN with CDNsun CDN for OpenCart 3 v1.0.1 on OpenCart 3.0.5.0. The extension uses OpenCart's native Events system and leaves core files unchanged.

Before you start

  • This tutorial shows how to integrate a CDN service into a website. In this particular demo example we will use:
    • barsoom-cdn.cdnsun.org as the CDN Service Domain, and
    • https://barsoom.cdnsun.org as the website URL (i.e. barsoom.cdnsun.org is the Origin Domain).
  • Please visit the Services/How-To section to obtain your CDN Service Domain.
  • Before you take any steps please back up your files and database.
  • To integrate a CDN service on https:// website the CDN service must have SSL enabled.
  • If your website embeds custom fonts then please first enable CORS for them.
  • Before you take any steps please make sure that your CDN Service Domain is ready-to-use here.

Create CDN Static service

Please refer to Creating a CDN Static service for more details.

How to enable CDN in OpenCart

  1. Open CDNsun CDN for OpenCart 3 in the OpenCart Marketplace. Select the extension, sign in to OpenCart if prompted, and download the package for OpenCart 3.x. The downloaded installation file is cdnsun-cdn-opencart-3.ocmod.zip. The source code and issue tracker are available on GitHub.
  2. Log in to the OpenCart administration panel and open Extensions > Installer. Click Upload, select cdnsun-cdn-opencart-3.ocmod.zip, and wait for the success message. The package then appears in Install History.
    OpenCart Extension Installer after uploading CDNsun CDN for OpenCart 3
  3. Open Extensions > Extensions and select Modules as the extension type. Find CDNsun CDN and click its green Install button. OpenCart registers the native event that the extension uses to rewrite storefront static asset URLs.
    OpenCart Modules list after installing CDNsun CDN
  4. Click the blue Edit button for CDNsun CDN. Enter the CDN Service Domain as a hostname without a scheme or trailing slash, select Enabled, and click Save. The screenshot uses barsoom-cdn.cdnsun.org in the CDN Service Domain field.
    CDNsun CDN enabled with a CDN Service Domain in OpenCart
  5. Open the public site and confirm that the frontend remains styled normally and static assets load from the CDN Service Domain.
    Barsoom OpenCart storefront using the CDN Service Domain

Verify & Troubleshoot

  • View HTML source code of your web pages to verify that you are using CDN, you should see source attribute of your images, CSS, JavaScript, etc. beginning with your CDN Service Domain.
    Frontend HTML proof that static assets are loaded from the CDN Service Domain
  • Don't see your CDN Service Domain in the source code of your web pages? If your website is using any cache plug-in/mechanism then you might want to clear/flush its cache.
  • Having trouble with custom fonts? Please refer to Using custom fonts with CDN - setting CORS for more details.
  • Still having trouble? Check your CDN URLs using our content check tool or please refer to Debugging a CDN service for more hints.

Contact Us

__    __   _    _    _____    
\ \\ / // | || | || |  __ \\  
 \ \/ //  | || | || | |  \ || 
  \  //   | \\_/ || | |__/ || 
   \//     \____//  |_____//  
    `       `---`    -----`