In Magento 2, I'm working on this Knockout JS template: app/code/Magento/Checkout/view/frontend/web/template/shipping-address/shipping-method-item.html

 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
<tr class="row method-row"
    <td class="col col-method">
        <input type="radio"
               ko-value="method.carrier_code + '_' + method.method_code"
               attr="'aria-labelledby': 'label_method_' + method.method_code + '_' + method.carrier_code + ' ' + 'label_carrier_' + method.method_code + '_' + method.carrier_code,
                    'checked': element.rates().length == 1 || element.isSelected" />
    <td class="col col-price">
        <each args="element.getRegion('price')" render="" />
    <td class="col col-method"
        attr="'id': 'label_method_' + method.method_code + '_' + method.carrier_code"
        text="method.method_title" />
    <td class="col col-carrier"
        attr="'id': 'label_carrier_' + method.method_code + '_' + method.carrier_code"
        text="method.carrier_title" />
<tr class="row row-error"
    <td class="col col-error" colspan="4">
        <div role="alert" class="message error">
            <div text="method.error_message"></div>
        <span class="no-display">
            <input type="radio"
                   attr="'value' : method.method_code, 'id': 's_method_' + method.method_code" />

I've overridden this template in my custom theme and would like to add a class a selected CSS to the first <tr> element if the element.isSelected

So far I've tried

<tr class="row method-row"
    click="element.selectShippingMethod" data-bind="css: { selected: element.isSelected }">

But this just adds the selected every <tr> from the loop when one is clicked.

  • Do you find the answer ? I try to do the same
    – tweetyx
    Commented Jun 4, 2018 at 17:10

3 Answers 3

 <tr data-bind="css: { cssclassname: element.isSelected }">

html will render

<tr class="cssclassname"> 

You can use attr for ko bind class like this

<div data-bind="attr: {class: 'yourclasshere', id: 'yourIDhere'}">
  • thanks but as I said in my question, when I tried that it "just adds the selected every <tr> from the loop when one is clicked."
    – Holly
    Commented May 16, 2017 at 10:52

This worked for me.

<tr data-bind="css: { 'className': element.isSelected() == (method.carrier_code + '_' + method.method_code)}">

element.isSelected() return a string like freeshipping_freeshipping.


Something like this will help,

<a class="action wishlist" **css="'selected-step' : isMobileFirstStepActive , '':!isMobileFirstStepActive"**>
        <span data-bind="i18n: 'Add to wishlist'"></span>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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