Skip to main content
Notice removed Canonical answer required by Black
Bounty Ended with Jorge Henrique's answer chosen by Black
edited title
Link
Black
  • 3.4k
  • 4
  • 40
  • 123

Magento 2 - Create simple hello world script with UiComponentuiComponent

added 619 characters in body
Source Link
Black
  • 3.4k
  • 4
  • 40
  • 123
define([
  "jquery",
  "uiComponent"
], 
function($, Component) {
  "use strict";

    return Component.extend({
        
        initialize: function () {
            return this._super();
        },
        
        test: function()
        {
            console.log("test""Hello world!");
        }
    });
});
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][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 now I still get this error in the console [ERROR] Failed to load the "Magento_Checkout/js/view/minicart" component.

 
define([
  "jquery",
  "uiComponent"
], 
function($, Component) {
  "use strict";

    return Component.extend({
        
        initialize: function () {
            return this._super();
        },
        
        test: function()
        {
            console.log("test");
        }
    });
});
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.`

    ...

But now I get this in the console [ERROR] Failed to load the "Magento_Checkout/js/view/minicart" component.

define([
  "jquery",
  "uiComponent"
], 
function($, Component) {
  "use strict";

    return Component.extend({
        
        initialize: function () {
            return this._super();
        },
        
        test: function()
        {
            console.log("Hello world!");
        }
    });
});
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.

 
added 619 characters in body
Source Link
Black
  • 3.4k
  • 4
  • 40
  • 123

THEME = app\design\frontend\company\fresh

app\design\frontend\company\fresh\web\js\elements\custom\input_numberTHEME\web\js\elements\custom\input_number.js

app\design\frontend\company\fresh\requirejsTHEME\requirejs-config.js

app\design\frontend\company\fresh\Magento_Checkout\web\js\view\minicartTHEME\Magento_Checkout\web\js\view\minicart.js

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.`

    ...

But now I get this 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

        ...

app\design\frontend\company\fresh\web\js\elements\custom\input_number.js

app\design\frontend\company\fresh\requirejs-config.js

app\design\frontend\company\fresh\Magento_Checkout\web\js\view\minicart.js

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();

    ...

But now I get this in the console [ERROR] Failed to load the "Magento_Checkout/js/view/minicart" component.

THEME = app\design\frontend\company\fresh

THEME\web\js\elements\custom\input_number.js

THEME\requirejs-config.js

THEME\Magento_Checkout\web\js\view\minicart.js

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.`

    ...

But now I get this 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

        ...
Notice added Canonical answer required by Black
Bounty Started worth 50 reputation by Black
edited title
Link
Black
  • 3.4k
  • 4
  • 40
  • 123
Loading
Source Link
Black
  • 3.4k
  • 4
  • 40
  • 123
Loading