In this blog, we are going to learn how we can display a custom block in the cart summary on the checkout cart page in Magento 2.
Want to know more about customizing your shopping cart page, here are a few links:
How to add more product information on checkout cart in magento2
Display custom price fee on checkout cart and summary total in magento2
How to show additional data on Mini-cart in Magento 2
Display custom block on the checkout cart page in Magento 2
In Magento 2, The cart summary displays information related to the products in the cart, such as product names, quantities, prices, subtotal, discounts, taxes, shipping costs, and the grand total.
Sometimes we need to display some additional information in the shopping cart summary section in our custom module. So, to display a custom block in the cart summary on the checkout cart page, please follow the below steps:
1. Create checkout_cart_index.xml file inside the app/code/Vendor/CustomModule/view/frontend/layout/ directory.
<?xml version="1.0"?>
<!--
/**
* Vendor Desc.
*
* @category Vendor
* @package Vendor_CustomModule
* @author Vendor
* @copyright Vendor
* @license https://example.com/license.html
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="checkout.cart.totals.container">
<block class="Magento\Framework\View\Element\Template"
name="checkout.cart.custom.block"
after="checkout.cart.totals"
template="Vendor_CustomModule::customblock.phtml" />
</referenceContainer>
</body>
</page>
2. Create the customblock.phtml file inside the app/code/Vendor/CustomModule/view/frontend/templates/ directory.
<!--
/**
* Vendor Desc.
*
* @category Vendor
* @package Vendor_CustomModule
* @author Vendor
* @copyright Vendor
* @license https://example.com/license.html
*/
-->
<p style="color:green;">
Custom Block<br/>
Write your content Here...
</p>
3. See the result in the following image:
4. If you want to display the custom block before the cart totals section, then use ‘before=”checkout.cart.totals” ‘ in place of ‘after=”checkout.cart.totals” ‘. And the result will be as the following image:
Finally, refresh the checkout cart page in your web browser to see your custom block displayed within the cart summary section. Your custom block should now be visible with the content you specified in the template file.
Hope this will be helpful. Thanks 🙂
If you want to learn how to reload a custom block on collectTotals on the cart page in Magento 2. You can check our below link:
Reload custom block on collectTotals on cart page Magento 2
3 comments
You can override the Magento_Checkout/js/model/totals js file and modify the getSegment() method, then you can reload or modify the custom block content each time when totals are being collected on the cart page.
We will publish a blog very soon regarding this, which will be helpful to you.
We have published the following blog, which will be helpful to resolve your query.
Reload custom block on collectTotals on cart page Magento 2