Add dynamic class for product li item in magento2 checkout

Question

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,

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

Answer 1

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.

Answer 2

Have you tried overwriting the

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

And change the html element with minicart-items class.

<div class="block items-in-cart" data-bind="mageInit: {'collapsible':{'openedState': 'active', 'active': isItemsBlockExpanded()}}">
<div class="title" data-role="title">
    <strong role="heading" aria-level="1">
        <translate args="maxCartItemsToDisplay" if="maxCartItemsToDisplay < getCartLineItemsCount()"/>
        <translate args="'of'" if="maxCartItemsToDisplay < getCartLineItemsCount()"/>
        <span data-bind="text: getCartSummaryItemsCount()"></span>
        <translate args="'Item in Cart'" if="getCartSummaryItemsCount() === 1"/>
        <translate args="'Items in Cart'" if="getCartSummaryItemsCount() > 1"/>
    </strong>
</div>
<div class="content minicart-items" data-role="content">
    <div class="minicart-items-wrapper">
        <ol class="minicart-items">
            <each args="items()">
                <li class="product-item">
                    <div class="product">
                        <each args="$parent.elems()" render=""/>
                    </div>
                </li>
            </each>
        </ol>
    </div>
</div>
<div class="actions-toolbar" if="maxCartItemsToDisplay < getCartLineItemsCount()">
    <div class="secondary">
        <a class="action viewcart" data-bind="attr: {href: cartUrl}">
            <span data-bind="i18n: 'View and Edit Cart'"></span>
        </a>
    </div>
</div>

To overwrite html just copy the file into your theme, like. app/design/frontend/[vendor]/[theme]/Magento_Checkout/web/template/summary/cart-items.html

Don't forget to clear cache and pub/static .