4

I'd like to know what is the best approach to add a custom knockout component to the checkout sidebar in Magento 2, an example assuming we already have a custom module would be great

example

UPDATE:

As I needed a placeholder different than the "summary", I followed Sohel's answer and also did those steps

Override sidebar template in module's requirejs-config.js:

var config = {
    map: {
        '*': {
            'Magento_Checkout/template/sidebar.html': 'SR_MagentoCommunity/template/sidebar.html',
            sidebar: 'SR_MagentoCommunity/js/sidebar'
        }
    }
};

Add a new region called "timer" in the new overriden sidebar.html template:

<div id="opc-sidebar"
     data-bind="afterRender:setModalElement, mageInit: {
    'Magento_Ui/js/modal/modal':{
        'type': 'custom',
        'modalClass': 'opc-sidebar opc-summary-wrapper',
        'wrapperClass': 'checkout-container',
        'parentModalClass': '_has-modal-custom',
        'responsive': true,
        'responsiveClass': 'custom-slide',
        'overlayClass': 'modal-custom-overlay',
        'buttons': []
    }}">

    <!-- ko foreach: getRegion('summary') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->

    <div class="opc-block-shipping-information">
        <!-- ko foreach: getRegion('shipping-information') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>

    <!-- ko foreach: getRegion('timer') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->

</div>

Update checkout_index_index.xml to place the component in the new region:

<item name="sidebar" xsi:type="array">
    <item name="children" xsi:type="array">

        <item name="timer" xsi:type="array">
            <item name="component" xsi:type="string"> SR_MagentoCommunity/js/timer</item>
            <item name="displayArea" xsi:type="string">timer</item>
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string"> SR_MagentoCommunity/timer</item>
            </item>
        </item>

    </item>
</item>

And this is the final result:

enter image description here

Improve this question

1 Answer 1

Reset to default
7

Try the following way:

Step 1: app/code/SR/MagentoCommunity/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="custom_sidebar" xsi:type="array">
                                            <item name="component" xsi:type="string">SR_MagentoCommunity/js/view/custom_sidebar</item>
                                            <item name="displayArea" xsi:type="string">summary</item>
                                            <item name="config" xsi:type="array">
                                                <item name="template" xsi:type="string">SR_MagentoCommunity/custom_sidebar</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Step 2: app/code/SR/MagentoCommunity/view/frontend/web/js/view/custom_sidebar.js

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

    return Component.extend({

    });
});

Step 3: app/code/SR/MagentoCommunity/view/frontend/web/template/custom_sidebar.html

<h1>Custom Sidebar</h1>

Clear cache, delete static content.

Note: SR_MagentoCommunity is module name

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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