Magento 2 – Item Count and Subtotal in Minicart

knockoutjsmagento2

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>

Best Answer

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 -->

Related Solutions

Magento 2 – Minicart Checkout Button and Cart Subtotal Display After Item List

First copy content.html file inside

app/design/frontend/{{PackageName}}/{{themename}}/Magento_Checkout/web/template/minicart/content.html

<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="block-title">
    <strong>
        <span class="text"><!-- ko i18n: 'My Cart' --><!-- /ko --></span>
        <span
            class="qty empty"
            data-bind="css: { empty: cart().summary_count == 0 },
                       attr: { title: $t('Items in Cart') }">
            <!-- ko text: cart().summary_count --><!-- /ko -->
        </span>
    </strong>
</div>

<div class="block-content">
    <p class="block-subtitle"><!-- ko i18n: 'Recently added item(s) ' --><!-- /ko --></p>
    <button type="button"
            id="btn-minicart-close"
            class="action close"
            data-action="close"
            data-bind="attr: { title: $t('Close') }">
        <span><!-- ko i18n: 'Close' --><!-- /ko --></span>
    </button>    

    <!-- ko if: cart().summary_count -->
    <strong class="subtitle"><!-- ko i18n: 'Recently added item(s)' --><!-- /ko --></strong>
    <div data-action="scroll" class="minicart-items-wrapper">
        <ol id="mini-cart" class="minicart-items" data-bind="foreach: { data: cart().items, as: 'item' }">
            <!-- ko foreach: $parent.getRegion($parent.getItemRenderer(item.product_type)) -->
                <!-- ko template: {name: getTemplate(), data: item, afterRender: function() {$parents[1].initSidebar()}} --><!-- /ko -->
            <!-- /ko -->
        </ol>
    </div>
    <!-- /ko -->

    <!-- ko ifnot: cart().summary_count -->
        <strong class="subtitle empty" data-bind="visible: closeSidebar()">
            <!-- ko i18n: 'You have no items in your shopping cart.' --><!-- /ko -->
        </strong>
        <!-- ko if: cart().cart_empty_message -->
            <p class="minicart empty text"><!-- ko text: cart().cart_empty_message --><!-- /ko --></p>

            <div class="actions">
                <div class="secondary">
                    <a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
                        <span><!-- ko text: $t('View and edit cart') --><!-- /ko --></span>
                    </a>
                </div>
            </div>
        <!-- /ko -->
    <!-- /ko -->    

    <!-- ko if: cart().summary_count -->
        <div class="items-total">
            <span class="count"><!-- ko text: cart().summary_count --><!-- /ko --></span>
            <!-- ko if: cart().summary_count == 1 -->
                <!-- ko i18n: 'item' --><!-- /ko -->
            <!-- /ko -->
            <!-- ko if: cart().summary_count > 1 -->
                <!-- ko i18n: 'items' --><!-- /ko -->
            <!-- /ko -->
        </div>

        <!-- ko if: cart().possible_onepage_checkout -->
            <!-- ko foreach: getRegion('subtotalContainer') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!-- /ko -->
        <!-- /ko -->

        <div class="actions">
            <div class="secondary">
                <a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
                    <span><!-- ko i18n: 'View Shopping Cart' --><!-- /ko --></span>
                </a>
            </div>
        </div>

        <!-- ko foreach: getRegion('extraInfo') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!-- /ko -->

        <!-- ko if: cart().possible_onepage_checkout -->
        <div class="actions">
            <div class="primary">
                <button
                        id="top-cart-btn-checkout"
                        type="button"
                        class="action primary checkout"
                        data-bind="attr: {title: $t('Checkout')}">
                    <!-- ko i18n: 'Checkout' --><!-- /ko -->
                </button>
                <div data-bind="html: cart().extra_actions"></div>
            </div>
        </div>
        <!-- /ko -->
    <!-- /ko -->

    <div id="minicart-widgets" class="minicart-widgets">
        <!-- ko foreach: getRegion('promotion') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!-- /ko -->
    </div>
</div>
<!-- ko foreach: getRegion('sign-in-popup') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->

Add above code inside content.html file. Clear cache of magento and clear cache of browser. After clearing cache, Your minicart updated.

Magento – Magento2: How to show subtotal in minicart

Subtotal along with counter

<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 class="counter-number" data-bind="html: getCartParam('subtotal')"></span>
</span>

Best Answer

Related Solutions

Magento 2 – Minicart Checkout Button and Cart Subtotal Display After Item List

Magento – Magento2: How to show subtotal in minicart

Related Topic