0

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.

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.