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 Jun 4 '18 at 17:10
 <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'}">
|improve this answer|||||
  • 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 May 16 '17 at 10:52

Something like this will help,

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

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.