0

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

        ...
2

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!

    ...
1
+50

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.

1
  • Unfortunatelly it does not work, I still get Failed to load the Magento_Checkout/js/view/minicart" component. – Black Apr 19 at 9:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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