In this post I am going to explain how to get subtotal and grand total in checkout page using knockout js in Magento 2.
Here, I am using my custom module – Ht_Mymodule
In order to display content on checkout page, first we need to add block in checkout_index_index.xml file.
So create layout file checkout_index_index.xml in your module at below path and add below code.
File Path: app/code/Ht/Mymodule/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>
<referenceContainer name="content">
<block class="Ht\Mymodule\Block\Checkout\Quoteinfo" before="-" cacheable="false" template="Ht_Mymodule::checkout/quoteinfo.phtml">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout-quote-information" xsi:type="array">
<item name="component" xsi:type="string">Ht_Mymodule/js/view/checkout/quoteinfo</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Ht_Mymodule/checkout/quoteinfo</item>
</item>
</item>
</item>
</argument>
</arguments>
</block>
</referenceContainer>
</body>
</page>In this file you can see:
– Block class: Ht\Mymodule\Block\Checkout\Quoteinfo
– Block template: Ht_Mymodule::checkout/quoteinfo.phtml
– Knockout js file: Ht_Mymodule/js/view/checkout/quoteinfo.js
– The template file of knockout js: Ht_Mymodule/checkout/quoteinfo.html
Now we are going to create all above files.
1. Block class: Quoteinfo.php
File Path: app/code/Ht/Mymodule/Block/Checkout/Quoteinfo.php
<?php
namespace Ht\Mymodule\Block\Checkout;
class Quoteinfo extends \Magento\Framework\View\Element\Template
{
public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
array $layoutProcessors = [],
array $data = []
)
{
parent::__construct($context, $data);
$this->layoutProcessors = $layoutProcessors;
}
public function getJsLayout()
{
foreach ($this->layoutProcessors as $processor) {
$this->jsLayout = $processor->process($this->jsLayout);
}
return parent::getJsLayout();
}
}2. Block template: quoteinfo.phtml
File Path: app/code/Ht/Mymodule/view/frontend/templates/checkout/quoteinfo.phtml
<div id="customer-page">
<div id="block-quote-info" data-bind="scope:'checkout-quote-information'" class="block">
<!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
{
"#block-quote-info": {
"Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout(); ?>
}
}
</script>
</div>
</div>3. Knockout js file: quoteinfo.js
File Path: app/code/Ht/Mymodule/view/frontend/web/js/view/checkout/quoteinfo.js
define([
'jquery',
'ko',
'uiComponent',
'Magento_Checkout/js/model/quote'
], function($, ko, Component, quote) {
"use strict";
return Component.extend({
getSubtotal: function() {
var totals = quote.totals();
return (totals ? totals : quote)['subtotal'];
},
getGrandTotal: function() {
var totals = quote.totals();
return (totals ? totals : quote)['grand_total'];
}
});
});4. The template file of knockout js: quoteinfo.html
File Path: app/code/Ht/Mymodule/view/frontend/web/template/checkout/quoteinfo.html
<div class="quote-info">
<div class="quote-subtotal">
<label data-bind="text: 'Subtotal: '"></label>
<span data-bind="text: getSubtotal()"></span>
</div>
<div class="quote-grandtotal">
<label data-bind="text: 'Grand Total: '"></label>
<span data-bind="text: getGrandTotal()"></span>
</div>
</div>Now, Run upgrade and deploy commands and check for the result on checkout page.
Write an article about ecommerce that help people to grow their ecommerce business. You’ll find best ecommerce guide, news, tips & more!
May 6, 2020 at 1:40 pm
Excellent blog! I really appreciated to you on this quality work.