Can newsletter signups use AJAX to complete?

Post

Posted
Rating:
#5460 (In Topic #1265)
Joe
Avatar
Standard member
Joe is in the usergroup ‘Honoured member’

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.
Online now: No Back to the top

Post

Posted
Rating:
#5462
Joe
Avatar
Standard member
Joe is in the usergroup ‘Honoured member’
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.
Online now: No Back to the top

Post

Posted
Rating:
#5463
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’
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.


Become a fan of Composr on Facebook or add me as a friend. Add me on on Mastodon. Follow me on Minds (where I am most active). Support me on Patreon

Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Online now: No Back to the top

Post

Posted
Rating:
#5464
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’
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).


Become a fan of Composr on Facebook or add me as a friend. Add me on on Mastodon. Follow me on Minds (where I am most active). Support me on Patreon

Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Online now: No Back to the top

Post

Posted
Rating:
#5468
Joe
Avatar
Standard member
Joe is in the usergroup ‘Honoured member’
Thanks a bunch! It works, and it's so much better!
Online now: No Back to the top

Post

Posted
Rating:
#5519
Avatar
Standard member
ironfeather is in the usergroup ‘Well-settled’
 :rockon:  coolness!

———–
Publisher of IronFeather Journal since 1987.  Host of KGNU Colorado Radio for 20 years. 
Currently in Japan & decided to focus on Composr as my number one CMS.
Composr site for community of Hokkaido:  Nandalow.com
Composr site for my freelance work: Futurecode.jp
My Compsr edits : 
http://ironfeather.com/bbs/viewtopic.php?f=12&t=2862
Twitter: https://twitter.com/futurecodejp

 
Online now: No Back to the top
1 guest and 0 members have just viewed this.

Statistics

Forum statistics:
  • 2,052 topics, 7,195 posts, 10,827 members
  • Our newest member is LowfareMart
Birthdays:
Back to Top