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



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: {
        '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 -->

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

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


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>


And this is the final result:

enter image description here

1 Answer 1


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">
        <referenceBlock name="checkout.root">
                <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>

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

], 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

Your Answer

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

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