SwissUpLabs Logo

Module Js

Breeze provides two types of js components:

  • Widget (breeze.widget)
  • View (breeze.view)

The only difference between them is that the view component will apply knockout bindings to the element. You should to use the view component only if you need knockout template. Otherwise stick to widget component type.

First Example (Widget component)

Module code

Let’s assume that your module adds js carousel to Magento. It has a template that renders carousel items and js module that handles template instructions.

Template example vendor/module/view/frontend/templates/carousel.phtml:

<div class="carousel" data-mage-init='{"Vendor_Module/js/carousel": {}}'>
    slides
</div>

Js code example vendor/module/view/frontend/web/js/carousel.js:

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

    // it could return a function
    return function (options, element) {};

    // or widget
    $.widget('vendor.carousel', {
        _create: function () {}
    });
});

Breeze integration

Layout update

First, you need to register Vendor_Module/js/carousel component handler. Create breeze_default.xml layout update with the following content:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="breeze.js">
            <arguments>
                <argument name="bundles" xsi:type="array">
                    <item name="default" xsi:type="array">
                        <item name="items" xsi:type="array">
                            <item name="Vendor_Module/js/carousel" xsi:type="string">Vendor_Module/js/breeze/carousel</item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

The code above will add Vendor_Module/js/breeze/carousel script to the page when Vendor_Module/js/carousel declaration is found on the page.

Read more about Breeze layout.

Widget component

(function () {
    'use strict';

    // declare widget that can be used later
    $.widget('carousel', {
        component: 'Vendor_Module/js/carousel',
        options: {
            default: 'value'
        },

        create: function () {
            console.log(this.element);
            console.log(this.options);
        }
    });
})();

Read more about Breeze js libraries.

That’s all. Breeze will automatically dispatch breeze:mount:Vendor_Module/js/carousel event for every element with Vendor_Module/js/carousel declaration.

Second Example (View component)

Module code

Let’s assume that your module adds js carousel to Magento. It has a template that renders carousel items and js module that handles template instructions.

Template example vendor/module/view/frontend/templates/carousel.phtml:

<div class="carousel" data-bind="scope: 'carousel'">
    <!-- ko if flag(): -->
        code
    <!-- /ko -->
</div>

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "carousel": {
                    "component": "Vendor_Module/js/carousel",
                    "config": {}
                }
            }
        }
    }
}
</script>

Js code example vendor/module/view/frontend/web/js/carousel.js:

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

    // it could return a function
    return function (options, element) {};

    // or ui element
    return Component.extend({});
});

Breeze integration

Layout update

First, you need to register Vendor_Module/js/carousel component handler. Create breeze_default.xml layout update with the following content:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="breeze.js">
            <arguments>
                <argument name="bundles" xsi:type="array">
                    <item name="default" xsi:type="array">
                        <item name="items" xsi:type="array">
                            <item name="Vendor_Module/js/carousel" xsi:type="string">Vendor_Module/js/breeze/carousel</item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

The code above will add Vendor_Module/js/breeze/carousel script to the page when Vendor_Module/js/carousel declaration is found on the page.

Read more about Breeze layout.

View component

(function () {
    'use strict';

    // declare view that can be used later
    $.view('carousel', {
        component: 'Vendor_Module/js/carousel',
        options: {
            default: 'value'
        },

        create: function () {
            console.log(this.element);
            console.log(this.options);
        }
    });
})();

Read more about Breeze js libraries.

That’s all. Breeze will automatically dispatch breeze:mount:Vendor_Module/js/carousel event for every element with Vendor_Module/js/carousel declaration.

Next up

Edit this Page