Creating a Simple Module in Magento 2.0

Magento 2.0 – Create A Simple Module

Modules are an integral part of Magento. The purpose of each module is to provide specific product features by implementing new functionality or extending the functionality of other modules. Developing a custom module gives us the freedom to implement customized solutions for a particular business need. Let’s have a look at creating a simple module in Magento 2.0.

Creation of a module in Magento 2.0 is quite different from Magento 1.X. In magento 2.0, all the modules are grouped by vendor. Hence, We can create modules right inside the app/code directory.

Every module in Magento 2.0 has unique name that’s made up of two parts. For example, we’re going to create a module named Zgento_LightBox. The first part (Zgento) is called the VendorName describes the company or individual that built the extension. The second part, LightBox, describes what the extension does(Lightbox gallery with next and previous buttons to easily navigate through product images).

  • Step 1: Create the Directories.

To start with our module we’ll create the directory: app/code/Zgento/LightBox. The code pools(local, community, and core) are eliminated in Magento 2.0. We can now directly create the modules inside the app/code directory.

We’ll also create the following sub-directories:

  • app/code/Zgento/LightBox/
  • app/code/Zgento/LightBox/Block/
  • app/code/Zgento/LightBox/Controller/Index/
  • app/code/Zgento/LightBox/etc/
  • app/code/Zgento/LightBox/view/frontend/layout
  • app/code/Zgento/LightBox/view/frontend/templates

The “view” folder is entirely new. Layout and template files are saved in the folder “View” in the module.

  • Step 2: Declare the Module.

We’ll start with our configuration files. Write the file module.xml in app/code/Zgento/LightBox/etc/module.xml to declare the module. This module.xml file is the main module configuration file. The module.xml file is for registering the module.

<!-- File: app/code/Zgento/LightBox/etc/module.xml -->
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
<module name="Zgento_LightBox" schema_version="1.0.0" setup_version="1.0.0" />
</config>

The <module/> node tells Magento we want to add a module to the system. The name attribute indicate the name of the module, and the setup_version attribute tells the version of our module.

  • Step 3: Adding a Controller Action.

Now we can create our Controller action. Create the file Index.php in app/code/Zgento/LightBox/Controller/Index/Index.php
Here the folder Index is name of the controller and index.php is an action file.

# File: app/code/Zgento/LightBox/Controller/Index/Index.php
<?php namespace Zgento\LightBox\Controller\Index; class Index extends \Magento\Framework\App\Action\Action { public function execute() { $this->_view->loadLayout();
$this->_view->getLayout()->initMessages();
$this->_view->renderLayout();
}
}

The base class Magento\Framework\App\Action\Action is the standard base class for frontend controllers. The method excute() will be involked when the action is called.

  • Step 4: Creating a Block Class.

Let’s create a block for our module. Create block file app/code/Zgento/LightBox/Block/LightBox.php

<?php
namespace Zgento\LightBox\Block;
class LightBox extends \Magento\Framework\View\Element\Template
{

}

In the above example we have not implemented any methods,but if we were to implement some methods, in our template we would have access to them via the $block variable. Magento\Framework\View\Element\Template is Magento’s base template class.

  • Step 5: Layout files & Templates.

Now we need to create our layout configuration file and the template.

Let’s create a layout with the following name:
/Zgento/LightBox/view/frontend/layout/catalog_product_view.xml

<?xml version="1.0"?>

<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

<update handle="Zgento_lightbox"/>
<head>
<css src="Zgento_LightBox::css/lightbox.css"/>
<script src="Zgento_LightBox::js/lightbox.js"/>
</head>

<body>
<referenceBlock name="product.info.media.image" >
<action method="setTemplate" ifconfig="zgento_lightbox/general/enable">
<argument name="template" xsi:type="string">Zgento_LightBox::product/view/gallery.phtml</argument>
</action>
</referenceBlock>

</body>
</page>

In <head> tag, we can add files to the page such as adding CSS, js etc. In above example, we added the styles & js files to use when showing on frontend.

Now we need to create our template file gallery.phtml in the following directory.
app/code/Zgento/LightBox/view/frontend/templates/product/view/gallery.phtml

Once we have completed all the above steps, we need to activate our extension manually.

  • Step 6: Activate our Extension.

Let’s create registration.php file in the root folder of the module and put the following code inside:

# File: app/code/Zgento/LightBox/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Zgento_LightBox',
__DIR__
);

This is done to tell Magento 2 that it should run the extension from the current directory.

We have two ways to activate Zgento_LightBox extension.

  • Run the following console command:

php bin/magento setup:upgrade

Activate_module in Magento 2.0

OR

  • Add our module to the global module list at app/etc/config.php.

You’ll see a PHP include file with a long list of modules. Let’s add our module(add the element: ‘Zgento_LightBox’ => 1,) to the end of the array.

#File: app/etc/config.php
<?php return array ( 'modules' => 
 array (
 'Magento_Store' => 1,
 'Magento_AdvancedPricingImportExport' => 1,
 'Magento_Directory' => 1,
 'Magento_Theme' => 1,
 'Magento_Backend' => 1,
 'Magento_Backup' => 1,
 //............
 'Zgento_LightBox' => 1,
 ),
);

And that’s it! We have successfully created a very simple Magento 2.0 extension. Now go and clear Magento cache, and you’ll see that our extension is working now.

Enable_module_Magento

Thank you so much for following this tutorial. You can also download Zgento_LightBox extension for free by clicking here . 🙂 🙂

 

 

 

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *