Topic: Magento 2

Magento 2 Theming with Grunt / Less Part 2 0


Installing and configuring Grunt

  1. Install node.js to any location on your machine.
  2. Install Grunt CLI tool globally. To do this, run the following command in a command prompt:
    npm install -g grunt-cli
  3. Install Grunt in your Magento directory. To do this, run the following commands in a command prompt:
    cd <your_Magento_instance_directory>
    npm install grunt --save-dev
  4. Install (or refresh) the node.js project dependency for your Magento instance. To do this, run the following commands in a command prompt:
    cd <your_Magento_instance_directory>
    npm install
    npm update
  5. Add your theme to Grunt configuration. To do this, in the dev/tools/grunt/configs/theme.js file
  6. If you want to use Grunt for “watching” changes automatically, without reloading pages in a browser each time, install the LiveReload extension in your browser.
  7. Check the video for complete Magento 2 installation, creating theme, installing and configuring grunt and some debugging. Magento 2 Installation

Magento 2 setup Upgrade scripts 0


  1. Under your Magento 2 module > inside the directory “Setup”
    (Create Magento 2 Module, Magento 2 install scripts)
    Create a new file: “UpgradeData.php” with the below content.

    
    <?php
    namespace Magleaks\Catalog\Setup;
    
    use Magento\Catalog\Model\Product;
    use Magento\Eav\Setup\EavSetupFactory;
    use Magento\Framework\Setup\ModuleContextInterface;
    use Magento\Framework\Setup\ModuleDataSetupInterface;
    use Magento\Framework\Setup\UpgradeDataInterface;
    
    class UpgradeData implements UpgradeDataInterface
    {
        /**
         * EAV setup factory
         *
         * @var EavSetupFactory
         */
        private $eavSetupFactory;
    
        /**
         * Init
         *
         * @param EavSetupFactory $eavSetupFactory
         */
        public function __construct(EavSetupFactory $eavSetupFactory)
        {
            $this->eavSetupFactory = $eavSetupFactory;
        }
    
        /**
         * @param ModuleDataSetupInterface $setup
         * @param ModuleContextInterface   $context
         */
        public function upgrade(
            ModuleDataSetupInterface $setup,
            ModuleContextInterface $context
        ) {
            $dbVersion = $context->getVersion();
            /** @var EavSetup $eavSetup */
            $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
    
            if (version_compare($dbVersion, '2.0.1', '<')) { // update an existing product attribute to add as soring options
                $eavSetup->updateAttribute(
                    Product::ENTITY,
                    'name',
                    'used_for_sort_by',
                    false
                );
            }
        }
    }
    
    
  2. Update the setup_version of your module in “etc/module.xml” file in your Module.

    
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
        <module name="Magleaks_Catalog" setup_version="2.0.1"/>
    </config>
    
    
  3. Go to your Magento 2 root folder from your terminal and run

    
    bin/magento setup:upgrade
    

