Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Magento 2 theming - knowledge sharing session by suman kc

716 Aufrufe

Veröffentlicht am

Theming in magento 2.
Knowledge sharing session on Magento 2 theming by Suman KC at Ebpearls Pty Ltd. Presentation includes theming in magento2.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Magento 2 theming - knowledge sharing session by suman kc

  1. 1. This is Magento 2 Theming KSS (Knowledge sharing session) by Suman KC
  2. 2. I am Suman KC Magento developer www.linkedin.com/in/sumankc www.sumankc.com Hello!
  3. 3. Topics ◉Introduction ◉Themes ◉Layout ◉Templates ◉CSS
  4. 4. Introduction Magento & Magento 2 intro leading to theming aspects 1
  5. 5. ◉eCommerce platform ◉Huge ◉Unique ◉Poor documentation ◉Edition(Community & enterprise) Magento in general
  6. 6. 14K+ Files & 5K+ Folders That’s a lot of files & directory 109MBand that's before you add themes, modules and all your image libraries 300+ tablesProduct & category alone has 50+ tables relations Magento1.9.2
  7. 7. Magento views are separated into Magento views LayoutsBlocks Templates
  8. 8. Themes Creation, Structure, Configuration & Inheritance 2
  9. 9. 1. Prerequisites ◉ Not modify out of box Magento themes [Compatibility,upgradability & easy maintenance] ◉ Set magento application to developer mode [mode influences the way static files are cached] Creating a theme
  10. 10. app/design/frontend/<Vendor>/ ├── <theme>/ │ ├── etc/ │ │ ├── view.xml │ ├── web/ │ │ ├── images │ │ │ ├── logo.svg │ ├── registration.php │ ├── theme.xml │ ├── composer.json Theme directory structure
  11. 11. <theme_dir>/ ├── <Vendor>_<Module>/ │ ├── web/ │ │ ├── css/ │ │ │ ├── source/ │ ├── layout/ │ │ ├── override/ │ ├── templates/ ├── etc/ ├── i18n/ ├── media/ ├── web/ │ ├── css/ │ │ ├── source/ │ ├── fonts/ │ ├── images/ │ ├── js/ ├── composer.json ├── registration.php ├── theme.xml TypicalMagentotheme directory
  12. 12. Apply a theme 1. In Admin, go to Stores > Configuration > Design. 2. In the Store View drop-down field, select the store view where you want to apply the theme. 3. On the Design Theme tab, select your newly created theme in the Design Theme drop-down. 4. Click Save Config. 5. If caching is enabled, clear the cache. 6. To see your changes applied, reload the store front pages. Configure a theme (admin section)
  13. 13. The properties of product images used on the storefront are stored in the view.xml configuration file. <theme_dir>/etc/view.xml Image properties are configured for each image type defined by the id and type attributes of the <image> element: <images module="Magento_Catalog"> <image id="unique_image_id" type="image_type">...</image> <images/> Configure image properties
  14. 14. ◉ Set a parent theme ◉ Override view.xml file ◉ Override static assets Theme inheritance ◉ Override templates ◉ Extend Layouts ◉ Override Layouts
  15. 15. ◉ Current theme static files: <theme_dir>/web/ ◉ Ancestor’s static files, recursively, until a theme with no parent is reached: <parent_theme_dir>/web/ Module context ◉ Current theme module static files <theme_dir>/<Namespace>_<Module>/web/ ◉ Ancestor themes module static files, recursively, until a theme with no ancestor is reached: <parent_theme_dir>/<Namespace>_<Module>/web/ Override static assets
  16. 16. Fallback schema ◉ Current theme templates: <theme_dir>/<Namespace>_<Module>/templates ◉ Ancestors themes templates, recursively, until a theme with no ancestor is reached: <parent_theme_dir>/<Namespace>_<Module>/templates ◉ Module templates: <module_dir>/view/frontend/templates Override templates
  17. 17. The system collects layout files in the following order ◉ Current theme layouts: <theme_dir>/<Vendor>_<Module>/layout/ ◉ Ancestors themes <parent_theme_dir>/<Vendor>_<Module>/layout/ ◉ Module templates: <module_dir>/view/frontend/templates ◉ Module layouts for the frontend area: <module_dir>/view/frontend/layout/ ◉ Module layouts for the base area: <module_dir>/view/base/layout/ Extend Layouts
  18. 18. To override the instructions from an ancestor theme layout file: ● Create a layout file with the same name in the <theme_dir>/<Vendor>_<Module>/layout/override/theme/<Vendor>/ <ancestor_theme> directory. *Though overriding layouts is not recommended, it is still possible, and might be a solution for certain customization tasks. Overriding Layouts
  19. 19. Layout Instruction, extending, overriding and Customizations 3
  20. 20. ◉NO local.xml file - to modify, make a new xml file with same name ◉All attributes & definitions from origianl module will be inherited ◉move action - great feature of new XML ◉Structural & content blocks to containers & blocks Layouts
  21. 21. ◉ Common layout instructions to customize layout Layout instructions ◉<block> ◉<container> ◉<before> & <after> ◉<action> ◉<referenceBlock> and <referenceContainer > ◉<move> ◉<remove> ◉<update> ◉<argument>
  22. 22. ◉ Container is a structure without content which holds other blocks and containers ◉ You can specify HTML attributes... ◉ When extending, we have referenceBlock & referenceContainer Containers and blocks
  23. 23. ◉ Updates in <referenceBlock> & <referenceContainer> are applied to the corresponding <block> or <container>. ◉ Eg. if you make a reference by <referenceBlock name=”right”>, you are targeting the block <block name=”right”> ◉ Attributes = remove & display, values = true/false ◉ <referenceBlock name="block.name" remove="true" /> <referenceBlock> & <referenceContainer>
  24. 24. ◉ <move> helps moving elements to other location without the need to unset or removing from one place <move element="name.of.an.element" destination="name.of.destination.element" as="new_alias" after="name.of.element.after" before="name.of.element.before"/> ◉ <remove> to remove static resource linked in a page <head and to remove blocks & containers <head> <!-- Remove local resources --> <remove src="css/styles-m.css" /> <move> & <remove>
  25. 25. Extend a layout
  26. 26. Overriding layouts
  27. 27. Overriding layouts (from parent theme)
  28. 28. 1. Set page layout <page layout="2columns-left" xmlns:xsi="" xsi:noNamespaceSchemaLocation=""> ... </page> 2. Include/remove static resources <page xmlns:xsi="" xsi:noNamespaceSchemaLocation=""> <head> <!-- Add local resources --> <css src="css/my-styles.css"/> <css src="css/ie-9.css" ie_condition="IE 9" /> <remove src="my-js.js" Layout Customization examples
  29. 29. 3. Create a container - Reference a container <container name="some.container" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-container" /> <referenceContainer name="header.panel"> <block class="MagentoFrameworkView…”>....</block> 4. Create a block - Reference block <block class="MagentoCatalogBlockProductViewDescription" name="product.info.sku" template="product/view/attribute.phtml" after="product.info.type"> <arguments>...</arguments> </block> <referenceBlock name="logo">...</referenceBlock> Layout Customization examples
  30. 30. Templates Basic concepts, customizations & overriding 4
  31. 31. ◉ Template hint - to locate template(store> config > advanced > developer > debug > enable template) ◉ Copy template to your theme following convention ◉ Make required changes For eg. form inside <Magento_Review_module_dir>/view/frontend/templates/form.phtml app/design/frontend/OrangeCo/orange/Magento_Review/templates Template customization walkthrough
  32. 32. ◉ Templates are usually initiated in layout files. ◉ Each layout block has an associated template. ◉ The template is specified in the template attribute of the layout instruction. For example, from <Magento_Catalog_module_dir>/view/frontend/layout/catalog_category_view.xml : <block class="MagentoCatalogBlockCategoryView" name="category.image" template="Magento_Catalog::category/image.phtml"/> Template initiation
  33. 33. Templates are stored in the following locations: ● Module templates: <module_dir>/view/frontend/templates/<path_to_templates> ● Theme templates: <theme_dir>/<Namespace>_<Module>/templates/<path_to_templates> Conventional template location
  34. 34. Customize email templates using theme ◉ Template fallback is supported for email templates ◉ For eg, to override the New Order email template, create a template named order_new.html in the <theme_dir>/Magento_Sales/email ◉ Customize using Magento Admin ◉ In the Magento Admin, navigate to MARKETING > Communications > Email Templates ◉ Click Add New Template. Customizing email templates
  35. 35. CSS Include, preprocessor & Magento UI Library 5
  36. 36. In the Magento application, CSS files are included in layout files. ◉ Include css in <Magento_Blank_theme_dir>/Magento_Theme/layout/default_head_blocks.xml ◉ <page xmlns:xsi="" xsi:noNamespaceSchemaLocation=""> <head> <css src="css/styles-m.css" /> ◉ Module-specific styles - /<Namespace>_<Module>/web/css ◉ web/css - styles-m.less, styles-l.less, _styles.less Include CSS
  37. 37. how stylesheets are preprocessed and compiled to CSS ◉ Server-side LESS compilation default compilation mode, only option for production mode, Compilation performed server, using the LESS PHP library. ◉ Client-side LESS compilation When your application is not in the production mode, you can set Magento to compile .less files in a browse Backend : Stores > Configuration > ADVANCED > Developer [Store View drop-down field, select Default Config.] Front-end development workflow, in the Workflow type Preprocessor (LESS)
  38. 38. The Magento UI library is a flexible LESS-based frontend library designed to assist Magento theme developers ● actions-toolbar ● breadcrumbs ● buttons ● drop-downs ● Forms.. And so on Magento UI Library
  39. 39. You can find the Magento UI library under lib/web/css. Magento UI Library location
  40. 40. Any questions ? Appreciate your participation !! Thanks!
  41. 41. ◉ Magento 2 frontend developers guide ◉ Sessiondigital & Inchoo articles Credit ◉Presentation template by SlidesCarnival ◉Prepared slides using Google Slides Frontend Demo: https://iwdagency.com/magento2/ Backend Demo: https://iwdagency.com/magento2/admin/ User: demo Pass: demo123 Reference

×