item count and subtotal in minicart in magento2

Question

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>

Answer 1

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

Answer 2

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>

Answer 3

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.