H&O Magento 2 Advanced Template Hints Module

Door Paul Hachmang
4 januari 2017
Modules en plugins

how-does-advanced-template-hints

Template hints provide useful information about the Magento frontend directly to the (front-end) developer, via an interface on the frontend. By default, Magento 2 does offer standard template hints for developers, however, these template hints lack usability and functionality. The default template hints module inserts mark-up, which changes the way HTML is rendered. It will break your layout. Also, the default Magento 2 template hints only provide information about blocks and doesn’t give any information about Containers and UI Components (Knockout Templates). This is why we at H&O decided we needed something better than these standard hints, and since no better solution was available, we decided to develop a new and more comprehensive template hints module. Our first purpose being to help our own developers, but because of the great value we decided to release this great tool to all developers.

Benefits of H&O Magento 2 Advanced Template Hints

Information about UI Components and Containers

H&O Magento 2 advanced template hints module will give you information about Blocks, UI Components and Containers. This information can be very beneficial when developing your frontend.

Keep the layout intact

No more trade-off between getting hints and breaking your layout. Our Advanced Template hints will keep the lay-out intact and functioning, while showing you all important information there is to know.

Compatible with asynchronous elements like Javascript and AJAX

H&O Magento 2 advanced template hints module will keep HTML fully functioning. But it also works with dynamic asynchronous elements in Javascript and AJAX. It was a challenge to get this feature working but definitely worth the trouble. This will help you keep an overview.

Direct links to PHPStorm

H&O advanced template hints will offer direct links to relevant files. If you use PHPstorm as your default IDE, you will be a able to open these files with one click.

Show hints for hidden elements

You’re probably used to using hints on a click-and-view basis; you activate the hints, click on the element you want to know more off, and the hints appear. In the H&O Magento 2 advanced template hints module this works the same way, except that now you also have the option to show hints for hidden elements using your browser viewer. Just select the hidden element you want to see hints off, type `hint($0)` and the template hints will be shown.

h-o-advanced-template-hints-show-hidden-elements

Installation

For extended guides in installing H&O Magento 2 advanced template hints module you can also head over to our github page.

composer require ho-nl/magento2-templatehints
php bin/magento module:enable Ho_Templatehints
php bin/magento setup:upgrade

And for git-enabled:

composer require ho-nl/magento2-templatehints "dev-master"
php bin/magento module:enable Ho_Templatehints
php bin/magento setup:upgrade

Setup

To start using the Advanced Template Hints follow these steps:

  1. Set your Magento 2 Installation to developer mode
  2. Add ?ath=1 to your URL to activate
  3. Open up your console in your Chrome/Firefox/Safari devtools
  4. Press Shift
  5. Hover over the element you wish to inspect
  6. Voila! Hints everywhere!

installing-h-o-advanced-template-hints

How does it work?

After you’ve installed the module, add ?ath=1 to your page url. Open your browsers inspector, hold the Shift Key and click on the container, block or knockout template you want to know more of.

For a container element it provides the name, the Parent and the name of the Parent and its Children.

For a block element it shows the Block Name, Block Class and direct link to the Block Template in your PHPstorm IDE. Next to that, it also show the corresponding CacheKeyInfo.

And of course it shows hints for Knockout Templates. You get the name of Knockout Block, the template it renders and a reference to the Knockout UI Class. The link to the template is directly connected to your PHPstorm IDE for easy access.

Inner workings

The information about the blocks and containers need to be transferred from the server. We add extra attributes to the first HTML-element found. This way, we do not add extra elements and things won’t break. With the proper usage of delegates in JS we get the additional functionality that it works properly with JS heavy elements.

We need your help

Some features of this module are still in beta, and there’s always room for improvement. If you would like to help us, that would be greatly appreciated! Fork it, give us tips or give us your feedback on the module, especially on the Knockout feature.

Head over to our page on github, there are issues already open. The more you help, the better it will become!

Get in contact

If you’re enthusiastic about our work and you’re curious to see how we can help you develop your Magento webshop, we are always open for questions or inquiries. H&O has 9 years of experience in developing Magento webshops, is an official partner of Magento en has a team of certified Magento developers. Contact us via the website or by phone for more information.