magento-2-dev-doc

miscellaneous dev task flows for magento 2 development

List of contents

1. Installation
2. Command line reference
3. Performance considerations
4. Quality Tools
5. Module development
6. Development tasks
7. Design tasks
8. Deployment
9. Useful 3rd party extensions

Installation

Clone repository / Use install guide

Composer installation

• php composer2 create-project magento/magento2 {PATH} "{VERSION}" --no-install
• cd {PATH}
• composer2 install
• bin/magento setup:install --base-url=... --base-url-secure=... --language=de_DE --currency=EUR --timezone=Europe/Berlin --admin-user=... --admin-firstname=... --admin-lastname=... --admin-email=... --admin-password=... --use-rewrites=0 --db-host=127.0.0.1 --db-user=... --db-name=one2buy --db-password=... --search-engine=elasticsearch7 --elasticsearch-host=127.0.0.1 --elasticsearch-port=9200

Command line reference

For a list of magento 2 commands look here or run bin/magento list

Performance considerations

See this link

Quality tools

• I highly recomment to have following tools in "require-dev" section of composer.json:

  expand

      "require-dev": {
          ...
          "friendsofphp/php-cs-fixer": "*",
          "magento/magento-coding-standard": "*",
          "magento/magento2-functional-testing-framework": "*",
          "phpmd/phpmd": "*",
          "phpstan/phpstan": "*",
          "phpunit/phpunit": "*",
          "squizlabs/php_codesniffer": "*"
          ...
      },
  

• All of these tools are configurable with PHPStorm and have own documentations

Module development

• Consider using Silksoftware module creator online tool
• Module development documentation

In webshop package

• Create custom vendor/module directory in app/code folder

Git/ composer package within project (recommended)

• Create custom directory in project root
  • f.e. src/
    NOTE: Add this path to shop project's .gitignore to prevent any accidential commits
• Add custom module to src/Vendor_Module/ directory
• Add as package to composer

composer2 config repositories.vendor.module -j '{
            "type": "package",
            "package": {
                "name": "vendor/module",
                "version": "dev-master",
                "source": {
                    "type": "git",
                    "url": "ssh://git@{URL:PORT}/vendor-module.git",
                    "reference": "master"
                },
                "dist": {
                    "type": "path",
                    "url": "src/Vendor_Module",
                    "options": {
                        "symlink": true
                    }
                },
                "autoload": {
                    "files": ["registration.php"],
                    "psr-4": {
                        "Vendor\\Module\\": ""
                    }
                }
            }
        }'

• Install with composer2 require vendor/module
• In development run composer2 install with --prefer-dist
• In production run composer2 install with --prefer-source

Development tasks

di.xml

Design tasks

How app/design/ directory works

• Create designs within the directory by

  • Adding subdirectory like vendor/design_name

  • Adding registration.php

    expand

            <?php
            \Magento\Framework\Component\ComponentRegistrar::register(
            \Magento\Framework\Component\ComponentRegistrar::THEME,
            'frontend/vendor/design_name',
            __DIR__
            );     
    

  • Adding theme.xml

    expand

        <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
            <title>{{THEME TILE}}</title>
            <parent>Magento/blank</parent> <!-- This can be any installed theme -->
            <media>
                <preview_image>/media/theme/preview/preview_image.jpeg</preview_image> <!-- relative to the themes directory -->
            </media>
        </theme>
    

Common design tasks

• Overriding layout/ template files:

  • To override those files, see their original path in the vendor module

  • You can then place a file in your theme under Vendor_Module/layout, Vendor_Module/templates, etc.

  • Omit the area in the file path (as the theme is based on an area already)

  • Examples

    Example 1

    • To replace vendor/magento/module-theme/view/frontend/templates/html/footer.phtml, copy it to app/design/frontend/vendor/design-name/Magento_Theme/view/templates/html/footer.phtml
    Example 2

    • To replace vendor/magento/module-theme/view/frontend/templates/html/topmenu.phtml, copy it to app/design/frontend/vendor/design-name/Magento_Theme/view/templates/html/topmenu.phtml
    Example 3

    • To replace vendor/magento/module-theme/view/frontend/layout/default.xml, copy it to app/design/frontend/vendor/design-name/Magento_Theme/layout/default.xml

Deployment

See sample deploy.sh

Useful 3rd party extensions

Mageplaza

Mageplaza Website

• SMTP
• Better Maintenance
• Login As Customer
• Delete Orders
• Google ReCaptcha
• Social Login

Weltpixel

Magento 2 Marketplace

• Responsive Banner Slider & Owl Carousel
• Ajax Cart & Quick View
• Lazy Load Products & Images

Sparsh Technologies

Magento 2 Marketplace

• Free Shipping Bar

Fooman

Magento 2 Marketplace

• Email Attachments
• Print Order PDF

Github OpenSource

Github ❤️

• Regenerate URL Rewrites
• URL Deduplication