How to specify which page js module is included on

Question

I am following this tutorial https://devdocs.magento.com/videos/fundamentals/add-a-javascript-module/ At the end of the tutorial it says Now we’ll go to any product view page, and we should see the “HELLO WORLD!” message.

To get a better understanding of how modules work, I would like to view the "HELLO WORLD!" message on a different page. What would I change to view the alert on a different page.

I read

The frontName is a value defined in the module. Using catalog/product/view as an example:

• catalog is the frontName in the module area’s routes.xml file
• product is in the controller folder
• view is the controller class

I thought that I could change the filename catalog_product_view.xml to catalog_product_compare.xml to view the "HELLO WORLD!" alert on the compare page instead, since compare is a class listed as a catalog controller

How would I choose which page I see a "HELLO WORLD!" alert on?

Documentation that helped me understand the answers:

• data-mage-init is used to insert a JS module inside a phtml template
• page layout documentation to understand how templates are merged

Answer 1

Javascript called from line:

<div data-mage-init='{"hello": {"message": "HELLO WORLD!"}}'>

And that in inside file :

app/code/Learning/Js/view/frontend/templates/hello.phtml

And this template file is include from this layout file

app/code/Learning/Js/view/frontend/layout/catalog_product_view.xml

So if you want to check you check open this in browser like:

www.domain.com/catalog/product/view/id/xxx

So here xxx is product_id that is required paramerter for view controller class / or you can directly open any product from category page then you can see.

So if you want to to see in compare page compare url is :

www.domain.com/catalog/product_compare/

or can say

www.domain.com/catalog/product_compare/index

Because index is default taken if you not pass controller class in url So for that layout file is :

catalog_product_compare_index.xml

Answer 2

You could include the javascript on the page that you want catalog_product_compare.xml or catalog_product_view.xml. if you want include the script on all catalog product controllers, you can use Magento_Catalog/layout/default.xml

It is hard to say how to choose which file you must to change, since it depends on the goal.