Magento2 frontend development

Magento 2 Frontend Development
Confidential
Kapil Dev Singh

Confidential
Content
1. Magento 2 and scope for frontend development
2. Elements & File Structure
3. Theme Building
○ New or Git clone
○ Naming convention
○ Registration
○ Deployment
○ Compiling
○ presentation layer

Confidential
Magento 2 and scope for frontend development
● Magento 2 means Magento now onwards
● e-Commerce, MVC, CMS, PHP, MySQL
○ Magento Backend
○ Magento Frontend
○ Magento Development
● Frontend is described independent section and has a vast scope for frontend
developers.
Get involved as a resource than a support.
● Responsibilities of writing code and setting layouts and design proper.

Confidential
Elements
● Vendor, Theme and Module
● Vendor - core modules of magento resides in folder
○ Core Modules
○ Default Blank Theme
■ Core theme, based on RWD
○ Default Luma Theme
■ Demo theme provided and extended version of Blank Theme

Confidential
New or Git clone
● Install from ZIP file
● Install using composer(recommended)
○ Composer - Dependency Manager in PHP
○ Access Keys - Install and update Magento packages/extensions Bought from marketplace
○ The permissions - Owner, webuser and end user
● Create Database in phpmyadmin
● Run Magento on web browser and follow the installation steps
● Run deploy command and provide permission
>_ your_magento_dir > php bin/magento setup:static-content:deploy -f
>_ your_magento_dir > sudo chmod -R 777 var/ pub/ generated/

Confidential
File Structure
app - All Custom Modules will go in
/design/ - Theme directories
app/design/frontend/vendor/themeName
/code/ - Develop custom Magento code
/etc/env.php
bin - Magento command line script
lib - Separately packed libraries from Magento core
pub - All static file, Publicly accessible files
var - caches,logs and minified compiled template files
vendor – core modules defined in composer.json
(If magento is installed using composer)

Confidential
Declare New Theme
{{magento_root}} > app > design > frontend > vendor > theme_dir >
theme.xml
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd
">
<title>New theme</title>
<parent>Magento/Luma</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>

Confidential
Register Theme
{{magento_root}} > app > design > frontend > vendor > theme_dir >
registration.php
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::THEME,
'frontend/<Vendor>/<theme>',
__DIR__
);

Confidential
Configure Theme
In Admin, go to CONTENT > Design > Configuration. A Design Configuration page is opened. It
contains a grid with the available configuration scopes

Confidential
Configure Theme
In the configuration record corresponding to your store view, click Edit. The page with design
configuration for the selected scope is opened

Confidential
Include pre compliled Stylesheet/ CSS
Go to
Theme_dir > moduel_dir > layout > default_head_blocks.xml
Place the file in
Theme_dir > web >
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configur
ation.xsd">
<head>
<css src="css/owl-carousel.min.css" />
<css src="css/custom.css" />
<script src="js/wow.min.js"/>
</head>
</page>

Confidential
Environment Setup
>_ cd projectName
>_ projectname> php bin/magento
>_ projectname> php bin/magento deploy:mode:show
>_ projectname> php bin/magento deploy:mode:set developer
>_ projectname> php bin/magento cache:flush
>_ projectname> php bin/magento cache:clean
>_ projectname> php bin/magento setup:upgrade
>_ projectname> php bin/magento setup:static-content:deploy -f
>_ projectname> php bin/magento dev:template-hints:enable
>_ projectname> sudo chmod -R 777 var/ pub/ generated/

Confidential
Grunt
/***** Ubuntu command for Node Js Installation *****************/
>_ sudo apt-get install -y nodejs
/*********************************************************/
>_ projectname> npm install grunt grunt-cli
>_ projectname> npm install
>_ projectname> npm update

Confidential
Add theme to grunt configuration
srctheme: {
area: 'frontend',
name: 'Ranosys/srctheme',
locale: 'en_US',
files: [
'css/styles-m',
'css/styles-l'
],
dsl: 'less'
},
>_ your_magento_dir > grunt exec:<theme>
>_ your_magento_dir > sudo chmod -R 777
var/ pub/ generated/
>_ your_magento_dir > grunt less:<theme>
dev > tools > grunt > configs > theme.js

Confidential
Less files
● _theme.less - override variable and create own theme variables
● _module.less - overwrite variables and styles ( new declarations )
● _extend.less - inherit parent styles, override existing styles
● _ui-component_extend.less -
○ _colors_extend.less
○ _typography_extend.less
○ _minicart_extend.less
● Import component extend files in to _extend.less using @import
@import 'module/_minicart_extend.less';
@import 'module/_cart_extend.less';

Confidential
Fall backs ( Hierarchy )
● Custom theme module
● app/code custom modules (if applicable)
● Parent theme module
● Parent’s Parent theme module
● Magento core modules( Layouts XML and phtml files)
● lib/web directory

Confidential
Fall backs ( Hierarchy )

Confidential
Page Layout and Page Configuration
● Page Layout - Describe page wireframe, the outer structure (1 column, 2 column-left etc)
Core module - module_dir > view > frontend > page_layout
Theme DIR - theme_dir > Module_dir > page_layout
● Page Configuration - Declaration of the content and its meta information (Header, Section etc)
Core module - module_dir > view > frontend > layout
Theme DIR - theme_dir > Module_dir > layout
● Same fallback mechanism works for the template(.phtml) files
Core module - module_dir > view > frontend > templates
Theme DIR - theme_dir > Module_dir > templates

Confidential
Static Block, Widget, XML (Layouts)
● Static Block - small sections add or move separately
● Container - Structural element, use to create html elements by XML
<referenceContainer name="page.wrapper">
<container name="bs.hp.row" as="bs_hp_row"
label="Bootstrap HomePage Main Category Row" htmlTag="div"
htmlClass="src-home-cat-block" before="main.content">
<block class="MagentoCmsBlockBlock" name="category_promo">
<arguments>
<argument name="block_id" xsi:type="string">category_promo</argument>
</arguments>
</block>
</container>
</referenceContainer>

Confidential
<move element="store.settings.language" destination="header.container"
as="store_settings_language"/>
as="store_settings_language" before="breadcrumb"/>
as="store_settings_language" after="-"/>
<referenceBlock name="block_name" remove="true"/>
<referenceContainer name="content">
<block class="VendorModuleBlockTestTest" as="testali"
template="test/testali.phtml"/> </block>
</referenceContainer>

Magento2 frontend development

Recommended

Recommended

More Related Content

Similar to Magento2 frontend development

Similar to Magento2 frontend development (20)

Recently uploaded

Recently uploaded (20)

Magento2 frontend development