0

For example, how can I find out where the model / view model for this template is located at?

vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html

2 Answers 2

2

To detect the Knockout JS component's location belongs to a Knockout HTML template, you will need to use the search term combination of the module component name and the relative path of the template file without html extension counting from the first character after the web/template/ string, like this: Vendor_Module/relative/path/of/the/template/file/without/html/extension

You can get the module component name in <module directory>/registration.php.

There are 2 places where Knockout JS templates can be declared:

  • in the UI component file
  • in the Knockout JS component

For example, the HTML template is vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html:

  • the module component name of vendor/magento/module-checkout is Magento_Checkout
  • the relative path of the HTML template without the html extension is minicart/item/default

Here we have search term is: Magento_Checkout/minicart/item/default

You will get the result in the file vendor/magento/module-checkout/view/frontend/layout/checkout_cart_sidebar_item_renderers.xml

<item name="component" xsi:type="string">Magento_Checkout/js/view/cart-item-renderer</item>
<item name="config" xsi:type="array">
    <item name="displayArea" xsi:type="string">defaultRenderer</item>
    <item name="template" xsi:type="string">Magento_Checkout/minicart/item/default</item>
</item>

You can see there is a component config node same level as the config node which declares the template, this is the Knockout JS component you are searching for: Magento_Checkout/js/view/cart-item-renderer (vendor/magento/module-checkout/view/frontend/web/js/view/cart-item-renderer.js).

In other cases, you can find the code declaring the Knockout HTML template in the Knockout JS component like the following. That is the Knockout JS component you are searching for.

defaults: {
    template: 'Magento_Checkout/progress-bar'
},
7
  • Thanks, I also found the Magento_Checkout/js/view/cart-item-renderer component, but it does not contain the definitions for the template. For example the template uses ` <!-- ko if: product_has_url -->` and product_has_url is not defined in that component. So how does the template know where it is defined?
    – Black
    Jun 6, 2023 at 8:46
  • Hey @Black, I currently don't have time to provide a details answer to this additional question. However, I can give you an insight in case you are working on a task and need to find some information asap.
    – Tu Van
    Jun 6, 2023 at 14:41
  • 1
    product_has_url does not declare directly in the Knockout JS component file which belongs to the HTML template, but it is declared in a related JS Knockout component via private content (cartData = customerData.get('cart'); which is pulled the data from the backend. Finally, in the backend, the product_has_url variable declared in doGetItemData in vendor/magento/module-checkout/CustomerData/DefaultItem.php
    – Tu Van
    Jun 6, 2023 at 14:42
  • "But it is declared in a related JS Knockout component via private content" Where can I find that component? How is it linked to the template?
    – Black
    Jun 6, 2023 at 14:51
  • I’ll need to check. Maybe I can find the time to do this next week. :)
    – Tu Van
    Jun 7, 2023 at 9:49
0

ViewModels are defined in layout xml files.

So you should search all layout xml files for the usage of the template file. then take a look at the search results and review the definition of the block and check the argument-nodes that are provided.

2
  • I searched it, but there is only a component defined which has two methods which are not even used in that template.
    – Black
    Jun 6, 2023 at 12:18
  • @Philipp Sander is talking about the wrong topic, which is "View Models" PHP classes, not "view model" in Knockout JS!!
    – Tu Van
    Jun 6, 2023 at 14:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.