Magento – How to display the grand total in the minicart? – Magento2

magento-2.1mini-carttaxtotals

I currently have my subtotal tax settings set to 'Display subtotal excluding tax'. This has changed the subtotal in the minicart to display the subtotal excluding tax.

enter image description here

How can I display the grand total of the order including tax in the highlighted area with the settings mentioned above?

Best Answer

This may be late, but I would post this for the people who reach here in future.

Let's start with the layout.xml [scope]/[module]/view/frontend/layout/default.xml

<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="Magento\Checkout\Block\Onepage" name="common.checkout.config"
               template="[scope]_[module]::checkout/config.phtml" cacheable="false">
        </block>
    </referenceContainer>
    <referenceBlock name="minicart">
        <arguments>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                    <item name="grand-total" xsi:type="array">
                        <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/grand-total</item>
                        <item name="displayArea" xsi:type="string">totals</item>
                        <item name="config" xsi:type="array">
                            <item name="title" xsi:type="string" translate="true">Total Cost with GST</item>
                            <item name="template" xsi:type="string">Magento_Checkout/cart/totals/grand-total</item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

I am not sure if it is a good idea to place cacheable="false" block in a default.xml, Better to try without it and thoroughly test.

Override the and add getQuote Method. [scope]/[module]/etc/frontend/di.xml

<preference for="Magento\Checkout\Block\Onepage" type="IWD\Opc\Block\Onepage" />

app/code/[scope]/[module]/Block/Onepage.php 

namespace [scope]\[module]\Block;

use Magento\Checkout\Block\Onepage as CheckoutOnepage;
use Magento\Checkout\Model\Session\Proxy as CheckoutSession;
use Magento\Framework\View\Element\Template\Context;
use Magento\Framework\Data\Form\FormKey;
use Magento\Checkout\Model\CompositeConfigProvider;

class Onepage extends CheckoutOnepage
{

    public $checkoutSession;
    public $quote = null;

    public function __construct(
        Context $context,
        FormKey $formKey,
        CompositeConfigProvider $configProvider,
        CheckoutSession $checkoutSession,
        array $layoutProcessors = [],
        array $data = []
    ) {
        $this->checkoutSession = $checkoutSession;
        parent::__construct($context, $formKey, $configProvider, $layoutProcessors, $data);
    }

    public function getQuote()
    {
        if (null === $this->quote) {
            $this->quote = $this->checkoutSession->getQuote();
        }

        return $this->quote;
    }
}

[scope]/[module]/view/frontend/templates/checkout/config.phtml

Those who need the explanation, why below two code blocks are needed please check at the end of the post.

<?php if($block->getQuote() && $block->getQuote()->getId()):?>
<script>
window.checkoutConfig = <?= /* @escapeNotVerified */ $block->getSerializedCheckoutConfig() ?>;
// Create aliases for customer.js model from customer module
window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn;
window.customerData = window.checkoutConfig.customerData;
</script>
<?php endif;?>

In [scope]/[module]/view/frontend/layout/checkout_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <body>
    <referenceBlock name="common.checkout.config" remove="true"/>
  </body>
</page>

Finaly let's add them to the mini-cart app/design/frontend/[package]/[theme]/[scope]_[module]/templates/cart/minicart.phtml

<div id="grand-total" class="grand-total" data-bind="scope:'grand-total'">
                <!-- ko template: getTemplate() --><!-- /ko -->
</div>

<script type="text/x-magento-init">
        {
            "#grand-total": {
                "Magento_Ui/js/core/app": <?= /* @escapeNotVerified */ $block->getJsLayout() ?>
            }
        }
</script>

The explanation for adding window.checkoutConfig

When loading vendor/magento/module-checkout/view/frontend/web/js/view/summary/grand-total.js (By Magento_Checkout/js/view/summary/grand-total entry in the default.xml layout file ), It also tries to load the vendor/magento/module-checkout/view/frontend/web/js/model/quote.js (By the 'Magento_Checkout/js/model/quote' in the requireJs define array). However, when loading the quote.js it tries to access certain data in the window.checkoutConfig. This is not available in the pages except checkout control actions. So we have to manually place this on every page with the help of default.xml.

I don't agree with this Magento core implementation as I believe, this should be implemented with the use of customerData with the local storage. You may find more details regarding the issue with this Magento Core approach, in this article by Jisse Reitsma

Related Topic