Skip to content

Commit c2cf3ae

Browse files
authored
Update Readme.
1 parent cea065a commit c2cf3ae

File tree

1 file changed

+46
-32
lines changed

1 file changed

+46
-32
lines changed

README.md

Lines changed: 46 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,76 @@
1-
# Better Layout Hints
2-
3-
Magento 2 module to show better layout hints.
1+
# Magento 2 - Layout Hints (Enhanced)
42

53
![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/drew7721/module-templatehints)
64
![GitHub All Releases](https://img.shields.io/github/downloads/drew7721/module-templatehints/total)
75
![GitHub forks](https://img.shields.io/github/forks/drew7721/module-templatehints?style=social)
86

97
## 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.
1110

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.
1313

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.
1617

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**.
1823

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>
2426

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.
2636

27-
### Install
37+
## Install
2838

2939
```
3040
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+
```
3344

45+
## How to use this module
3446
### Frontend
47+
**Make sure you're in developer mode**
3548

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.
3750

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
4062

41-
**Console:**
4263
```
4364
justinkase:hints:on
4465
justinkase:hints:off
66+
magento cache:flush
4567
```
46-
*Note: Clear caches after!* `magento cache:flush`
47-
48-
**Admin panel:**
49-
50-
`Stores > Configuration > JustinKase > Layout Hints`
5168

52-
![](https://i.imgur.com/j4vgKKk.png)
69+
### Admin Panel
5370

54-
## Screens
55-
Bottom additional information
56-
![](https://i.imgur.com/NhJhmco.png)
71+
`Stores > Configuration > Advanced > Developer > JustinKase - Layout Hints`
5772

58-
Non-intrusive display
59-
![](https://i.imgur.com/BxpJZ1C.png)
73+
![](https://i.imgur.com/DUA9leh.png)
6074

6175
## Author
6276
[Alex Ghiban](mailto:drew7721@gmail.com)

0 commit comments

Comments
 (0)