Magento 2 Front end Development in detail
•
0 likes•129 views
This document provides instructions for setting up a Magento theme and customizing it. It outlines the directory structure of a Magento project and where theme files should be located. It also includes code snippets for configuring the theme through XML files and modifying layout and CSS through LESS preprocessing. Finally, it details commands for deploying static content, enabling template path hints, and using Grunt to compile LESS files.
Recommended
Recommended
More Related Content
Similar to Magento 2 Front end Development in detail
Similar to Magento 2 Front end Development in detail (20)
Recently uploaded
Recently uploaded (20)
Magento 2 Front end Development in detail
- 5. ● ● ○ ○ ○ ● ● ● >_ your_magento_dir > php bin/magento setup:static-content:deploy -f >_ your_magento_dir > sudo chmod -R 777 var/ pub/ generated/
- 6. 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)
- 7. {{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>
- 8. {{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__ );
- 11. <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>
- 13. >_ 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/
- 14. /***** Ubuntu command for Node Js Installation *****************/ >_ sudo apt-get install -y nodejs /*********************************************************/ >_ projectname> npm install grunt grunt-cli >_ projectname> npm install >_ projectname> npm update
- 15. 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> s
- 17. ● ● ● ● ● ●
- 20. ● ● ●
- 21. ● ● <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>
- 22. <move element="store.settings.language" destination="header.container" as="store_settings_language"/> <move element="store.settings.language" destination="header.container" as="store_settings_language" before="breadcrumb"/> <move element="store.settings.language" destination="header.container" 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>
- 23. THANK YOU Query