{"id":7385,"date":"2019-10-04T12:23:52","date_gmt":"2019-10-04T06:53:52","guid":{"rendered":"https:\/\/www.hiddentechies.com\/blog\/?p=7385"},"modified":"2019-10-04T15:48:52","modified_gmt":"2019-10-04T10:18:52","slug":"magento-2-get-subtotal-grand-total-in-checkout-page-using-knockout","status":"publish","type":"post","link":"https:\/\/www.hiddentechies.com\/blog\/magento-2\/magento-2-get-subtotal-grand-total-in-checkout-page-using-knockout\/","title":{"rendered":"Magento 2 – How to Get Subtotal and Grand total in Checkout Page using Knockout JS"},"content":{"rendered":"

In this post I am going to explain how to get subtotal and grand total in checkout page using knockout js in Magento 2.<\/p>\n

Here, I am using my custom module – Ht_Mymodule<\/p>\n

In order to display content on checkout page, first we need to add block in checkout_index_index.xml file.<\/p>\n

So create layout file checkout_index_index.xml in your module at below path and add below code.<\/p>\n

File Path: app\/code\/Ht\/Mymodule\/view\/frontend\/layout\/checkout_index_index.xml<\/p>\n

<?xml version=\"1.0\"?>\r\n\r\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\r\n    <body>\r\n        <referenceContainer name=\"content\">\r\n            <block class=\"Ht\\Mymodule\\Block\\Checkout\\Quoteinfo\" before=\"-\" cacheable=\"false\" template=\"Ht_Mymodule::checkout\/quoteinfo.phtml\">\r\n                <arguments>\r\n                    <argument name=\"jsLayout\" xsi:type=\"array\">\r\n                        <item name=\"components\" xsi:type=\"array\">\r\n                            <item name=\"checkout-quote-information\" xsi:type=\"array\">\r\n                                <item name=\"component\" xsi:type=\"string\">Ht_Mymodule\/js\/view\/checkout\/quoteinfo<\/item>\r\n                                <item name=\"config\" xsi:type=\"array\">\r\n                                    <item name=\"template\" xsi:type=\"string\">Ht_Mymodule\/checkout\/quoteinfo<\/item>\r\n                                <\/item>\r\n                            <\/item>\r\n                        <\/item>\r\n                    <\/argument>\r\n                <\/arguments>\r\n            <\/block>\r\n        <\/referenceContainer>\r\n    <\/body>\r\n<\/page><\/pre>\n
In this file you can see:<\/p>\n
\u2013 Block class: Ht\\Mymodule\\Block\\Checkout\\Quoteinfo
\n\u2013 Block template: Ht_Mymodule::checkout\/quoteinfo.phtml
\n\u2013 Knockout js file: Ht_Mymodule\/js\/view\/checkout\/quoteinfo.js
\n\u2013 The template file of knockout js: Ht_Mymodule\/checkout\/quoteinfo.html<\/p>\n
Now we are going to create all above files.<\/p>\n
1. Block class: Quoteinfo.php<\/p>\n
File Path: app\/code\/Ht\/Mymodule\/Block\/Checkout\/Quoteinfo.php<\/p>\n
<?php\r\n\r\nnamespace Ht\\Mymodule\\Block\\Checkout;\r\n\r\nclass Quoteinfo extends \\Magento\\Framework\\View\\Element\\Template \r\n{\r\n    public function __construct(\r\n        \\Magento\\Framework\\View\\Element\\Template\\Context $context, \r\n        array $layoutProcessors = [], \r\n        array $data = []\r\n    )\r\n    {\r\n\r\n        parent::__construct($context, $data);\r\n        $this->layoutProcessors = $layoutProcessors;\r\n    }\r\n    \r\n    public function getJsLayout() \r\n    {\r\n        foreach ($this->layoutProcessors as $processor) {\r\n\r\n            $this->jsLayout = $processor->process($this->jsLayout);\r\n        }\r\n        return parent::getJsLayout();\r\n    }\r\n}<\/pre>\n
2. Block template: quoteinfo.phtml<\/p>\n
File Path: app\/code\/Ht\/Mymodule\/view\/frontend\/templates\/checkout\/quoteinfo.phtml<\/p>\n
<div id=\"customer-page\">\r\n    <div id=\"block-quote-info\" data-bind=\"scope:'checkout-quote-information'\" class=\"block\">\r\n        <!-- ko template: getTemplate() --><!-- \/ko -->\r\n        <script type=\"text\/x-magento-init\">\r\n            {\r\n                \"#block-quote-info\": {\r\n                    \"Magento_Ui\/js\/core\/app\": <?php \/* @escapeNotVerified *\/ echo $block->getJsLayout(); ?>\r\n                }\r\n            }\r\n        <\/script>\r\n    <\/div>\r\n<\/div><\/pre>\n
3. Knockout js file: quoteinfo.js<\/p>\n
File Path: app\/code\/Ht\/Mymodule\/view\/frontend\/web\/js\/view\/checkout\/quoteinfo.js<\/p>\n
define([\r\n    'jquery',\r\n    'ko',\r\n    'uiComponent',\r\n    'Magento_Checkout\/js\/model\/quote'\r\n], function($, ko, Component, quote) {\r\n    \"use strict\";\r\n\r\n    return Component.extend({\r\n        getSubtotal: function() {\r\n            var totals = quote.totals();\r\n            return (totals ? totals : quote)['subtotal'];\r\n        },\r\n        getGrandTotal: function() {\r\n            var totals = quote.totals();\r\n            return (totals ? totals : quote)['grand_total'];\r\n        }\r\n    });\r\n});<\/pre>\n
4. The template file of knockout js: quoteinfo.html<\/p>\n
File Path: app\/code\/Ht\/Mymodule\/view\/frontend\/web\/template\/checkout\/quoteinfo.html<\/p>\n
<div class=\"quote-info\">\r\n    <div class=\"quote-subtotal\">\r\n        <label data-bind=\"text: 'Subtotal: '\"><\/label>\r\n        <span data-bind=\"text: getSubtotal()\"><\/span>\r\n    <\/div>\r\n    <div class=\"quote-grandtotal\">\r\n        <label data-bind=\"text: 'Grand Total: '\"><\/label>\r\n        <span data-bind=\"text: getGrandTotal()\"><\/span>\r\n    <\/div>\r\n<\/div><\/pre>\n
Now, Run upgrade and deploy commands and check for the result on checkout page.<\/p>\n","protected":false},"excerpt":{"rendered":"
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… <\/p>\n
Continue Reading<\/a><\/div>\n","protected":false},"author":1,"featured_media":7414,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[10,27],"_links":{"self":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/7385"}],"collection":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/comments?post=7385"}],"version-history":[{"count":1,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/7385\/revisions"}],"predecessor-version":[{"id":7386,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/7385\/revisions\/7386"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media\/7414"}],"wp:attachment":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media?parent=7385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/categories?post=7385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/tags?post=7385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}