0

I have been looking a lot on how to override/extend js files, found a way using mixins but I cant figure it out how to do it correctly because it did not work for me. The file I need to override location:

/vendor/aheadworks/module-onestepcheckout/view/frontend/web/js/model/render-postprocessor/float-label/converter/cc.js

Whole code in cc.js file:

define(
    [
        'Magento_Ui/js/lib/view/utils/async',
        'underscore',
        'Aheadworks_OneStepCheckout/js/model/render-postprocessor/float-label/converter',
        'awOscFloatLabel',
        'mage/template',
        'mage/translate'
    ],
    function ($, _, Converter, floatLabel, mageTemplate, $t) {
        'use strict';

        var ccMethodCodes = [
            'authorizenet_directpost',
            'braintree',
            'cybersource',
            'eway'
        ];

        return _.extend({}, Converter, {

            /**
             * @inheritdoc
             */
            convertPaymentMethodInputs: function (methodItem) {
                var form = methodItem.find('form'),
                    methodCode = this._getPaymentMethodCode(methodItem),
                    expDateContainer = '#' + methodCode + '_cc_type_exp_div';

                if (form.length > 0) {
                    floatLabel({excludeFieldSelector: expDateContainer}, form);
                    if (this._isCCMethod(methodCode, methodItem)) {
                        $.async(
                            expDateContainer,
                            $.proxy(this._processExpirationDateInput, this)
                        );
                    }
                }
            },

            /**
             * Check if CC payment method
             *
             * @param {string} methodCode
             * @param {Object} methodItem
             * @returns {boolean}
             */
            _isCCMethod: function (methodCode, methodItem) {
                var form = methodItem.find('form');

                return _.indexOf(methodCode, ccMethodCodes) != -1
                    || form.is('#co-transparent-form, #co-transparent-form-braintree');
            },

            /**
             * Retrieve payment method code from method item element
             *
             * @param {Object} element
             * @returns {string}
             */
            _getPaymentMethodCode: function (element) {
                var input = element.find('input[name="payment[method]"]');

                return input.val();
            },

            /**
             * Process expiration date inputs
             *
             * @param {HTMLElement} container
             */
            _processExpirationDateInput: function (container) {
                var expMonth = $(container).find('[id$=_expiration]'),
                    expYear = $(container).find('[id$=_expiration_yr]'),
                    fields = $(container).find('.field');

                $(container).find('label').remove();
                $(container).find('div.no-label').removeClass('no-label');
                if ($(container).hasClass('required')) {
                    fields.addClass('required');
                }
                this._addLabel(expMonth, 'Expiration Month', 'Exp. Month');
                this._addLabel(expYear, 'Expiration Year', 'Exp. Year');

                _.each([expMonth, expYear], function (element) {
                    element.find('option').each(function () {
                        if ($(this).val() == '') {
                            $(this).html('');
                        }
                    })
                });

                fields.each(function () {
                    floatLabel({}, this);
                });
            },

            /**
             * Add label for input element
             *
             * @param {Object} element
             * @param {string} label
             * @param {string} shortLabel
             */
            _addLabel: function (element, label, shortLabel) {
                var labelTemplate = mageTemplate(this.labelTmplStr + this.shortLabelTmplStr),
                    target = element.closest('div.control');

                target.before(labelTemplate({
                    data: {
                        for: element.attr('id'),
                        label: $t(label),
                        shortLabel: $t(shortLabel)
                    }
                }));
            }
        });
    }
);

And what I want to do is extend _processExpirationDateInput function and change its labels, i.e., from

this._addLabel(expMonth, 'Expiration Month', 'Exp. Month');

to

this._addLabel(expMonth, 'Month', 'Exp. Month');

Can someone help me with advice? Thank you a lot!

1

If you want to only change the label then you can use Magento 2 translation feature rather then overriding JS file. For example, If you have your custom module then you can create en_US.csv file under i18n directory and add the below content in en_US.csv

app/code/YOUR_VENDOR/MODULE_NAME/i18n/en_US.csv

"Expiration Month","Month"

If you have a custom theme then you can do it like this,

app/design/frontend/YOUR_VENDOR/THEME_NAME/i18n/en_US.csv

"Expiration Month","Month"

After adding en_US.csv clear your webshop cache.

php bin/magento cache:clean

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