Creating Custom Magento Modules

Creating custom Magento modules allows you to extend the functionality of your Magento store according to your specific business needs. Here’s a step-by-step guide to creating a custom Magento 2 module:

Step 1: Set Up Your Environment

1.1 Prerequisites

• Ensure you have a working Magento 2 installation.
• Have SSH access to your Magento server.
• Familiarity with PHP, XML, and basic Magento file structure.

Step 2: Create Module Directory Structure

Navigate to the app/code directory:
bash
Copy code
cd path_to_magento_root/app/code

Create the module directory structure:
bash
Copy code
mkdir -p VendorName/ModuleName

Step 3: Create registration.php

Create a registration.php file inside your module directory to register your module with Magento.

File Path: app/code/VendorName/ModuleName/registration.php

php

Copy code

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

    \Magento\Framework\Component\ComponentRegistrar::MODULE,

    ‘VendorName_ModuleName’,

    __DIR__

);

Step 4: Create module.xml

Define your module in module.xml to inform Magento about your module and its version.

File Path: app/code/VendorName/ModuleName/etc/module.xml

xml

Copy code

<?xml version=”1.0″?>

<config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Module/etc/module.xsd”>

    <module name=”VendorName_ModuleName” setup_version=”1.0.0″/>

</config>

Step 5: Create composer.json

Even though it’s not required for a simple module, it’s good practice to include a composer.json file.

File Path: app/code/VendorName/ModuleName/composer.json

json

Copy code

{

    “name”: “vendorname/modulename”,

    “description”: “Custom Magento 2 module”,

    “require”: {

        “php”: “~7.3.0||~7.4.0”,

        “magento/framework”: “103.0.*”

    },

    “type”: “magento2-module”,

    “version”: “1.0.0”,

    “license”: [

        “OSL-3.0”,

        “AFL-3.0”

    ],

    “autoload”: {

        “files”: [

            “registration.php”

        ],

        “psr-4”: {

            “VendorName\\ModuleName\\”: “”

        }

    }

}

Step 6: Create Module Configuration

6.1 Create di.xml for Dependency Injection

File Path: app/code/VendorName/ModuleName/etc/di.xml

xml

Copy code

<?xml version=”1.0″?>

<config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:ObjectManager/etc/config.xsd”>

    <!– Your dependency injections here –>

</config>

6.2 Create routes.xml (for custom routes)

File Path: app/code/VendorName/ModuleName/etc/frontend/routes.xml

xml

Copy code

<?xml version=”1.0″?>

<config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:App/etc/routes.xsd”>

    <router id=”standard”>

        <route id=”modulename” frontName=”modulename”>

            <module name=”VendorName_ModuleName” />

        </route>

    </router>

</config>

Step 7: Create Controllers

Create the Controller Directory:
bash
Copy code
mkdir -p app/code/VendorName/ModuleName/Controller/Index

1.  
2. Create an Index Controller:

File Path: app/code/VendorName/ModuleName/Controller/Index/Index.php

php

Copy code

<?php

namespace VendorName\ModuleName\Controller\Index;

use Magento\Framework\App\Action\Context;

use Magento\Framework\View\Result\PageFactory;

class Index extends \Magento\Framework\App\Action\Action

{

    protected $resultPageFactory;

    public function __construct(Context $context, PageFactory $resultPageFactory)

    {

        $this->resultPageFactory = $resultPageFactory;

        parent::__construct($context);

    }

    public function execute()

    {

        return $this->resultPageFactory->create();

    }

}

Step 8: Create View and Layout Files

8.1 Create Layout File

File Path: app/code/VendorName/ModuleName/view/frontend/layout/modulename_index_index.xml

xml

Copy code

<?xml version=”1.0″?>

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

    <body>

        <referenceContainer name=”content”>

            <block class=”Magento\Framework\View\Element\Template” name=”modulename_index_index” template=”VendorName_ModuleName::index.phtml”/>

        </referenceContainer>

    </body>

</page>

8.2 Create Template File

File Path: app/code/VendorName/ModuleName/view/frontend/templates/index.phtml

html

Copy code

<h1>Hello World from Magento Module!</h1>

Step 9: Enable and Deploy Your Module

9.1 Enable the Module

bash

Copy code

php bin/magento module:enable VendorName_ModuleName

9.2 Run Setup Upgrade

bash

Copy code

php bin/magento setup:upgrade

9.3 Deploy Static Content (if needed)

bash

Copy code

php bin/magento setup:static-content:deploy

9.4 Clear Cache

bash

Copy code

php bin/magento cache:clean

Step 10: Test Your Module

1. Access Your Module: Open your browser and navigate to http://yourmagentostore.com/modulename
2. Verify Output: You should see the message “Hello World from Magento Module!”

Conclusion

By following these steps, you can create a custom Magento 2 module that adds new functionality to your store. This basic module setup can be extended with additional features such as custom models, blocks, helpers, and more complex configurations. Always remember to follow Magento’s coding standards and best practices to ensure compatibility and maintainability.

If you have further questions or need more specific examples, feel free to ask!

Ready to take your e-commerce business to the next level? We’re here to help you succeed in the digital marketplace. Whether you’re looking to launch a new online store or optimize an existing one, our team at 247Commerce has the expertise and solutions to meet your needs.

Email: hey@247commerce.co.uk

Phone: +44 20 4547 9292