i am trying to customize the checkout of a Magento 2. At the moment, i want to change the appearance of the "shipping"-step. Can anyone give me a hint how to remove the sidebar (including the order summary)?
It should only bei visible on the "payment"-step, not in "shipping".
Magento's docs explain how to disable an item here: https://devdocs.magento.com/guides/v2.4/howdoi/checkout/checkout_customize.html#disable
removing the summary (in this case, in mobile) is as simple as adding the following to your theme's checkout_index_index.xml
<item name="estimation" xsi:type="array">
<item name="componentDisabled" xsi:type="boolean">true</item>
</item>
The checkout_index_index.xml should look something like this
<?xml version="1.0" encoding="utf-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" 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="estimation" xsi:type="array">
<item name="componentDisabled" xsi:type="boolean">true</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
The sidebar is added in the layout file checkout_index_index.xml in magento/module-checkout/view/frontend/layout/. You actually can't modify that in order to meet your requirements without extensively modding the checkout.
There is an easier solution to do it with CSS though.
Put this line to your styles: .opc-summary-wrapper{display:none;} and modify magento/module-checkout/view/frontend/web/js/model/step-navigator.js do not edit core files! Make a copy in your Theme or Module and add the following code to the function getActiveItemIndex
if (activeIndex == 1) {
$('.opc-summary-wrapper').css("display", "block");
}
else {
$('.opc-summary-wrapper').css("display", "none");
}
Worked for me. Not my idea though, found this answer on magento stackexchange: https://magento.stackexchange.com/questions/229001/checkout-remove-sidebar-only-in-step-1
Copy
checkout_index_index.xml
from
PROJECT_ROOT/vendor/magento/module-checkout/view/frontend/layout
folder and find the following line of code
<item name="sidebar" xsi:type="array">
then replace the lines of codes under this item block and place the following line of code
<item name="disbaled" xsi:type="string">true</item>
It will remove the order summary as well as the sidebar that contains the order summary block in shipping step of checkout page
Hope you'll find it helpful.
create Vendor/Module/view/frontend/web/template/checkout/sidebar.html file & make copy paste html template from Magento_Checkout/view/frontend/web/template/sidebar.html
<div id="opc-sidebar"
data-bind="visible: canDisplaySidebarSummaryBlock(), 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>
then. create Vendor/Module/view/frontend/web/js/view/checkout/sidebar-mixin.js
define([
'uiComponent',
'ko',
'jquery',
'Magento_Checkout/js/model/step-navigator',
], function (Component, ko, $, stepNavigator) {
'use strict';
var mixin = {
/**
* current step is #payment or not.
*
* @returns {Boolean}
*/
canDisplaySidebarSummaryBlock: function () {
if(stepNavigator.isProcessed('shipping')) {
// if stepNavigator is not #shipping . then display Order Summary & remove class of width 100%
$('.opc-summary-wrapper').css("display", "block");
$('#checkout .opc-wrapper').removeClass('w-100');
}else{
$('.opc-summary-wrapper').css("display", "none");
$('#checkout .opc-wrapper').addClass('w-100');
}
return stepNavigator.isProcessed('shipping');
}
}
return function (target) {
return target.extend(mixin);
};
});
then Vendor/Module/view/frontend/requirejs-config.js
var config = {
config: {
mixins: {
'Magento_Checkout/js/view/sidebar': {
'Microtech_Storepickup/js/view/checkout/sidebar-mixin': true
},
}
}
}
then create Vendor/Module/view/frontend/layout/checkout_index_index.xml
<?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="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">
<!-- Order Summary -->
<item name="sidebar" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Microtech_Storepickup/checkout/sidebar</item>
<item name="componentDisabled" xsi:type="boolean">false</item>
</item>
<!-- <item name="children" xsi:type="array">
<item name="summary" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Microtech_Storepickup/checkout/summary</item>
</item>
</item>
</item> -->
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
