Single Instance module frontend login module, Opencart 3 documentation

In our previous post, we show how to create an admin section of a module in Opencart 3, today in this Opencart documentation we will show you the frontend code of the single instance module, download the login module and install it, and show it in the frontend page.

How to install the login module?

Steps to install Opencart 3 module:

  1. Download the login module

    Once you download the login module, you will see zip file named login-module.ocmod.zip

  2. 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.

  3. 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:
    Opencart 3 login module

Following are the frontend files for the login module:

  • catalog/language/en-gb/extension/module/login.php
  • catalog/controller/extension/module/login.php
  • catalog/view/theme/default/template/extension/module/login.twig

Let’s start with the Language file admin/language/en-gb/extension/module/login.php, let’s define some variables which are useful for module: https://github.com/rupaknepali/Opencart-free-modules/blob/master/login-module/upload/catalog/language/en-gb/extension/module/login.php

<?php
// Text
$_['text_login']                   = 'Login';
$_['text_register']                = 'Register Account';
$_['text_forgotten']               = 'Forgotten Password';
// Entry
$_['entry_email']                  = 'E-Mail Address';
$_['entry_password']               = 'Password';

Now we work with the controller, open catalog/controller/extension/module/login.php, the code is in the GitHub link https://github.com/rupaknepali/Opencart-free-modules/blob/master/login-module/upload/catalog/controller/extension/module/login.php

<?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);}
}

With this the controller code is done, now let’s make the catalog/view/theme/default/template/extension/module/login.twig with the following code, GitHub link for the code is https://github.com/rupaknepali/Opencart-free-modules/blob/master/login-module/upload/catalog/view/theme/default/template/extension/module/login.twig

{% if not logged %}
    <div class="well">
        <form action="{{ action }}" method="post" enctype="multipart/form-data">
            <h2>Log in</h2>
            <div class="form-group">
                <label class="control-label" for="input-email">{{ entry_email }}</label>
                <input type="text" name="email" value="{{ email }}" placeholder="{{ entry_email }}" id="input-email" class="form-control"/>
            </div>
            <div class="form-group">
                <label class="control-label" for="input-password">{{ entry_password }}</label>
                <input type="password" name="password" value="{{ password }}" placeholder="{{ entry_password }}" id="input-password" class="form-control"/>
                <a href="{{ forgotten }}">{{ text_forgotten }}</a>
                /
                <a href="{{register}}">{{text_register}}</a>
            </div>
            <input type="submit" value="{{ button_login }}" class="btn btn-primary"/>
            {% if redirect %}
                <input type="hidden" name="redirect" value="{{ redirect }}"/>
            {% endif %}
        </form>
    </div>
{% endif %}

The above code is to show the form, with this login module is done.

Let’s list out the difference between a single instance module and multi-instance module

 

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.

Previous articleOpencart Module Development: Single Instance module, Form creation, validation, and submission to the database
Next articleOpencart 3 module development tutorial, multi-instance testimonial free

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here