3 Jan

How to use grunt in Magento 2?

In this article, you will be learning about how we can use grunt in Magento

Before starting the installation, Please rename the existing files package.json.sample and Gruntfile.js.sample in your root folder as package.json and Gruntfile.js respectively.

Follow the below steps to use grunt in Magento 2:

  • Step 1: Install Node.js
  • Step 2: Install Grunt CLI
  • Step 3: Install Node.js dependencies
  • Step 4: Add a theme to Grunt configuration
  • Step 5: Run Grunt commands

Step 1: Install Node.js

First, we need to install a stable version of Node.js.

Step 2: Install Grunt CLI

Now install the Grunt CLI tool globally by the following command:

npm install -g grunt-cli

Step 3: Install Node.js dependencies

nstall the node.js project dependencies, including Grunt, for your Magento instance. To do this, run the following commands in the command prompt:

cd <your_Magento_instance_directory>
npm install
npm update

Step 4: Add a theme to Grunt configuration

Add your theme to Grunt configuration. To do this, in the dev/tools/grunt/configs/themes.js file, add your theme in module.exports as shown below:

module.exports = {
       ...
   <theme>: {
   area: 'frontend',
       name: '<Vendor>/<theme>',
       locale: '<language>',
       files: [
       '<path_to_file1>', //path to root source file
       '<path_to_file2>'
   ],
       dsl: 'less'
       ...
},

Where the following notations are used:

<theme>: Your theme code, conventionally should correspond to the theme directory name.
<language>: specified in the ‘code_subtag’ format, for example, en_US. Only one locale can be specified here. To debug the theme with another locale, create one more theme declaration, having specified another value for language.
<path_to_file >: the path to the root source file, relative to the directory app/design/frontend/<Vendor>/<theme/>/web. You need to specify all root source files of the theme. If your theme inherits from a certain theme and does not contain its root source files, specify the root source files of the parent theme.

Step 5: Run Grunt commands

Now the installation process is completed, the next step is to run the Grunt commands:

grunt clean: This command removes static files related to your theme in both pub/static and var directories.

grunt exec: This one republishes source files symlinks to
pub/static/frontend/<Vendor>/<theme>/<locale>

grunt less: This command compiles all the css file using the symlinks in this location
pub/static/frontend/<Vendor>/<theme>/<locale>

grunt watch: This command is used to start the grunt tool to track the changes done in the main files like .less and re-compiles into CSS files.

Every time you change any of this in the source file, grunt watch will show notification in the terminal about the specific change and recompiles the changes simultaneously.

Cheers!

3 Jan

Magento 2 Useful Commands List

If you are like most of the developers, you will have juggled through different websites to find SSH / CLI commands for Magento 2. There is no single resource on web which has all useful commands list for Magento 2. I have been there and I know it is a sheer waste of time juggling through different sites. So, to save your time, I have compiled a list of most useful commands for Magento 2 in a single note for all the developers.

Below is the list of most important SSH / CLI commands for Magento 2 that I have found useful. To use these commands you will need to have SSH access to your server or use the Command Line for local access.

Setup Upgrade Using Command Line

php bin/magento setup:upgrade

If you don’t want to remove pub/static files while installing/updating database then use following command.

php bin/magento setup:upgrade --keep-generated

Cache Clean Using Command Line

php bin/magento cache:clean

Cache Flush Using Command Line

php bin/magento cache:flush

View cache status Using Command Line

php bin/magento cache:status

Enable Cache Using Command Line

php bin/magento cache:enable [cache_type]

Disable Cache Using Command Line

php bin/magento cache:disable [cache_type]

Static Content Deploy Using Command Line (Use -f for force deploy on 2.2.x or later)

php bin/magento setup:static-content:deploy

Static Content Deploy For Particular Language Using Command Line

php bin/magento setup:static-content:deploy en_US

Static Content Deploy For Magento Backend Theme Using Command Line (Working on 2.1.1 or later)

php bin/magento setup:static-content:deploy --theme="Magento/backend"

Static Content Deploy For Specific Themes Using Command Line (Working on 2.1.1 or later)

php bin/magento setup:static-content:deploy --theme Magento/luma --theme Magento/second_theme

Exclude Themes on Static Content Deploy and does not minify HTML files Using Command Line (Working on 2.1.1 or later)

php bin/magento setup:static-content:deploy en_US --exclude-theme Magento/luma --no-html-minify

Reindexing Using Command Line

php bin/magento indexer:reindex

View the list of indexers Using Command Line

php bin/magento indexer:info

View indexer status Using Command Line

php bin/magento indexer:status

Show the mode of all indexers Using Command Line

php bin/magento indexer:show-mode

See all modules Status Using Command Line

php bin/magento module:status

Enable module Using Command Line

php bin/magento module:enable Namespace_Module

Disable module Using Command Line

php bin/magento module:disable Namespace_Module

Uninstall Module Using Command Line

php bin/magento module:uninstall Namespace_Module

Check Current Mode Using Command Line

php bin/magento deploy:mode:show

Change To Developer Mode Using Command Line

php bin/magento deploy:mode:set developer

Change To Production Mode Using Command Line

php bin/magento deploy:mode:set production

Run the single-tenant Compiler Using Command Line

php bin/magento setup:di:compile

Unlock Admin User Using Command Line

php bin/magento admin:user:unlock adminusername

Enable Maintenance Mode Using Command Line

php bin/magento maintenance:enable

To enable maintenance mode for all clients except 192.0.0.1 and 192.0.0.2:

php bin/magento maintenance:enable --ip=192.0.0.1 --ip=192.0.0.2

To clear the list of IPs.

php bin/magento maintenance:enable --ip=none

Disable Maintenance Mode Using Command Line

php bin/magento maintenance:disable

Check Maintenance Mode Status Using Command Line

php bin/magento maintenance:status

Allow IP on Maintenance Mode Using Command Line

php bin/magento maintenance:allow-ips --ip=192.0.0.1 --ip=192.0.0.2

Set Magento crontab Using Command Line

php bin/magento cron:install --force

Use –force to rewrite an existing Magento crontab.
To view the crontab, enter the following command as the Magento file system owner.

crontab -l

I hope this Magento technical note helped you find what you were looking for. This is a comprehensive list of all useful Magento 2 commands; bookmark it for your future reference.

3 Jan

How to create a child theme in Magento 2?

Sometimes, client requirement requires changes in the parent theme. But if the parent theme file is changed directly, we will not be able to upgrade it in the future. This is because if we we will lose all the changes. By creating a child theme, we will be able to retain our customization and also maintain both the original theme and the customized theme in separate folders.

below steps define how to create a Magento 2 child theme.

Note: In this example, we will be using ‘Dckap’ as the vendor name and ‘luma’ as the parent theme name.

Vendor name: Pipl

Parent Theme name: luma

1. Create child theme folder named as {parent-theme-name}_child in the below-mentioned folder path.

Magento root folder/app/design/frontend/{theme-vendor-name}/{parent-theme-name}_child

Ex:  Magento root folder/app/design/frontend/Pipl/luma_child

Child theme name can be anything. If the name refers parent theme name, it will be easily understandable and developer friendly.

2. Create file theme.xml inside the child theme to specify the parent theme inherited by the child theme.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>{Child Theme Name}</title>
    <parent>{parent-theme-vendor-name}/{parent-theme-name}</parent>
    <media>
        <preview_image>media/preview.png</preview_image>
    </media>
</theme>

Example :

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>Luma Child</title>
   <parent>Magento/luma</parent>
   <media>
       <preview_image>media/preview.png</preview_image>
   </media>
</theme>


Tags mentioned in the theme.xml file

Title – Title for the child theme. It will be displayed in the admin panel where we select the theme for the front end view of the site.

parent – We have to specify the parent theme name for the child. Based on the parent theme, child theme will inherit the property, layout, template files, and styles. Here we have to specify both vendor name of the parent theme and theme name.

{parent-theme-vendor-name} – It should exactly match the vendor folder name. Vendor name should be capitalized. Ex: Magento

{parent-theme-name} – It should be same as parent theme name. Ex: luma.

preview_image – This image will refer your child theme layout and design. It will be displayed in admin panel where you can view your child theme details. And also we should place the preview.png image inside the child theme media folder.

3. Create a registration.php file for registering your child theme.

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
  'frontend/{theme-vendor-name}/{parent-theme-name}_child',
  __DIR__);
 ?> 

