Magento Question posted in
The official documentation can be found here.

Pass array to requirejs shim – Magento

I am trying to get constant contacts script to work with magento 2 requirejs. (I tried adding it inline but it conflicts and causes errors)

Their script requires an array localizedErrMap and jQuery object.

I created localizedErrMap.js 

define([],
    function(){
        var localizedErrMap = {};
        localizedErrMap['required'] =       'This field is required.';
        localizedErrMap['ca'] =             'An unexpected error occurred while attempting to send email.';
        localizedErrMap['email'] =          'Please enter your email address in [email protected] format.';
        localizedErrMap['birthday'] =       'Please enter birthday in MM/DD format.';
        localizedErrMap['anniversary'] =    'Please enter anniversary in MM/DD/YYYY format.';
        localizedErrMap['custom_date'] =    'Please enter this date in MM/DD/YYYY format.';
        localizedErrMap['list'] =           'Please select at least one email list.';
        localizedErrMap['generic'] =        'This field is invalid.';
        localizedErrMap['shared'] =         'Sorry, we could not complete your sign-up. Please contact us to resolve this.';
        localizedErrMap['state_mismatch'] = 'Mismatched State/Province and Country.';
        localizedErrMap['state_province'] = 'Select a state/province';
        localizedErrMap['selectcountry'] =  'Select a country';

        return localizedErrMap;
    }
);

and made this requirejs-config.js

var config = {
    "shim": {
        "constantcontact": {
            "deps":["jquery", "localizedErrMap"],
            "depnames":["jQuery", "localizedErrMap"]
        }
    },
    "paths": {
        "localizedErrMap": "js/localizedErrMap",
        "constantcontact": "https://static.ctctcdn.com/h/contacts-embedded-signup-assets/1.0.2/js/signup-form"
    }

};

Then called it in the page with constant contact form like this:

<script>
   require(["constantcontact"]);
</script>

Their script throws the error:

Uncaught ReferenceError: localizedErrMap is not defined

I cant modify their code as it’s offsite, I need to make sure this array is passed through to the code. What did I do wrong and how can I make sure the array is passed across?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I got it working by adding this to the CMS page inline.

            <script type="text/javascript">
            var localizedErrMap = {};
            localizedErrMap['required'] =       'This field is required.';
            localizedErrMap['ca'] =             'An unexpected error occurred while attempting to send email.';
            localizedErrMap['email'] =          'Please enter your email address in [email protected] format.';
            localizedErrMap['birthday'] =       'Please enter birthday in MM/DD format.';
            localizedErrMap['anniversary'] =    'Please enter anniversary in MM/DD/YYYY format.';
            localizedErrMap['custom_date'] =    'Please enter this date in MM/DD/YYYY format.';
            localizedErrMap['list'] =           'Please select at least one email list.';
            localizedErrMap['generic'] =        'This field is invalid.';
            localizedErrMap['shared'] =         'Sorry, we could not complete your sign-up. Please contact us to resolve this.';
            localizedErrMap['state_mismatch'] = 'Mismatched State/Province and Country.';
            localizedErrMap['state_province'] = 'Select a state/province';
            localizedErrMap['selectcountry'] =  'Select a country';
            var postURL = 'https://visitor2.constantcontact.com/api/signup';
        </script>
        <script>
            require(["jquery"], function($){
                $.getScript('https://static.ctctcdn.com/h/contacts-embedded-signup-assets/1.0.2/js/signup-form.js');
            });
        </script>

  2. 0

    That depnames array you are using in shim is not something that RequireJS supports. The only reference I can find to it is in an issue report where someone suggested supporting such an option but that was never implemented.

    It looks like constantcontact, which is not an AMD module, expects to find a symbol localizedErrMap in the global space. In general, you have a few options:

    1. You can add a build step to how you build your application to add a define call around the code in constantcontact, effectively turning it into an AMD-module. The wrapShim option of r.js can be useful for this. However, you say that you cannot modify it so this option is off the table.

    2. You can deliberately leak localizedErrMap. Such leaking is sometimes a viable solution for using libraries that are not AMD libraries. I prefer to avoid it but there are situations where it cannot be avoided.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search