Magento Frontend UI Components
Create the most basic UI Component
Free Preview
<?xml version="1.0"?>
<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <!-- Reference the parent with referenceContainer or referenceBlock -->
        <referenceContainer name="header.container">
            <!-- This is a standard block with a reference to our template -->
                <!-- Within the block you are targeting create arguments node -->
                    <!-- jsLayout is the argument to target -->
                    <argument name="jsLayout" xsi:type="array">
                        <!-- "components" is an array of UI Components... -->
                        <item name="components" xsi:type="array">
                            <!-- ...add your own UI Component to the array -->
                            <item name="free-shipping-banner" xsi:type="array">
                                Reference your component with the format
                                Namespace_Module/js/your-file (no extenstion).
                                Namespace_Module/ is relative to module dir
                                <item name="component" xsi:type="string">Macademy_FreeShippingPromo/js/free-shipping-banner</item>
 * Most UI Component implementations use "uiComponent" for the base class.
 * This is technically the same as referencing the "uiCollection" class.
 * The class is then commonly aliased in Magento code as "Component".
], function(
) {
    'use strict';

    // This code executes before the component has been initialized.
    console.log('Free Shipping Banner UI Component has been loaded');

    // You'd normally always return Component.extend(), then pass the
    // configuration as JSON into this parent class.
    return Component;
/* @var $block Magento\Framework\View\Element\Template */
<div id="free-shipping-banner">
    Free Shipping Banner

<script type="text/x-magento-init">
     * Within this x-magento-init tag, use an element selector to target the
     * related DOM element. #free-shipping-banner targets the above div element
     * with the attribute id="free-shipping-banner".
     * The call to $block->getJsLayout() calls the configuration that was just
     * defined within the new Layout XML file. This passes the config to
     * Magento_Ui/js/core/app, which in turn resolves back to
     * vendor/magento/module-ui/view/base/web/js/core/app.js, and then this
     * script bootstraps the UI Component initialization process.
        "#free-shipping-banner": {
            "Magento_Ui/js/core/app": <?= $block->getJsLayout() ?>
Want to learn more?

Visit to learn much more about Magento, Laravel, PHP, Javascript, & Docker. logo