4

I had been created module magento 2 with this sample : URL: https://www.ashsmith.io/2014/12/simple-magento2-controller-module/

I have spent more time review default module of magento 2 and research "Include javascript from module to magento 2. I have tried: layout/default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="authentication-popup">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="hello" xsi:type="array">
                        <item name="component" xsi:type="string">ABC_Hello/js/hello</item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

view/frontend/requirejs-config.js

/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

var config = {
    map: {
        '*': {
            captcha: 'ABC_Hello/hello'
        }
    }
};

frontend/web/hello.js or frontend/hello.js

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

    $(document).ready(function(){
        alert('Test JS');
    });
});

but it not work.

Thanks any tips??

Update Resolved My Layout: hello_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <head>
        <title>Hello magento 2</title>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="ABC\Hello\Block\Hello" name="hello" template="ABC_Hello::hello.phtml" />
        </referenceContainer>
    </body>
</page>

default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="authentication-popup">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="hello" xsi:type="array">
                            <item name="component" xsi:type="string">ABC_Hello/js/hello</item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

layout/web/hello.js Code javascript

4

Please, update your layout/default.xml file with following content:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<body>
    <referenceBlock name="authentication-popup">
        <arguments>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                    <item name="hello" xsi:type="array">
                        <item name="component" xsi:type="string">Magento_Tax/js/hello</item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

Move frontend/web/hello.js or frontend/hello.js to new location: frontend/web/js/hello.js and update hello.js file with following content:

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

    $(document).ready(function(){
        alert('Test JS');
    });
    return Component.extend({});
});

Now you can clean Magento cache and refresh the page. You will see your alert. Please, let me know if this works for you. Thanks

10
  • It not work :(, can you help me some demo ??
    – Hieu Le
    Jul 24 '15 at 8:06
  • Sorry, there is a typo in layout Magento_Tax/js/hello. Please, use Forix_Hello/js/hello Jul 27 '15 at 7:32
  • I was change it in first times of answer, but it not work.
    – Hieu Le
    Aug 3 '15 at 8:39
  • Can I download the whole code of your extension on github to analyze the issue? I tried different variations on my local and it always works. Thanks Aug 7 '15 at 7:00
  • 2
    Good to know. I want to recommend you to clean up these directories after changes in templates and JS files: var/*cache, var/view_preprocessed/*, pub/static/* to avoid such issues in a future. Aug 10 '15 at 7:39
1

try php bin/magento setup:static-content:deploy

1
  • it mean deploy css, js for front-end.
    – Hieu Le
    Dec 15 '15 at 8:41

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.