Mage Titans USA 2016 - Allan MacGregor - Personalized ecommerce with Machine learning
Mage Titans - Workshop - UI Components
Transcript of Mage Titans - Workshop - UI Components
![Page 1: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/1.jpg)
![Page 2: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/2.jpg)
Why async?
◉ Because of modularity of server side app:- data-mage-init- Layout XML declarations- UI Components XML declarations ◉ Asynchronous JavaScript modules loaders ◉ Many user interactions are asynchronous ◉ Performance considerations
![Page 3: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/3.jpg)
How to maintain async?new MutationObserver ( function(mutations) { // array of MutationRecord });
Browser Chrome Firefox Internet Explorer Opera Safari
Starting from 18 14 11 15 6.0
![Page 4: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/4.jpg)
UiComponent
define(['uiElement'], function (Element) { return Element.extend({…}); });
![Page 5: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/5.jpg)
uiRegistry
define(['uiRegistry'], function (r) { r.get('cmp’, function (c) {};); // sync
var p = reg.promise('cmp'); // async
p.done(function (c) {};);});
![Page 6: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/6.jpg)
component
UiRegistry
component a
component b
component c(source)
![Page 7: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/7.jpg)
Practice 0: remote control
require(['uiRegistry'], function (reg) { var c = reg.get('index=customer_columns'); c.insertChild(c.getChild('name'), c.getChild('gender'));});
![Page 8: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/8.jpg)
Practice 1: Apply Filter
require(['uiRegistry'], function (reg) { var c = reg.get('index=listing_filters'); c.setData({"email":”[email protected]"}).apply();});
![Page 9: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/9.jpg)
Practice 1: Apply Filter
require(['uiRegistry'], function (reg) { var c = reg.get('index=customer_listing_data_source'); c.set('params.filters.email', ’[email protected] ');});
does not work
![Page 10: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/10.jpg)
Practice 1: Apply Filter// hack filters.js (change “exports” to “links”)
require(['uiRegistry'], function (reg) { var c = reg.get('index=customer_listing_data_source'); c.set('params.filters.email', '[email protected]');});
![Page 11: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/11.jpg)
Practice 2: Apply search filter
require(['uiRegistry'], function(r) { r.async("index=fulltext") (function (c) { c.set('value', 'keyword'); }); });
![Page 12: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/12.jpg)
async.js
$.async(‘CSS selector’, function callback);
![Page 13: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/13.jpg)
Practice 3: DOM modificationrequire( ['Magento_Ui/js/lib/view/utils/async'], function($) { $.async( 'span', function(dom) { dom.style.border='1px solid #ff0000'; } ); });
![Page 14: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/14.jpg)
async.js$.async({…}, function callback);{ "component": 'cms_page_listing', "ctx": 'div', // CSS selector/Element "selector": 'span’ // CSS selector}
![Page 15: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/15.jpg)
Practice 3: DOM modificationrequire( ['Magento_Ui/js/lib/view/utils/async'], function($) { $.async( { "component": "index=related_product_listing", "selector": "span" }, function(dom) { dom.style.border='1px solid #ff0000'; } ); });
![Page 16: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/16.jpg)
Practice 4 (see UiWorkshop module)
Adding ‘goToFirstPage’ and
‘goToLastPage’ buttons to pager
![Page 17: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/17.jpg)
Practice 5 (see UiWorkshop module)
Disable ’save’ button in inline editor
unless something has changed
![Page 18: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/18.jpg)
Practice 6 (see UiWorkshop module)
Improving keyboard navigation on
Categories selection tree
![Page 19: Mage Titans - Workshop - UI Components](https://reader036.fdocuments.in/reader036/viewer/2022062316/58749c5e1a28abfc5f8b6369/html5/thumbnails/19.jpg)