1

We are working on a module that requires JS overwrite for file Magento_Checkout/js/model/shipping-save-processor/default.

  • We are able to overwrite the JS using the steps provided in the magento guide.
  • However this JS is already overwritten by AvaTax module.
  • So instead of overwriting the default Magento JS we are trying to overwrite the Avatax JS using the same steps.
  • We have added dependency in our module so that the Avatax module is loaded first.
  • But this JS overwrite is successful only, if we overwrite the default Magento JS.

We don't want to make changes directly in the Avatax JS.

Is there any other way out?

Code used for overwrite:

 var config = {
    "map": {
        "*": {
            "ClassyLlama_AvaTax/js/model/shipping-save-processor/default" : "XYZ_Checkout/js/shipping-save-processor/default"
        }
    }
};

Code used for dependency:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="XYZ_Checkout" setup_version="2.0.0">
    <sequence>
        <module name="ClassyLlama_AvaTax"/>
    </sequence>
</module>

We need to add extension attribute payload function as below:

                payload = {
                addressInformation: {
                    shipping_address: quote.shippingAddress(),
                    billing_address: quote.billingAddress(),
                    shipping_method_code: quote.shippingMethod().method_code,
                    shipping_carrier_code: quote.shippingMethod().carrier_code,
                    extension_attributes: {
                        po_number: jQuery('[name="additional_po_number"]').val(),
                        spec_del_comment: jQuery('[name="additional_spec_del_comment"]').val(),
                        spec_del_comment_2: jQuery('[name="additional_spec_del_comment_2"]').val(),
                    }
                }
            };
  • Can you post code which you have used for dependency? – Ronak Chauhan Nov 16 '16 at 12:46
  • updated the question with details. – Deepika Janiyani Nov 16 '16 at 12:52
  • required js code? – Ronak Chauhan Nov 16 '16 at 12:52
  • updated the js code. we are adding extension attributes – Deepika Janiyani Nov 16 '16 at 13:04
  • and requirejs-config.js code? – Ronak Chauhan Nov 16 '16 at 13:06
2

After trying the different possibilities, we think mapping works only for default JS files, and not for custom JS files.

To overwrite the JS we moved it to theme folder instead of overwriting it from Module.

The theme overwrite is working as expected.

Theme overwrite for shipping-save-processor/default.js is done as follows:

app/design/frontend/xxx/yyy/ClassyLlama_AvaTax/web/js/model/shipping-save-processor/default.js

0

Your default.js file path

XYZ/Checkout/view/frontend/web/js/shipping-save-processor/default.js

In default.js file,

define(
    [
        'jquery',
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/model/resource-url-manager',
        'mage/storage',
        'Magento_Checkout/js/model/payment-service',
        'Magento_Checkout/js/model/payment/method-converter',
        'Magento_Checkout/js/model/error-processor',
        'Magento_Checkout/js/model/full-screen-loader',
        'Magento_Checkout/js/action/select-billing-address',
        'ClassyLlama_AvaTax/js/view/checkout-validation-handler',
        'Magento_Ui/js/modal/alert'
    ],
    function (
        $,
        quote,
        resourceUrlManager,
        storage,
        paymentService,
        methodConverter,
        errorProcessor,
        fullScreenLoader,
        selectBillingAddressAction,
        checkoutValidationHandler,
        alert
    ) {
        'use strict';

        return {
            validateAddressContainerSelector: '#validate_address',
            saveShippingInformation: function () {
                var payload;

                if (!quote.billingAddress()) {
                    selectBillingAddressAction(quote.shippingAddress());
                }

                payload = {
                    addressInformation: {
                        shipping_address: quote.shippingAddress(),
                        billing_address: quote.billingAddress(),
                        shipping_method_code: quote.shippingMethod().method_code,
                        shipping_carrier_code: quote.shippingMethod().carrier_code,
                        extension_attributes: {
                            po_number: $('[name="additional_po_number"]').val(),
                            spec_del_comment: $('[name="additional_spec_del_comment"]').val(),
                            spec_del_comment_2: $('[name="additional_spec_del_comment_2"]').val(),
                        }
                    }
                };

                fullScreenLoader.startLoader();

                return storage.post(
                    resourceUrlManager.getUrlForSetShippingInformation(quote),
                    JSON.stringify(payload)
                ).done(
                    function (response) {
                        quote.setTotals(response.totals);
                        paymentService.setPaymentMethods(methodConverter(response.payment_methods));
                        // Begin Edit
                        try {
                            checkoutValidationHandler.validationResponseHandler(response);
                        } catch (e) {
                            $(this.validateAddressContainerSelector + " *").hide();
                        }
                        // End Edit
                        fullScreenLoader.stopLoader();
                    }
                ).fail(
                    function (response) {
                        // Begin Edit - Native error message display is not obvious enough, so add to an alert box
                        var messageObject = JSON.parse(response.responseText);
                        alert({
                            title: $.mage.__('Error'),
                            content: messageObject.message
                        });
                        //errorProcessor.process(response);
                        // End Edit
                        fullScreenLoader.stopLoader();
                    }
                );
            }
        };
    }
);

Remove var folder, clear cache.

Run command,

php bin/magento setup:static-content:deploy
  • I have written the similar code, but the problem is, that JS is already overwritten by a custom module, I am not able to overwrite that custom module JS. – Deepika Janiyani Nov 16 '16 at 14:12
  • If I overwrite mapping in require JS from custom module my code does not work where as if I overwrite it from default module, it works. – Deepika Janiyani Nov 16 '16 at 14:15
  • I have already mapped to your custom module – Rakesh Jesadiya Nov 16 '16 at 14:36
  • Please check your js file path, you havent call model folder so please check path also. – Rakesh Jesadiya Nov 16 '16 at 14:37
  • Also make sure that in app>etc>config.php your module name must be after ClassyLlama_AvaTax. If not please change it according so module dependency work @DeepikaJaniyani – Keyur Shah Nov 16 '16 at 15:21

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.