0

I want to display cart count and subtotal near Minicart. I have copied Minicart from Module_Checkout to my custom theme. It is displaying but i need use if condition for cart count if it is greater than 1 it should show items and if it is less than 1 it show item. Here is my code.

<div data-block="minicart" class="minicart-wrapper">

<a class="action showcart" href="<?php /* @escapeNotVerified */ echo $block->getShoppingCartUrl(); ?>"
   data-bind="scope: 'minicart_content'">
    <span class="text"><?php /* @escapeNotVerified */echo __('My Cart') ?> </span>
    <span class="counter qty"
          data-bind="blockLoader: isLoading">
        <span class="counter-number">
        <!-- ko text: getCartParam('summary_count') --><!-- /ko --> **Item** </span> - <span data-bind="html: getCartParam('subtotal')"> </span>
        <span class="counter-label">
        <!-- ko if: getCartParam('summary_count') -->
            <!-- ko text: getCartParam('summary_count') --><!-- /ko -->
            <!-- ko i18n: 'items' --><!-- /ko -->
        <!-- /ko -->
        </span>  
  </span>
</a>

<?php if ($block->getIsNeedToDisplaySideBar()): ?>
    <div class="block block-minicart empty"
         data-role="dropdownDialog"
         data-mage-init='{"dropdownDialog":{
            "appendTo":"[data-block=minicart]",
            "triggerTarget":".showcart",
            "timeout": "2000",
            "closeOnMouseLeave": false,
            "closeOnEscape": true,
            "triggerClass":"active",
            "parentClass":"active",
            "buttons":[]}}'>
        <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
            <!-- ko template: getTemplate() --><!-- /ko -->
        </div>
        <?php echo $block->getChildHtml('minicart.addons'); ?>
    </div>
<?php endif ?>
<script>
    window.checkout = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getConfig()); ?>;
</script>
<script type="text/x-magento-init">
{
    "[data-block='minicart']": {
        "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
    },
    "*": {
        "Magento_Ui/js/block-loader": "<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
    }
}
</script>

0

You can use the following snippet:

<!-- ko if: getCartParam('summary_count') == 1 -->
  <!-- ko i18n: 'item' --><!-- /ko -->
<!-- /ko -->
<!-- ko if: getCartParam('summary_count') > 1 -->
  <!-- ko i18n: 'items' --><!-- /ko -->
<!-- /ko -->
0

Subtotal along with counter.

<div data-block="minicart" class="minicart-wrapper">
    <a class="action showcart" href="<?php /* @escapeNotVerified */ echo $block->getShoppingCartUrl(); ?>"
       data-bind="scope: 'minicart_content'">
    <span class="counter qty empty"
          data-bind="css: { empty: !!getCartParam('summary_count') == false }, blockLoader: isLoading">
        <span class="counter-number">
        <!-- ko ifnot: getCartParam('summary_count') -->
            <!-- ko text: '0' --><!-- /ko -->
        <!-- /ko -->
        <!-- ko if: getCartParam('summary_count') -->
            <!-- ko text: getCartParam('summary_count') --><!-- /ko -->
        <!-- /ko -->
        </span>
        <span class="counter-label">
        <!-- ko if: getCartParam('summary_count') -->
            <!-- ko text: getCartParam('summary_count') --><!-- /ko -->
            <!-- ko i18n: 'items' --><!-- /ko -->
        <!-- /ko -->
        </span>
    </span>

    <span class="text"><?php /* @escapeNotVerified */ echo __('My Cart'); ?></span>

    <span data-bind="html: getCartParam('subtotal')"></span>
        <!-- /ko -->
        <!-- ko if: getCartParam('summary_count') != 1 -->
            <!-- ko text: getCartParam('summary_count') --><!-- /ko -->
            <!-- ko i18n: 'items' --><!-- /ko -->
            <span data-bind="html: getCartParam('subtotal')"></span>
        <!-- /ko -->
    </span>

    </a>
</div>
0

Part 1 - Subtotal

You need to override the minicart.phtml file, duplicate it within a theme, so it would be: app/design/frontend/vendor/theme-name/Magento_Checkout/templates/cart/minicart.phtml

Inset this:

<span class="subtotal" data-bind="html: getCartParam('subtotal')"></span>

Within the minicart-wrapper

e.g.

<div data-block="minicart" class="minicart-wrapper">
    <a class="action showcart" href="<?= /* @escapeNotVerified */ $block->getShoppingCartUrl() ?>"
       data-bind="scope: 'minicart_content'">
        <span class="text"><?= /* @escapeNotVerified */ __('Your Basket') ?></span>
        <span class="subtotal" data-bind="html: getCartParam('subtotal')"></span>
        <span class="counter qty empty"
              data-bind="css: { empty: !!getCartParam('summary_count') == false }, blockLoader: isLoading">
            <span class="counter-number"><!-- 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>
        </span>
    </a>

Part 2 - Item Count

This is hidden via CSS when the count is 'empty', the .empty class only appears when the count is 0:

.minicart-wrapper .action.showcart .counter.qty.empty {
    display: none;
}

Override this within your CSS, and it will display even when count is 0.

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.