0

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

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.

1
  • 1
    Thank you @Rohan..
    – Manjunath
    Oct 19 '21 at 8:37
0

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 .

1
  • can you update with the condition, if item id is 120, I need to add additional class for the li, In the above code where is the condition?
    – Manjunath
    Oct 18 '21 at 15:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.