diff --git a/README.md b/README.md index 89dd723..e814182 100644 --- a/README.md +++ b/README.md @@ -1,62 +1,76 @@ -# Better Layout Hints - -Magento 2 module to show better layout hints. +# Magento 2 - Layout Hints (Enhanced) ![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/drew7721/module-templatehints) ![GitHub All Releases](https://img.shields.io/github/downloads/drew7721/module-templatehints/total) ![GitHub forks](https://img.shields.io/github/forks/drew7721/module-templatehints?style=social) ## Why? -The default layout hints in Magento 2 lack much of the needed information. +Let's be honest, the default Magento 2 layout hints are very _bare_ (to stay polite). They lack much of the information +that is needed when we want to debug the layout. -The goal is to provide all the additional information about the layout of the current page. +This module made my like easier when it comes to altering the layout and templates of Magento 2 and I hope it will do +the same for you. -This module provides information about each Container, Block and uiElement on the page. It does this in a -non-intrusive manner. +The goal is to show all blocks, containers and uiComponents on the page without breaking the page too badly. When the +mouse hovers any given element it will show more information for the current hovered element and its parents. The data +that is provided includes the name, alias, parent, template and class. -## Features +I've also added some nice frontend features to easily hide or show the hints that way it's easy to navigate the site +while the hints are ON. There are some additional features that bring some of the CLI actions to the frontend such as +enabling and disabling the hints from the frontend as well as clearing the caches directly from the browser. + +This module will never make itself visible or have any effect in production mode, **it will only work in developer mode**. - - [x] Admin panel control - - [x] Console command line control - - [x] Front-end hide/show function with `Shift + Ctrl + H` - - [x] Non-intrusive display - - [x] Additional layout information at the bottom of the page. + + -## How to use it? +## Features + + - [x] Enable and disable from **Frontend**, CLI or Admin panel + - [x] Shows **blocks** and **containers** + - [x] Displays the **name** and **alias** of the block or container. + - [x] Lots of information on hover such as the block **class** and **template file**. + - [x] **Clear all caches from the frontend** + - [x] Non-intrusive display + - [x] Layout information at the bottom of the page. -### Install +## Install ``` composer require justinkase/module-layouthints -``` -**Note**: The hints will only be visible in **developer mode**. +magento setup:upgrade +magento cache:flush +``` +## How to use this module ### Frontend +**Make sure you're in developer mode** -After enabling the hints from the backend you can use the `Shift + Ctrl + H` key combination on the frontend to toggle the display of the layout hints. +Visit your Magento 2 store in a browser and use the following keys combinations. -### Backend Enable/Disable -You can enable the hints from the console or the admin panel. +#### Shortcuts: +- `Shift + Ctrl + H` => Toggle hints visibility +- `Shift + Ctrl + =` => Turn ON hints (you must also clear caches) +- `Shift + Ctrl + -` => Turn OFF hints (you must also clear caches) +- `Shift + Ctrl + C` => Clear caches + +You might get a request to approve browser notifications. + +Make sure you're focused on the page, _click somewhere on the page with the mouse_, **but not a link**! + +### CLI -**Console:** ``` justinkase:hints:on justinkase:hints:off +magento cache:flush ``` -*Note: Clear caches after!* `magento cache:flush` - -**Admin panel:** - -`Stores > Configuration > JustinKase > Layout Hints` -![](https://i.imgur.com/j4vgKKk.png) +### Admin Panel -## Screens -Bottom additional information -![](https://i.imgur.com/NhJhmco.png) +`Stores > Configuration > Advanced > Developer > JustinKase - Layout Hints` -Non-intrusive display -![](https://i.imgur.com/BxpJZ1C.png) +![](https://i.imgur.com/DUA9leh.png) ## Author [Alex Ghiban](mailto:drew7721@gmail.com)