Trabalhar com jQuery Widget no Magento 2 não é uma tarefa fácil. Por isso, a intenção desse post é facilitar o seu entendimento no processo de criação de Widget com jQuery no Magento 2.
Abaixo, listamos os passos mais importantes o processo:
Criando arquivo .phtml. Por exemplo:
app/code/MyVendor/MyModule/view/templates/myfile.phtml
Insira no phtml:
<div id="myId" data-mage-init='{"MyVendor_MyModule/js/jsfile":{}'></div>
Em nosso myfile.phtml adicionamos data-mage-init informando o caminho do nosso js MyVendor_MyModule/js/jsfile
Criando o JS. Por exemplo:
app/code/MyVendor/MyModule/view/frontend/web/js/jsfile.js
Insira no JS:
define([
'jquery',
'Magento_Customer/js/customer-data'
], function ($, customerData) {
$.widget('mage.jsfile.js',{
_create: function(config,element) {
this.checkSessionExist();
},
checkSessionExist: function(){
var fullName = customerData.get('customer')()['fullname'];
if(fullName){
console.log(fullName);
}
}
});
return $.mage.jsfile.js;
});
No exemplo acima, adicionamos a dependência Magento_Customer/js/customer-data e no método checkSessionExist() verificamos se o cliente está autenticado e imprimimos no seu nome no console.
Feito isso, rode os comandos abaixo e teste a sua aplicação:
php bin\magento cache:clear php bin\magento cache:flush
Dúvidas? Posta aí!!!
Um abraço.