Add/Remove class from div if minicart hasitem/noitem

Question

I want to add a class in parent div if minicart/cart is empty and remove same class if minicart/cart has an item(s).I made changes in minicart.phtml. below is my code for that.

<div class="block block-minicart"
data-bind="css: { emptyBag: !!getCartParam('summary_count') == false }
                 data-role="dropdownDialog"
                 data-mage-init='{"dropdownDialog":{
                    "appendTo":"[data-block=minicart]",
                    "triggerTarget":".showcart",
                    "timeout": "2000",
                    "closeOnMouseLeave": false,
                    "closeOnEscape": true,
                    "triggerClass":"active",
                    "parentClass":"active",
                    "buttons":[]}}'>

I have added data-bind="css: { emptyBag: !!getCartParam('summary_count') == false }" peace of code to check if cart is empty or not. but when i check console it's giving me an error of getCartParam is not defined. Please help, I have worked on magento but new in KO so facing problem in that

Answer 1

You cannot add the css to this div because it was not init under scope: 'minicart_content'

So a work around as you can add the class to the div id minicart-content-wrapper and add the scope minicart_content to the div class block block-minicart

<?php if ($block->getIsNeedToDisplaySideBar()): ?>
    <div class="block block-minicart"
         data-bind="scope: 'minicart_content'"
         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="css: { emptyBag: !!getCartParam('summary_count') == false }, scope: 'minicart_content'">
            <!-- ko template: getTemplate() --><!-- /ko -->
        </div>
        <?= $block->getChildHtml('minicart.addons') ?>
    </div>
<?php endif ?>

Hope it help