1

How can I add an "active" class to the tr surrounding the shipping method when the row is clicked on?

My goal is to have border wrap around the selected shipping method.

enter image description here

1 Answer 1

2

1. Register mixin

app/code/Acme/StackExchange/view/frontend/requirejs-config.js

let config = {
    config: {
        mixins: {
            'Magento_Checkout/js/action/select-shipping-method': {
                'Acme_StackExchange/js/action/select-shipping-method-mixin': true
            }
        }
    }
};

2. Create mixin

app/code/Acme/StackExchange/view/frontend/web/js/action/select-shipping-method-mixin.js

define([
    'mage/utils/wrapper',
    'jquery'
], function (wrapper, $) {
    'use strict';

    return function (selectShippingMethod) {
        return wrapper.wrap(selectShippingMethod, function (_super, shippingMethod) {
            _super(shippingMethod);

            let selector = '#checkout-shipping-method-load .table-checkout-shipping-method tbody tr';
            // remove class from shipping methods
            $(selector).removeClass('active');
            if (shippingMethod) {
                // lookup shipping method by code and set class
                $(selector).each(function (i, e) {
                    console.log($(e).find('input:radio').val());
                    if (shippingMethod.carrier_code + '_' + shippingMethod.method_code == $(e).find('input:radio').val()) {
                        $(e).addClass('active');
                    }
                });
            }

        });
    };
});
1
  • Thank you Victor! That helped me quite a bit.
    – cjochum
    Aug 23, 2022 at 14:27

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.