Can newsletter signups use AJAX to complete?

Post

Posted
Rating:
#5057 (In Topic #1020)
Joe

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.

Post

Posted
Rating:
#5059
Joe
There's {$FACILITATE_AJAX_BLOCK_CALL} but I don't know how to use it.

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.

Post

Posted
Rating:
#5060
Chris Graham
Happy Sunday.

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>
 

The 2 changed files from the latest patch release of v10 are zipped:
Attachment

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.

Post

Posted
Rating:
#5061
Chris Graham
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).

Post

Posted
Rating:
#5065
Joe
Thanks a bunch! It works, and it's so much better!

Post

Posted
Rating:
#5109
ironfeather
  :rockon:  coolness!
0 guests and 0 members have recently viewed this.