Displaying cart item count in custom span tag

Question

I am trying to figure out how to display the current cart count in a span outside of the mini cart. I have tried to add data-bind="html: getCartParam('subtotal') into the span but I get an error:

Uncaught ReferenceError: Unable to process binding "html: function (){return getCartParam('subtotal') }" Message: getCartParam is not defined

I am able to add this:

<?php echo $this->helper('\Magento\Checkout\Helper\Cart')->getItemsCount(); ?>

which will give me the cart count but it will break as soon as full page cache is enabled. Is there anyway to accomplish what I want?

EDIT:

<?php
$counter = $this->helper('\Magento\Checkout\Helper\Cart');
?>

<div class="customerInformation">
    <span class="customer-icon contact-phone-icon" aria-hidden="true"></span>Call Now <a href="tel:<?php echo $block->getPhoneNumber(); ?>"><?php echo $block->getPhoneNumber(); ?></a>
    &nbsp;
    <a href="/checkout/cart"><span class="lang-icon bag-icon"></span>&nbsp;Bag <span class="badge"><?php echo $counter->getItemsCount(); ?></span></a>
</div>

EDIT 2:

app/code/Vendor/Module/view/frontend/templates/customerInformation.phtml

Answer 1

You can make your block non-cacheable by adding cacheable="false" attribute to it in the layout xml:

<block name="cart.count" class="Magento\Framework\View\Element\Template" template="Vendor_Module::cartcount.phtml" cacheable="false"/>

I tested it by using the cart helper with FPC on and it appears to do what you want.

Update:

Apparently using cacheable="false" disables caching for the whole page.

A better way to do it is to get the item count from javascript localStorage. Here's a quick and easy way to do it:

<span data-bind="text: JSON.parse(window.localStorage.getItem('mage-cache-storage')).cart.summary_count"></span>

Answer 2

Use this knockout code to get the cart count

<!-- ko if: getCartParam('summary_count') -->
    <!-- ko text: getCartParam('summary_count') --><!-- /ko -->
<!-- /ko -->

apply proper bindings and do add minicart.js otherwise the function getCartParam() will not be available.

Refer : vendor/magento/module-checkout/view/frontend/templates/cart/minicart.phtml