{theme-vendor-name} – It should exactly match the vendor folder name. Vendor name should be capitalized. Ex: Pipl

Example :

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::THEME,
   'frontend/Pipl/luma_child',__DIR__);

4. Create composer.json.

{
    "name": "{theme-vendor-name}/theme-frontend-{parent-theme-name}-child",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "{parent-theme-vendor-name}/{parent-theme-name}": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "2.2.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Example :

{
    "name": "pipl/theme-frontend-luma-child",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/luma": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "2.2.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

5. Create web directory inside the child theme with the below empty directories and files.

6. The whole directory structure for the child theme.

7. Provide access/permission for child theme directories and files.

For giving permission for the child theme directory, navigate to the child theme directory in the terminal and run the below command.

sudo chmod -R 777 *

Note: If you are working in a local or development server you can provide 777 access for both files and directories. If live server, then you have to give 755 for directory and 644 for files.

8. The created child theme will be displayed in the admin panel.

Navigate to

Magento Admin Menu->Content->Themes.

Select child theme in admin configuration.

Navigate to

Magento Admin Menu->Content->Design->Configuration->Select Child theme->save configuration. 

Flush the cache.

9. Now take a backup of your pub/static folder for images, CSS, and js. Then delete the static folder and run static content deploy.

10. Navigate to the Magento root folder in your terminal and deploy static content using this command.

php bin/magento setup:static-content:deploy

11. The newly created child theme will also deploy in the pub/static folder.

12. We have created the child theme successfully. Now you can start customizing your child theme.