Mfrhtyj

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!

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