Magento template path hints: why should you use and how to enable

Magento template path hints are little tags displayed on your frontend stores that specify the location of a particular code within the Magento 2 file structure. Also, it adds notation with the path to each template and showcases the errors directly on the screen. This is one of the most effective solutions to debug your Magento store. In this post, you are going to learn about different methods to enable and disable template path hints on Magento 2 website.

What are Magento template path hints?

Basically, Magento 2 contains 3 structures to present your website to customers including layout, block, and container. The page structure looks the same as the XML (Extensible Markup Language) file that is much like the HTML (HyperText Markup Language) structure to create one or several columns. So,  do you ever wonder how to identify each structure to design your online store?

In fact,  Magento 2 Template Hints are a helpful tool to help you identify each block added to each page. Moreover, if you need to make a change, you have to know where that block is created. Template path hints in Magento are the tips that allow you to define a .php block class or a .phtml template that corresponds to a specific page area on your Magento 2 store. In other words, template path hints in Magento 2 add a notation with the path of each template to assign you to locate the .phtml files easier and edit them faster similarly. You can locate the code in the Magento file structure both on the front end and the admin.

Why Should You Use Magento template path hints?

Debug is a crucial part of processing development in creating an eCommerce website. The developer always knows what they should do when building a website to guarantee that it runs smoothly. The Template Hints are part of this Debug process. It is a debugging tool that uses notions with a path on each template of the Magento 2 website. This mode showcase the errors directly on the screen. In fact, it is an effective method to debug even failed modules that display a blank page or 500 errors on the screen. Moreover, it supports you to establish breakpoints in your code and interrupts the PHP interpreter from showing the application data on each executed line at such breakpoints. Therefore, you need to enable the Template Path of Magento. Now, that we understood what template path hints and their benefits are, it is time to get back to our main topic today, we will offer you a guide to enable Magento template path hints in some easy steps.

How to enable Magento template path hints?

There are 4 methods to enable template path hints in Magento 2. So, let’s find out the methods you can enable the Magento 2 template path hints with.

Method 1:  Via Command Line

Connect to your store with an SSH terminal, and go to the root directory of your Magento 2 store.

• Enable template path hints for frontend:

php bin/magento dev:template-hints:enable

• Disable template path hints for frontend:

bin/magento dev:template-hints:disable

• Clean and flush cache:

bin/magento cache:clean

bin/magento cache:flush

However, you can’t enable or disable template path hints for the admin using this method.

Method 2:  Enable Template Path Hints in Admin Configuration

• Log in to Admin Panel
• Go to Stores > Configuration > Advanced > Developer
• Expand “Debug”  and set YES to “Enable Template Path Hints for StoreFront“
• Also, under “Developer Client Restrictions, enter the IP address in the field “Allowed IPs” for which you need to enable the template path hints.
• Save the configuration.

After following the below steps, you can see the frontend as shown below where the template path hints are enabled for you to trace the .phtml files and edit them with ease.

Method 3: Template Path Hints via env.php file

In case you cannot change the value via the Admin panel, as shown on the screenshot (click on the image to open it in full size):

• Search for the value in file app/etc/env.php
• In this file, you can change the values template_hints_storefront and template_hints_admin.

<?php
return array(
...
'system' =>
array(
'default' =>
array(
'dev' =>
array(
'debug' =>
array(
'template_hints_storefront' => '1',
'template_hints_admin' => '1'
),
),
),
),
);
Run the following command after the changes:
php bin/magento setup:upgrade

Method 4: Enabling Magento 2 Template Hints via Source Code

• Firstly, you open your file following the address below:

Vendor\magento\module-developer\Model\TemplateEngine\Plugin\DebugHints.php

• Next step, you copy this code on your file:

<?public function afterCreate(
        TemplateEngineFactory $subject,
        TemplateEngineInterface $invocationResult
    ) {
        $storeCode = $this->storeManager->getStore()->getCode();
        // if ($this->scopeConfig->getValue($this->debugHintsPath, ScopeInterface::SCOPE_STORE, $storeCode)
        //     && $this->devHelper->isDevAllowed()) {
            $showBlockHints = $this->scopeConfig->getValue(
                self::XML_PATH_DEBUG_TEMPLATE_HINTS_BLOCKS,
                ScopeInterface::SCOPE_STORE,
                $storeCode
            );
            return $this->debugHintsFactory->create([
                'subject' => $invocationResult,
                'showBlockHints' => $showBlockHints,
            ]);
        //}
        return $invocationResult;
    }

Conclusion

That’s all about Magento template path hints. We hope that you found this tutorial helpful. However, If you are still getting the error or have any questions, then contact our support team to get an instant solution.  We’re very pleased to support you with our Magento Website Development service.