Magento 2 - Create simple hello world script with uiComponent
-
05-05-2021 - |
Question
I try to create my own Component and reuse it. So I created these files:
THEME = app\design\frontend\company\fresh
Component File:
THEME\web\js\elements\custom\input_number.js
define([
"jquery",
"uiComponent"
],
function($, Component) {
"use strict";
return Component.extend({
initialize: function () {
return this._super();
},
test: function()
{
console.log("Hello world!");
}
});
});
requirejs-config.js:
THEME\requirejs-config.js
var config = {
paths: {
inputNumber: 'js/elements/custom/input_number'
},
};
Using the new component:
THEME\Magento_Checkout\web\js\view\minicart.js
I copied the file from vendor into my theme so that I can make changes. Now I try to use my component and call my test method:
define([
'uiComponent',
'Magento_Customer/js/customer-data',
'jquery',
'ko',
'underscore',
'sidebar',
'mage/translate',
'mage/dropdown',
'inputNumber'
], function (Component, customerData, $, ko, _, inputNumber) {
'use strict';
inputNumber.test(); // [ERROR] Failed to load the "Magento_Checkout/js/view/minicart" component.`
...
I also tried to fix the parameter order like Jorge Henrique explained:
define([
'uiComponent',
'Magento_Customer/js/customer-data',
'jquery',
'ko',
'underscore',
'inputNumber',
'sidebar',
'mage/translate',
'mage/dropdown'
], function (Component, customerData, $, ko, _, inputNumber) {
'use strict';
inputNumber.test(); // [ERROR] Failed to load the "Magento_Checkout/js/view/minicart" component.`
...
But I still get this error in the console [ERROR] Failed to load the "Magento_Checkout/js/view/minicart" component.
I also tried to call the method inside of the method initSidebar
but then I get Uncaught TypeError: inputNumber.test is not a function
THEME\Magento_Checkout\web\js\view\minicart.js:
define([
'uiComponent',
'Magento_Customer/js/customer-data',
'jquery',
'ko',
'underscore',
'inputNumber',
'sidebar',
'mage/translate',
'mage/dropdown'
], function (Component, customerData, $, ko, _, inputNumber) {
'use strict';
var sidebarInitialized = false,
addToCartCalls = 0,
miniCart;
miniCart = $("#minicart");
function initSidebar()
{
inputNumber.test(); // Uncaught TypeError: inputNumber.test is not a function
...
Solution
I figured it out. I had to remove return Component.extend({
and just create a normal javascript object and return it.
define([
"uiComponent", // <-- uiComponent has to get called first!!! Otherwise you get `[ERROR] Failed to load the "Magento_Checkout/js/view/minicart" component.`
"jquery"
],
function(Component, $) {
"use strict";
data = {
test: function() {
console.log("Hello World!");
},
};
//
// ↓↓↓ Important ↓↓↓
// Code like this is not allowed if you plan to use the method like in my example, otherwise you get "[ERROR] Failed to load the "Magento_Checkout/js/view/minicart" component."
// You have to put your methods into the data object.
//
// $(".number-input button.minus").click(function() {
//
// let $input = $(this).parent().find("input[type=number].quantity");
//
// // Step Down
// $($input)[0].stepDown();
//
// // Set Width according to input length
// setWidth($input);
// });
return data;
});
Hint: uiComponent is needed, even if we do nothing with it here, otherwise it won't work!
Next I had to fix the parameter order, like @Jorge Henrique pointed out correctly:
define([
'uiComponent',
'Magento_Customer/js/customer-data',
'jquery',
'ko',
'underscore',
'inputNumber',
'sidebar',
'mage/translate',
'mage/dropdown',
], function (Component, customerData, $, ko, _, inputNumber) {
'use strict';
inputNumber.test(); // Hello World!
...
OTHER TIPS
That is because the order of the arguments you are passing to define is wrong.
Try the following:
define([
'uiComponent',
'Magento_Customer/js/customer-data',
'jquery',
'ko',
'underscore',
'inputNumber', // HERE
'sidebar',
'mage/translate',
'mage/dropdown'
], function (Component, customerData, $, ko, _, inputNumber) {
'use strict';
inputNumber.test();
...
Note that I have changed the inputNumber to after the underscore, as the same order that we are passing in the function.