|
1 | | -# Better Layout Hints |
2 | | - |
3 | | -Magento 2 module to show better layout hints. |
| 1 | +# Magento 2 - Layout Hints (Enhanced) |
4 | 2 |
|
5 | 3 |  |
6 | 4 |  |
7 | 5 |  |
8 | 6 |
|
9 | 7 | ## Why? |
10 | | -The default layout hints in Magento 2 lack much of the needed information. |
| 8 | +Let's be honest, the default Magento 2 layout hints are very _bare_ (to stay polite). They lack much of the information |
| 9 | +that is needed when we want to debug the layout. |
11 | 10 |
|
12 | | -The goal is to provide all the additional information about the layout of the current page. |
| 11 | +This module made my like easier when it comes to altering the layout and templates of Magento 2 and I hope it will do |
| 12 | +the same for you. |
13 | 13 |
|
14 | | -This module provides information about each Container, Block and uiElement on the page. It does this in a |
15 | | -non-intrusive manner. |
| 14 | +The goal is to show all blocks, containers and uiComponents on the page without breaking the page too badly. When the |
| 15 | +mouse hovers any given element it will show more information for the current hovered element and its parents. The data |
| 16 | +that is provided includes the name, alias, parent, template and class. |
16 | 17 |
|
17 | | -## Features |
| 18 | +I've also added some nice frontend features to easily hide or show the hints that way it's easy to navigate the site |
| 19 | +while the hints are ON. There are some additional features that bring some of the CLI actions to the frontend such as |
| 20 | +enabling and disabling the hints from the frontend as well as clearing the caches directly from the browser. |
| 21 | + |
| 22 | +This module will never make itself visible or have any effect in production mode, **it will only work in developer mode**. |
18 | 23 |
|
19 | | - - [x] Admin panel control |
20 | | - - [x] Console command line control |
21 | | - - [x] Front-end hide/show function with `Shift + Ctrl + H` |
22 | | - - [x] Non-intrusive display |
23 | | - - [x] Additional layout information at the bottom of the page. |
| 24 | +<a href="https://i.imgur.com/VPea9TL.png"><img src="https://i.imgur.com/VPea9TL.png" width="350" height="250"/></a> |
| 25 | +<a href="https://i.imgur.com/NhJhmco.png"><img src="https://i.imgur.com/NhJhmco.png" width="350" height="250"/></a> |
24 | 26 |
|
25 | | -## How to use it? |
| 27 | +## Features |
| 28 | + |
| 29 | + - [x] Enable and disable from **Frontend**, CLI or Admin panel |
| 30 | + - [x] Shows **blocks** and **containers** |
| 31 | + - [x] Displays the **name** and **alias** of the block or container. |
| 32 | + - [x] Lots of information on hover such as the block **class** and **template file**. |
| 33 | + - [x] **Clear all caches from the frontend** |
| 34 | + - [x] Non-intrusive display |
| 35 | + - [x] Layout information at the bottom of the page. |
26 | 36 |
|
27 | | -### Install |
| 37 | +## Install |
28 | 38 |
|
29 | 39 | ``` |
30 | 40 | composer require justinkase/module-layouthints |
31 | | -``` |
32 | | -**Note**: The hints will only be visible in **developer mode**. |
| 41 | +magento setup:upgrade |
| 42 | +magento cache:flush |
| 43 | +``` |
33 | 44 |
|
| 45 | +## How to use this module |
34 | 46 | ### Frontend |
| 47 | +**Make sure you're in developer mode** |
35 | 48 |
|
36 | | -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. |
| 49 | +Visit your Magento 2 store in a browser and use the following keys combinations. |
37 | 50 |
|
38 | | -### Backend Enable/Disable |
39 | | -You can enable the hints from the console or the admin panel. |
| 51 | +#### Shortcuts: |
| 52 | +- `Shift + Ctrl + H` => Toggle hints visibility |
| 53 | +- `Shift + Ctrl + =` => Turn ON hints (you must also clear caches) |
| 54 | +- `Shift + Ctrl + -` => Turn OFF hints (you must also clear caches) |
| 55 | +- `Shift + Ctrl + C` => Clear caches |
| 56 | + |
| 57 | +You might get a request to approve browser notifications. |
| 58 | + |
| 59 | +Make sure you're focused on the page, _click somewhere on the page with the mouse_, **but not a link**! |
| 60 | + |
| 61 | +### CLI |
40 | 62 |
|
41 | | -**Console:** |
42 | 63 | ``` |
43 | 64 | justinkase:hints:on |
44 | 65 | justinkase:hints:off |
| 66 | +magento cache:flush |
45 | 67 | ``` |
46 | | -*Note: Clear caches after!* `magento cache:flush` |
47 | | - |
48 | | -**Admin panel:** |
49 | | - |
50 | | -`Stores > Configuration > JustinKase > Layout Hints` |
51 | 68 |
|
52 | | - |
| 69 | +### Admin Panel |
53 | 70 |
|
54 | | -## Screens |
55 | | -Bottom additional information |
56 | | - |
| 71 | +`Stores > Configuration > Advanced > Developer > JustinKase - Layout Hints` |
57 | 72 |
|
58 | | -Non-intrusive display |
59 | | - |
| 73 | + |
60 | 74 |
|
61 | 75 | ## Author |
62 | 76 | [Alex Ghiban](mailto:drew7721@gmail.com) |
|
0 commit comments