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.
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.
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.
Once it is successful it shows a popup like the below:
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.
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.
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.
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.
Uncaught ReferenceError: chain is not defined
at HTMLSelectElement. (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. (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.
Then, ask to change the Storage path also to a more secure path
After that, it asks to “Rename admin directory”
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”.
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 OKWarning: file(/Applications/MAMP/htdocs/opencart/supersec/config.php): Failed to open stream: No such file or directory in /Applications/MAMP/htdocs/opencart/admin/controller/common/security.php on line 292Warning: foreach() argument must be of type array|object, bool given in /Applications/MAMP/htdocs/opencart/admin/controller/common/security.php on line 294{"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.
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.
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.
