From this tutorial i will show you how to get info from some main component in magento 2 by javascript
All components defined in below file
https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Ui/view/base/ui_component/etc/definition.xml
If you work with components in magento you possible may related with uiregistry. This is ultility component allow you access to specific component.
Playground for work with component from browser
Go to product list page of magento in admin dashboard
Open chrome browser > Console tab
requirejs('uiRegistry').get('%componentName%');
componentName is string name of component.
1 Listing component
Source file
https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Ui/view/base/web/js/grid/listing.js
There is alot place magento use this component such as: Product listing, Order listing, cms page listing
Example
var productrows = requirejs('uiRegistry').get('product_listing.product_listing.product_columns').rows
Above will return current object contain rows of products
[{product1},{product2},so on]
OR
var productrows = requirejs('uiRegistry').get('product_listing.product_listing_data_source').data['items']
var components = requirejs('uiRegistry').get('product_listing.product_listing.product_columns').elems()
2 Form component
Source file
https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Ui/view/base/web/js/form/form.js
Continuing...
Top comments (0)