Overriding the Simplenews Subscription Block: Tutorial 2 of 2
In this Drupal video tutorial, I show you how to override the Drupal Simplenews subscription block to remove the old school save button (which we overrode in tutorial 1 to say "Subscribe") and replace it with an image button. We also add some javascript to the Simplenews subscription block to autofill the input form with the word "Subscribe..."
This tutorial is about 14 minutes in length and will cover some basic Drupal module development concepts.
Comments
Thank you very much Peter, a
Thank you very much Peter, a very interesting tutorial, a real eye-opener for me!
Hi Michiel, my pleasure, I'm
Hi Michiel,
my pleasure, I'm glad it helped!
pete
Thanks. Very informative
Thanks. Very informative tutorial. Helped me with understanding the hook_form_alter() function.
Hi Guy, Good to hear. The
Hi Guy,
Good to hear. The hook_form_alter() function was a tricky one for me to wrap my head around back when I started playing with it - mostly because I had no idea what I was doing at the time...
Thanks for commenting!
Pete
Hi Pete, Again, thanks for
Hi Pete,
Again, thanks for this great tutorial. I really appreciate it.
Although I still have a little problem.
The custom-js-file isn't loading. It's strange, because the 'jquery.autofill.js' is loaded, so the 'drupal_add_js' is working.
This are the two lines in my nlsubscribe.module:
drupal_add_js(drupal_get_path('module', 'nlsubscribe') . '/js/nlsubscribe.js');
drupal_add_js(drupal_get_path('module', 'nlsubscribe') . '/js/jquery.autofill.js');
Any idea why only the second line works?
Krabbe
The address of the site is
The address of the site is okitanzt.ch
A typical stupid mistake. I
A typical stupid mistake. I missed the two last closing brackets in my js...
So, finally, everything works fine. Thanx again!
One more question: The above
One more question: The above mentioned site is multilingual. How do I get the value "Subscribe..." internationalized?
I tried to use "t('Subscribe ...'), but it wont render.
Hi Krabbe, I've never
Hi Krabbe,
I've never actually done an international site but I'm wondering if the ... would be throwing it off. Perhaps it should just be t('Subscribe') . '...' or something along those lines? I'd have to look into that and get back to you. Good to hear you fixed up the js issue - I hate those little problems, that's why I debug all the time...
pete
Thanx Pete, but unfortunately
Thanx Pete, but unfortunately t('Subscribe') doesn't work either. Nothing is rendered at all...
So, for the moment I just put in "E-mail", it should be clear for english and german speaking people. Maybe someone in Drupal forum can help. I will post the issue there too.
I did look at the js-code 100 times and didn't see the missing brackets... so I should get some debugging practice.
But I'm not good in js and debugging info not allways helps if you don't understand anything. Do you know a good site to dive into it?
Ah, got the answer. I messed
Ah, got the answer. I messed up in the video tutorial, it should be value: Drupal.t('Subscribe...')
Sorry, my mistake, I watched the tutorial and realized the mistake. This is because to jquery, the t function doesn't mean anything. You need to relate it back to drupal... as for learning jquery or javascript, I perfer video tutorials so I bought the Lullabot 2 jquery videos and I've been working through the video tutorials on java at www.javavideotutes.com if that is of interest... There is also this page for jquery tutorials but I couldn't recommend one over the other... http://docs.jquery.com/Tutorials
Thanks for bringing the error to my attention! Hope it works,
Pete
Mmmh, still not working. It's
Mmmh, still not working.
It's better now, because the value will be printed, but Drupal doesn't find the string for a translation...
Thank you for your recommendations. I'll have a look.
Hi Peter, This was brilliant!
Hi Peter,
This was brilliant! Exactly what I was looking for, thanks! I'm pretty new to Drupal and haven't done any custom module development yet, but this was a great introduction. Not to mention that my SimpleNews form is now looking rather snazzy too!
Thanks again,
Ross
Hey Ross, that's great to
Hey Ross, that's great to hear, I really appreciate you taking the time to post that. Drupal's awesome so stick with it and if you run into any difficulty, feel free to drop me a line here.
All the best,
Pete
Thanks again Peter, great
Thanks again Peter, great tutorial again.
I was wondering though -
1. Do you know why when a user presses the submit it won't add his email to
the subscription list? Maybe I got something wrong?
2. Is there a reason why we should use the customized module and js instead
of just replacing the button with a css background image? Perhaps I missed something?
Many thanks.
Hi onearmfrog, 1. Couple
Hi onearmfrog,
1. Couple things here. When a user hits submit, they aren't added to the list right away. They receive an email with a confirmation link and it isn't until they confirm that they are added to the list (this is part of recognized anti-spam measures). However, if even that isn't working, I would check to make sure the button #type is submit and the #value is subscribe.
2. There are always dozens of ways to do things in Drupal. The js is so that the box is prefilled with text that disappears when you click in and appears when you click out. The image button is ugly and you would have to hide it and use a background image. However, that's not the "Drupal" way of doing things right?
If it is just a personal site, you could do whatever you want but if you are developing for a client, the expectation should be that you override the module because a) it is the proper way of doing this and sticks with Drupal conventions b) if someone takes over the development after you, it should be clear what's been done and I think the expectation would be that you override.
Hope this helps,
Pete
Hi pete, thanks for a such a
Hi pete, thanks for a such a clear explanation in both tuts. They really helped me.
In this tutorial, you got the jquery code from www.joesak.com ? If so, it says the website is under-construction. Im not able to get any code.
Could you provide the files needed in modules/snoveride/js ?
Thanks.
Hey T, glad to hear the
Hey T,
glad to hear the tutorial helped. I've attached the file to this tutorial, you'll find it just under the video. I would have emailed it to you but your submitted email looks fake :)
I'm going to definitely try and post relevant files on all video tutorials going forward. I should have another one out in a day or two on page titles and SEO - a little tease for an indepth tutorial I am planning but have fallen behind on.
Take care,
Pete
This code doesnt work for
This code doesnt work for me:
$(document).ready(function(){
$('#block-multiblock-2 input.form-text').autofill((
value: 'Subscribe...'
));
});
The value First Name is constantly in the box.
however, if i change
value: 'Subscribe...'tovalue=''then First Name appears (and disappears when clicked).so it works but it doesnt work. How can i make it say what i want?
found the solution. it should
found the solution. it should be this:
$(document).ready(function(){
$('#block-multiblock-2 input.form-text').autofill({
value: 'Subscribe...'
});
});
value: 'Subscribe...' is surrounded by ({ and }) NOT (( and ))
Thanks for sharing - sorry I
Thanks for sharing - sorry I didn't have a chance to get to it.
Glad it worked out though,
Pete
Thank you. You helped me a
Thank you. You helped me a lot.
Thanks Peter, another great
Thanks Peter, another great tutorial :)
One quick question though, can you tell me how I can get rid of that horrible "Stay informed on our latest news!" text? I can't find it anywhere.
Many thanks
I would be interested in
I would be interested in seeing some tuts on SERVICES... especially JSON services.
an Advanced views would be interesting as well, where the actual fields can be themed.
but I like your style... you do a real nice video.
Hi, the old drupal simplenews
Hi, the old drupal simplenews format was looking dull in its appearance. There required definite improvement in its appearance and thanks for this post. Now I can get rid of old school idea.
Thanks for the tutorial. It
Thanks for the tutorial.
It was a well-rounded Drupal lesson.
Sorry William, you comment
Sorry William, you comment obviously was intended just to leave a trackback to your site and while I support that, I'd also like the comments to be relevant and make sense.
-Pete
Hi Pete, Awesome x3. That's
Hi Pete,
Awesome x3. That's the way I like to be taught. Although you seem to be using D6 and as a newbie I got on the D7 bandwagon right away, I think the ideas behind are quite similar.
What I'd like to see would be an episode 3 of the Simplenews series, where you would expand the form by adding an extra control. In my case I would want a checkbox - meant for ticking an express user consent to store their email address in the database (you know, the legalese stuff). I would like to see how you have that not only validated but, most of all, stored into the database.
Anyway, the Simplenews movies got me into thinking that writing a custom module is a way easier than using the suggestion and template techniques.
Now let me browse through the rest of your screencasts...
Thanks again and best regards,
Artur
This was great! Just what I
This was great! Just what I was looking for, thanks! I'm pretty new to Drupal and haven't done any custom module development yet, but this was a great introduction for me.
Post new comment