Can newsletter signups use AJAX to complete?
BLOCK_MAIN_NEWSLETTER_SIGNUP
I put the BLOCK_MAIN_NEWSLETTER_SIGNUP block at my footer. I've noticed once someone completes the form and clicks "subscribe", the page is reloaded and the template BLOCK_MAIN_NEWSLETTER_SIGNUP_DONE is loaded. However, my users would have to scroll back down to the bottom to verify the subscribe was successful.Is it possible, maybe via AJAX, that I can remove the page reload and display a success message right there on the page where the block is located? (in this case, in my footer).
I don't know much about AJAX or JS to be able to accomplish this, but hopefully it's not too complicated to achieve this.
There's {$FACILITATE_AJAX_BLOCK_CALL} but I don't know how to use it.
This just displays a link to Composr's snippet.php script, which seems to just mirror the contents of BLOCK_MAIN_NEWSLETTER_SIGNUP.
I inspected the use of {$FACILITATE_AJAX_BLOCK_CALL} in other templates, but I can't make sense of the syntax.
Code
{$FACILITATE_AJAX_BLOCK_CALL,block=main_newsletter_signup,param=1,subject=Thanks for signing up to our newsletter!,path=uploads/website_specific/newsletter-welcome-email.txt,to=Subscriber}This just displays a link to Composr's snippet.php script, which seems to just mirror the contents of BLOCK_MAIN_NEWSLETTER_SIGNUP.
I inspected the use of {$FACILITATE_AJAX_BLOCK_CALL} in other templates, but I can't make sense of the syntax.
Moderator
Happy Sunday.
The 2 changed files from the latest patch release of v10 are zipped:
Attachment
I also created a tracker issue for it:
0003764: AJAX support for main_newsletter_signup block - Composr CMS feature tracker
We can merge at some point in the future if it proves to be stable. It seems so for me.
Code (diff)
diff --git a/sources/blocks/main_newsletter_signup.php b/sources/blocks/main_newsletter_signup.php
index e3004f574..d2801e369 100644
--- a/sources/blocks/main_newsletter_signup.php
+++ b/sources/blocks/main_newsletter_signup.php
@@ -81,7 +81,7 @@ class Block_main_newsletter_signup
require_code('type_sanitisation');
if (!is_email_address($address)) {
$msg = do_template('INLINE_WIP_MESSAGE', array('_GUID' => '9ce849d0d2dc879acba609b907317c74', 'MESSAGE' => do_lang_tempcode('INVALID_EMAIL_ADDRESS')));
- return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP', array('_GUID' => '3759e07077d74e6537cab04c897e76d2', 'URL' => get_self_url(), 'MSG' => $msg));
+ return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP', array('_GUID' => '3759e07077d74e6537cab04c897e76d2', 'BLOCK_PARAMS' => block_params_arr_to_str($map), 'URL' => get_self_url(), 'MSG' => $msg));
}
if (!array_key_exists('path', $map)) {
@@ -116,7 +116,7 @@ class Block_main_newsletter_signup
return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP_DONE', array('_GUID' => '9953c83685df4970de8f23fcd5dd15bb', 'NEWSLETTER_TITLE' => $newsletter_title, 'NID' => strval($newsletter_id), 'PASSWORD' => $password, 'PATH_EXISTS' => $path_exists));
} else {
- return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP', array('_GUID' => 'c0e6f9cdab3d624bf3d27b745e3de38f', 'NEWSLETTER_TITLE' => $newsletter_title, 'NID' => strval($newsletter_id), 'URL' => get_self_url()));
+ return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP', array('_GUID' => 'c0e6f9cdab3d624bf3d27b745e3de38f', 'BLOCK_PARAMS' => block_params_arr_to_str($map), 'NEWSLETTER_TITLE' => $newsletter_title, 'NID' => strval($newsletter_id), 'URL' => get_self_url()));
}
}
}
diff --git a/themes/default/templates/BLOCK_MAIN_NEWSLETTER_SIGNUP.tpl b/themes/default/templates/BLOCK_MAIN_NEWSLETTER_SIGNUP.tpl
index eeae684ec..0498a47c0 100644
--- a/themes/default/templates/BLOCK_MAIN_NEWSLETTER_SIGNUP.tpl
+++ b/themes/default/templates/BLOCK_MAIN_NEWSLETTER_SIGNUP.tpl
@@ -1,23 +1,36 @@
-{+START,IF_PASSED,MSG}
- <p>
- {MSG}
- </p>
-{+END}
+{$SET,ajax_block_main_newsletter_signup_wrapper,ajax_block_main_newsletter_signup_wrapper_{$RAND%}}
-<section class="box box___block_main_newsletter_signup"><div class="box_inner">
- <h3>{!NEWSLETTER}{$?,{$NEQ,{NEWSLETTER_TITLE},{!GENERAL}},: {NEWSLETTER_TITLE*}}</h3>
+<div id="{$GET*,ajax_block_main_newsletter_signup_wrapper}" class="box_wrapper">
+ {+START,IF_PASSED,MSG}
+ <p>
+ {MSG}
+ </p>
+ {+END}
- <form title="{!NEWSLETTER}" onsubmit="if (!check_field_for_blankness(this.elements['address{NID;*}'],event)) return false; if (!this.elements['address{NID*}'].value.match(/^[a-zA-Z0-9\._\-\+]+@[a-zA-Z0-9\._\-]+$/)) { window.fauxmodal_alert('{!javascript:NOT_A_EMAIL;=*}'); return false; } disable_button_just_clicked(this); return true;" action="{URL*}" method="post" autocomplete="off">
- {$INSERT_SPAMMER_BLACKHOLE}
+ <section class="box box___block_main_newsletter_signup"><div class="box_inner">
+ <h3>{!NEWSLETTER}{$?,{$NEQ,{NEWSLETTER_TITLE},{!GENERAL}},: {NEWSLETTER_TITLE*}}</h3>
- <p class="accessibility_hidden"><label for="baddress">{!EMAIL_ADDRESS}</label></p>
+ <form title="{!NEWSLETTER}" onsubmit="if (!check_field_for_blankness(this.elements['address{NID;*}'],event)) return false; if (!this.elements['address{NID*}'].value.match(/^[a-zA-Z0-9\._\-\+]+@[a-zA-Z0-9\._\-]+$/)) { window.fauxmodal_alert('{!javascript:NOT_A_EMAIL;=*}'); return false; } disable_button_just_clicked(this); return true;" action="{URL*}" method="post" autocomplete="off" target="_self">
+ {$INSERT_SPAMMER_BLACKHOLE}
- <div class="constrain_field">
- <input class="wide_field field_input_non_filled" id="baddress" name="address{NID*}" onfocus="placeholder_focus(this);" onblur="placeholder_blur(this);" alt="{!EMAIL_ADDRESS}" value="{!EMAIL_ADDRESS}" />
- </div>
+ <p class="accessibility_hidden"><label for="baddress">{!EMAIL_ADDRESS}</label></p>
- <p class="proceed_button">
- <input class="button_screen_item menu__site_meta__newsletters" type="submit" value="{!SUBSCRIBE}" />
- </p>
- </form>
-</div></section>
+ <div class="constrain_field">
+ <input class="wide_field field_input_non_filled" id="baddress" name="address{NID*}" onfocus="placeholder_focus(this);" onblur="placeholder_blur(this);" alt="{!EMAIL_ADDRESS}" value="{!EMAIL_ADDRESS}" />
+ </div>
+
+ <p class="proceed_button">
+ <input class="button_screen_item menu__site_meta__newsletters" type="submit" value="{!SUBSCRIBE}" />
+ </p>
+ </form>
+ </div></section>
+
+ {$REQUIRE_JAVASCRIPT,ajax}
+ {$REQUIRE_JAVASCRIPT,checking}
+
+ <script>// <![CDATA[
+ add_event_listener_abstract(window,'load',function() {
+ internalise_ajax_block_wrapper_links('{$FACILITATE_AJAX_BLOCK_CALL;,{BLOCK_PARAMS}}',document.getElementById('{$GET;,ajax_block_main_newsletter_signup_wrapper}'),[],{ },false,true);
+ });
+ //]]></script>
+</div>
index e3004f574..d2801e369 100644
--- a/sources/blocks/main_newsletter_signup.php
+++ b/sources/blocks/main_newsletter_signup.php
@@ -81,7 +81,7 @@ class Block_main_newsletter_signup
require_code('type_sanitisation');
if (!is_email_address($address)) {
$msg = do_template('INLINE_WIP_MESSAGE', array('_GUID' => '9ce849d0d2dc879acba609b907317c74', 'MESSAGE' => do_lang_tempcode('INVALID_EMAIL_ADDRESS')));
- return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP', array('_GUID' => '3759e07077d74e6537cab04c897e76d2', 'URL' => get_self_url(), 'MSG' => $msg));
+ return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP', array('_GUID' => '3759e07077d74e6537cab04c897e76d2', 'BLOCK_PARAMS' => block_params_arr_to_str($map), 'URL' => get_self_url(), 'MSG' => $msg));
}
if (!array_key_exists('path', $map)) {
@@ -116,7 +116,7 @@ class Block_main_newsletter_signup
return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP_DONE', array('_GUID' => '9953c83685df4970de8f23fcd5dd15bb', 'NEWSLETTER_TITLE' => $newsletter_title, 'NID' => strval($newsletter_id), 'PASSWORD' => $password, 'PATH_EXISTS' => $path_exists));
} else {
- return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP', array('_GUID' => 'c0e6f9cdab3d624bf3d27b745e3de38f', 'NEWSLETTER_TITLE' => $newsletter_title, 'NID' => strval($newsletter_id), 'URL' => get_self_url()));
+ return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP', array('_GUID' => 'c0e6f9cdab3d624bf3d27b745e3de38f', 'BLOCK_PARAMS' => block_params_arr_to_str($map), 'NEWSLETTER_TITLE' => $newsletter_title, 'NID' => strval($newsletter_id), 'URL' => get_self_url()));
}
}
}
diff --git a/themes/default/templates/BLOCK_MAIN_NEWSLETTER_SIGNUP.tpl b/themes/default/templates/BLOCK_MAIN_NEWSLETTER_SIGNUP.tpl
index eeae684ec..0498a47c0 100644
--- a/themes/default/templates/BLOCK_MAIN_NEWSLETTER_SIGNUP.tpl
+++ b/themes/default/templates/BLOCK_MAIN_NEWSLETTER_SIGNUP.tpl
@@ -1,23 +1,36 @@
-{+START,IF_PASSED,MSG}
- <p>
- {MSG}
- </p>
-{+END}
+{$SET,ajax_block_main_newsletter_signup_wrapper,ajax_block_main_newsletter_signup_wrapper_{$RAND%}}
-<section class="box box___block_main_newsletter_signup"><div class="box_inner">
- <h3>{!NEWSLETTER}{$?,{$NEQ,{NEWSLETTER_TITLE},{!GENERAL}},: {NEWSLETTER_TITLE*}}</h3>
+<div id="{$GET*,ajax_block_main_newsletter_signup_wrapper}" class="box_wrapper">
+ {+START,IF_PASSED,MSG}
+ <p>
+ {MSG}
+ </p>
+ {+END}
- <form title="{!NEWSLETTER}" onsubmit="if (!check_field_for_blankness(this.elements['address{NID;*}'],event)) return false; if (!this.elements['address{NID*}'].value.match(/^[a-zA-Z0-9\._\-\+]+@[a-zA-Z0-9\._\-]+$/)) { window.fauxmodal_alert('{!javascript:NOT_A_EMAIL;=*}'); return false; } disable_button_just_clicked(this); return true;" action="{URL*}" method="post" autocomplete="off">
- {$INSERT_SPAMMER_BLACKHOLE}
+ <section class="box box___block_main_newsletter_signup"><div class="box_inner">
+ <h3>{!NEWSLETTER}{$?,{$NEQ,{NEWSLETTER_TITLE},{!GENERAL}},: {NEWSLETTER_TITLE*}}</h3>
- <p class="accessibility_hidden"><label for="baddress">{!EMAIL_ADDRESS}</label></p>
+ <form title="{!NEWSLETTER}" onsubmit="if (!check_field_for_blankness(this.elements['address{NID;*}'],event)) return false; if (!this.elements['address{NID*}'].value.match(/^[a-zA-Z0-9\._\-\+]+@[a-zA-Z0-9\._\-]+$/)) { window.fauxmodal_alert('{!javascript:NOT_A_EMAIL;=*}'); return false; } disable_button_just_clicked(this); return true;" action="{URL*}" method="post" autocomplete="off" target="_self">
+ {$INSERT_SPAMMER_BLACKHOLE}
- <div class="constrain_field">
- <input class="wide_field field_input_non_filled" id="baddress" name="address{NID*}" onfocus="placeholder_focus(this);" onblur="placeholder_blur(this);" alt="{!EMAIL_ADDRESS}" value="{!EMAIL_ADDRESS}" />
- </div>
+ <p class="accessibility_hidden"><label for="baddress">{!EMAIL_ADDRESS}</label></p>
- <p class="proceed_button">
- <input class="button_screen_item menu__site_meta__newsletters" type="submit" value="{!SUBSCRIBE}" />
- </p>
- </form>
-</div></section>
+ <div class="constrain_field">
+ <input class="wide_field field_input_non_filled" id="baddress" name="address{NID*}" onfocus="placeholder_focus(this);" onblur="placeholder_blur(this);" alt="{!EMAIL_ADDRESS}" value="{!EMAIL_ADDRESS}" />
+ </div>
+
+ <p class="proceed_button">
+ <input class="button_screen_item menu__site_meta__newsletters" type="submit" value="{!SUBSCRIBE}" />
+ </p>
+ </form>
+ </div></section>
+
+ {$REQUIRE_JAVASCRIPT,ajax}
+ {$REQUIRE_JAVASCRIPT,checking}
+
+ <script>// <![CDATA[
+ add_event_listener_abstract(window,'load',function() {
+ internalise_ajax_block_wrapper_links('{$FACILITATE_AJAX_BLOCK_CALL;,{BLOCK_PARAMS}}',document.getElementById('{$GET;,ajax_block_main_newsletter_signup_wrapper}'),[],{ },false,true);
+ });
+ //]]></script>
+</div>
The 2 changed files from the latest patch release of v10 are zipped:
newsletter-block-ajax.zip
I also created a tracker issue for it:
0003764: AJAX support for main_newsletter_signup block - Composr CMS feature tracker
We can merge at some point in the future if it proves to be stable. It seems so for me.
Moderator
The diff is pretty hard to read, but if you compare the old and new files in a decent visual diff tool you'll see more clearly what I changed. It wasn't many lines (apart from a big indentation change in the template).
Thanks a bunch! It works, and it's so much better!
coolness!
5 guests and 0 members have recently viewed this.
