1

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

4
  • please add your full code of phtml file Feb 25, 2017 at 5:42
  • @RakeshJesadiya added the content of the file Feb 25, 2017 at 5:44
  • please add file path of your custom code. Feb 25, 2017 at 5:50
  • @RakeshJesadiya added the file path Feb 25, 2017 at 5:55

2 Answers 2

3

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>
3
  • Who knew it would be so easy! Feb 25, 2017 at 6:43
  • using cacheable="false" slow down the entire page load speed time. Feb 25, 2017 at 7:03
  • 1
    I recommend you to use the customer-data javascript layer in order to retrieve local-storage information for backward compatibility. Which is already implemented in the minicart.js with the getCartParam('summary_count') function. Because Magento may change the name of the localStorage key and you may want to refresh the localStorage data from Ajax call with customerData.reload function. Mar 13, 2017 at 15:53
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.