Building Magento 2 Extension – let’s begin… (Updated)

There are a tons of blogs and materials around Magento 2, including development experiments, and overall sharing of knowledge. Good reference is Alan’s blog – http://alankent.wordpress.com, where he posts actual and interesting ideas, facts, news about Magento 2.

So, I want to join the group of Magento evangelists, and share my own experience of building extension for Magento 2. Sounds funny, taking in account I am developing Magento 2, but i think it will be good exercise for me to spend some time in Magento 2 Extension developer’s skin. Right?! 🙂

So, let’s do it together, the goal is to create new Magento 2 Extension, which will cover some important development practices and technics in new Magento 2 world. The extension will consist of several Modules, which will be posted here –  https://github.com/maksek/m2experience.

Let’s agree on terminology that will be used here, Extension is one or more modules which alter or extend Magento 2 behaviors. For now that’s it. If something else will popup, we gonna declare it later.

Let’s, begin.

Git Clone

Of course for start point we need to create skeleton and put it into proper place. It must be very convenient and easy to work with the module repository and magento2 repository. So, very first step we need to clone magento2 repo into my local environment.

mkdir maksek-magento2
cd maksek-magento2
git clone https://github.com/magento/magento2 .

The extension repo https://github.com/maksek/m2experience is already created, and we need to clone it (not surprise). For modules we must declare own vendor name, so let it be “Maxyek”. The way we will do “friendship” between 2 repositories is git submodule:

cd magento2/app/code
git submodule add https://github.com/maksek/m2experience.git Maxyek
cd Maxyek
git pull

That’s it. Now we have Magento2 repository locally, and we will use remote to update code each week, when next publication of Magento2 will happen. Also we have new code pool in app/code where we will publish new Magento Modules via github. The extension repo connected by submodule, and it will allow to push changes into repo easily with simple git pull/push commands.

UPD – while I am using submodules, starting October 2015 Magento 2 supports modules in vendor directory. It is recommended to use composer to install Magento 2, and keep your module in vendor dir.

ExtendedConfig – first step

Let’s start from creating new module “ExtendedConfig. It will add new section to System Configuration with some basic settings, we will figure out which later. First what we need to do is to create the module, add define basic config to introduce it for Magento 2. Minimal set of actions required to “create” new module – just to add etc/module.xml config, registration.php and composer.json if you plan to use composer packages.

extendedconfig

module.xml is main config file for every module, and consists of module name, dependencies and versions:

<?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="Maxyek_ExtendedConfig" setup_version="0.0.1"> 
    <sequence> 
        <module name="Magento_Config"/> 
    </sequence> 
</module> 
</config>

All possible configurations in Magento 2 have XSD schema, which allow to validate it during editing in IDE. Very useful tool, each developer must use it to save time. In config we declared only one dependency – Magento_Config, it must be loaded before the module, and of course we announced module name and initial version.

UPD: registration.php

Starting October 2015, each Magento 2 component should have registration.php file in their root directory. Component in Magento 2 may be module, library, language, theme. Each of the component has own type defined  in Magento\Framework\Component\ComponentRegistrar.

// Module registration
ComponentRegistrar::register(ComponentRegistrar::MODULE, '_', __DIR__);
// Theme 
ComponentRegistrar::register(ComponentRegistrar::THEME, '//', __DIR__);
// Language 
ComponentRegistrar::register(ComponentRegistrar::LANGUAGE, '_', __DIR__);
// Libraries
ComponentRegistrar::register(ComponentRegistrar::LIBRARY, '', __DIR__);

egistration.php will have such content:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Maxyek_ExtendedConfig',
    __DIR__
);

Also, if you use composer packages,  each component’s composer.json must invoke the file in the autoload section as follow:

{
  "name": "maxyek/module-extendedconfig",
  "description": "N/A",
  "require": {
    "php": "~5.5.0|~5.6.0|~7.0.0",
    "magento/module-config": "1.0.0-beta",
    "magento/framework": "1.0.0-beta"
  },
  "type": "magento2-module",
  "version": "0.0.1",
  "autoload": {
    "files": [ "registration.php" ],
    "psr-4": {
      "Maxyek\\ExtendedConfig\\": ""
    }
  }
}

Magento 2 uses PSR-4 standard, so you can locate your module anywhere with correct registration.php settings.

That’s enough to let Magento 2 know – there is new module with autoloader parameters.

Now we need to install Magento2 instance, it is easy to do using the doc – http://devdocs.magento.com/guides/v2.0/install-gde/bk-install-guide.html. During installation, on “Step 4: Customize Your Store” take a look into “Advanced Modules Configurations” section, we can see the new module Maxyek_ExtendedConfig there. It will do nothing for now, just have “spot” in codebase, but it is new Magento 2 module.

If we have pre-installed Magento 2 instance, then we need to run setup update:

php bin/magento setup:upgrade

Now we have new module and running instance of Magento 2.

In next post we will add new System config module. For now i need some break and finish some work 🙂

Let me know what you would like to see in the module, and we will do it together.

Advertisements

11 thoughts on “Building Magento 2 Extension – let’s begin… (Updated)

  1. Iam actually working for a company which could provide suggestion based on user search, so How to override the search bar , so that we could get the suggestions based on the content entered in the search box.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s