Identifying elements

[Andy_Acute]

Hi all

I'm trying to understand how to identify elements in magento 2.

To allw me to make custom layout changes, I need to use 'move' to change page elements around.

Looking at the page hints and tips doesn't really help me.

The Product Price element might be product.info.price (taking this from the div class) but I don't think this is the correct convention to follow because for other elements, looking at the div class doesn't product the right element.

I need to know the correct method of identification.

How do you developers do it please?

Many Thanks

Andy

[Vimal Kumar]

Hi @Andy_Acute,

You can look once in the following magento documentation.

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html

I hope it will help you!

[Andy_Acute]

Hi Vimal

Thank you for your reply.
On that page, the topic headed "Rearrange elements", the div class product-info-stock-sku is identified in the 'move' using product.info.stock.sku and I can see the logic.
But the div class for product-reviews-summary is identified in the 'move' using product.info.review so the logic is confusing.
I still don't understand how you identify the elements.
Can you help further?
Many Thanks
Andy

[jeromeclic79eb]

Hi,

As far as I can see, you can identify the name of your element by searching inside the default.xml corresponding to the module (under vendor/magento folder).

For example, I wanted to change the position of my search box in the header.

If I look at:

vendor/magento/module-search/view/frontend/layout/default.xml

I can see: name="top.search"

Now, I want to move it inside the Navigation.

I found inside module-theme/view/frontend/layout/default.xml the block "catalog.topnav"

So my "move" tag looks like this now:

<move element="top.search" destination="catalog.topnav" after="-" />

You can also find some info about the blocks first when using the debug settings:

Dashboard > Stores > Configuration --> Advanced --> Developer ...

... and then "Debug > Enable Template Path Hints for Storefront"

(don't forget to flush the cache after that)