Our Blog Posts

Step By Step Guide To Build Magento 2 Extension

What is a Magento extension - Magento development

What is a Magento Extension?

An extension is a logical group – that is, a directory containing blocks, controllers, helpers, models – that are related to a specific business feature. In keeping with Magento’s commitment to optimal modularity, a module encapsulates one feature and has minimal dependencies on other modules.

Extensionsand themes are the units of customization in Magento. Modules provide business features, with supporting logic, while themes strongly influence user experience and storefront appearance.

Both components have a life cycle that allows them to be installed, deleted, and disabled. From the perspective of both merchants and extension developers, modules are the central unit of Magento organization.

The Magento Framework provides a set of core logic: PHP code, libraries, and the basic functions that are inherited by the modules and other components.

You must follow a PSR compliant structure when building a module.

In this guide we will help you create a simple Magento 2 extension which can be useful as a base to create more advanced extensions for your Magento 2 webshop

Follow below steps for Magento 2 extension development:

Disable Cache

Make sure that Magento cache is disabled so that you don’t have to clear the cache you make changes in the extension. This will save you a lot of time in development.

To disable cache is to go to Admin → System → Cache Management → select all cache types and disable them.

Developer Mode

Ensure that your Magento store is in developer mode so that all changes are reflected in real time and you can view any errors you come across while doing coding.

For this you have to run commands from terminal using SSH access. Login to your Magento store SSH account and go to Magento root directory and run below command:

<?php bin/magentodeploy:mode:set developer ?>

Module Initialization

You may already have experience with this if you are Magento developer and have used its terminology for code pools. Magento 2 framework is same but has more code pools. They are grouped with namespaces and have to reside in app/code directory.

We have to first create files and directories to initialize and register the extension. Create below directories:

app/code/Icecube app/code/Icecube/Firstextension

After that create a file named module.xml in directory app/code/Icecube/Firstextension/etc and place following code:

<?xmlversion="1.0"?> <configxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <modulename="Icecube_Firstextension"setup_version="1.0.0"> </module> </config>

Next we need to register the module by creating file registration.php in directory app/code/Icecube/Firstextensionwith the following code:

<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Icecube_Firstextension', __DIR__ );?>

Create Controller

Now it’s time to define a router to use the path for all requests. Create a file named routes.xml in directory app/code/Icecube/Firstextension/etc/frontend and place following code:

<?xmlversion="1.0"?> <configxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd"> <routerid="standard"> <routeid="firstextension"frontName="firstextension"> <modulename="Icecube_Firstextension"/> </route> </router> </config>

By using route with id “firstextension” we have now defined the path for our frontend router.

The frontName attribute is going to be the first part of our URL.

In Magento 2 the URL’s are constructed as below:

//

So in our example, the final URL will look like this:

/firstextension/index/index

After the route has been defined we need to create the landing controller file index.php in directory app/code/Icecube/Firstextension/Controller/Indexwith following code:

<?php namespaceIcecube\Firstextension\Controller\Index; use Magento\Framework\App\Action\Context; class Index extends \Magento\Framework\App\Action\Action { protected$_resultPageFactory; publicfunction __construct(Context $context, \Magento\Framework\View\Result\PageFactory$resultPageFactory) { $this->_resultPageFactory=$resultPageFactory; parent::__construct($context); } publicfunction execute() { $resultPage=$this->_resultPageFactory->create(); return$resultPage; } }?>

In Magento 1 each controller can have multiple actions, but in Magento 2 every action has its own class which implements the execute() method.

Create Block

The Next step which is to a block class as method to return the values to show on front . In our case a simple text to return “This is your first extension”. Create file Firstextension.php in directory app/code/Icecube/Firstextension/Block with the following code:

<?php namespaceIcecube\Firstextension\Block; classFirstextensionextends \Magento\Framework\View\Element\Template { publicfunctiongetFirstExtensionTxt() { return'This is your first extension!'; } }?>

Create layout and theme

After these steps it just needs a layout file to show the value which is returned from extension block file. This is almost same as Magento 1. In Magento 2that layout files and templates reside in the view directory inside your module and inside the view directory, we can have three subdirectories: adminhtml, base and frontend

The adminhtmldirectory is used for admin, the frontend directory is used for frontend and the base directory is used for both, admin and frontend files.

Let’s create a file named firstextension_index_index.xmlin directory app/code/Icecube/Firstextension/view/frontend/layout and place following code:

<pagexmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd"layout="1column"> <body> <referenceContainername="content"> <blockclass="Icecube\Firstextension\Block\Firstextension"name="firstextension"template="firstextension.phtml"/> </referenceContainer> </body> </page>

We need to create a layout handle for each page as each controller action has layout handle and in our case the layout handle is firstextension_index_index.

Now we have to create a phtml file to set the template of our block which we have added in the layout handle. Create firstextension.phtml in directory app/code/Icecube/Firstextension/view/frontend/templates and place following code:

<?php echo $this->getFirstExtensionTxt(); ?>

By using $this object variable, we have referenced the block class we have created and from it we have called the method we have defined getFirstExtensionTxt() which returns the text ‘This is your first extension!’

Deploy

Last but not the least, we have to run one command to deploy the files we have created for extension so that its usable on Magento store. Login to your Magento store SSH account and go to Magento root directory and run below command:

php bin/magentosetup:upgrade

You can make sure that your extension is installed properly by going to Admin → Stores → Configuration → Advanced → Advanced and check that the module is present in the list otherwiseyou have to open app/etc/config.php and check the array for the ‘Icecube_Firstextension’ key, whose value should be set to 1.

And that’s all folks. Go to your browser and open the URL http://magentostore.com/firstextension/index/index and you should get the text displayed on your store page.

If you face any other technical issues while building your magento 2 extension, Please feel free to contact us and out Magento 2 developers would be glad to assist.

Share

Archives
Get Free Website
Audit Report
DMCA.com Protection Status