Book Image

Magento 2 - Build World-Class online stores

By : Fernando J Miguel, Ray Bogman, Vladimir Kerkhoff, Bret Williams, Jonathan Bownds
Book Image

Magento 2 - Build World-Class online stores

By: Fernando J Miguel, Ray Bogman, Vladimir Kerkhoff, Bret Williams, Jonathan Bownds

Overview of this book

Magento is the leading e-commerce software trusted by world`s leading organizations. Used by thousands of merchants for their transactions worth billions, it provides the flexibility to customize the content and functionality of your website. Our Magento Course will help you gain knowledge and skills that are required to design & develop world class online stores. Magento 2 Development Essentials - This book begins by setting up Magento 2 before gradually moving onto setting the basic options of the Sell System. You will learn Search Engine Optimization aspects, create design and customize theme layout, and adjust the Magento System to achieve great performance. Magento 2 Cookbook – This book is divided into several recipes, which show you which steps to take to complete a specific action. It will cover configuring your categories and products, performance tuning, creating a theme, developing a module etc. At the end of this book, you will gain the knowledge to start building a success website. Mastering Magento 2 - This is a comprehensive guide to using the all new features and interface of Magento 2 to build, extend, and design online stores. This book is your roadmap to managing your Magento store which teaches advanced and successful techniques. Focusing on Magento's Community version, this book offers you advanced guidance on managing, optimizing, and extending your store while taking advantage of the new features of Magento 2. This Learning Path combines some of the best that Packt has to offer in one complete, curated package. It includes content from the following Packt products • Magento 2 Development Essentials by Fernando J. Miguel • Magento 2 Cookbook by Ray Bogman and Vladimir Kerkhoff • Mastering Magento 2 by Bret Williams and Jonathan Bownds
Table of Contents (6 chapters)

Chapter 9. Improving Your Magento Skills

We are at the end of the book, but this only the beginning of your walk through the Magento training. It's important to know some Magento extension options, but it is more important to build your own path in the Magento world by studying for a certification and achieving a new professional level.

The following topics will be covered in this chapter:

  • Magento Connect extensions
  • Installing a Magento extension
  • Debugging Grunt.js styles
  • Magento knowledge center
  • Improving your Magento skills

Magento Connect extensions

The Magento 2.0 architecture allows a natural improvement of native resources and the addition of new ones. Magento 2.0 is built based on the best software development practices. Its architecture is modular, which allows the development of extensions, as we discussed in an earlier chapter.

Magento Commerce maintains a marketplace to provide Magento extensions known as Magento Connect (https://www.magentocommerce.com/magento-connect). Magento Connect includes extensions that provide new functionalities, such as modules, add-ons, language packs, design interfaces, and themes to extend the power of your store.

I strongly suggest that you visit Magento Connect to get some ideas for personal projects and follow the extension development tendency in the marketplace.

Installing a Magento extension

Besides the Magento Connect marketplace, to search for Magento extension solutions, you can access the extension options through your admin area. To access Magento extension options in your admin area, perform the following steps:

  1. Access your admin area at http://localhost/admin_packt.
  2. Navigate to Find Partners and Extensions | Visit Magento Marketplaces.
    Installing a Magento extension
  3. Once you choose the extension to install, Magento 2.0 offers two options for extension installation:
    • Installation via Composer
    • Manual installation

To install the extensions via Composer, you need to configure composer.json to work with the Magento 2 Composer repository (http://packages.magento.com/) as a repository solution for Magento Core extensions. The composer already has the Packagist (https://packagist.org/) configuration. To proceed with this configuration, perform the following:

  1. Open the terminal or command prompt.
  2. Go to the root directory of your Magento installation.
  3. Run the composer config repositories.magento composer http://packages.magento.com command.

To install a Magento extension via composer, do the following:

  1. Open the terminal or command prompt.
  2. Go to the root directory of your Magento installation.
  3. Run the composer require <vendor>/<module> command.
  4. An example of this is composer require Packt/TweetsAbout.
  5. Run the composer update command.
  6. Then, run the php bin/magento setup:upgrade command.
  7. In some cases, it is necessary to give write permissions again to the directories.

To install a Magento extension manually, perform the following steps:

  1. Download the .zip file of the module.
  2. Extract it and move it under the <magento_root_directory>/app/code directory.
  3. Run the php bin/magento setup:upgrade command.
  4. In some cases, it is necessary to give write permissions again to the directories (for example, the var directory)

Debugging styles with the Grunt task runner

As you noted in the previous chapters, for every change that you apply in a Magento extension or theme styles, you need to clean the static files directory and deploy it to see the effect. This process takes time and unnecessary effort. So, what if you have a tool to automate this process?

Grunt.js (http://gruntjs.com/) is a task runner to automate tasks; for example, it provides productivity in Magento development by automating CSS changes. To install Grunt, follow these steps:

  1. Install Node.js (https://nodejs.org) in your machine.
  2. Open the terminal or command prompt.
  3. Run the npm install -g grunt-cli command to install the Grunt command-line interface.
  4. Go to the packt/ Magento root directory and run the npm install grunt --save-dev command.
  5. Still under the packt directory, run the npm install command.
  6. Then, run the npm update command.
  7. In your favorite code editor open, the packt/dev/tools/grunt/configs/theme.js file, add the following code, and save it:
    'use strict';
    
    module.exports = {
        blank: {
            area: 'frontend',
            name: 'Magento/blank',
            locale: 'en_US',
            files: [
                'css/styles-m',
                'css/styles-l',
                'css/email',
                'css/email-inline'
            ],
            dsl: 'less'
        },
        luma: {
            area: 'frontend',
            name: 'Magento/luma',
            locale: 'en_US',
            files: [
                'css/styles-m',
                'css/styles-l'
            ],
            dsl: 'less'
        },
        backend: {
            area: 'adminhtml',
            name: 'Magento/backend',
            locale: 'en_US',
            files: [
                'css/styles-old',
                'css/styles'
            ],
            dsl: 'less'
        },
    
        compstore: {
            area: 'frontend',
            name: 'Packt/compstore',
            locale: 'en_US',
            files: [
              'css/styles-m',
              'css/styles-l',
              'css/source/compstore'
            ],
            dsl: 'less'
        }
    };

Once the Grunt environment is configured, it's time to test Grunt. Perform the following steps:

  1. Open the terminal or command prompt.
  2. Run the grunt exec:compstore command.
  3. Then, run the grunt less:compstore command.
  4. Run the grunt watch command.
    Debugging styles with the Grunt task runner

These commands will create a direct channel with the possibility to edit your .CSS files on the fly. The grunt watch command shows you the update in real time. With "grunt watch" still active in your terminal/prompt window, try to edit and save the body's background color in the app/design/frontend/Packt/compstore/web/css/source/compstore.less file to see the result in the browser by accessing your base URL:

Debugging styles with the Grunt task runner

Magento knowledge center

The Magento team provides great resources of documentation in order to increase the Magento developer's knowledge.

In the Magento documentation (http://magento.com/help/documentation), the user can access the USER GUIDES section for ENTERPRISE EDITION, COMMUNITY EDITION, DESIGNER'S GUIDE, and DEVELOPER DOCUMENTATION.

I strongly suggest that you, dear reader, study Magento's COMMUNITY EDITION, DESIGNER'S GUIDE, and DEVELOPER DOCUMENTATION in the first instance. These three documentations have solid concepts, and you can certainly take advantage by building your Magento concepts.

Magento knowledge center

Improving your Magento skills

Welcome to the world of information technology! The professionals of this area need to study harder every single day. It's totally crazy how technology is always in mutation. New technologies and solutions come in a short period of time, and professionals must be prepared all the time to keep an open mind, absorbing this situation assertively.

Magento provides an official training program available at http://magento.com/training/overview. You can access information about courses, and I strongly suggest that you think about Magento certification. Certifications can boost your career.

To learn more about Magento certification, refer to http://magento.com/training/catalog/certification. You can download a free Magento study guide by visiting http://magento.com/training/free-study-guide.

You have a lot of options, such as books, articles, and blogs, to train and improve your Magento skills. Be persistent on your objectives!

Summary

Congratulations! You won one more challenge; first, you acquired this great book, and then you completed the reading with merits. It was not easy, but I'm certain it was worth it.

In this chapter, you learned how to:

  • Manage Magento extensions
  • Test some Magento extension options
  • Build your own path to become a Magento success professional

Thank you so much. I know you can climb the highest mountains; never lose faith in yourself. Good luck!