Opencart 4 demo site, new features, admin changes, frontend changes, and code

We are working to get the details of the Opencart 4, set up a demo for Opencart 4, and analyze its features and functionalities both in the admin section and the frontend section. Some of the addition is – PHP 8.1+ Compatible – a New event-based extension system – Startup page – CRON job page – GDPR – Product variants. You can now choose to use create a new product variant based on a master product and link the stock quantities – Cookie accepts the policy – Admin notification system – OpenCart can now send you updates and news information directly to your OpenCart admin – Autoloader class – Telephone field now optional – Additional admin security, renaming admin folder, install directory, moving storage folder.

Work on progress content.

Opencart 4 Demo

You can check the Opencart 4 Demo by clicking this link. You can use the demo as a username and demo as a password to look into the administration section. Click here for the admin section.

Code size:

Opencart 4.0.0.0 – 35 MB – the zip size is doubled 🙂

Opencart 3.0.3.8 – 17.2 MB

For installation of Opencart 4 

Following PHP settings are required:

PHP version 8.0+, Register Globals: Off, Magic Quotes GPC: Off, File Uploads: On, Session Auto Start: Off

Following PHP extensions are required:

Database, GD, cURL, OpenSSL, ZLIB, ZIP

The following two files need to be writable while installation

Config.php and admin/config.php

| is used in the URL to represent the methods. Like

?route=design/banner|form&user_token=

Check the |form, now pipe | is used before function, previously it used to be / for all

Installation process:

Same as 3, only noticeable design changes, other looks similar. Three DB drivers are supported on the installation: MySQLi, mPDO, and PostgreSQL.

Opencart 4 DB drivers

Design changes on the Pages

Home Page and Category Page

The structure has not changed on the home page. The height of the product looks adjustable as per content. The brand or manufacturer sliders are sliding to the next frame rather than each brand.

On the category page, design-wise only the Product Compare button is changed.

Product compare

When we clicked the Add to Cart icon of products on the category page, it is redirected to JSON data, so looks like some improvement or the next version is coming soon. Or, maybe we are missing some configuration on our local environment. We will do some research and inform you guys.

Add to cart issues

Once it is successful it shows a popup like the below:

success message

Product Page

Wishlist and Compare buttons are moved in the middle after the discount section

On selecting/choosing the options and clicking the “Add to Cart” button, you will see a popup of a success message, it is so smooth.
Product page add to cart

The social shares (like, tweets, etc) are removed.

Add to cart button changes

Add to cart button word is removed from each product grid and when clicked on the add to cart icon it popups the success message, previously it used to show at the top.

Cart page

Some design changes and the main change is Totals are now showing just below the Shopping cart, on previous one it used to show near the checkout button.

shopping cart page opencart 4

Checkout Page

The big change is on the Checkout Page, now it is one-page checkout, this is the most awaited feature as we used to buy modules for in the previous version to do the one-page checkout. So, did a great job by the Opencart team.

Checkout page Opencart 4

But looks like needs to improve a lot to make it fully functional. Whenever we tried to select the Region in the checkout steps, it is showing the following errors.

Checkout issues chain code
Uncaught ReferenceError: chain is not defined
    at HTMLSelectElement.<anonymous> (index.php?route=checkout/checkout&language=en-gb:599:5)
    at HTMLSelectElement.dispatch (jquery-3.6.0.min.js:2:43064)
    at HTMLSelectElement.v.handle (jquery-3.6.0.min.js:2:41048)
    at Object.trigger (jquery-3.6.0.min.js:2:71515)
    at HTMLSelectElement.<anonymous> (jquery-3.6.0.min.js:2:72110)
    at Function.each (jquery-3.6.0.min.js:2:3003)
    at S.fn.init.each (jquery-3.6.0.min.js:2:1481)
    at S.fn.init.trigger (jquery-3.6.0.min.js:2:72086)
    at index.php?route=checkout/checkout&language=en-gb:630:2

If we click the “Continue” button in the middle of the process also it is redirecting to the home page, so looks like there are lots of work to be done here.

Admin Section

We can say some improvements on security for the normal users also. It identifies that there is an install directory and asks to delete it.

opencart 4 security improvement

Then, ask to change the Storage path also to a more secure path

