As our world transforms into a digital space, application security has become the most crucial factor that businesses and individuals are concerned about. Data breaches and cyberattacks have increased, and hackers are always ready to exploit the vulnerabilities of technology; it is essential to ensure that applications are developed, designed, and deployed securely.
Developers now have to build applications that work efficiently and ensure they are secure from threats and attacks. This includes protecting applications from malicious activities by employing a range of processes, tools, and techniques such as penetration testing, code analysis, and secure coding practices. The primary aim of AppSec is to protect applications and data from threats and minimize the risk of security vulnerabilities.
The world of application security, or AppSec, is evolving quickly, and developers need tools to upkeep this pace. This is where GitHub comes in. GitHub is a web-based software development platform that manages code repositories and provides developers with various features and tools, such as GitHub code owners and code automation, to build robust and secure applications.
This article will explore the role of GitHub in empowering developers and creating a stronger AppSec future.
Why is GitHub Essential for AppSec?
GitHub has become an essential tool for developers, providing them with a range of valuable features, resources, and tools to build secure applications. It allows developers to manage their repositories from a central point. They can easily collaborate on code, track changes, and control code versions. This makes it easier for teams to work efficiently on complex group projects.
Moreover, it provides one of the best ways for developers to build secure web applications. For example, developers can use its built-in tools like code review, security templates, automation, and third-party tool integration to simplify the process. This also helps them identify vulnerabilities in their code, keep their dependencies up to date and put up adequate security measures in place.
GitHub offers several benefits for AppSec, some of them are:
Easy collaboration on complex projects.
Robust security features to protect applications from attacks.
Increased speed and efficiency by process automation.
Access to a large community of developers and security experts to stay up-to-date on the latest AppSec trends.
A wealth of knowledge and resources helping developers in building secure applications.
How Is GitHub Empowering Developers in Building a Stronger Application Security?
GitHub plays a significant role in building a stronger AppSec future. It is home to over 90 million developers and supports developers at every stage of their journey. From learning how to code to fulfilling the needs of a startup company, GitHub is dedicated to everyone. Its crowd-sourced security intelligence consisting of expert developers, security researchers, and academics from all over the world, contributes to increasing awareness and understanding.
This allows developers to have the latest security intelligence at hand. An article on GitHub showed that by updating 50% more vulnerable packages than in 2021, developers secured more than 18 million GitHub projects in 2022. GitHub is the best security solution due to its vast community and commitment to enhancing developer productivity. It has become an essential tool for developers as it possesses over 56 million repositories and hundreds of features, making it a key player in AppSec.
One fundamental way GitHub helps build secure applications is its code review process. With code review, developers can have other developers review their code to identify errors or potential vulnerabilities. GitHub provides various tools to support code review, including pull requests and code comments. These tools make it easy for developers to collaborate on code and ensure it is secure before deployment.
Another essential feature of GitHub when it comes to AppSec is the integration with a range of efficient security tools. In addition to its own security features, it lets you integrate third-party tools such as CodeQL and Dependabot for increased security checks. These third-party security tools help analyze the code and identify security issues in the applications.
Moreover, GitHub offers developers several security-related tools to aid in the development of highly secure apps. One of these features is GitHub Actions, which enables developers to accelerate the development of secure applications by automating processes. Moreover, GitHub gives developers access to many security templates, such as the Security Policy template, enabling them to quickly build safe and secure applications.
The Impact of GitHub on the Future of AppSec:
GitHub is shaping the future of AppSec by helping developers in creating secure applications quickly. It democratizes security by providing developers with a vast range of features, tools, educational resources, and a community of experts. This helps to break down the silos that have traditionally existed between development and security teams, empowering developers to take a more active role in AppSec.
It also promotes a culture of security by fostering a community of experts passionate about AppSec. It not only makes developers aware of the best practices of AppSec but also helps them understand the importance of application security.
As the GitHub platform continues to evolve and expand its security capabilities, it will likely play an even more significant role in shaping the future of AppSec.
This Opencart user manual is for getting started with the Opencart online eCommerce website for 2022 for beginners, we are listing the best videos, blog posts, examples guides, tips, and tricks to run your Opencart shop successfully. We are showing both the frontend and backend management of Opencart.
In this opencart 3 user manual, we are showing how we can setup up an online eCommerce store with Opencart 3 for 2022. This is list of topics covering for the Opencart user manual
Get a domain name and hosting – We use onlydomains.com as we can get a domain name at $8 which is the cheapest that we found and for hosting you can use the google cloud which gives $300 for free or use another hosting as per your choice.
In the above tutorial, we will show how to install Opencart and set up the custom URL with the virtual host.
Login into Opencart Administration
Go to http://YOURURL/admin, enter your username and password and you will be in the Administration section.
Admin user profile change in Opencart
In default Opencart installation the default user’s First Name and Last Name is John Doe so to change it just click in the John Doe on the top right corner and click the “Your Profile” then you can change the User details, we will show you how to change by going on System Users later.
Change as per your username. first name, last name, email, image, and password.
System
In the System section, we manage and enable global or system settings of the Opencart eCommerce store like users, localization, languages, statuses, length, weight classes, and many more.
Settings
All settings details of the Opencart are in the link below, which shows local settings, options, mail settings, and server settings.
In localization, we manage the local values of the stores like store locations, languages, currencies, stock statuses, order statuses, returns, countries, zones, geo sones, taxes, length classes, and weight classes.
Opencart supports multi-language, so the languages section is to manages the languages for the store, by default it has the English language. We can upload a new language, add a new language, set a different default language than English, and create a new custom language pack for Opencart. Check the following two links for languages:
Go to admin >> System >> Localization >> Currencies where you will see the currencies available for use in the storefront. In the store by default is the US dollar. There are Euro, Pound, and US dollars. Go to the following post to learn all about the currencies in Opencart.
In Opencart 3 we can manage the stock statuses. For that go to admin >> System >> Localization >> Stock Statuses then you can enter the Stock Status Name. For detail go to the following post for stock statuses:
In Opencart 3 we can manage the order statuses. For that go to admin >> System >> Localization >> Order Statuses then click “Add New” and you can enter the Order Status Name. For detail go to the blog post:
Returns (Return Statuses, Return Actions, and Return Reasons)
Opencart 3 has return functionalities by default. In this Opencart user manual, we are showing you how returns are managed and handled in Opencart 3 by the site administrator and customer. Read the following post for detail:
Length Classes and Weight Classes management in Opencart
Opencart user manual where we are showing how we can manage length classes and weight classes. These lengths and weights are used by Shipping extensions like FedEx, UPS, etc, and will be used by Shipping API to calculate the shipping cost.
We can add manufacturers and brands in Opencart and assign them to products and brands to have their own pages. The video shows to create the brands or manufacturers in Opencart:
Edit Contact us page and add a Google map in the contact us page
All the contact us page contents are handled from the settings, so if you have read the above settings posts then you can see how to change the contact addresses, phone numbers, and other stores. In the video below we show we can add google maps to the contact us page.
If you are selling products where you can distribute the prices in installments then the recurring profiles are ways to set up, likewise we products with a subscription. See the video below, where it is described how to set up the recurring profiles.
In this Opencart tutorial, you will learn how to add HTML in Opencart, similarly how to add google analytics, google tag manager, Adroll, Facebook pixels, MailChimp conversion code, google ads conversion in success page only, and other third-party JavaScript code in the Opencart, likewise our best way to manage the JavaScript code through google tag manager and test and preview in the google tag manager.
We hope these lists of videos and blog posts will help you to start the Opencart shop and go deeper into it. Please don’t forget to post your questions or comments or errors so that we can help you. You can follow us at our Twitter account @rupaknpl. Subscribe to our YouTube channel for Opencart tutorials, and click to see all Opencart user manuals.
Opencart API documentation for the developer: supports output formats that return a JSON response. Output formats are defined by specifying the output request parameter. With opencart API we can perform CRUD functionalities.
Opencart 4 API documentation
In Opencart 4 there are some changes on the API endpoints, here is the login API endpoint /index.php?route=api/account/login:
Here is the POSTMAN testing:
Here are the API username and API key in the Opencart admin.
IP Addresses to allow to access the Opencart API endpoints:
If you are not using the master branch and using the Opencart 4.0.1.1 then your endpoints may not work, and looking at the code there is a session of api_id that is checked and that session is not set. So there are some issues, so to make it work, we uncomment the following lines of code at catalog/controller/startup/api.php
<?php
namespace Opencart\Catalog\Controller\Startup;
class Api extends \Opencart\System\Engine\Controller {
public function index(): object|null {
if (isset($this->request->get['route'])) {
$route = (string)$this->request->get['route'];
} else {
$route = '';
}
// if (substr($route, 0, 4) == 'api/' && $route !== 'api/account/login' && !isset($this->session->data['api_id'])) {
// return new \Opencart\System\Engine\Action('error/permission');
// }
return null;
}
}
Example of Opencart API call
Here is an example of an Opencart API call
<?php
$url = 'https://www.yourdomain.com/index.php?route=api/account/login&language=en-gb&store_id=0';
$request_data = [
'username' => 'Default',
'key' => 'YOURSECRETKEY'
];
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_HEADER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 30);
curl_setopt($curl, CURLOPT_TIMEOUT, 30);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $request_data);
$response = curl_exec($curl);
$status = curl_getinfo($curl, CURLINFO_HTTP_CODE);
curl_close($curl);
if ($status == 200) {
$api_token = json_decode($response, true);
if (isset($api_token['api_token'])) {
// You can now store the session cookie as a var in the your current session or some of persistent storage
$session_id = $api_token['api_token'];
}
}
$url = 'http://www.yourdomain.com/opencart-master/upload/index.php?route=api/sale/order.load&language=en-gb&store_id=0&order_id=1';
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_HEADER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 30);
curl_setopt($curl, CURLOPT_TIMEOUT, 30);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $request_data);
// Add the session cookie so we don't have to login again.
curl_setopt($curl, CURLOPT_COOKIE, 'OCSESSID=' . $session_id);
$response = curl_exec($curl);
curl_close($curl);
Opencart 3 API documentation
When we see API at Admin >> System >> Users >> API, then we are interested to explore it. We checked the catalog folder and found the image below:
All these tests are made in demo.webocreation.com. Checking the code we have to log in first. So we type the following URL but it gives me the following error.
As part of the Opencart 4 theme development tutorial, We already showed you how to install Opencart 4 theme and to create Opencart 4 custom theme admin section, in today’s tutorial, we are showing you how to develop the frontend section of the Opencart 4 custom theme. You can download the custom Opencart 4 theme here.
The final files and folders structure of the Opencart 4 custom theme looks like below:
When we developed the backend code, we have added the Startup code like below:
Taking that into consideration, you need to create the following file at extension >> webocreation4 >> catalog >> controller >> startup >> theme_standard.php, once you create the file, you can use the following lines of code.
<?php
namespace Opencart\Catalog\Controller\Extension\webocreation4\Startup;
class ThemeStandard extends \Opencart\System\Engine\Controller
{
public function index(): void
{
if ($this->config->get('theme_theme_standard_status')) {
$this->event->register('view/*/before', new \Opencart\System\Engine\Action('extension/webocreation4/startup/theme_standard|event'));
}
}
public function event(string &$route, array &$args, mixed &$output): void
{
$override = [
'common/header',
];
if (in_array($route, $override)) {
$route = 'extension/webocreation4/' . $route;
}
}
}
This overrides the header of the code, now, let’s create the header.twig at the extension folder, extension >> webocreation4 >> catalog >> view >> template >> common >> header.twig. Add the following lines of code:
There are events to change the stylesheet but for now, we directly add the code like above. Now let’s create the stylesheet.css, extension >> webocreation4 >> catalog >> view >> stylesheet >>stylesheet.css. Paste the following code:
With these codes, your custom Opencart 4 theme is ready, now you can add your CSS as per your requirement and make the website unique. Once it is active, it looks like the below, you can see the demo of the Opencart 4 custom theme
In this way, we complete a simple OpenCart 4 theme development tutorial, you can develop a new custom Opencart 4 theme and change the style, and show it on the front of Opencart 4. Hope you liked this article, please subscribe to our YouTube Channel for Opencart video tutorials. You can also find us on Webocreation Twitter and Webocreation Facebook. Please let us know if you have any questions or concerns.
In this hosting tutorial, we are looking into the AWS Lightsail LAMP stack, where we will host Opencart in AWS, and found out that there is no easy way to install it like WordPress or Magento even in AWS Lightsail, hope the Opencart package will be added soon, but for now, we need to use LAMP stack to host the Opencart in the AWS Lightsail. AWS Lightsail LAMP stack includes the latest versions of PHP 7+, Apache, and MySQL with phpMyAdmin and pre-configured components and PHP modules include FastCGI, ModSecurity, SQLite, Varnish, ImageMagick, xDebug, Xcache, OpenLDAP, Memcache, OAuth, PEAR, PECL, APC, GD, and cURL. All of the PHP modules and components needed for Opencart hosting are available in the LAMP stack of AWS Lightsail.
Let’s get started with AWS LightSail
Go to https://aws.amazon.com/lightsail, and create an account or log in to your AWS account. The main AWS Lightsail dashboard page is separate from the main AWS dashboard. Or you can navigate from All services >> Compute >> Lightsail. It may look similar to the below screenshot.
Create a LAMP Instance for Opencart hosting
In the Lightsail dashboard click the “Create Instance” button. You will see a page where you can select instance details:
Instance Location and Availability Zone: The location is auto-selected as per your geo-location but you can change it as per your hosting need. Mostly we used Virginia, Zone A (us-east-1) as our website visitors are mostly from the USA, it is upon your requirement and decides which location and Availability zone to choose.
Platform instance image and Stack blueprint: We need linux/unix for the Opencart hosting so in “Select a platform” select the Linux/Unix. Then, in “Select a blueprint” select the LAMP (PHP 7)
SSH key pair and Automatic snapshots: Now go more below and you will see “Add launch script”, for now, we are not adding any script there. We will run scripts one by one in a command shell. If your account is new then create an SSH key pair else by default the key is selected. If you want to create something new then you can change it by clicking “Change SSH key pair”. Then check the checkbox for “Enable Automatic Snapshots” as this acts as a backup for you. If you don’t need backup then no need to check it. After you enable it, select the time you want to create the snapshot. We select 23:00 Coordinated Universal Time.
Choose your instance plan: For a start, for Linux/Unix-based instances, we can try the $3.50 USD Lightsail plan free for one month (up to 750 hours). Later, if we need to scale then we will scale by creating a new instance from the snapshots.
Identify your instance for Opencart: Now in the identify your instance, we entered the name as “Opencart_LAMP_PHP_7-2”, Key-only tags as Version1, and Key-value tags with Key as Framework and Value as Opencart. You can enter as per your need to identify your instance.
Now finally click the Create Instance button. It will take around 1 min to spin up your virtual machine with a LAMP stack. Then, you will see an instance in your dashboard like below:
Now, click on it and you will get the details of that instance. You can see the buttons to stop and reboot. You can see the “Connect using SSH” button, Public IP and Username.
Click on the “Connect using SSH”, and you will see the command interface where you can enter your commands.
Update system and PHP version in AWS lightsail
To ensure your system is up-to-date, you can run the following command:
sudo apt update -y
Check your PHP version by the following command as Opencart needs PHP version 7.3. If your PHP version is less the 7.3 than you need to upgrade to PHP 7.3+
php -v
If you are using the latest LAMP stack in AWS Lightsail then it is greater than PHP 7.4.
Opencart installation steps in the AWS Lightsail LAMP stack
Change the directory to /opt/bitnami/apache2/htdocs
cd /opt/bitnami/apache2/htdocs
When you do the ls command then you will see index.html which shows the Bitnami page. So, let’s remove it by the following command:
sudo rm index.html
Now, let’s retrieve the Opencart zip code by using wget. You can get the zip URL from the Github Opencart releases. We are using the zip link of Opencart 3.0.3.6 as this is the latest version of Opencart now.
Let’s unzip the opencart-3.0.3.6.zip to backup/ folder
unzip opencart-3.0.3.6.zip -d ./backup
Now, move all the files and folder at backup/upload as these are the Opencart files
mv ./backup/upload/* .
Now, if you visit your Public IP, which is 3.235.163.67, then you will get a similar error to error no 1. So, let’s change the ownership of the files and folders to the daemon: daemon by running the following command:
If you want to be sure of files and folders permissions then you can run the following two commands as well:
sudo find . -type d -exec chmod 0755 {} \;
sudo find . -type f -exec chmod 0644 {} \;
Now, see files and folders permission in AWS Lightsail for Opencart by running the command ls-lh
ls -lh
You will see the output below:
Now, if you go to public IP, then you will be able to see the first page of the Opencart installation.
Create Static IP
You can start the installation but it is better to set up static IP. For that, go to the instance detail page, and in the “Networking” tab in the IP addresses section, click the button “Create static IP“.
A static IP is a fixed, public IP address that you can assign and reassign to your instances. In the Static IP location, you left it default. In the Attach to an instance, select your instance, we select “Opencart_LAMP_PHP_7-2”. In the Identify your static IP, just give a unique name.
Now, your public IP as shown on the page, is 54.237.190.20. Now open the IP in the browser then you will see step 1 of the Opencart installation page.
Create DNS Zone
As we are using an external domain registrar than Route 53 of AWS, so we need to create the DNS zone so we can add the NS1 and NS2 in the domain. Go to the Lightsail dashboard and go to the “Networking” tab. As we already set up Static IP, you will see a button to create a DNS zone, click the button “Create DNS zone”. Enter the domain you have registered, which is dpsignadvertising.com, enter the key-only tags and key-value tags as per your requirements else leave it blank.
Once you submit the “Create DNS zone” then you will get the Name Servers like the below:
Click “Add record”, then select A record, and enter @ in the subdomain in “Resolves to” select Static IP, our is “StaticIp-Opencart”, then click the green tick box. Similarly, again, click “Add record”, then select CNAME record, and enter www in the subdomain and in “Maps to” enter the domain name. URL, then click the green tick box.
Add Name servers to your domain registrar
Now open your domain registrar, our is onlydomains.com, in your domain change the Name Servers details like below and delegate to your AWS nameservers.
After some time go to your domain, for us, it took around 5min for DNS propagation, as we use dpsignadvertising.com for the domain so when we visit the dpsignadvertising.com, visit your URL and you will see the first page of the Opencart installation of the License agreement, click the “Continue” button.
In step 2, pre-installation steps, we see all green except the config files:
So, we need to create the config.php files. You can use the following commands to change the config-dist.php to config.php
After the changes above, you can refresh the 2nd step of installation and click “Continue”. We reached the third step, where we need to enter the database and administration details.
Create a database, database user, and grant access
Let’s close your opened console command terminal and reconnect by clicking the “Connect using SSH” button so that you can open the new console command terminal. Then, run the command to get the root password.
cat bitnami_application_password
The root password for us is bhV7CNgnVqBQ
Now, let’s run the following command to create the new database
mysql -u root -p
Then enter the above password. Then you entered it into the MySQL console.
Let’s create a database, we are naming it “webocreationdb_2021”
CREATE DATABASE webocreationdb_2021;
Let’s create user “webocreationu12” with password ‘webocreation#123#dppass’ by running the command below:
CREATE USER 'webocreationu12'@'localhost' IDENTIFIED BY 'webocreation#123#dppass';
Let’s grant access to all for the user “webocreationu12” by running the command below:
GRANT ALL PRIVILEGES ON * . * TO 'webocreationu12'@'localhost';
Now, you can exit the database by typing the command exit;.
exit;
With all these, we are set for our database configuration.
DB Driver: Select MySQLi
Hostname: localhost
Username: webocreationu12
Password: webocreation#123#dppass
Database: webocreationdb_2021
Port: 3306
Prefix: oc_ or any as you need.
You can enter the username and password for the administration
Username: admin (any)
Password: admin@2021 (any)
E-mail: info@webocreation.com (any)
Once, you entered all the details then click “Continue”.
In this 3rd step, you may see the blank page. So let’s debug the error. For that, let’s run the following command:
cd /opt/bitnami/apache2/htdocs/
sudo nano install/index.php
Then, in install/index.php, add the following lines of code.
After adding the code, exit the nano by clicking Ctrl + O and then Ctrl + X. After this let’s refresh step 3 http://dpsignadvertising.com/install/index.php?route=install/step_3, then you will see error 2. Let’s fix error 2.
sudo nano install/cli_install.php
Then find the code $db->query(“SET @@session.sql_mode = ‘MYSQL40′”); and change to following:
$db->query("SET @@session.sql_mode = ''");
After the change, click Ctrl+O and Ctrl+X to exit the nano.
Similarly, do the same for install/model/install/install.php
sudo nano install/model/install/install.php
Then find the code $db->query(“SET @@session.sql_mode = ‘MYSQL40′”); and change to following:
$db->query("SET @@session.sql_mode = ''");
After the change, click Ctrl+O and Ctrl+X to exit the nano.
Now, go and refresh the URL http://dpsignadvertising.com/install/index.php?route=install/step_3 and your Opencart installation is completed.
Now, let’s delete the install folder and other files and folders which are not needed.
Request a Let’s Encrypt SSL wildcard certificate by running the following commands, don’t forget to replace your domain where we use dpsignadvertising.com
Before entering the Continue, you need to add the TXT record in the “Add record”. So, go to Lightsail dashboard >> Networking tab >> Click the DNS Zones for dpsignadvertising.com >> Click to Add record >> Select the TXT record >> in the Subdomain adds _acme-challenge >> in the “Responds with” add the value shown in console, ours is “XL1S8jJ9gNTUU1M7QxDBWv6_m5lC1Lf2YTE_I7iTnH4” and save it by clicking the green checkmark.
Please wait for some time so that it propagates, after around 10 mins we click Continue in the Console.
Sometimes, it asks to add multiple TXT records. This must be set up in addition to the previous challenges; do not remove, replace, or undo the previous challenge tasks yet. Note that you might be asked to create multiple distinct TXT records with the same name. This is permitted by DNS standards.
Create links to the Let’s Encrypt certificate files in the Apache server directory by running the following commands:
Configure HTTP to HTTPS redirection for your web application by running the following commands:
sudo vim /opt/bitnami/apache2/conf/bitnami/bitnami.conf
Add the following lines of code:
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^/(.*) https://%{SERVER_NAME}/$1 [R,L]
After adding the code click the ESC key, and then enter:wq to save your changes, and quit Vim. Then restart the LAMP stack
sudo /opt/bitnami/ctlscript.sh restart
With these changes your SSL certificate is ready. Now you need to change a setting in Opencart admin and change the URL in the config.php and admin/config.php
cd /opt/bitnami/apache2/htdocs
sudo nano config.php
Change the define(‘HTTPS_SERVER’, ‘http://dpsignadvertising.com/’); to add https://
Exit it by pressing Ctrl + O to save and then enter, after that Ctrl + X to exit.
Now go to https://dpsignadvertising.com/admin and System >> Settings >> Edit the store >> go to the Server tab >> in the security section select Yes for “Use SSL”. Then click Save.
With these steps, your SSL is activated for your domain.
Rename .htaccess.txt to .htaccess
Pull the .htaccess.txt of the Opencart and rename it to .htaccess
Once the .htaccess.txt is renamed to .htaccess, then we can activate the SEO URL at the admin. Go to admin >> System >> Settings >> Edit the Store >> Server tab >> Select Yes for “Use SEO URL”.
Read more for some best practices of Opencart SEO.
How to set up FileZilla SFTP in AWS Lightsail to transfer files?
In the Protocol field, you need to select SFTP – SSH File Transfer Protocol. The Host is your public IP. In Logon Type, you need to select the Key file. In the User field, you need to type bitnami. Finally in the Key file field, add the public key (where can you find the public key).
Then, click Connect button. You will get a list of folders, your code will be at htdocs.
PHPMyadmin access
Download the Lightsail SSH public key and change its permission to 0644 and make a tunnel to connect to PHPmyadmin. First, run the following command. Change the path of the key as per yours.
Then, go to http://127.0.0.1:8888/phpmyadmin/ and you will be able to log in to the PHPMyadmin. The username is the root and you can get the password by running the following command the first time you logged in:
Where can you find the SSH public key in AWS Lightsail?
To get your SSH public key in AWS Lightsail, go to the top menu “Account“, then click on the SSH Keys tab, where you can see the lists of keys as per your region. Download the key as per your region. (How to find the region key pair of your EC2 instance?)
How to find the region key pair of your EC2 instance?
Click on the instance and go to Connect tab, then at the bottom, it shows which key pair is used for this instance.
You configured this instance to use default (us-east-1) key pair.
How to upgrade to a higher Lightsail package?
To upgrade your Lightsail plan to a larger instance, take a snapshot and then create a larger instance from the snapshot.
Setup CDN Content Distribution in AWS
Go to Lightsail dashboard >> Networking tab >> Click the “Create distribution” button >> Then, in Choose your origin, select your Instance
You can “Best for Dynamic Content” or Custom settings. Change the default cache behavior to cache nothing, then change the “Directory and file overrides” and give a path to the image cache.
In the Custom domains, first, create the SSL certificates and then enable the custom domains.
You can leave the remaining setting as it is or change it as per your requirement and click the “Create Distribution” button and your CDN is set up.
Then, change A record with the AWS Cloudfront URL by removing the Static IP.
To check if the Cloudfront is working or not, just inspect the page and in the Network tab of the console, click the image and see the details. In the response, if it is serving via CloudFront URL and see the x-cache: “Hit from Cloudfront”, then CloudFront is serving the images.
Error 1: Installation error because of ownership issues
Warning: fopen(/opt/bitnami/apache/htdocs/system/storage/session//sess_bb5cfd84f55cef397e6edd17cb): failed to open stream: Permission denied in /opt/bitnami/apache/htdocs/system/library/session/file.php on line 29Warning: flock() expects parameter 1 to be resource, bool given in /opt/bitnami/apache/htdocs/system/library/session/file.php on line 31Warning: fwrite() expects parameter 1 to be resource, bool given in /opt/bitnami/apache/htdocs/system/library/session/file.php on line 33Warning: fflush() expects parameter 1 to be resource, bool given in /opt/bitnami/apache/htdocs/system/library/session/file.php on line 35Warning: flock() expects parameter 1 to be resource, bool given in /opt/bitnami/apache/htdocs/system/library/session/file.php on line 37Warning: fclose() expects parameter 1 to be resource, bool given in /opt/bitnami/apache/htdocs/system/library/session/file.php on line 39
Solution Error 1: run command ‘sudo chown daemon:daemon -R .’
Fatal error: Uncaught Exception: Error: Variable 'sql_mode' can't be set to the value of 'MYSQL40'<br />Error No: 1231<br />SET @@session.sql_mode = 'MYSQL40' in /opt/bitnami/apache/htdocs/system/library/db/mysqli.php:40 Stack trace: #0 /opt/bitnami/apache/htdocs/system/library/db.php(45): DB\MySQLi->query() #1 /opt/bitnami/apache/htdocs/install/model/install/install.php(35): DB->query() #2 /opt/bitnami/apache/htdocs/system/engine/loader.php(248): ModelInstallInstall->database() #3 /opt/bitnami/apache/htdocs/system/engine/proxy.php(47): Loader->{closure}() #4 /opt/bitnami/apache/htdocs/install/controller/install/step_3.php(11): Proxy->__call() #5 /opt/bitnami/apache/htdocs/system/engine/action.php(79): ControllerInstallStep3->index() #6 /opt/bitnami/apache/htdocs/system/engine/router.php(67): Action->execute() #7 /opt/bitnami/apache/htdocs/system/engine/router.php(56): Router->execute() #8 /opt/bitnami/apache/htdocs/system/framework.php(165): Router->dispatch() #9 /opt/bitnami/apache/htdocs/system/startup.php(104): requir in /opt/bitnami/apache/htdocs/system/library/db/mysqli.php on line 40
Solution Error 2: Remove the MYSQL40. Find the code $db->query(“SET @@session.sql_mode = ‘MYSQL40′”); and remove the MYSQL40 so that the code looks like $db->query(“SET @@session.sql_mode = ””);
Error 3: AWS LightSail 500 Internal Server Error
Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator at you@example.com to inform them of the time this error occurred, and the actions you performed just before this error.
More information about this error may be available in the server error log.
Solution Error 3: check if the .htaccess is there and rename it to a different till you fix the .htaccess file
Error 4: WARNING: UNPROTECTED PRIVATE KEY FILE!
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@ WARNING: UNPROTECTED PRIVATE KEY FILE! @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0644 for '/Applications/MAMP/htdocs/webocreation-bk/LightsailDefaultKey-us-east-1.pem' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "/Applications/MAMP/htdocs/webocreation-bk/LightsailDefaultKey-us-east-1.pem": bad permissions
bitnami@3.238.31.110: Permission denied (publickey).
Solution Error 4: Give permission to the key file of 0644 by running “chmod 0644 pathofkeyfile“
Error 5: Error while generating the SSL certificate
Failed authorization procedure. dpsignadvertising.com (dns-01): urn:ietf:params:acme:error:unauthorized :: The client lacks sufficient authorization :: Incorrect TXT record "oujxGkfDXUloV5IUO3__gNQA47b1wePnF4rvUcQWclM" found at _acme-challenge.dpsignadvertising.com
Solution Error 5: Check the TXT record and wait till it propagates.
Error 6: Class ‘Scssc’ not found
Fatal error: Uncaught Error: Class 'Scssc' not found in /opt/bitnami/apache/htdocs/admin/controller/startup/sass.php:9 Stack trace: #0 /opt/bitnami/apache/htdocs/system/engine/action.php(79): ControllerStartupSass->index() #1 /opt/bitnami/apache/htdocs/system/engine/router.php(67): Action->execute() #2 /opt/bitnami/apache/htdocs/system/engine/router.php(46): Router->execute() #3 /opt/bitnami/apache/htdocs/system/framework.php(165): Router->dispatch() #4 /opt/bitnami/apache/htdocs/system/startup.php(104): require_once('/opt/bitnami/ap...') #5 /opt/bitnami/apache/htdocs/admin/index.php(26): start() #6 {main} thrown in /opt/bitnami/apache/htdocs/admin/controller/startup/sass.php on line 9
Solution Error 6: Check the vendor folder and upload the right Opencart version vendor folder.
Error 7: This site can’t be reached
This site can’t be reached
dpsignadvertising.com’s server IP address could not be found.
Try:
Checking the connection
Checking the proxy, firewall, and DNS configuration
ERR_NAME_NOT_RESOLVED
Solution Error 7: Either you just make DNS changes, so better to wait up to 1-2 hours. Or the IP address given is not correct.
Warning: mysqli::__construct(): (HY000/2002): Connection refused in /opt/bitnami/apache/htdocs/system/library/db/mysqli.php on line 7Warning: DB\MySQLi::__construct(): Couldn't fetch mysqli in /opt/bitnami/apache/htdocs/system/library/db/mysqli.php on line 10Warning: DB\MySQLi::__construct(): Couldn't fetch mysqli in /opt/bitnami/apache/htdocs/system/library/db/mysqli.php on line 10
Fatal error: Uncaught Exception: Error: <br />Error No: in /opt/bitnami/apache/htdocs/system/library/db/mysqli.php:10 Stack trace: #0 /opt/bitnami/apache/htdocs/storage12/modification/system/library/db.php(35): DB\MySQLi->__construct() #1 /opt/bitnami/apache/htdocs/system/framework.php(80): DB->__construct() #2 /opt/bitnami/apache/htdocs/system/startup.php(104): require_once('/opt/bitnami/ap...') #3 /opt/bitnami/apache/htdocs/index.php(31): start() #4 {main} thrown in /opt/bitnami/apache/htdocs/system/library/db/mysqli.php on line 10
Solution Error 8: Make sure your database server is not down.
We were designing the Hubspot theme and working on the blog listing and blog post of Hubspot, by default there was no author image shown, so we had to make some code changes to show the author’s avatar.
In the template type blog_post, we add the following code to show the author’s image, name, and published date of the HubSpot blog. You can get the author image URL with {{ content.blog_post_author.avatar}}
In Opencart 4, when we activate the SEO URL it contains the language as well and for the English language, it shows en-gb by default, which we don’t like so we looked to remove it and the easiest way to remove en-gb is by following code. The following code will not work if you have multiple languages, it works only for English because we are replacing en-gb from the URL, we will find a way soon to remove all the languages and post the solution here.
This Opencart tutorial collects the most common errors that we face while developing and provides solutions for errors, try them and hope you could solve the issues
foreach (glob(trim($next, '/') . '/{*,.[!.]*,..?*}', GLOB_BRACE) as $file) {
to following
foreach (glob($next . '/{*,.[!.]*,..?*}', GLOB_MARK|GLOB_BRACE) as $file) {
2. Blank White Pages or 500 Internal Server Error
Blank white pages are a PHP error that for some reason the error messages don’t show because your server is not set up to display the errors.
Go to the admin>> System >> Setting >> Edit store >> Server tab and at the end where you see the Error handling choose Yes to “Display Errors “.
If you still don’t see the error, open php.ini and add code below: display_errors = 1; error_reporting = E_ALL; log_errors = 1;
If you still don’t see the error then open index.php and add code below at the top (line 2): ini_set(‘display_errors’, 1); ini_set(‘log_errors’, 1); error_reporting(E_ALL);
Still seeing the error then, set your “Output Compression Level” to 0 in the System > Settings > Server tab.
If you still see the error, solve the issues but if you did not see the errors then most probably it will be a Server error.
You can see error logs in the file also if you had enabled it.
Above mostly it gets solved and the 500 Internal Server Error can be solved with a similar approach.
2. Undefined Index / Variable
An undefined variable in the source code of a computer program is a variable that is accessed in the code but has not been previously declared by that code. So for that using “isset()” to check if the variable has been set will solve the issue.
Error variant:
Notice: Undefined index: filter in /Applications/XAMPP/xamppfiles/htdocs/opencart303/catalog/controller/product/category.php on lin
Commenting $filter = $this->request->get[‘filter’]; and checking with isset is one way to solve it.
If you get the issue while installing the modules or extensions then you need to check the code or solve the issues or contacting the developer can be also another solution.
3. Undefined Function / Method
Undefined function/method errors are seen when you call those functions or methods that are not defined and not found. IE_ERROR: A fatal error that causes script termination “Fatal error: Call to undefined function” or “Fatal error: Call to undefined method”. It happens if files are not found or the extensions are not compatible with your OpenCart version. Solutions can be below:
Error variant:
Related to OpenCart core files
Fatal error: Uncaught Error: Call to undefined method DB\MySQLi::query()
Fatal error: Uncaught Error: Call to undefined method Cart\Cart::getProducts()
Fatal error: Uncaught Error: Call to undefined method ControllerAccountLogin::validate() in …/catalog/controller/account/login.php:54
Go to the file and check whether the function or methods are defined there.
4. Headers Already Sent
Error variant:
Warning: Cannot modify header information – headers already sent by (output started at /public_html/config.php:31) in /path/public_html/index.php online.
Solution:
Remove spaces at the beginning and end of the file mentioned. Like in the above error check with the config.php
5. Session Issue
The product on the cart is self-cleared.
The product on the cart is cleared after the user logged in.
No items stored at product compares.
OpenCart admin always asking to login and get message “Invalid token session. Please log in again”.
Error variant:
Warning: session_start () [function.session-start]: open (/tmp/…, O_RDWR) failed: No such file or directory (2) in /path/public_html/system /library /session.php on line
Solution:
No such file or directory issue
Open php.ini and add code below:session.save_path = /tmp;
If the solution above does not work, contact your host and ask them how to set session.save_path.
6. Allowed Memory Size Exhausted
This error happens because your memory is not enough to execute the PHP code (uploading large images, deleting a lot of products, sending mass emails, etc). Increasing the memory allocated for PHP will solve the issue.
Error variant:
Fatal error: the Allowed memory size of 1111 bytes exhausted (tried to allocate 1111 bytes) in /path/public_html/system/library/image.php on line
Solution:
Edit php.ini and set memory_limit = 128M;
Or put code below to .htaccess php_value memory_limit 128M
If the above does not works then contacting the hosting providers is only the solution where they can increase the number.
Warning: Use of undefined constant DIR_STORAGE – assumed ‘DIR_STORAGE’ (this will throw an Error in a future version of PHP) in …/config.php on line
Some other errors that you can face are below:
Error: Calls to magic methods are not allowed!
// Stop any magical methods being called
if (substr($this->method, 0, 2) == '__') {
return new \Exception('Error: Calls to magic methods are not allowed!');
}
Error: Could not call product/category
// Initialize the class
if (is_file($file)) {
include_once($file);
$controller = new $class($registry);
} else {
return new \Exception('Error: Could not call ' . $this->route . '/' . $this->method . '!');
}
Error: Could not load model
if (!$this->registry->has('model_' . str_replace('/', '_', $route))) {
$file = DIR_APPLICATION . 'model/' . $route . '.php';
$class = 'Model' . preg_replace('/[^a-zA-Z0-9]/', '', $route);
if (is_file($file)) {
include_once($file);
$proxy = new Proxy();
// Overriding models is a little harder so we have to use
// PHP's magic methods
// In future version we can use runkit
foreach (get_class_methods($class) as $method) {
$proxy->{$method} = $this->callback($this->registry, $route . '/' . $method);
}
$this->registry->set('model_' . str_replace('/', '_', (string)$route), $proxy);
} else {
throw new \Exception('Error: Could not load model ' . $route . '!');
}
}
Error: Could not load library
Error: Could not load helper
Error: Could not load cache adaptor Memcache/Redis/APC cache!
$class = 'Cache\\' . $adaptor;
if (class_exists($class)) {
$this->adaptor = new $class($expire);
} else {
throw new \Exception('Error: Could not load cache adaptor ' . $adaptor . ' cache!');
}
Error: Could not load database adaptor mpdo/mssql/mysql/mysqli/postgre !
$class = 'DB\\' . $adaptor;
if (class_exists($class)) {
$this->adaptor = new $class($hostname, $username, $password, $database, $port);
} else {
throw new \Exception('Error: Could not load database adaptor ' . $adaptor . '!');
}
Error: Could not make a database connection using this username and password
Error: Could not connect to database opencart
Error: PHP GD is not installed!
if (!extension_loaded('gd')) {
exit('Error: PHP GD is not installed!');
}
Error: Could not load image filename!
Error: Invalid session ID!
Warning: Install folder still exists and should be deleted for security reasons!
Installed bad extension, pressed refresh in the modification, and both admin panel and site are down
Remove it from the database, then open config.php and find what is the value defined for storage. Go to that storage/ folder, then go to modification and remove folders, similarly go to upload/ folder and see if there are folders if you have, remove it also. With this, it will remove the cached files and folder. Then, you can access your admin again.
Fatal error uncaught exception
Fatal error: Uncaught Exception: Error: Table ‘….oc_session’ doesn’t exist in engine<br />Error No: 1932<br />SELECT `data` FROM `oc_session` WHERE session_id = ‘….’ AND expire > 1548638620 in …/system/library/db/mysqli.php:40 Stack trace: #0 …/system/library/db.php(45): DB\MySQLi->query(‘SELECT `data` F…’) #1
For these errors to solve creating a database table will solve most of the issues
Fatal error: Uncaught Exception: Error: Could not load database adaptor DB_DRIVER!
Check in the system/library/DB folder whether the required driver file is there.
With the launch of Opencart 4 we did not find the Google Analytics Opencart 4 module that we used to have in Opencart 3, so to fulfill that requirement we created a free Opencart extension called Third Party JS extension where you can add the Javascript code provided by third-party like Google Analytics, Facebook pixel, etc and add it on this extension.
Log in to Admin >> Extensions >> Installer >> Click the Upload button and select the file that ends with .ocmod.zip. In the above download example, it is third_party_js.ocmod.zip. Once it is installed you will see the “Third Party JS” in the installed extensions.
Once you uploaded the zip file, you click the install green icon to install the extension.
Once you clicked the install button, your extension is installed successfully
Once you see the success message. Now you can go to Admin >> Extensions >> Extension. Then, choose the extension type “Analytics” and click the install green install button.
Once you click the install button, you can edit the store and you will see a form where you can install the third-party JavaScript like below and enable the status and click the blue save button.
After clicking the save, now the JavaScript code is shown at the head tag.
In this way, you can install the Opencart 4 extensions and use our free Opencart 4 analytics extension for your website. Hope you liked this post, let us know if you have any questions or suggestions, please subscribe to our YouTube Channel for Opencart video tutorials. You can also find us on Twitter and Facebook. Enjoy Google Analytics Opencart 4 module!
As technology evolves, so does the way we shop. The development of the internet over the past few years has allowed for the widespread acceptance of online shopping.
With the advent of virtual and augmented reality, eCommerce has taken a major leap toward the Metaverse. Mark Zuckerberg (Meta) and Satya Nadella (Microsoft) have made public statements recently about their plans to make significant forays into the Metaverse.
The potential of the Metaverse for eCommerce is enormous. In the Metaverse, retailers can create virtual storefronts and interact with customers completely new. Imagine browsing a virtual store and seeing the products in three dimensions or trying on virtual clothes and accessories to see how they look before making a purchase.
What Is Metaverse E-commerce?
The Metaverse platform employs blockchain technology to facilitate honest and open interactions between buyers and sellers. Transactions in Metaverse are easy and risk-free because users can use the available smart contracts to create legally binding agreements that are automatically executed.
The Metaverse platform also simplifies online monetary transactions. The system operates with a cryptocurrency called ETP that can be exchanged for a wide range of goods and services from merchants worldwide. Fast, reliable, and secure, ETP is a modern method of making payments. It improves commerce’s security, openness, and efficacy, allowing more people to shop online.
How Does Metaverse E-commerce Work?
Shopping online can feel like an individual experience at times. You can’t benefit from other buyers’ feedback when you make an online purchase. Many things will change when the Metaverse’s commercial infrastructure is up and running.
You can converse with other shoppers in similar virtual reality (VR) environments. You’ll be able to view their replies and get advice from your pals.
The virtual world promises to improve the shopping experience by allowing more in-depth interactions with a wider range of products. Shops of the virtual variety will have their special section of the virtual world. Customers will get a real feel for the products at these stores.
Due to the nature of digital assets, shop owners can set up shop in multiple MMORPGs with precisely the same offerings. If you want to sell your wares on Facebook, even Facebook has you covered with a platform called Facebook Shop.
By exploring and experiencing products in various dimensions, customers will have a more enjoyable and immersive shopping experience. Soon, the lines between brick-and-mortar stores and online marketplaces will blur.
Why Should E-commerce Businesses Care About the Metaverse?
Improved Customer Engagement
In the Metaverse, retailers can create immersive experiences that engage customers on a deeper level than traditional eCommerce platforms. By creating a virtual storefront, retailers can showcase products in a way impossible on a conventional website. This can lead to increased customer engagement and, ultimately, more sales.
Personalized Shopping
In the Metaverse, retailers can create virtual assistants or avatars to guide customers through the shopping experience. These assistants can provide personalized recommendations based on a customer’s shopping history, preferences, and body shape and size. This can make the shopping experience more efficient and enjoyable for customers.
Enhanced Social Interaction
The Metaverse is a social platform, and retailers can use this to their advantage. By creating virtual events or pop-up stores, retailers can create a buzz around their brand and engage with customers more personally. This can help build brand loyalty and increase sales.
Cost-Effective Expansion
The Metaverse provides a cost-effective way for retailers to expand their reach. Instead of investing in brick-and-mortar stores, retailers can create virtual storefronts accessible to anyone with an internet connection. This can help small businesses compete with larger retailers and expand their reach to new markets.
New Revenue Streams
The Metaverse offers new revenue streams for retailers. By creating virtual goods and experiences, retailers can tap into a new market of customers willing to pay for unique and immersive experiences. This can include virtual clothes, accessories, and even virtual real estate.
Foster a More Inclusive Community
These days, it takes more than just pushing products on mobile, desktop, and social media to build a successful retail business. Customers care more about the good a company does in the world and the values it upholds than they do about the products it sells. Accordingly, brands must show they understand and value consumers’ priorities to build trust and loyalty, especially with younger generations.
Retailers frequently use freebies and VIP events to achieve this goal. That materialized in the cyber world as non-transferable tokens (NFTs). To incentivize customers to buy their NFTs, stores offer previews of new products or special content only available through those retailers.
Notable companies that have introduced NFTs include Nike, Coca-Cola, and Adidas, among many others.
Perform Market Research at Little to No Cost
As the lines between the digital and real worlds blur, stores may find the Metaverse useful for gathering information about customers’ tastes. Retailers, for instance, could use the Metaverse as a testing ground for products before bringing them to life. Consumers could also use the Metaverse to test out merchandise before making a purchase decision.
You can see this in action at Metaverse Fashion Week. With all the glitz and glamour of New York Fashion Week, some of the most recognizable brands converged on the Metaverse for a high-profile fashion event. How Gucci, Ralph Lauren, and the other brands will use the information gleaned from the circumstances needs to clarify. However, don’t be surprised to see physical iterations of the most notable digital trends appearing shortly.
The Metaverse Can Help E-commerce Businesses Boost ROI
60% of respondents to a Google survey said they would be interested in using augmented reality tools to enhance their shopping experiences, which would likely increase customer satisfaction and encourage them to purchase products they could first try in 3D.
Customers in the Metaverse will not only be able to visualize products more clearly, but they will also have the opportunity to interact with store employees. If your employees can create a welcoming atmosphere where customers feel comfortable expressing their full range of feelings, you can expect high product interest and sales.
Being an early adopter of the Metaverse will make your company famous and allow you to consult with other companies about how they can improve their operations by adopting similar strategies.
Which E-commerce Brands Are Planning to Enter the Metaverse?
Walmart: Walmart’s metaverse shopping will center on the creation and sale of virtual goods like furnishings, sporting apparel and equipment, personal care items, toys, and furniture.
Balenciaga: Even Balenciaga, a long-standing name in the fashion industry, has evolved to meet modern tastes. Currently, the company’s top priority is investigating the potential for business in the Metaverse.
Coca-Cola: In 2021, Coca-Cola created its first NFT and partnered with Decentraland to experiment with the Metaverse.
Nike: Regarding consumer brands, Nike was one of the pioneers in the virtual world. The company boasts that its Nikeland virtual store in the Metaverse has seen tremendous growth and impressive metrics.
What Does the Future of E-commerce and Retail in the Metaverse Look Like?
With metaverse eCommerce store development comes an increasing number of brand-new possibilities. There is no doubt that the Metaverse, with its emphasis on personalized engagement and experiences, will significantly alter the way we interact with many eCommerce businesses.
Nike, Balenciaga, and Walmart, all household names in the retail industry, have hopped on the metaverse bandwagon and appear to be reaping the benefits of this unique technology. For this reason, many other brands will likely enter the Metaverse, all vying to outdo one another by providing shoppers with more cutting-edge forms of entertainment and interaction.
Conclusion
In conclusion, the Metaverse could revolutionize how we shop online. By creating immersive and personalized experiences, retailers can engage with customers on a deeper level and increase sales. As technology evolves, the Metaverse will become an increasingly important platform for eCommerce. Retailers who embrace it early will have a competitive advantage.
We were trying to add the google map iframe HTML code in the CKeditor of Opencart but by default, the HTML encode output is disabled on Opencart 4+, so to enable we need to change the CKeditor configuration and make the CKeditor support the HTML and iframe code. The General HTML Support allows for adding markups like elements, attributes, classes, and styles to the source and prevents it from being filtered from the editor window and the output.
Enable the General HTML Support for CKeditor in Opencart 4
Go to admin >> view >> javascript >> ckeditor and open config.js
In the config.js file find config.htmlEncodeOutput = false, and change it to true.
config.htmlEncodeOutput = true;
And also make sure there is
config.allowedContent = true;
With this config change and clearing the website cache, now you can add the iframe and HTML code in the CKeditor.
If you still are not able to add the iframe or other HTML code then download the following code and unzip it and replace the ckeditor folder at admin >> view >> javascript >> ckeditor
In this way, you can configure the CKeditor to add the iframe, scripts and HTML markups like elements, attributes, classes, and styles. Please let us know if you have any other issues that you are facing then we can look at it, you can email us at webocreation.com@gmail.com. Hope you liked this tutorial, please subscribe to our YouTube Channel and read more about Opencart Documentation. You can also find us on Twitter and Facebook.
You may be thinking about how we can use the OpenAI ChatGPT in your eCommerce business, here we are showing you how you can use or benefit from the OpenAI ChatGPT in your eCommerce business like copywriting, writing product descriptions, titles, emails, social media content, responses, personalized product recommendations, getting products information like popular ones, and many more. ChatGPT is simply a new tool, so it needs to be carefully used and trained on a relevant dataset of questions and responses. You can use it to get ideas and suggestions but creating content as naturally as possible is always good. Let’s start with copywriting.
You can use OpenAI ChatGPT for copywriting. Based on a given prompt or conversation environment, OpenAI’s ChatGPT language model can be used to produce text responses that resemble those of a human. ChatGPT can be used to come up with concepts or content for marketing pieces like product descriptions, blog entries, or email campaigns. A copywriter might give ChatGPT a list of keywords or a broad theme, for instance, and the model might then provide a list of concepts or a draft of the copy based on that input.
Here is one example of how OpenAI ChatGPT gives a response when we ask: “Can you please provide copywriting content for the Buddha statue?”
We were looking for small copywriting content, but ChatGPT gives us multiple paragraphs, so we again ask “Can you please provide short copywriting content for the Buddha statue?”, here is the response:
The more detailed information you gave the more exact answer you will get, but take in mind it is still in preview mode.
OpenAI ChatGPT can help you to write product descriptions
ChatGPT can be used to generate ideas or rough drafts of product descriptions based on input provided which you can review the output and refine to create a final product description that is clear, compelling, and accurate. Here is one example of how we asked the ChatGPT to provide the product description: “Write a product description of bronze Nepali Buddha statue from Nepal, price $400, 10cm height 10 cm width and 10 cm breadth, materials used bronze” and the response is like below:
Again, ChatGPT is simply a tool for generating text, and it is up to the writer to use their skills and expertise to craft a product description that meets the desired tone and style of your brand.
Every eCommerce uses multiple email touch points for promotions, signup, forgot password emails, vouchers, order confirmation, etc. You can use the ChatGPT by providing information about the purpose of the email, the intended audience, and any relevant context, and the model could generate a list of ideas or a draft email based on that input. Here is one example of how we ask ChatGPT to provide the signup email. We asked ChatGPT “Write a signup success email for webocreation.com an eCommerce website?” and the response is like below:
As you see, it provides you with overall ideas and drafts to start with the content, which you can use as per your requirements.
We cannot be 100% sure but we can get some overall ideas, we asked OpenAI ChatGPT to provide popular kitchen products by asking like “popular products in kitchen appliances” and the result is like below:
Use OpenAI ChatGPT for social media content
We can use OpenAI ChatGPT for social media content. We asked ChatGPT to provide the social media promotion content for our ebook “OpenCart Theme and Module Development” and it provides us the following content:
But, we cannot promote this content on the Twitter because of the word limits so we asked ChatGPT to provide us the Twitter promotion text by asking “Write a twitter social media promotion content for ebook “OpenCart Theme and Module Development” and here is the response:
For the above Twitter promotion, we need to share in Nepalese and Spanish languages so we asked the ChatGPT to translate it just by typing “Translate it into Nepalese” here is the result which is not totally good but it provides the starting points:
Personalized products recommendations
You can set up related products as per the personalized product recommendations. We asked ChatGPT to provide us the product recommendations who bought those ebook “product recommendations who bought the ebook “OpenCart Theme and Module Development”, here is the response:
In conclusion, OpenAI’s ChatGPT is a potent language model with the potential to be applied in a number of eCommerce-related applications and processes. ChatGPT can be used for copywriting, writing product descriptions, titles, emails, social media content, responses, personalized product recommendations, getting product information like popular ones, and many more. However, it is crucial to keep in mind that ChatGPT is merely a tool for producing text responses; it is up to the user to use it carefully which helps your eCommerce business. The ChatGPT gets trained on a relevant dataset of queries and responses in order to reach a high level of accuracy and efficacy but for now, we all need to use it carefully. Are you using ChatGPT, if yes let us know how you are using it and if no check it, it amazes you most of the time.
In Opencart we can create a variant product based on the master product. A product variant is a pre-defined option product. For example, let’s say we add a product with red and blue options (product id 50), now we can create a variant based on this product and select the option red only to make the red variant product (product id 51 with master id 50).
How to add the product variant in Opencart?
Go to products listing or Catalog>>Products and click the dropdown near the edit button in the Action column and you will see the “Add Variant”, click it and you are ready to add the variant.
Once you clicked the “Add Variant”, all the data of the master product is copied and a new product is created where you can override the data as per your need. Please note that when you override the variant product data, the field data which is changed will not get replaced with the master product data when the master product data is changed and saved. If the field data is not overridden then when master product data is changed the changes will be seen on the variant product as well.
How to override the variant product data?
In the Variant product, you will see a toggle icon for every field where you can click On it and change the field data as per your need.
Let’s say you change the product name but did not change the product description of the product variant, then when you changed the product name and description of the master product then the changes will be seen only on the product description but not on the product name. Variants products are pre-selected options so you cannot change the options on the variant product.
Note: if you save the product variant after the master product’s data is changed then the variant product overridden data is replaced by the master product’s data, so be careful.
Select the Option:
Change the SEO URL:
Now click save and you have added the product variant.
As the product variants are also added like new standalone products so you can view them on the category page as well.
Improvements needed:
When we select the option in the master product and have the product variants, then it would be better to show the product variant page.
When the option price is added, it is better to show the added price on the product variant page, right now it is showing as the product price instead of the Option price.
SEO improvements for the product variants.
Conclusion:
In this way, you can easily create product variants from master products and customize your own data except for options and making it easy to create product variants. Please let us know if you have any kind of projects, you can email us at webocreation.com@gmail.com. Hope you liked this tutorial, please subscribe to our YouTube Channel and get more Opencart free extensions. You can also find us on Twitter and Facebook.
One of our clients had products around 50k because of which the sitemap could not load and always throw 500 errors as Opencart tried to load all the products’ sitemap URLs on one page. So, our solution is to show the sitemap URLs in a chunk of 500 and use the sitemap index.
Solution:
Although a single sitemap limit is 50MB or 50k URLs, mostly the hosting providers or servers cannot handle showing all of those 50k URLs on one page so our solution is to create chunks to 500 URLs as one sitemap and list all sitemaps using sitemapindex and submit this one sitemap which includes the sitemapindex.
When you see one of the sitemap URLs, for example, this URL https://webocreation.com.com/index.php?route=extension/feed/google_sitemap&start=0&end=500 then you will see the sitemap code like below of 500 products:
This is the rough way to do it for now but no worries we will soon create an extension for it and provide you guys, for now, this is the quick way to achieve it.
In this way, you can submit the sitemap for a large number of products and submit it to google, bing, or other search engines. Please let us know if you have any kind of projects, you can email us at webocreation.com@gmail.com. Hope you liked this tutorial, please subscribe to our YouTube Channel and get more Opencart free extensions. You can also find us on Twitter and Facebook.
In this Opencart tips and tricks, we are showing you to set different shipping methods like free shipping on Opencart, similarly flat rate shipping, shipping rate as per item, free shipping after some amount is reached on total orders, pick from store setup, flat rate up to 100 and then free shipping and so on. We are using Opencart 4.0.1.1 version for demo purposes but it is similar to other Opencart versions. Let’s start with a free shipping setup.
How to set up free shipping in the Opencart store?
To set up the free shipping, log into the admin section >> Extensions >> Extensions >> select Shipping, where you will see lists of available shipping extensions, install the “Free Shipping” extension if it is not installed, after that click the edit and you will see a form like below where you can enter total as 0, select the geo zone as “All Zones”, toggle to enable the status and sort order to 0 and click the blue button to save the setting. With this your free shipping extension is active.
Now, when someone checkout, they will see the free checkout option on the Shipping methods.
How to set up a flat shipping rate in the Opencart store?
You can set the flat shipping rate similar to the free shipping, log into admin >> Extensions >> Extensions >> select Shipping >> install “Flat rate” extension and edit it. You will see a form like below, where you enter the amount in the Cost field for flat shipping.
Now, let’s set up a combination of free shipping and flat-rate shipping.
How to set up free shipping for over $100 and for below it will be $5 flat-rate shipping?
First, we need to install both free shipping and flat rate extensions, which you can do like above. Once extensions are installed, then edit the free shipping extension and enter the setting in the form as shown below, the only change is the Total field is set to 100. That 100 is the sub-total amount needed before the free shipping module becomes active.
You can set the flat rate cost of 5 and you are good to go. Now free shipping is shown only when the sub-total reached 100.
How to set the shipping rate per item?
in some cases, you need to set the shipping rate per item, in that case, also Opencart provides default extensions, log into admin >> Extensions >> Extensions >> select Shipping >> install “Per Item” extension and enter the cost for each item.
With this now if you order two items then shipping will be 20. Here is one example, we order 2 Macbooks and the shipping is 20.
How do you can set up pick up from the store shipping in the Opencart store?
Similar to other extensions, you can install the “Pickup From Store” extension and edit it, enable the status and you will see the Pick up from store option in shipping methods.
How to set up a weight-based shipping rate?
First, you need to set up weight classes and then add the weight for each product. Once the weight is added for products you can use the weight-based shipping rate. You can install the “Weight Based Shipping” extension, edit it and you will set up the general options like below:
You will see a general tab and other Zone shipping tabs. In the general tab, select the tax class, enable the status and enter the sort order as you like to show in the Shipping methods. In the Zone shipping let’s select the UK shipping tab, you can enter the rates in the format of weight:cost comma weight:cost and enable the status. Here is an example:
Let’s say your weight setting is Kilogram at Settings >> Local tab >> Weight class. Then, with that rate setting, it means that 5 kilograms of product cost 10 and 10 kilograms, and more costs 15. So you can set those options as many as you want.
In this way, you can set shipping methods in Opencart. Please let us know if you have any questions or comments so that we can add extra topics. You can follow us at our Twitter account @rupaknpl, subscribe to our YouTube channel for opencart tutorials, and click to see all Opencart user manuals.
After completing multiple projects in Pardot, here are some of the tips and tricks to improve the form select fields of Pardot with Javascript. There is no default value shown in the Pardot form select, so if you want to add some default value like for the country field: “Please select your Country” then you need to add some JavaScript. Here is the default form select field in Pardot.
Here is the JavaScript that you can add to the form
<script>
window.addEventListener("load", function (event) {
var countryoption = document.querySelector(".country select option");
if (countryoption) {
countryoption.innerHTML = "Please select your Country";
}
});
</script>
You can add the above JavaScript in the Pardot form, one way is you can add the JS by editing the form >> Look and Feel tab >> Below Form tab >> Click the Source icon and paste the Javascript.
If you did not see the value then you may need to customize the following line of code:
document.querySelector(".country select option");
Change that country to your form field name. You can see it by inspecting it. In the browser, right-click near the form field >> then click inspect >> see what is the field name in the class
Following is one example:
form-field country pd-select required form-field-primary
With that, we can say the class is country so we use .country
How to set a default value for a custom dropdown in a Pardot form?
You wanted a default value to be selected, for example, the USA country needs to be selected by default.
When we inspect we find that the value of the option is 7683158
Now adding the following JavaScript in the below form will select the USA by default.
<script>
window.addEventListener("load", function (event) {
var countries = document.querySelector(".country select");
for (var i = 0; i < countries.options.length; i++) {
if (countries.options[i].value == ‘7683158’) {
countries.options[i].selected = true;
}
}
});
</script>
How to add custom form field validation in Pardot form?
Let’s say you need to validate a phone form field and allow more than 7 digits, then something like the below JavaScript can do the trick.
<script>
window.addEventListener("load", function () {
var inp = document.querySelector(".phone input");
var element = document.querySelector(".phone div");
inp.onkeyup = function (e) {
if (inp.value.length < 7) {
element.innerHTML = "<p class='error'>Phone number is too short</p>";
element.style.display = "block";
}
};
});
</script>
How to add the placeholder form field in Pardot form?
As Pardot doesn’t have a placeholder by default, so you can add the placeholder from JavaScript code like below, let’s say your field’s class name is first_name then the code is:
var firstname = document.querySelector('.first_name input');
if(firstname){
firstname.placeholder = 'John';
}
In this way, we helped multiple clients to make form layouts, landing page layouts, and email layouts and made them as per their brand guidelines. Please let us know if you have similar kinds of projects, you can email us at webocreation.com@gmail.com. Hope you liked this tutorial, please subscribe to our YouTube Channel and read more about Salesforce, Pardot, Marketo, and Hubspot. You can also find us on Twitter and Facebook.
In this Opencart tutorial, we list out more than 25 best practices for SEO for Opencart 3 and find out 3 free SEO Opencart 3 modules. In near future, we will try to come up with some free module for Opencart that addresses most of them but for now, have a look at the following and let us know if you have comments and suggestions.
We list out 25 free best practices for SEO for Opencart 3
Rename the .htaccess.txt to .htaccess
Go to your hosting root folder where Opencart is installed and find .htaccess.txt and rename it to .htaccess
Admin Setting section changes for the SEO
– Go to Admin >> System >> Settings >> Edit your store – In the General tab, enter the Meta Title, Meta Tag Description, and Meta Tag Keywords, they are for the Home page of your store website. – Go to the Server tab, and Choose Yes for “Use SEO URLs”
Enable the sitemap extension
Go to Admin >> Extensions >> Extensions >> Choose the extension type >> Feeds then install the Google Sitemap extension and then edit it and change the status to “Enabled” and save it. Now your sitemap URL will be given there which looks like: https://yourwebsiteurl.com/index.php?route=extension/feed/google_sitemap
Submit the sitemap to Google webmasters and Bing webmaster
Create robots.txt in the root folder where Opencart is installed, and in that robots.txt place following text, here change the sitemap URL to your website URL
Opencart supports canonical URL automatically, be sure to check it, it removes the duplicate content penalties.
https://yourwebsiteurl.com/cateogryname/productname and https://yourwebsiteurl.com/productname, these both URL point to the same product page, so google may take it as duplicate content so canonical URL need to set up. One example when you view source the code you will see the canonical URL something like below:
Product name and Description – Content is the key for Search Engines
– Product description, as best practices for SEO, you should aim to write at least 300 words but be clear and write as much as possible. – Name the images as the product name, in Opencart most of the images alt tags are either product name in the product page, category name in category image and so on. –
Enter SEO information for Products, Categories, Information page, Manufacturers also.
For entering the Products SEO information, go to Admin >> Catalog >> Products >> Add/Edit >> then in General tab, enter the Meta Tag Title, Meta Tag Description, and Meta Tag Keywords, likewise go to SEO tab and enter the keyword for each store. While entering the Meta Tag title, consider the following best practices: – Google only shows around 50–60 characters of a title tag so make the title tag around 50-60 characters – Put important keywords in title and meta description While entering the Meta Tag Description, consider the following best practices: – 160 characters long – We have seen search engine alway do not pick the meta description but enter them. – Better not to include double quotation marks While entering the SEO keyword: – Include the main keyword or product name and better to use the lowercase and not to use the prepositions words – Better not to use underscore (_), instead use dashes (-) – Better not to include double quotation marks or single quotation and special characters
Follow same for Admin >> Catalog >> Categories and Admin >> Catalog >> Information and Admin >> Catalog >> Manufacturers
Use social proof to gain user trust and keep your visitors engaged in your website
Link to your website on all social media profiles. Social proof is for customers’ confidence. Footer has options to keep the user engaged (social media, phone number, etc)
Internal linking is also important
In product pages, we can do it by adding the related products
Page Speed: Choose your hosting server properly
Use the right cache module to get more benefits like we missed Litespeed plugins in our WordPress website by which site was slow, so better to ask your hosting server which caches are supported. Check with the google page speed and follow their suggestions to improve the page speed. Improving the Google PageSpeed insights score will help a lot to show in the search results.
For improved performance: Minify HTML, Minify CSS, and Minify JS
Use srcset for images which help on properly sizing the images as per the screen
Load images properly as per the screen like with srcset you can load different images for different screens. one example image code: See the code srcset=”https://i1.wp.com/webocreation.com/wp-content/uploads/2019/08/out-of-stock-admin-setting.jpg?w=800&ssl=1 800w, https://i1.wp.com/webocreation.com/wp-content/uploads/2019/08/out-of-stock-admin-setting.jpg?resize=300%2C229&ssl=1 300w, https://i1.wp.com/webocreation.com/wp-content/uploads/2019/08/out-of-stock-admin-setting.jpg?resize=768%2C586&ssl=1 768w, https://i1.wp.com/webocreation.com/wp-content/uploads/2019/08/out-of-stock-admin-setting.jpg?resize=80%2C60&ssl=1 80w, https://i1.wp.com/webocreation.com/wp-content/uploads/2019/08/out-of-stock-admin-setting.jpg?resize=696%2C531&ssl=1 696w, https://i1.wp.com/webocreation.com/wp-content/uploads/2019/08/out-of-stock-admin-setting.jpg?resize=551%2C420&ssl=1 551w” this loads the images as per the width of the screen. We didn’t find any module for this, we will try to provide it soon, so for now, developer help needed.
Speed up the repeat visit by serving static assets with efficient cache policy
You can serve static assets with efficient cache policy by adding the following code in the .htaccess file, these are just our idea, you can make changes as per your requirement:
# Set up 1 week caching on javascript and CSS <FilesMatch “\.(js|css)$”> ExpiresDefault A604800 Header append Cache-Control “proxy-revalidate” SetOutputFilter DEFLATE </FilesMatch>
GZIP for more efficient transfer to requesting clients. Compression level must be between 0 – 9.
To enable the text compression in Opencart, go to Admin >> System >> Settings >> Server tab >> Add the “Output Compression Level”. The value should be 0-9, what we find out is most of the time it works above 5 but hit and trial is the only option that we see. With these, it minimizes the byte size of network responses and fewer bytes means page loads fast.
Developer or Designer tasks: Ensure text remains visible during Webfont load
Follow the idea provided at https://developers.google.com/web/updates/2016/02/font-display. Just for information, we tried that and in our case, we used font-display: swap and only works. Something like below: @font-face { font-family: ‘Arvo’; font-display: swap; src: local(‘Arvo’), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format(‘woff2’); }
Look for Critical CSS: Defer unused CSS, remove all unused CSS in a page, try to target CSS for each page.
Broken links on the website are harmful to SEO. So one freeway to check the broken link is https://www.brokenlinkcheck.com/ Once it found the broken links then fix them.
301 Redirect For Opencart 3 free module
Install this free module 301 Redirect For Opencart 3.0.x – Beta and you can redirect old URLs to new URLs, so if you have to change the SEO URL keyword then don’t forget to add the 301 redirects.
Best practices for SEO as they relate to local searches include creating a Google My Business page. This practice is especially important for brick-and-mortar businesses as it shows a rich result on local Google SERPs.
Add an SSL certificate to your site and redirect to the same host
For safety, security and customer confidence. All domains to be redirected to the same host as https://yourwebsiteurl.com, choose www or non-www and redirect to one and use one.
Mobile-first approach and Use a responsive, mobile-friendly design
Mobile-friendly is for mobile fitness, as google search started to index the mobile-first, so be sure you don’t hide things in mobile phone and show in desktop, if it is hidden in the mobile then google search will no see it, what we found is it checks for the content, links count to see if it is similar with desktop view and mobile view.
Make AMP page for Opencart
Consider creating and using AMP versions of your product pages for the fastest experience. Check this free module: AMP for Product Pages
Schema structured data markup for Opencart product page
Monitor website activities, get notified for downtime, setup SEMrush account and set google analytics
Check this blog post “Free Automated Testing and monitoring of Opencart functionalities and sites” which will monitor the downtime and send the notification and monitor for any errors by automated testing. For adding google analytics, Go to admin >> Extensions >> Extensions >> Choose Analytics >> Install the Google Analytics extension and edit add the analytics tracking code. Setup the free Semrush account and you will get 100 pages scanned every month, we found it valuable for a free account also so added here
Remove index.php?route= in OpenCart for contact, home, and other
It’s no secret that e-commerce fraud is on the rise. From phishing scams to fraudulent chargebacks, online businesses often struggle with high levels of fraud and lost income due to theft and misuse of their services. But don’t worry – there are some steps you can take to help reduce the chances of becoming a victim.
This guide will explore the best practices for preventing eCommerce fraud and keeping your business running smoothly and securely. So let’s get started!
Keeping your e-commerce business safe from fraud is all about prevention, so why not start at the checkout? Limiting order quantities can help you spot suspicious orders right away. For example, if someone’s trying to buy five of the same item in one go, that could be a potential warning sign.
Regarding specific rules, it’s wise to limit how many items an individual can purchase in one day or week and restrict orders for certain expensive items. This way, you can help ensure that legitimate customers are ordering what they need without giving criminals a chance to take advantage of your shop. Plus, it can help prevent over-ordering, leading to excessive returns and unhappy customers.
Be strict about verification
To protect your e-commerce store from fraudsters, you must have a strict verification process in place. This means ensuring that customers provide accurate information, such as a valid shipping address and phone number. You can also require customers to provide a current photo ID or credit card to verify their identity. Wondering why this is an essential practice in your business?
Well, the truth of the matter is that fraudsters are always on the lookout for an opportunity to take advantage. They can quickly identify and manipulate vulnerable systems with ease. By having strict verification measures in place, you’ll be able to protect your eCommerce store from any fraudulent activity. On top of that, you also make eCommerce customers feel safe since strict verification ensures the legitimacy of your website.
While it’s not always possible to tell if an order is suspicious at first glance, taking extra time and doing a little extra digging can go a long way. In the case of e-commerce fraud, it’s always better to be safe than sorry. If you spot something that looks a little off, don’t hesitate to check it out immediately.
Reach out to suspicious clients to settle your doubts and judge whether to continue with the transaction. This way, you’ll be able to protect your business from fraud and scams. Some common ‘red flags’ include customers outside your typical customer profile, multiple purchases from one IP address, and orders for expensive items without verification.
Always check and update site security
It’s a no-brainer: constantly checking and updating site security is the best way to protect your e-commerce business from fraud. This means ensuring that your website’s code is up-to-date and free of any vulnerabilities that hackers could exploit. This also includes renewing your SSL certificate to encrypt customer data or regularly monitoring for any signs of phishing scams and malicious activities.
In addition, look for any outdated or vulnerable versions of software and plugins and any new threats that may have been discovered since you last checked. Don’t forget to have an updated form of two-factor authentication for logging into customer accounts and adopting new measures to monitor IP addresses. All of this help stave off fraudsters who use loopholes to exploit weaknesses in your website system.
Post clear policies on your website
When it comes to protecting your e-commerce website from fraud, it pays to be proactive. One of the most important steps you can take is to post clear policies on your site so that customers know exactly what they should expect when making a purchase. From shipping times to potential taxes or fees, ensure it is all clearly stated and easy to find.
Aside from this, don’t forget to entail potential fraudulent policies on your website, including how you’ll deal with them. This way, customers who are trying to scam you will know that their actions won’t be tolerated and that they can expect swift action from you should anything suspicious occur.
Rely on anti-fraud tools
If you’re handling an e-commerce business, it’s absolutely essential to have the right anti-fraud tools in place. Not only will they help keep your customer’s data safe and secure, but they can also prevent many headaches down the line. Remember, these tools are designed to recognize suspicious activity and alert you to any potential threats.
They come in all shapes and sizes, ranging from traditional data analysis techniques like anomaly detection and machine learning algorithms to more advanced methods like facial recognition and biometrics. Some can even help you prevent cryptojacking, ensuring the safety of site visitors and customers alike. With them in place, you’re sure to have an extra layer of security against many types of fraud attempts.
Create detailed order records
No matter how big or small your e-commerce business is, it’s important to have detailed order records. Of course, it’s beneficial since it allows you to trace orders without any hassle. However, it’s also a great practice if you want to save yourself from many fraudulent attempts.
Doing so can help you quickly spot suspicious activity in requests, such as orders placed using stolen credit cards or duplicate ones from the same customer. Tip: ensure to include information such as the customer’s name, address, and order details in your records so that you can easily reference them if needed. You should also keep a record of any refunds or cancellations to support you in resolving any disputes that might arise.
In conclusion
Following these practices can help ensure that your e-commerce business is secure and protected from fraud. You can also provide a safe shopping experience for your customers, which is crucial if you want to pave the road to success!
With the launch of Opencart 4, there are changes in extensions or module management and code structure so we are creating Opencart 4 extension tutorial to create Opencart 4 modules or extensions and try to understand the flow and ways to develop Opencart 4 extensions. We will create a new module called “showallproducts” and others will be similar to it. Check Opencart 4 demo.
Files and folder structure of the Opencart module
The modules are in the extension folder in Opencart 4, now it is available in the root folder. When you see in the extension folder, by default there is an opencart folder and index.html, in the opencart folder, you will see all default extensions provided by default.
The file name should be between 1 letter and up to 128 letters.
The filename should end with “.ocmod.zip”
The uploaded file should not exceed the max file size: of 32 megabytes
Opencart extension installer checks if the file already exists, if it exists then it will throw an error.
It validates if the file can be opened and if there is an install.json that can be read. So, every extension should have install.json
How to create an install.json file in the Opencart extension?
Create a folder, in our example, it is “showallproducts” and inside it create a file name called install.json. It supports the following keys: name, version, author, and link.
Once install.json is inside the folder, you can zip it and name it that ends with .ocmod.zip, then uploads it from the Opencart extension installer.
For our example we named it show_all_products.ocmod.zip and uploaded in Admin >> Extensions >> Installer and click the upload blue button and we get details like the below:
While uploading, if you don’t get anything then you need to go to the storage folder and inside it see the marketplace folder and remove the existing zip file.
With this, you are ready to start coding and adding files for your module. Now, in our next opencart tutorial we will create all the files needed for the showallproducts module and start adding code to install it and create an admin form and show the link in the header when activated.
It will contain files and folders like the below:
Looks like we need to create a unique filename as well so for example as we are creating these files so our extension will be like webocreation_showallproducts.php and similar naming conventions.
In this Opencart 4 tutorial, we set up install.json for the opencart module and upload it, and we are ready to install it and create a way to add the functionalities. Please don’t forget to post your questions or comments so that we can add extra topics. You can follow us at our Twitter account @rupaknpl, and subscribe to our YouTube channel for an opencart tutorial. Click to see all Opencart 4 tutorials.
Today, I took HubSpot CMS certified developer exam because it was free, and luckily able to become a Certified Hubspot CMS Developer. With knowledge of HTML, and CSS and going through the Hubspot courses, and making some themes and email templates provided an overall idea to pass the HubSpot CMS developer.
How to make three columns module in Hubspot?
We are showing how to make three columns module in HubSpot with Hubl, HTML, and CSS. Login to the HubSpot app >> Click Marketing menu >> Files and templates >> Design Tools and right-click the theme where you need the three columns module >> Click New file.
Then, select the Module and click Next.
Enter the detail of the new module, check the checkbox where you want this module, here we want for Pages so only Pages is checked and module content scope is chosen Local module. Enter the file name and click Create button.
Once you created the modules, you will see the module.html, module.css, module.js file section and in the right section you can add the fields. Add two fields, one for image and another for text.
Once you created two fields, now you have to group them. Click on the Actions dropdown and select the Group.
Once you selected the Group, you select all the fields and click the “Create group” button, to make it a group and name it.
Once, you create the group, make the group fields repeatable by toggling like below and enter the minimum count, maximum count and default value.
After that copy the code snippet.
Now you can modify that code to make it three columns, so for us as per the fields name below is the code that we made and added on the module.html
After that we publish the module and it is ready to use. Now, create a landing page and click the three-columns module section and you will see objects like below which you can change and edit as per the needs.
In this way you can create three columns module in hubspot you can solve part of the HubSpot CMS for Developers Practicum for making the module
Team module
Must use repeating groups of fields to allow editors to add and subtract team members
Must be at least 3 columns on large screens with at least one media query to change the layout to 2 columns on screens below 900 pixels
