2. 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
3. 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.
4. 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
5. 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/
6. 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)
9. 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
10. 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
11. 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>