Magento 2 Checkout – Add Dynamic Class for Product LI Item

checkoutcheckout-pagecheckout-summarymagento2

How can we add extra class to the each line item in magento2 checkout using knockout js,

I am trying to add an additional class based on the quote item value with some condition.

How can we do that using knock out js,

enter image description here

I am trying to add the additional class after the class "product-item".

How can we achieve in magento2 checkout, I need to add for specific quote item, ex: if item qty is greater than 5

Can someone help on this,

Thanks in advance!!

Best Answer

You need to override this below file in your theme and replace below code to add class based on condition :

File Path :

vendor/magento/module-checkout/view/frontend/web/template/summary/cart-items.html

<div class="content minicart-items" data-role="content">
        <div class="minicart-items-wrapper">
            <ol class="minicart-items">
                <each args="items()">
                    <!-- ko if: $data.item_id == 21 -->
                    <li class="product-item" data-bind="css: 'test class'">
                        <div class="product">
                            <each args="$parent.elems()" render=""/>
                        </div>
                    </li>
                    <!--/ko-->
                    <!-- ko ifnot: $data.item_id == 21 -->
                    <li class="product-item" data-bind="css: 'test2 class'">
                        <div class="product">
                            <each args="$parent.elems()" render=""/>
                        </div>
                    </li>
                    <!--/ko-->
                </each>
            </ol>
        </div>
    </div>

Here, I added condition based on item_id. You can set condition based on your requirement.

Related Topic