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 VendorThemeNameMagento_Themelayoutdefault.xml:
<referenceContainer name="before.body.end">
<block class="MagentoFrameworkViewElementTemplate" template="Magento_Theme::js.phtml" name="module_js"/>
</referenceContainer>
And in the file VendorThemeNameMagento_Themetemplatesjs.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-rootvendormagentomodule-themeviewfrontendrequirejs-config.js) VendorThemeNamerequirejs-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 VendorThemeNameMagento_Themetemplatesjs.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.