We saw some posts in Stackoverflow and Opencart forum to make the slideshow module full-width, similarly, the HTML content module full-width and similar posts asking help. Thus, we are showing you a simple way to make full-width with CSS for Opencart.
Make Slideshow full-width
The CSS used is similar to below which calculates the left position and starts from it making it 100% vertical width.
Now let’s start with the slideshow module. As we need to add the above code, so the easy we add it is on the Google Analytics module section. For that, go to admin >> Extensions >> Extensions >> Choose the extension type >> Analytics >> Install the Google Analytics >> Edit it >> Paste the above code in the Google Analytics Code field >> Enabled it >> Then, click the save button.
With this simple CSS code, the slideshow of the Opencart core becomes full-width.
A simple way is to add the title, content, and CSS all in the HTML description like below:
<div class="htmlcontentfullwidth">
<h2>This is heading title of HTML module</h2>
<p>
HTML Module description HTML Module description HTML Module description HTML Module description HTML Module description HTML Module description HTML Module description HTML Module description HTML Module description HTML Module description HTML Module description HTML Module description HTML Module description HTML Module description HTML Module description HTML Module description
</p>
</div>
<style>
.htmlcontentfullwidth{
left: calc(-1 * (100vw - 100%) / 2);
width: 100vw;
position: relative;
padding: 50px 20px;
}
</style>
An HTML content module doesn’t have any class or id by default so we implemented it like above. With that the HTML module becomes full width like below:
In this way, you can make a full-width module with a simple CSS in the Opencart version. Let us know if you have any other better ideas and need support to make any modules full-width. Please subscribe to our YouTube Channel for Opencart video tutorials and get lots of other Opencart free modules. You can also find us on Twitter and Facebook.
In this Opencart 3 module development tutorial, we are showing you how to create a multi-instance opencart 3 module frontend section and make an autoplay slider of testimonials. In our last two posts, we show how to perform Opencart CRUD functionalities of testimonials, create an admin custom listing page, form, validate it and save in the database, then create the admin section of the multi-instance opencart module now we will use those settings and show the testimonials at the frontend. The testimonial module at the frontend will look like in the image below. It will have a title, image, testimonial title, testimonial description, and sliders with autoplay and pagination.
We start by creating the language file go to catalog/language/en-gb/extension/module/ and create testimonial.php and paste the following code. We don’t have lots of text needed in the frontend so just adding heading_title.
After that, we create the controller file at catalog/controller/extension/module/ and name it testimonial.php, following is the code and the code is described in the comment. You can see one difference for multi-instance and single instance index method, in multi-instance we pass the $setting argument.
<?php
/*** As our file is testimonial.php so Class name is ControllerExtensionModuleTestimonial which extends the Controller base class ***/
class ControllerExtensionModuleTestimonial extends Controller
{
/*** Index method is called automatically or by default, if no parameters are passed, check this video tutorial for details https://www.youtube.com/watch?v=X6bsMmReT-4 .
$setting is the argument of index which contain all details of the module ***/
public function index($setting)
{
/*** Loads the language file catalog/language/en-gb/extension/module/testimonial.php by which the varaibles of the language file are accessible in twig file. ***/
$this->load->language('extension/module/testimonial');
/*** This is to load the model file catalog/model/extension/module/testimonial.php by which we can access all the method in ModelExtensionModuleTestimonial. ***/
$this->load->model('extension/module/testimonial');
/*** We can add custom CSS and JS as per needed for the controller. These two lines is to add the custom CSS that is needed only for this controller. Good for performance as it loads only when needed. We add these to show the slider effects for the testimonials ***/
$this->document->addStyle('catalog/view/javascript/jquery/swiper/css/swiper.min.css');
$this->document->addStyle('catalog/view/javascript/jquery/swiper/css/opencart.css');
/*** We add this to add custom JS for the slider effects of testimonials ***/
$this->document->addScript('catalog/view/javascript/jquery/swiper/js/swiper.jquery.js');
$data['testimonials'] = array();
/*** Setting array to pass for getTestimonials for filtering the testimonials
* $setting['limit'] is the value we get from the database which we added in the testimonial module setting section. Opencart find out for us to use the $setting. ***/
$filter_data = array(
'sort' => 'p.date_added',
'order' => 'DESC',
'start' => 0,
'limit' => $setting['limit']
);
/*** This is to call getTestimonials method of class ModelExtensionModuleTestimonial and retrieve the filtered out testimonials ***/
$results = $this->model_extension_module_testimonial->getTestimonials($filter_data);
if ($results) {
/*** This is to load the model file catalog/model/tool/image.php by which we can access all the method and especially we use resize method for resizing the image. ***/
$this->load->model('tool/image');
/*** We loop through the $results and sets testimonials array which is used in the twig or view file ***/
foreach ($results as $result) {
if ($result['image']) {
$image = $this->model_tool_image->resize($result['image'], $setting['width'], $setting['height']);
} else {
$image = $this->model_tool_image->resize('placeholder.png', $setting['width'], $setting['height']);
}
$data['testimonials'][] = array(
'testimonial_id' => $result['testimonial_id'],
'thumb' => $image,
'name' => $result['name'],
'description' => html_entity_decode($result['description'], ENT_QUOTES, 'UTF-8')
);
}
/*** This is to load the view catalog/view/theme/default/template/extension/module/testimonial.twig. ***/
return $this->load->view('extension/module/testimonial', $data);
}
}
}
Model file code description
Testimonials are custom data, so we need to create a model file also to retrieve the testimonials from the database. So let go to catalog/model/extension/module/ and create a testimonial.php and paste the following code. The following code is SQL to retrieve the testimonials.
<?php
class ModelExtensionModuleTestimonial extends Model
{
/** getTestimonials method is to retrieve the testimonials which is called from controller like $results = $this->model_extension_module_testimonial->getTestimonials($filter_data);. $data is the filtering parameter. Multiple testimonials are returned ***/
public function getTestimonials($data = array())
{
$sql = "SELECT * FROM " . DB_PREFIX . "testimonial c1 LEFT JOIN " . DB_PREFIX . "testimonial_description cd2 ON (c1.testimonial_id = cd2.testimonial_id) WHERE cd2.language_id ='" . (int) $this->config->get('config_language_id') . "'";
$sort_data = array(
'name',
'sort_order'
);
if (isset($data['sort']) && in_array($data['sort'], $sort_data)) {
$sql .= " ORDER BY " . $data['sort'];
} else {
$sql .= " ORDER BY sort_order";
}
if (isset($data['order']) && ($data['order'] == 'DESC')) {
$sql .= " DESC";
} else {
$sql .= " ASC";
}
if (isset($data['start']) || isset($data['limit'])) {
if ($data['start'] < 0) {
$data['start'] = 0;
}
if ($data['limit'] < 1) {
$data['limit'] = 20;
}
$sql .= " LIMIT " . (int) $data['start'] . "," . (int) $data['limit'];
}
$query = $this->db->query($sql);
return $query->rows;
}
}
View file or template file code description
At last, the view file or template file, which we create at catalog/view/theme/default/template/extension/module/, we named it testimonial.twig and paste the following code. We are showing the testimonial as a slider so we are using the Opencart default Swiper slider.
In this way, we create an Opencart 3 testimonial module’s frontend and show the setting that we entered in the multi-instance module admin section. Similarly, we make a slider of the testimonial module. 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!
In this Opencart tutorial, we go through how to create an off-site payment extension in Opencart 3.0.3.3, in our last tutorial, we show the eCommerce payment flow that happens in Opencart, here we will show how to create the PayPal Standard payment extension, as all 3rd party extensions are removed from the download files, saying it is taking too much time to maintain but these will be uploaded to opencart.com and will be provided in a JSON string to be downloaded on demand.
For OpenCart payment extension, here are the lists of files you need to create, the link is for GitHub page where you can get all the codes, below we are just describing what is important:
We see the form action URL is different so that field setting is needed in the admin, merchant email or business email is need where the payment is made, transaction method whether it is an Authorization or Sale transactions, Total field, Geo Zone field, Status, Sort Order field and order status fields are needed. You can know which fields are needed by going through the documentation of the Payment method.
So, for PayPal Standard here is the output for the admin section:
Let’s start with the admin controller file of Payment extension:
Open admin >> controller >> extension >> payment folder and create the paypal_standard.php, for yours you can name what your payment name is. In the file name _ is not needed, we add it just to differentiate it. Now open the paypal_standard.php and start creating the Controller Class.
As our file name is paypal_standard.php, the class name is ControllerExtensionPaymentPaypalStandard which extends the Controller base class. Although the filename includes _ (underscore), it is not needed for the Class name.
class ControllerExtensionPaymentPaypalStandard extends Controller {
Declaration of the private property ‘error’ so that we can get check if any error occurs in the whole class.
private $error = array();
Create an index method. The index method is called automatically if no parameters are passed, check this video tutorial for details https://www.youtube.com/watch?v=X6bsMmReT-4
public function index() {
Loads the language file by which the variables of language file are accessible in twig files
Loads the model admin/model/setting/setting.php so that we can use the methods defined there.
$this->load->model('setting/setting');
This is how we check if the form is submitted. When we submit the form then this block of code also runs. Then it also validates the modified permission and other validation.
if (($this->request->server['REQUEST_METHOD'] == 'POST') && $this->validate()) {
Look at this line of codes, this is the code section which distinguishes from Single Instance to Multi-Instance. If it is a payment extension then it acts as a Single instance module, which will have editSetting function, see the first parameters “payment_paypal_standard”, which need to be unique and it should start with “payment_”, all $_POST values will be saved on the setting database table. Then, it sets the success message in session and then redirects to the payment listing page.
In the database setting table, the code is “payment_paypal_standard” and have the key which is the field name and value is the field value.
The editSetting saves the data to oc_setting database table, see payment_ is important else it will not be saved. The following code sets the success message in the session.
This is to check what we fill out in the form, whether the email is added. If it is the loading time then it gets the value from the database config value which was stored in the oc_setting database table.
Similarly, other fields are checked, like for fields payment_paypal_standard_test, payment_paypal_standard_transaction, payment_paypal_standard_debug, payment_paypal_standard_total, payment_paypal_standard_canceled_reversal_status_id, payment_paypal_standard_completed_status_id, payment_paypal_standard_denied_status_id, payment_paypal_standard_expired_status_id, payment_paypal_standard_failed_status_id, payment_paypal_standard_pending_status_id, payment_paypal_standard_processed_status_id, payment_paypal_standard_refunded_status_id, payment_paypal_standard_reversed_status_id, payment_paypal_standard_voided_status_id, payment_paypal_standard_status, and payment_paypal_standard_sort_order. You can check those all opencart codes here.
Mostly, we use geo zones for payment extensions so that we can control as per the country or zones. So to pull the geo zones in opencart we use the following code:
Now, we see the validate method, this is how validation is done, we check whether the user has permission to modify or not. If you want to validate the form data then you can check it here as well. If there is an error then $this->error[‘warning’] is set and a warning is shown. We check whether the Paypal email is added or not. Similarly, you can check other validation here.
private function validate()
{
if (!$this->user->hasPermission('modify', 'extension/payment/paypal_standard')) {
$this->error['warning'] = $this->language->get('error_permission');
}
if (!$this->request->post['payment_paypal_standard_email']) {
$this->error['email'] = $this->language->get('error_email');
}
return !$this->error;
}
In this way, we write the code in the controller for the payment extension module at admin section.
The button type is submitted, and form equals value needs to be the form id. The form id is form-payment that is why it is, form=”form-payment”, the form code is like below:
Likewise, look at Order status tab, the code is similar for all the statuses, the select field name starts with payment_ and it loops order_statuses and the selected order status is saved in the database setting table.
This way you can check other codes and let us know in a comment if you need any code explanation.
With above four files created, our admin side coding is completed.
Now, catalog language file of Payment extension:
Let’s start with the language file catalog/language/en-gb/extension/payment and create paypal_standard.php, let’s define some variables which are useful for module
<?php
// Text
$_['text_title'] = 'PayPal';
$_['text_testmode'] = 'Warning: The payment gateway is in \'Sandbox Mode\'. Your account will not be charged.';
$_['text_total'] = 'Shipping, Handling, Discounts & Taxes';
Now, catalog controller file of Payment extension:
The following code is of front end controller file, go to catalog/controller/extension/payment and create paypal_standard.php and paste following code, here there are two methods index method and callback method.
As our file is paypal_standard.php so Class name is ControllerExtensionPaymentPaypalStandard which extends the Controller base class
class ControllerExtensionPaymentPaypalStandard extends Controller{
Create index method. Index method is called automatically if no parameters are passed, check this video tutorial for details https://www.youtube.com/watch?v=X6bsMmReT-4. In payment extension you don’t need to pass any parameter in index() method.
public function index() {
Loads the language file by which the varaibles of language file are accessible in twig files
Now, let’s check the callback() method. Some Instant Update variables set up the Cart Upload to use your callback server. Include the following required variables in the Cart Upload command to have PayPal send Instant Update requests to your callback server. It means the Paypal will call this URL and update the order status in the database of the website.
public function callback() {
PayPal sends back the order id so that we know it it is the right order that we are processing back.
Once the Paypal sends us back data, we need to verify again with the returned data to finalized if the data are not tampered. The image shows the flow:
Once we call the CURL, it returns back the responses whether it is verified or not. Then, we can check and update our order status, for checking the code is like below:
In the switch statement, check Canceled_Reversal case, the code is
case 'Canceled_Reversal':
$order_status_id = $this->config->get('payment_paypal_standard_canceled_reversal_status_id');
break;
It sets the $order_status_id to Canceled Reversal value or as per the setting configuration we do in the Paypal standard extension. Other order statuses are similar except Completed. See the Completed switch case code:
case 'Completed':
$receiver_match = (strtolower($this->request->post['receiver_email']) == strtolower($this->config->get('payment_paypal_standard_email')));
$total_paid_match = ((float) $this->request->post['mc_gross'] == $this->currency->format($order_info['total'], $order_info['currency_code'], $order_info['currency_value'], false));
if ($receiver_match && $total_paid_match) {
$order_status_id = $this->config->get('payment_paypal_standard_completed_status_id');
}
if (!$receiver_match) {
$this->log->write('paypal_standard :: RECEIVER EMAIL MISMATCH! ' . strtolower($this->request->post['receiver_email']));
}
if (!$total_paid_match) {
$this->log->write('paypal_standard :: TOTAL PAID MISMATCH! ' . $this->request->post['mc_gross']);
}
break;
For the completed status, we check whether the received amount and paid amount are matched or not. If it matched then only order status is set to completed. If the amount is not matched then a log is written on the log file.
Finally the order status is added on the history with the following lines of code:
In this way, we write the code at the catalog controller of Paypal Standard, similarly way we can write for other payment extensions.
Now, catalog model file of Payment extension
We need to create the model file, although we don’t call in the controller file. It is automatically called for payment methods. For that go to catalog/model/extension/payment and create paypal_standard.php and paste following code.
The payment class is created and we need the getMethod() method whose parameters are address and total. In getMethod() method we return the value when the currencies is supported, when geo zones are supported.
No header, no footer, no left or right column are needed on the template, with this, only the submit button is shown. Check the following code, this is to show the text saying it is only for test.
In this way, we write the code at the catalog template of PayPal Standard, similarly way we can write for other payment extensions. Please let us know in the comment if we need to define any of the code above.
Now once the Paypal Standard is activated then it will show like below:
In this way, you can create the form in the admin section, validate the form data, validate the permission, and save the data to the database in the setting database table for the Payment extension and show it in the front. Hope you liked this article, please subscribe to our YouTube Channel for Opencart video tutorials. You can also find us on Twitter and Facebook.
In this Opencart tutorial developer guide, we are showing how to create a custom payment module or extension in the Opencart version 3. Opencart by default supports more than 45 payment modules. Log in into admin, go to Extensions >> Extensions >> Choose the extension type “Payments”, you can see the lists of payments module in Opencart.
Here is the flow of the most eCommerce website.
Today we are showing you postmortem the payment gateway section.
Here are some of the normal steps that happen in the payment section:
When the customer is ready to pay for goods or services on your website, they select the payment method on your website.
There are two ways of payment gateway processing:
One is Off-site payment processing In the off-site payment, the website is redirected to the payment service website and payment is made on the payment service website. There will be no place to enter the credit card information or login to payment gateways. The payment gateway provides a Payment form in which we matched similar fields. Data are passed from Form. Need return URL or cancel URL so that when payment is a success it returns to that return URL and if the payment fails then it returns to the cancel URL. Skrill, Paypal Standard, Liqpay, etc. are the default payment modules for Off-site payment processing.
Another is on-site payment processing. In the on-site payment, the payment is made on the same site, the payment processing is done through APIs. The payment gateway provides a JSON request. There will be a form where they can enter the credit card details or bank information etc. Data are passed as JSON format. It will return success or failure messages through API in JSON format. Once you get the success or failure data then further processing can be done in the website server and the message can be shown or redirected to the success page. Authorize.net’s AIM, Paypal Pro, Square, etc. are the default payment modules for on-site payment processing.
When the payment method is Off-side payment processing then data are passed on hidden fields in the form. If we check the documentation of NoChex you can see the form code like below: https://ssl.nochex.com/downloads/Payment%20Guides/payment_page_integration_guide.pdf page no. 5
Mostly the payment gateway provides us with the form method type, action URL, and fields that we can pass to them for processing. Once you click the “Confirm Order” button, these hidden fields data are passed to the payment gateway and processing happens in their website.
When a payment gateway process the payment and is successful then the customer is directed to the success URL.
When the payment method is On-side payment processing then data are passed from website Server to payment gateway through API, as we are using Opencart which is builtin PHP so we use CURL to call the API.
The website server passes the data to the payment gateway through API, mostly CURL is used to communicate with the APIs, we pass JSON-formatted HTTP requests to the API endpoint in either the sandbox or production environment of the payment gateway.
Payment gateway requests authorization for the payment from the customer’s bank, third party provider, or card issuer.
The bank/provider/card issuer approves or rejects the transaction.
Payment gateway sends the success or failure response, containing the transaction result, and calls the Callback where the website server can process the data.
The website server processes data returned by the payment gateway and it redirects to the success page.
These are the steps that happen on Opencart for payments. So we need to take each step into consideration while developing the payment extensions.
Checklist for Developers while integrating the payment extension
Here is the checklist for the developer while integrating the payment extension on the Opencart or custom platform
Always make a google search if the Opencart payment extension is available, sometimes it is available for free.
If free is not available then start by creating/asking an account and visiting the documentation.
Mostly each payment gateway has a test environment so get test credentials. Create a playground account to get test credentials and get familiar with the test environment.
Follow the integration guide. Each of the product documentation provides an integration guide. Follow the instructions to make sure your payment process works as needed.
Be sure to check if what ISO country codes (3‐digit or 4-digit), what language support, and what currencies support are available for that payment gateway.
Check all your APIs in Postman to confirm everything, before development
Test the system. Make sure everything works. Remember you can place a test order using test credentials on Postman.
Be sure to read how error handling is done, how many rate limits, if any domains & IP address restrictions, policies, and compliance
After reading the documentation, now you can decide whether you need to make the Off-site payment extension or on-site payment extension.
How to use Opencart code snippets VSCode extensions?
Find “Opencart code snippets” extensions to install using the Extensions View.
Install an extension.
Once you installed the “Opencart Code snippets”, open ***.php or ***.twig or ***.xml
Then start typing oc… then you will see a list of Opencart related code snippets available.
For example, create a file called install.xml, then start typing oc, it will show ocmod and ocmodf, these are the Opencart code snippets available in the VScode extensions that you installed.
Once you finished the word like ocmod then it creates the codes automatically.
It highlights the word to be changed, enter the word that you need and click tab, then it will highlights the another words to be change
In this way, you can use the OpenCart Code snippets for rapid development.
Creating and publishing Visual Studio code extensions
This VSCode extension is for OpenCart developer which has a collection of OpenCart snippets. This is just starting, Please let us know if need to add more Contact Us
Documentation
All snippets start with oc. Some of the snippets are:
PHP page supported snippets:
occ: It creates a new Controller class
ocm: It creates a new Method or function
occm: It creates new starter Model class
ocl: It creates new variables for language files
ocprf: It creates print_r with pre
Twig page supported snippets:
oct: It creates starting template layouts in twig files
octfor: It creates for loop in twig files
octif: It creates if statement in twig files
ocbtn: It creates button markup
ocimg: It creates image markup
ocbc: It creates breadcrumbs loop in twig files
OCMOD XML page supported snippets:
ocmod: It creates OCMOD XML code boilerplate
ocmodf: It creates OCMOD XML code boilerplate for files only
Release Notes
Users appreciate release notes as you update your extension.
1.2.0 – OCMOD support added. – ocmod- for install.xml boilerplate creation – ocmodf- OCMOD XML file boilerplate – ocprf- print_r with pre
1.0.0
The initial release of Opencart Snippets for vscode
Please install the extension, try it out and share it with other Opencart developers which may help the development speed. It is free and open-source. Any suggestions, feedback, and other code snippets of Opencart are appreciated.
In this opencart tutorial, we are showing you, how to create an additional custom page in my OpenCart 3 website by coding. We are showing you by creating the categories listing custom page in Opencart 3.0.3.1.
“OpenCart theme and Module development” book says “OpenCart is an e-commerce shopping cart application built with its own in-house framework which uses MVCL (Model, view, controller, and language) pattern. Thus, each module in OpenCart also follows the MVCL pattern. The controller creates logic and gathers data from the model and it passes data to display in the view.” So to create a custom page, we will need a few files for it to work as a page.
Required files:
A controller file
A template file
Optional files:
Model file
Language file
Before you start reading below first, understand about the request and response in OpenCart, just understand the image and watch the following video which will clarify MVCL flow of Opencart.:
After watching the above video, you know about MVCL so it will be easy to understand below.
Controller File
Let’s start by creating a controller file in the controller folder. For this tutorial, we create a file named ‘categorieslist.php’ in the /catalog/controller/catalog/ folder. Since we named the file categorieslist.php and put it at the catalog/ folder, the controller class name will be ControllerCatalogCategorieslist which inherits the Controller like below, if you are thinking of any other custom pages then you also need to do same.
<?php
class ControllerProductCategorieslist extends Controller
{
public function index()
{
echo "This is category listing page";
}
}
The user requests to the controller through URL, so the URL here become YOURSITE.com/index.php?route=product/categorieslist. I was working in my localhost with “opencart.loc” domain so it shows like below:
If you get an error like below don’t panic just got to Admin >> Extensions >> Modifications and click the Refresh button.
Fatal error: Uncaught Error: Class ‘Controllerproductcategorieslist’ not found in …/modification/system/engine/action.php:71 Stack trace: #0 ../catalog/controller/startup/router.php(25): Action->execute(Object(Registry)) #1 …/modification/system/engine/action.php(79): ControllerStartupRouter->index() #2 /system/engine/router.php(67): Action->execute(Object(Registry)) #3 /system/engine/router.php(56): Router->execute(Object(Action)) #4 /system/framework.php(165): Router->dispatch(Object(Action), Object(Action)) #5 system/startup.php(104): require_once(‘/Applications/X…’) #6 /index.php(19): start(‘catalog’) #7 {main} thrown in modification/system/engine/action.php on line 71
These will help on easy debugging and no need to keep on clearing the cache again and again.
Now let’s add header, footer, column left, column right, content top and content-bottom like below and render the response output to categories list template.
As we write in our code $this->response->setOutput($this->load->view(‘product/categorieslist’, $data));, it means we are outputting code in categorieslist.twig file at catalog/theme/view/THEMENAME/template/product/categorieslist.twig. Let create the categorieslist.twig in that folder and put the following code:
{{ header }}
{{ column_left }}
{{ column_right }}
<div class="container">
<div class="col-sm-12">
This is categories list page
</div>
</div>
{{ content_top}}
{{ content_bottom }}
{{ footer }}
Then go to the URL YOURSITE.com/index.php?route=product/categorieslist and you will see like below with header and footer as we have not added any modules for this pages so there will be no module in this page for now:
If you don’t see the page, it means you have not cleared the theme cache and SCSS cache, which you can do from the admin dashboard:
Template File
Nothing fancy here, but whatever data you passed from the controller in $data[‘YOURVARIABLE’], you have access to the YOURVARIABLE in template twig file and just output as {{ YOURVARIABLE }}. Like this way you build logic in the controller, get the desired results and assign it in $data array and send it to the template.
Language File
OpenCart supports multi-language. So let’s create a language file and transfer data from language file to template twig file. For that let’s create a file named categorieslist.php in catalog/language/en-gb/product/categorieslist.php and paste the code below:
<?php
// Text
$_['meta_title'] = 'All Categories';
$_['meta_description'] = 'All Categories';
$_['meta_keyword'] = 'All Categories';
$_['categories_text'] = 'This is categories list page';
Whatever you define here, it will be access to template twig file when you load in a file in the controller. Now let’s change the /catalog/controller/catalog/categorieslist.php like below:
This is how we load the language files in the controller:
$this->load->language('product/categorieslist');
Then we can use the language file variable in controller and language file. In the controller, we use the language variable like:
$this->language->get('meta_title')
In the template twig file that is rendered by the controller, we can use directly with {{LANGUAGEVARIABLE}}, so our catalog/theme/view/THEMENAME/template/product/categorieslist.twig can directly access to categories_text variable of the language file.
Please be careful you can directly access to language variable into the twig file in Opencart 3, in OpenCart you cannot directly access without assigning to $data variable in the controller.
You can download all files from this tutorial in the file below:
We have successfully made our custom page. W can now access the page we created from YOURSITE.com/index.php?route=product/categorieslist .
In our next post, we will show all logics implemented to pull the categories from the database and work with the model class, databases, whole twig files by which we will make a whole module to show categories on a page.
Another free Opencart module for this Christmas and Happy New Year, we are providing Opencart module when activated we can add hovering image and in the frontend when we hover over to the image in products of category page it will swap with the hovering image.
How to install the swapping image Opencart module?
First, download the module by clicking the download button above and you will get hoveroverimage.ocmod.zip file. Then go to admin >> Extensions >> Installer >> then upload the hoveroverimage.ocmod.zip file.
Second go to admin >> Extensions >> Modifications >> then click the refresh button
Third, go to admin >> Extensions >> Extensions >> Choose module in extension type >> then find the “Hover Over Image” and click the install button for the Hover Over Image module. Once you install click edit and then choose enabled and click save.
Fourth, go to admin >> Catalog >> Products >> add or edit the product >> then enter the details of the product and click the Image tab, where you will see the “Upload Hover over Image” field, upload the image to show when it hovers over.
Finally, go to the frontend and visit the category where the product is assigned and then hover over the product image and see the swap of the image.
You installed the module, configured it and see the result like above. Let us know if you see any issues or want any improvement.
Once you upload the module then install the module, then it will create the oc_product_to_image_back database table. We need to create a new table because Opencart 3 doesn’t allow us to alter the core database tables.
public function installTableBackImage()
{
$this->db->query("CREATE TABLE `" . DB_PREFIX ."product_to_image_back` ( `id` INT NOT NULL AUTO_INCREMENT , `image_back` VARCHAR(255) NOT NULL , `product_id` INT NOT NULL , PRIMARY KEY (`id`))");
}
public function dropTableBackImage()
{
$this->db->query("DROP TABLE IF EXISTS `" . DB_PREFIX . "product_to_image_back`");
}
When you upload the image in “Upload Hover over Image” field at product section then all data are stored in the DB_PREFIX.product_to_image_back database table.
The Ocmod install.xml contains the following code:
In this way, you can set up the swapping the image when hovering over in products on the category page. Let us know if need any support. Please subscribe to our YouTube Channel for Opencart video tutorials and get lots to other Opencart free modules. You can also find us on Twitter and Facebook. Merry Christmas and Happy New Year 2020.
We activate the free checkout payment module in Opencart 3.0.2.0, then we start ordering but all orders go to the Missing Orders in Sales, so debugging we found out that somehow the free checkout files were not updated properly in the Opencart version 3.0.2.0. Here are the changes that we did to make it work:
Open the file admin/controller/extension/payment/free_checkout.php and find the following lines of code:
See the “payment_”, as we mentioned in Single instance Opencart module development tutorial all single instance payment module fields should start with “payment_”, it was missing in the above code that is why it was not working.
Similarly, open admin/view/template/extension/payment/free_checkout.twig and find the following lines of code:
Download and upload the files to the respective folder which will override the files and you are good to go. With these changes, our orders are showing in Sales.
In this way, you can solve the issues of free checkout sales going to the missing order’s sales. 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. Subscribe to our YouTube channel for Opencart tutorials, and click to see all Opencart free module.
In this post, we will show only admin code, in the next post we will show you the catalog or frontend code.
The code in admin/controller/extension/module/testimonial.php describes the controller code of the multi-instance opencart module. We describe the code in the comment:
<?php
/*** As our file is testimonial.php so Class name is ControllerExtensionModuleTestimonial which extends the Controller base class ***/
class ControllerExtensionModuleTestimonial extends Controller
{
/*** Declaration of the private property 'error' so that we can get check if any error occurs in the whole class**/
private $error = array();
/*** Index method is called automatically or by default, if no parameters are passed, check this video tutorial for details https://www.youtube.com/watch?v=X6bsMmReT-4 . ***/
public function index()
{
/*** Loads the language file admin/language/en-gb/extension/module/testimonial.php by which the varaibles of the language file are accessible in twig file. ***/
$this->load->language('extension/module/testimonial');
/*** Set the Document title ***/
$this->document->setTitle($this->language->get('heading_title'));
/*** Loads the model admin/model/setting/module.php so that we can use the methods defined there. The difference in single instance and multi-instance is here, in single instance we used to load $this->load->model('setting/setting'); but here we load setting/module ***/
$this->load->model('setting/module');
/*** This is how we check if it is form submitted or not. When we submit the form then this block of code also run. Then it also validate the modify permission and other validation. ***/
if (($this->request->server['REQUEST_METHOD'] == 'POST') && $this->validate()) {
/*** Look at these lines of code, this code section which distinguishes from Single Instance to Multi-instance. If it is single instance then it will be like $this->model_setting_setting->editSetting('***', $this->request->post); This editSetting save the data to oc_setting database table. But in multi-instance the code is like below it checks if the module_id is set if it is set then it get edit module data by editModule method, but if someone click Add button then no module_id is set and it adds new module data to the module database table. ***/
if (!isset($this->request->get['module_id'])) {
$this->model_setting_module->addModule('testimonial', $this->request->post);
} else {
$this->model_setting_module->editModule($this->request->get['module_id'], $this->request->post);
}
/*** This is to delete the cache of the testimonial. ***/
$this->cache->delete('testimonial');
/*** This set the success message in the session. ***/
$this->session->data['success'] = $this->language->get('text_success');
/*** This is to redirect to the extensions page. ***/
$this->response->redirect($this->url->link('marketplace/extension', 'user_token=' . $this->session->data['user_token'] . '&type=module', true));
}
/*** This is to check if there are any warnings ***/
if (isset($this->error['warning'])) {
$data['error_warning'] = $this->error['warning'];
} else {
$data['error_warning'] = '';
}
/*** As we are validating 'Module Name' in the validate method so if validate method returns name error then it is assigned here and the error is shown in the form field. ***/
if (isset($this->error['name'])) {
$data['error_name'] = $this->error['name'];
} else {
$data['error_name'] = '';
}
/*** This is also to set the error for the form field width ***/
if (isset($this->error['width'])) {
$data['error_width'] = $this->error['width'];
} else {
$data['error_width'] = '';
}
/*** This is also to set the error for the form field height ***/
if (isset($this->error['height'])) {
$data['error_height'] = $this->error['height'];
} else {
$data['error_height'] = '';
}
/*** Following are for breadcrumbs ***/
$data['breadcrumbs'] = array();
$data['breadcrumbs'][] = array(
'text' => $this->language->get('text_home'),
'href' => $this->url->link('common/dashboard', 'user_token=' . $this->session->data['user_token'], true)
);
$data['breadcrumbs'][] = array(
'text' => $this->language->get('text_extension'),
'href' => $this->url->link('marketplace/extension', 'user_token=' . $this->session->data['user_token'] . '&type=module', true)
);
/*** Check this section of if else statement, we see the difference in single instance and multi-instance. Here it is checking if module_id is set then it has different href URl and if not set different URL. ***/
if (!isset($this->request->get['module_id'])) {
$data['breadcrumbs'][] = array(
'text' => $this->language->get('heading_title'),
'href' => $this->url->link('extension/module/testimonial', 'user_token=' . $this->session->data['user_token'], true)
);
} else {
$data['breadcrumbs'][] = array(
'text' => $this->language->get('heading_title'),
'href' => $this->url->link('extension/module/testimonial', 'user_token=' . $this->session->data['user_token'] . '&module_id=' . $this->request->get['module_id'], true)
);
}
/*** Form action URL as per the module edited or for new module ***/
if (!isset($this->request->get['module_id'])) {
$data['action'] = $this->url->link('extension/module/testimonial', 'user_token=' . $this->session->data['user_token'], true);
} else {
$data['action'] = $this->url->link('extension/module/testimonial', 'user_token=' . $this->session->data['user_token'] . '&module_id=' . $this->request->get['module_id'], true);
}
/*** Form cancel URL ***/
$data['cancel'] = $this->url->link('marketplace/extension', 'user_token=' . $this->session->data['user_token'] . '&type=module', true);
/*** This is to get the module data, if module_id is set then it gets module data from database and set it to $module_info variable. ***/
if (isset($this->request->get['module_id']) && ($this->request->server['REQUEST_METHOD'] != 'POST')) {
$module_info = $this->model_setting_module->getModule($this->request->get['module_id']);
}
/*** This will check if it form filled and clicked save button and occurs some errors then it will set the name with POST name value. If it is edit then it will set the name value with the module detail. If it is add then empty is set. ***/
if (isset($this->request->post['name'])) {
$data['name'] = $this->request->post['name'];
} elseif (!empty($module_info)) {
$data['name'] = $module_info['name'];
} else {
$data['name'] = '';
}
/*** Same as above this will check if it form filled and clicked save button and occurs some errors then it will set the limit with POST limit value. If it is edit then it will set the limit value with the module detail. If it is add then empty is set. ***/
if (isset($this->request->post['limit'])) {
$data['limit'] = $this->request->post['limit'];
} elseif (!empty($module_info)) {
$data['limit'] = $module_info['limit'];
} else {
$data['limit'] = 5;
}
/*** Same as above this will check if it form filled and clicked save button and occurs some errors then it will set the width with POST width value. If it is edit then it will set the width value with the module detail. If it is add then default value is set to 200. ***/
if (isset($this->request->post['width'])) {
$data['width'] = $this->request->post['width'];
} elseif (!empty($module_info)) {
$data['width'] = $module_info['width'];
} else {
$data['width'] = 200;
}
/*** Same as above this will check if it form filled and clicked save button and occurs some errors then it will set the height with POST height value. If it is edit then it will set the height value with the module detail. If it is add then default value is set to 200. ***/
if (isset($this->request->post['height'])) {
$data['height'] = $this->request->post['height'];
} elseif (!empty($module_info)) {
$data['height'] = $module_info['height'];
} else {
$data['height'] = 200;
}
/*** Same as above this will check if it form filled and clicked save button and occurs some errors then it will set the status with POST status value. If it is edit then it will set the status value with the module detail. If it is add then default value is set to empty. ***/
if (isset($this->request->post['status'])) {
$data['status'] = $this->request->post['status'];
} elseif (!empty($module_info)) {
$data['status'] = $module_info['status'];
} else {
$data['status'] = '';
}
/*** This is how we load the header, column left and footer ***/
$data['header'] = $this->load->controller('common/header');
$data['column_left'] = $this->load->controller('common/column_left');
$data['footer'] = $this->load->controller('common/footer');
/*** This is to set output data variables to the view or twig files and twig file is loaded and html rendering is done with it. ***/
$this->response->setOutput($this->load->view('extension/module/testimonial', $data));
}
/*** This is how validation is done, we check whether the user has permission to modify or not.***/
/*** Here we validate name, width and height ***/
/*** If there is error then $this->error['warning'] is set and warning are shown.***/
protected function validate()
{
if (!$this->user->hasPermission('modify', 'extension/module/testimonial')) {
$this->error['warning'] = $this->language->get('error_permission');
}
if ((utf8_strlen($this->request->post['name']) < 3) || (utf8_strlen($this->request->post['name']) > 64)) {
$this->error['name'] = $this->language->get('error_name');
}
if (!$this->request->post['width']) {
$this->error['width'] = $this->language->get('error_width');
}
if (!$this->request->post['height']) {
$this->error['height'] = $this->language->get('error_height');
}
return !$this->error;
}
}
For language we create testimonail.php file at admin/language/en-gb/extension/module/ and paste the following code. We defined required language variables and assign them the text of that language.
<?php
// Heading
$_['heading_title'] = 'Testimonial';
// Text
$_['text_extension'] = 'Extensions';
$_['text_success'] = 'Success: You have modified Testimonial module!';
$_['text_edit'] = 'Edit Testimonial Module';
// Entry
$_['entry_name'] = 'Module Name';
$_['entry_limit'] = 'Limit';
$_['entry_width'] = 'Width';
$_['entry_height'] = 'Height';
$_['entry_status'] = 'Status';
// Error
$_['error_permission'] = 'Warning: You do not have permission to modify Testimonial module!';
$_['error_name'] = 'Module Name must be between 3 and 64 characters!';
$_['error_width'] = 'Width required!';
$_['error_height'] = 'Height required!';
For the form page, we create testimonial.twig at admin/view/template/extension/module/ and add the following lines of code, they are self-explanatory, let us know in the comment is you didn’t understand anything.
In our next post, we will create the frontend section of the multi-instance testimonial module and show it in different layouts.
Like this way we create a testimonial module setting form in Opencart admin, validate the form, submit the form data to the database, list out the multiple instances of the module in the module listing page, edit each module and update it, and we can perform the delete from the module listing page, like this we create admin section of the multi-instance module in Opencart.
Upload the zip file from extension installer, refresh in modification and install it
Go to Admin >> Extensions >> Installer and upload the login-module.ocmod.zip. Then go to Admin >> Extensions >> Modifications and click Refresh button. Then go to Admin >> Extensions >> Extensions >> Choose Module >> find Login module then click the install blue button. Then click the edit button and select status to Enabled and click Save button.
Add to the layout to show in the frontend
Go to Admin >> Design >> Layouts >> edit one of the layouts, in our case let’s edit the Contact layout. Then add the login module in the left column. Then go to the contact us page and you can see like below:
Following are the frontend files for the login module:
<?php As our file is login.php so Class name is ControllerExtensionModuleLogin which extends the Controller base class class ControllerExtensionModuleLogin extends Controller {
Create the index method. The Index method is called automatically if no parameters are passed, check this video tutorial for details https://www.youtube.com/watch?v=X6bsMmReT-4. The difference between the single instance and multi-instance module is in the index method, multi-instance module’s index method is like “public function index($setting) {“ public function index() {
Loads the language file by which the variables of language file are accessible in twig files $this->load->language('extension/module/login');
This is to set the value if the customer is logged in or not if the customer is logged in then the value is 1 $data['logged'] = $this->customer->isLogged();
This is to set the form action URL, register link, and forgotten password URL $data['action'] = $this->url->link('account/login', '', true); $data['register'] = $this->url->link('account/register', '', true); $data['forgotten'] = $this->url->link('account/forgotten', '', true);
This is to set redirect so that when someone is logged in then they will get redirected to that page. if (isset($this->request->post['redirect']) && (strpos($this->request->post['redirect'], $this->config->get('config_url')) !== false || strpos($this->request->post['redirect'], $this->config->get('config_ssl')) !== false)) { $data['redirect'] = $this->request->post['redirect'];} elseif (isset($this->session->data['redirect'])) { $data['redirect'] = $this->session->data['redirect']; unset($this->session->data['redirect']);} else { $data['redirect'] = '';}
This is to set the success message if (isset($this->session->data['success'])) { $data['success'] = $this->session->data['success']; unset($this->session->data['success']);} else { $data['success'] = '';}
To check is there is post value of an email is set, if not then it is empty if (isset($this->request->post['email'])) { $data['email'] = $this->request->post['email'];} else { $data['email'] = '';}
To check is there is post value of an email is set, if not then it is empty if (isset($this->request->post['password'])) { $data['password'] = $this->request->post['password'];} else { $data['password'] = '';}
To load the login view return $this->load->view('extension/module/login', $data);} }
In our next post, we will start to create the admin section of the multi-instance module.
In this way, you can create a module in the frontend. Let us know if need any support. Hope you liked this post, please subscribe to our YouTube Channel for Opencart video tutorials. You can also find us on Twitter and Facebook.