Magento 2 create product attributes using install scripts 0


  1. Under your Magento 2 module, create a directory called “Setup”. (Create Magento 2 Module)
  2. Create a new file: “InstallData.php” inside the Setup directory with the below content.

    
    <?php
    namespace Magleaks\Catalog\Setup;
    
    use Magento\Catalog\Model\Product;
    use Magento\Catalog\Model\Product\Type;
    use Magento\Catalog\Model\Resource\Eav\Attribute;
    use Magento\Eav\Setup\EavSetupFactory;
    use Magento\Framework\Setup\InstallDataInterface;
    use Magento\Framework\Setup\ModuleContextInterface;
    use Magento\Framework\Setup\ModuleDataSetupInterface;
    
    /**
     * Class InstallData
     *
     * @package Magleaks\Catalog\Setup
     */
    class InstallData implements InstallDataInterface
    {
        /**
         * @var \Magento\Eav\Setup\EavSetupFactory
         */
        private $eavSetupFactory;
        /**
         * @param EavSetupFactory $eavSetupFactory
         */
        public function __construct(EavSetupFactory $eavSetupFactory)
        {
            $this->eavSetupFactory = $eavSetupFactory;
        }
        /**
         * @param ModuleDataSetupInterface $setup
         * @param ModuleContextInterface   $context
         */
        public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
        {
            /** @var EavSetup $eavSetup */
            $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
            $productTypes = [
                Type::TYPE_SIMPLE,
                Type::TYPE_VIRTUAL,
            ];
            $productTypes = join(',', $productTypes);
            $eavSetup->addAttribute(
                Product::ENTITY,
                'on_sale',
                [
                    'type'                    => 'int',
                    'label'                   => 'Sale',
                    'input'                   => 'boolean',
                    'sort_order'              => 50,
                    'global'                  => Attribute::SCOPE_WEBSITE,
                    'user_defined'            => true,
                    'required'                => false,
                    'used_in_product_listing' => true,
                    'apply_to'                => $productTypes,
                    'group'                   => 'General',
                    'unique'                  => false,
                    'visible_on_front'        => false,
                    'searchable'              => false,
                    'filterable'              => false,
                    'comparable'              => false,
                    'visible'                 => true,
                    'backend'                 => '',
                    'frontend'                => '',
                    'class'                   => '',
                    'source'                  => '',
                    'default'                 => '',
                ]
            );
        }
    }
    
    
  3. Go to your Magento 2 root folder from your terminal and run

    
    bin/magento setup:upgrade
    

Create Magento 2 Module 0


Magento 2 module structure is more organized than Magento 1. It keeps all views, controllers and config files in one directory. This make it easier to maintain and develop modules. Let’s see how to create simple module with controller.

    1. Create name space under app/code. Eg: app/code/Magleaks
    2. Create your module under your name space. Eg: app/code/Magleaks/Tutorial1
    3. Create module.xml file under module etc folder. app/code/Magleaks/Tutorial1/etc/module.xml (this is the minimum requirement for module. No need to create module xmls under etc.)
    4. Copy module deceleration from core module like Magento_Catalog and change module name, and remove other contents.
    5. <?xml version="1.0" encoding="UTF-8"?>
      <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
          <module name="Magleaks_Tutorial1" setup_version="2.0.0">
          </module>
      </config>
      
    6. Run setup upgrade to configure the module. (<Magento 2 root>/bin/magento setup:upgrade)
    7. New module name should be in module list. Also you can verify this in admin. (Stores=>Configuration=>Advanced=>Advanced)
    8. Now lets create controller. Create controller class Magleaks/Tutorial1/Controller/Tutorial1/Index.php as follows.
    9. <?php
      namespace Magleaks\Tutorial1\Controller\Tutorial1;
      
      class Index extends \Magento\Framework\App\Action\Action {
          
          public function execute() {
              echo 'We are here !'; 
          }
          
      }
      

       

    10. Create file Magleaks\Turorial1\etc\frontend\routes.xml for route. You can copy content from Magento core and edit.
    11. 
      <?xml version="1.0" encoding="UTF-8"?>
      <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">
          <router id="standard">
              <route id="magleaks" frontName="tutorial1">
                  <module name="Magleaks_Tutorial1" />
              </route>
          </router>
      </config>
      
    12. Now clear config cache and access controller via front end. /tutorial1/tutorial1/index

Check following video.
How to create M2 module

Magento 2 Theming with Grunt / Less Part 1 0


Magento 2 introduced brand new theme management mechanism. Some of new features are as follows

  • Extending layout files. In Magento 1 we had to copy entire layout xml file to local folder in order to make any changes. But Magento to allow it to extend layout files. Just need copy the part that you want to change. Also it allow you to override entire layout xml as in Magento 1, but it is not recommended.
  • Organized layout structure. Does not allow to add layout files without module folder. Check the folder structure.
  • Less as css compiler.
  • Css / Less inheritance. Less files from parent theme can be changed in custom themes.
Magento 2 theme structure
  • Built in less compiler to make development easier.
  • Css/Less library.

I will be demonstrating how to create and apply new theme in Magento 2 in part 2.

Part 2