Adding Constant Contact Inline Signup Javascript to Magento

Question

I am trying to get the Constant Contact Inline Signup form and AlphaSSL Security banner working in my site footer. I copied the relevant code from the websites into a block in admin called footer:

<!-- Begin Constant Contact Inline Form Code -->
<div class="ctct-inline-form" data-form-id="id-goes-here"></div>
<!-- End Constant Contact Inline Form Code -->
<!--- Secure Site Seal - DO NOT EDIT --->
<span id="ss_img_wrapper_115-55_image_en">
<a href="http://www.alphassl.com/ssl-certificates/wildcard-ssl.html" target="_blank" title="SSL Certificates">
<img alt="Wildcard SSL Certificates" border=0 id="ss_img" src="//seal.alphassl.com/SiteSeal/images/alpha_noscript_115-55_en.gif" title="SSL Certificate">
</a>
</span>
<!--- Secure Site Seal - DO NOT EDIT --->

What I'm having trouble with is where to put the js portion of it. I added to my Vendor\ThemeName\Magento_Theme\layout\default.xml:

<referenceContainer name="before.body.end">
<block class="Magento\Framework\View\Element\Template" template="Magento_Theme::js.phtml" name="module_js"/>
</referenceContainer>

And in the file Vendor\ThemeName\Magento_Theme\templates\js.phtml:

<!-- Constant Contact Active Forms -->
<script> var _ctct_m = "id-goes-here"; </script>

I originally had direct script calls there, but this broke the slider on the home page. After some digging I found a way to use requirejs, so I have a new file (copied from magento-root\vendor\magento\module-theme\view\frontend\requirejs-config.js) Vendor\ThemeName\requirejs-config.js:

var config = {
map: {
    '*': {
        'rowBuilder':             'Magento_Theme/js/row-builder',
        'toggleAdvanced':         'mage/toggle',
        'translateInline':        'mage/translate-inline',
        'sticky':                 'mage/sticky',
        'tabs':                   'mage/tabs',
        'collapsible':            'mage/collapsible',
        'dropdownDialog':         'mage/dropdown',
        'dropdown':               'mage/dropdowns',
        'accordion':              'mage/accordion',
        'loader':                 'mage/loader',
        'tooltip':                'mage/tooltip',
        'deletableItem':          'mage/deletable-item',
        'itemTable':              'mage/item-table',
        'fieldsetControls':       'mage/fieldset-controls',
        'fieldsetResetControl':   'mage/fieldset-controls',
        'redirectUrl':            'mage/redirect-url',
        'loaderAjax':             'mage/loader',
        'menu':                   'mage/menu',
        'popupWindow':            'mage/popup-window',
        'validation':             'mage/validation/validation',
        'breadcrumbs':            'Magento_Theme/js/view/breadcrumbs',
        'jquery/ui':              'jquery/compat',
        'cookieStatus':           'Magento_Theme/js/cookie-status'
    }
},
paths: {
  'signupScript':'https://static.ctctcdn.com/js/signup-form-widget/current/signup-form-widget.min',
  'siteSeal':'https://seal.alphassl.com/SiteSeal/alpha_image_115-55_en'
},
deps: [
    'mage/common',
    'mage/dataPost',
    'mage/bootstrap'
],
shim: {
  'signupScript': {
    deps: ['jquery']
  }
},
config: {
    mixins: {
        'Magento_Theme/js/view/breadcrumbs': {
            'Magento_Theme/js/view/add-home-breadcrumb': true
        }
    }
}
};

I got no errors at this point, but the scripts don't seem to load. So after some more digging I added this to my Vendor\ThemeName\Magento_Theme\templates\js.phtml:

<script>
require(['jquery', 'signupScript'], function($, signupScript) {
    signupScript();
});
</script>
<script>
require(['jquery', 'siteSeal'], function($, siteSeal) {
    siteSeal();
});
</script>

This seems to get the scripts to run, but the both throw errors in the debug log:

Uncaught TypeError: siteSeal is not a function
Uncaught TypeError: signupScript is not a function

I think I'm almost there... Anyone have some tweaks/adjustments to get this working properly? I don't think the siteSeal needs jQuery, but signupScript definitely does.

Answer 1

After sleeping on it, I came back to this problem and tried removing the function call in my js.phtml This seems to be working, so I'll post the modified files here in lieu of a better answer.

Vendor\ThemeName\requirejs-config.js:

...
paths: {
'signupScript':'https://static.ctctcdn.com/js/signup-form-widget/current/signup-form-widget.min'
}
...

Vendor\ThemeName\Magento_Theme\templates\js.phtml

<script> var _ctct_m = "id-goes-here"; </script>
<script>
require(['jquery', 'signupScript'], function($, signupScript) {/*Leave this part empty*/});
</script>
<script id="AlphaSSL" type="text/javascript" src="https://seal.alphassl.com/SiteSeal/alpha_image_115-55_en.js"></script>

I hope this helps someone in the future