opencart storage change

After that, it asks to “Rename admin directory”

Admin Folder rename

We tried multiple ways to rename it but we are not able to rename it. While checking the folder, we saw the renamed folder with only config.php, so maybe this improvement is also coming. Here we tried to rename it to “SecurePage”.

Admin folder rename

Checking the console log, it is showing a Syntax error like below, so some improvements will be coming soon.

SyntaxError: Unexpected token < in JSON at position 0 OK<b>Warning</b>: file(/Applications/MAMP/htdocs/opencart/supersec/config.php): Failed to open stream: No such file or directory in <b>/Applications/MAMP/htdocs/opencart/admin/controller/common/security.php</b> on line <b>292</b><b>Warning</b>: foreach() argument must be of type array|object, bool given in <b>/Applications/MAMP/htdocs/opencart/admin/controller/common/security.php</b> on line <b>294</b>{“redirect”:”http:\/\/opencart.loc\/\/supersec\/index.php?route=common\/security|delete&user_token=334b0bdb74d0cf8f4badafe6fa32555a”}

We are not able to rename the folder for now, as we like to explore more so we cancel it and keep on checking the left menu items.

Categories:

Now SEO URL is a required field and it checks whether is unique or not, others are just some design changes

Products

You can now Add Variant

Please note because this is a variant product you must override the master product data. Otherwise, the data will get replaced with the master product data when saved. It did one better than the other carts. The other carts only produce variants with options. With the Opencart version, you can change everything including name, description, etc.

Subscription Plan

 The Subscription Plan is added as a Recurring Profile

Settings

  • Currency Rate Engine is added, so we believe it will remove the hassles to keep on changing the exchange rate of the currencies, very very helpful for multi-currencies shop/stores
  • Timezone setting is also added, now we can set the timezone directly from the admin

CKeditor changes

Now you can add the images that you uploaded to the Opencart. Click the Opencart icon and add images that you uploaded in the Opencart admin.

ck editor changes

Corn Jobs

The corn Job section is added in the admin.

Code folder structure changed

The folder structure is changed. The extensions folder is at the root level.

The extension of both the admin and catalog folder will remain in the extension folder.

Folder Structure change in Opencart 4

Code and framework used and changed

It started using Bootstrap 5, the most popular framework for building responsive, mobile-first sites, a new event-based extension system, a CRON job page, Product variants, Cookie accept the policy, an admin notification system, a reports system, a system to download and add core extensions directly to the extension pages and many more.

Likewise using the latest jQuery version 3.6+.

Using Font Awesome Free 5.15.4

Looking at common.js

  • Chain ajax calls
  • Autocomplete
  • Upload
  • Forms submission code
  • Cookies policy
  • Terms and conditions agreed on code
  • Product grid – list or grid view 
  • Menu dropdown
  • Search input in the header
  • Currency change
  • Tooltip functionalities
  • Get URL parameters – did not see it is used anywhere but looks like a good start

For now, better don’t install Opencart 4.0 for your production website better wait for a stable release. There are a lot of changes in the module files and folder structures so if you are using a lot of external modules then wait for those plugin releases as well, as Opencart 3 or 2 version module does not support Opencart 4 as Opencart 4 doesn’t use OCMOD any more.

These are just our first glance of the Opencart 4, we are working on improving this and creating better developer and user-focused content for Opencart 4, so keep in touch with us on our Twitter account @rupaknpl and subscribe to our youtube channel Opencart tutorials. Similarly, keep on visiting my personal blog where you will find lots of free modules and in our next post we will come up with code changes in Opencart 4.

Previous articleEmail is not working in Opencart – ways to solve
Next articleBest Payment Gateways for eCommerce & Dropshipping in 2022

1 COMMENT

  1. Hi.
    Thanks for the nice tutorial.
    I have a problem with seo. Seo addresses do not work in version 4. Not even in the your demo.
    Not even Opencart 4 e-shop which I have a test.
    Url is not generated for the product.
    Not working when manually entered into the browser also.
    All setings is on.
    Is it a general error in Opencart4?
    Can you advise me?
    Thanks in advance.
    Aleš

LEAVE A REPLY

Please enter your comment!
Please enter your name here