0

I tried to add a 'span' with the total quantity in cart but I have a small problem, I would like to add the red circle with quantity only if there is a product in cart. It works but when we go on another page, the red circle appears and disapears few seconds after. Do you how I can solve this problem?

Here is my code in minicart.phtml

<a class="action showcart" href="<?php echo $block->getShoppingCartUrl(); ?>"
   data-bind="scope: 'minicart_content'">
    <span class="text"><?php echo __('My Cart'); ?></span>
    <!-- ko if : getCartParam('summary_count') --><span class="cart-item-count circle circle-lg circle-red"><!-- ko text: getCartParam('summary_count') --><!-- /ko --></span><!-- /ko -->
</a>

enter image description here

one second after

enter image description here

Thanks

0

Try this solution:

<a class="action showcart" href="<?= $block->getShoppingCartUrl() ?>"
   data-bind="scope: 'minicart_content'">
    <span class="text"><?= __('My Cart') ?></span>
    <!-- ko if: getCartParam('summary_count') -->
        <span data-bind="text: getCartParam('summary_count'), css: 'cart-item-count circle circle-lg circle-red'"></span>
    <!-- /ko -->
</a>

CSS class with styles will be set only if 'summary_count' > 0. I hope it will help.

0

Try the below code:

<a class="action showcart" href="<?php echo $block->getShoppingCartUrl(); ?>"
   data-bind="scope: 'minicart_content'">
    <span class="text"><?php echo __('My Cart'); ?></span>
    <span class="cart-item-count circle circle-lg circle-red"><!-- ko text: getCartParam('summary_count') --><!-- /ko --></span>
    <span class="counter-label">
        <!-- ko if: getCartParam('summary_count') -->
            <!-- ko text: getCartParam('summary_count') --><!-- /ko -->
            <!-- ko i18n: 'items' --><!-- /ko -->
        <!-- /ko -->
    </span>
</a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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