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
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:
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">
<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
Explore related questions
See similar questions with these tags.