Newsletter popup at homepage

[Cintia]

Hi,

 

I have this free module called Home Modal Window which shows a popup window to new guests when they enter my site.

 

I just wanted to use it as a newsletter subscription popup but I don't have the skills to put it to work. How can I add a subscription form and a button and make it work?

 

This is the code, it's all in place, only that the field and button are useless. I can't even remember where I got it from or how did I decide it was ok :/

<div style="background-image:url(https://www.quirky-me.com/img/popup_bg.jpg); background-repeat:no-repeat;" height="323px" width="529px">
  <div style="margin-top:30px"align="center"><img src="https://www.quirky-me.com/img/logo_100px.png"></div><div align="center" style="margin-top:20px;font-size:14px;font-family:"Trebuchet MS"">Hi there! get your <span style="color: #FF0090;	font-weight:bolder;font-family: "Trebuchet MS";">WELCOME 15% DISCOUNT COUPON</span> by subscribing here:</div>
<div style="margin-top:30px"align="center"><input style="width:300px;height:26px; margin-right:15px"  id="input"type="text" name="email" size="18" 
					value="" 
					onfocus="javascript:if(this.value=='{l s='your e-mail' mod='blocknewsletter' js=1}')this.value='';" 
					onblur="javascript:if(this.value=='')this.value='{l s='your e-mail' mod='blocknewsletter' js=1}';" 
					class="inputNew" />
				<!--<select name="action">
					<option value="0"{if isset($action) && $action == 0} selected="selected"{/if}>{l s='Subscribe' mod='blocknewsletter'}</option>
					<option value="1"{if isset($action) && $action == 1} selected="selected"{/if}>{l s='Unsubscribe' mod='blocknewsletter'}</option>
				</select>-->
					<input type="submit" value="subscribe" class="button_mini" name="submitNewsletter" />
				<input type="hidden" name="action" value="0" /></div><div align="center" style="margin-top:30px;font-size:14px;font-family:"Trebuchet MS"">
				  <p><span style="color: #FF0090;	font-weight:bolder;font-family: Times New Roman; font-size: 18px"> ! </span> We will never send daily and spammy newsletters, just important updates and offers that will really be of your interest<span style="color: #FF0090;font-weight:bolder;	font-family: "Trebuchet MS";"> ;·) </span></p>
				  <p> </p>
				</div></div>

I hope someone can help me!

 

Thanks for reading

[Dr. Lobotomy]

Hi Cintia,
 
I don't know if you have found a way to do it or a way around it by now but I needed to do pretty much the same thing. So I post my solution here just in case anyone else might need sth similiar. 
 
I used the same free module (Home Modal Window) and made a few changes/additions to incorporate the regular prestashop newsletter block (so obviously it needs to be installed and enabled). 
 
FYI, I am using Prestashop version 1.5.6.2 but I think it should work for any 1.5.x.
 
I have included a screenshot which shows how it looks like (I didn't change the look and feel of the newsletter registration form).
 
Also I included a zip file with my final home modal version for anyone who doesn't feel comfortable doing it step by step.
 
Things you should be aware of:

• The registration form doesn't replace the text that you enter in the home modal configuration, it will appear below it.
• If you have the newsletter block showing up anywhere in the index page exclude it otherwise you will get different sort of issues due to the fact that the newsletter block will be loaded twice. Once were you have it (eg. footer) and once in the modal.

Here it goes
 
First step:
 
In file homemodalwindow.php find the line which says:

global $smarty;

It only appears once in the code (line 189). Add the following code below it to show the newsletter block module form in the modal or if the form has been submitted pass the success or fail messages to the template:  
 

$object = ModuleCore::getInstanceByName("blocknewsletter");
if (is_callable(array($object, 'hookDisplayLeftColumn')))
	$nvar = call_user_func(array($object, 'hookDisplayLeftColumn'), array());

if (Tools::isSubmit('submitNewsletter')) {
	if ($object->error) {
		$smarty->assign(array(
		'color' => 'red',
		'msg' => $object->error,
		'nw_value' => isset($_POST['email']) ? pSQL($_POST['email']) : false,
		'nw_error' => true,
		'action' => $_POST['action']
		));
	}elseif ($object->valid) {
		$smarty->assign(array(
		'color' => 'green',
		'msg' => $object->valid,
		'nw_error' => false
		));
	}
 
	$blocknsl = $object->valid . $object->error;
}else{
	$blocknsl = preg_replace("/\r|\n/", "", $object->hookDisplayLeftColumn($params));
} 

 

Then in line 191 I replaced the variable $dontshowhmwlink with $blocknsl so that it now looks like:

$content = str_replace ("'", ''',  Configuration::get('HOME_MODAL_WIN', $cookie->id_lang).$blocknsl);

I removed the $dontshowhmwlink variable (which is responsible for showing the 'Dont Show This Again' link) because I added it in the template. The reason for this is that I didn't want the link to show up when showing the success or fail message for the registration result but only when showing the form.
 
Second step:

In file homemodalwindow.tpl.
 
I added two stylesheet rules for the success or fail message of the newsletter registration right after the {literal} tag (ilne 4):
 

<style>
.fancybox-inner h1.success_inline {
color: #418B19;
text-align: center;
padding-top: 40px;
}
.fancybox-inner h1.warning_inline {
color: #DA0F00;
text-align: center;
padding-top: 40px;
}
</style>

And finally I altered the fancybox content line (line 9) to this:

'{/literal}{if isset($msg) && $msg}<h1 class="{if $nw_error}warning_inline{else}success_inline{/if}">{$msg}</h1>{else}{$content|strip|escape:'javascript'}<br/><a href="?dontshowhmw=yes">{l s=' Dont Show This Again ' mod='homemodalwindow'}</a>{/if}{literal}',

 
Update 15 May 2014:
I re-uploaded the zip file of the module and removed a forgotten IF clause that shouldn't have been
there in the first place. This IF clause is not present in the written step-by-step solution presented
above. 
 
Update 12 July 2014:
A new upload. some minor changes. One to dismiss a PHP warning and one for HTML escaping. Hopefully this will prove to be more stable.
 
Update 15 March 2015:
New upload of the zip as version 1.2.2. I added some extra lines of code to address the issue of the error/confirmation messages not showing up (after pressing the submit button) in the modal.

homemodalwindow_1.2.2.zip

Edited March 16, 2015 by Dr. Lobotomy (see edit history)

[Cintia]

 

Hi Cintia,

 

I don't know if you have found a way to do it or a way around it by now but I needed to do pretty much the same thing. So I post my solution here just in case anyone else might need sth similiar. 

 

I used the same free module (Home Modal Window) and made a few changes/additions to incorporate the regular prestashop newsletter block (so obviously it needs to be installed and enabled). 

 

FYI, I am using Prestashop version 1.5.6.2 but I think it should work for any 1.5.x.

 

I have included a screenshot which shows how it looks like (I didn't change the look and feel of the newsletter registration form).

 

Also I included a zip file with my final home modal version for anyone who doesn't feel comfortable doing it step by step.

 

The registration form doesn't replace the text that you enter in the home modal configuration, it will appear below it.

 

Here it goes

 

First step:

 

In file homemodalwindow.php find the line which says:

global $smarty;

It only appears once in the code (line 189). Add the following code below it to show the newsletter block module form in the modal or if the form has been submitted pass the success or fail messages to the template:

 

$object = ModuleCore::getInstanceByName("blocknewsletter");

if (Tools::isSubmit('submitNewsletter')){
if ($object->error)
{
$smarty->assign(array('color' => 'red',
'msg' => $object->error,
'nw_value' => isset($_POST['email']) ? pSQL($_POST['email']) : false,
'nw_error' => true,
'action' => $_POST['action'])
);
}
else if ($object->valid)
{
$smarty->assign(array('color' => 'green',
'msg' => $object->valid,
'nw_error' => false)
);
}
$blocknsl =  $object->valid.$object->error;
}else{
$blocknsl = preg_replace( "/\r|\n/", "", $object->hookDisplayLeftColumn() );
}

Then in line 191 I replaced the variable $dontshowhmwlink with $blocknsl so that it now looks like:

$content = str_replace ("'", ''',  Configuration::get('HOME_MODAL_WIN', $cookie->id_lang).$blocknsl);

I removed the $dontshowhmwlink variable (which is responsible for showing the 'Dont Show This Again' link) because I added it in the template. The reason for this is that I didn't want the link to show up when showing the success or fail message for the registration result but only when showing the form.

 

Second step:

 

In file homemodalwindow.tpl.

 

I added two stylesheet rules for the success or fail message of the newsletter registration right after the {literal} tag (ilne 4):

<style>
.fancybox-inner h1.success_inline {
color: #418B19;
text-align: center;
padding-top: 40px;
}
.fancybox-inner h1.warning_inline {
color: #DA0F00;
text-align: center;
padding-top: 40px;
}
</style>

And finally I altered the fancybox content line (line 9) to this:

'{/literal}{if isset($msg) && $msg}<h1 class="{if $nw_error}warning_inline{else}success_inline{/if}">{$msg}</h1>{else}{$content}<br/><a href="?dontshowhmw=yes">{l s=' Dont Show This Again ' mod='homemodalwindow'}</a>{/if}{literal}',

 

 

 

Wow thanks, that's a very complete answer!!

I hope I had seen it before, because I ended up buying a module for this (it was just 17usd thou) Anyway it's good to have the answer in case anyone needs it in the future. Maybe I'll test it once I find a moment

 

cheers!

[satriyoz]

hello there, thanks for sharing how to fix it.. 

but, why the modal cannot running on me ?

i'm trying on localhost yet.. 

is there any modul or something that i have to use the trigger so the modal can show up ?

[Dr. Lobotomy]

Hi satriyoz,

 

First of all which prestashop version are you using?

 

Did you do the step by step guide or did you download my customized version of the module (homemodalwindow_with_blocknewsletter.zip)?

[elvispl]

I'm used your zip pack but i have this error: Uncaught SyntaxError: Unexpected token ILLEGAL 

in line 779 , after: "<a href="https://apps.facebook.com/eticsoft/" target="_blank">(...)"

 

I think thet problem is in this line: $content = str_replace ("'", ''',  Configuration::get('HOME_MODAL_WIN', $cookie->id_lang).$blocknsl);

 

but I have not any idea to complete this any help?

[Dr. Lobotomy]

Hey elvispl,

 

I am late to the party again because I messed up my notification settings and never got notified of your post.

 

Maybe you gave up on this by now, but if not can you post the full html content that you used for the modal?

There might be something in there that creates the problem but it doesn't seem to be the piece that you posted.

I inserted a link like the one you posted above:

 

<a href="https://apps.facebook.com/eticsoft/" target="_blank">test</a>

 

and nothing bad happened. So I 'm guessing the problem is somewhere else.

[endriu107]

Hi, on my 1.5.6.2 didnt work, could somebody show how those files after edit looks?

[Dr. Lobotomy]

Hi endriu107,

 

Do you get any errors or just nothing happens?

 

I just tested it. I downloaded the zip file from this thread and uploaded and installed it again and I saw that there is

a small bug it seems.

 

At first run it does not show up. You must go to the module's settings and at least press the 'Save forms' button.

It doesn't seem to matter if you change the texts or not but you must click the 'Save forms'. After that it shows up

for me and I 'm using the 1.5.6.2 version.

 

Could this be the problem? Also is the newsletter block module installed and enabled?

[endriu107]

Above footer is display some code:

 

Dont Show This Again ', { 'width' : 650, 'height' : 400, 'autoScale' : true, 'scrolling' : 'no' }); });

 

and popup didnt appear.

Edited July 12, 2014 by endriu107 (see edit history)

[Dr. Lobotomy]

It seems that something in the content of your modal is breaking up the template. Probably some character or link is breaking up

the template.

 

What kind of content is in your modal. Do you have links or photos or is it just text?

 

Could you try and just put some simple text and see if it works?

 

If it does then something in the HTML code of your modal causes the problem.  I 'll check to see if everything is getting properly escaped.

 

[endriu107]

Could you send me your pack with this module? I will try yours maybe I did somethin wrong.

Edited July 12, 2014 by endriu107 (see edit history)

[Dr. Lobotomy]

endriu107,

 

I just uploaded a newer version (1.2). Could you download it again from the top post and test it? I think it will work !!!

 

I 'll be off my PC for the next half hour but I will be back!!!

[endriu107]

Still the same, I tried on two installations 1.5.6.0 and 1.5.6.2 

 

I only install your pack and click "save forme" nothing more.

 

Above footer is:

 

 

No idea why.

 

Maybe in positions is semething wron I have it in hook pages header and homepage content.

 

Debug show nothing.

[Dr. Lobotomy]

The positions are correct those are the same ones I have.

 

Is it possible that there is a javascript error? Did you check it in the console of your browser.

Maybe an 'Unterminated string literal' type of error or something?

 

Can you also try changing the content and use just a line of text like:

 

sample text sample text sample text

 

without any links or photos and then click save forms and check if it works then?

 

PS. I will try to install it on a fresh installation of prestashop 1.5.6.2 and see

if it doesn't work there too.

Edited July 12, 2014 by Dr. Lobotomy (see edit history)

[Dr. Lobotomy]

I just tried it in a fresh installation and indeed it did not work. I don't know if it was the same problem with endriu107,

because I didn't have the same outcome (that message showing above the footer).

 

The HTML escaping was again the problem.

 

I changed the smarty escaping in the template from escape:'quotes' to escape:'javascript' and it seems

to have made a change because now it works also in the fresh installation of 1.5.6.2.

 

I re-uploaded the module as 1.2.1.

 

endriu107, if you have not given up by now, give a last try to 1.2.1. Thanks!!!

[apatan]

Hi, I had downloaded homemodalwindow_1.2.1.zip and I made the changes as suggested.

 

I am getting the following error on the homepage

 

Warning: Missing argument 1 for Blocknewsletter::hookDisplayLeftColumn(), called in /home/thebaker/public_html/modules/homemodalwindow/homemodalwindow.php on line 212 and defined in /home/thebaker/public_html/modules/blocknewsletter/blocknewsletter.php on line 501

 

Do I need to make any changes in blocknewsletter in order to make it work properly.

 

I am not a developer, would need some hand-holding

 

Thank you so much for your help.

 

Regards

 

[Dr. Lobotomy]

Hi apatan,

 

I will try to help as best as I can. 

 

If you downloaded the last version (1.2.1) you should not have to make any changes to it.

 

Did you try it without making any changes? If you did try it, did it show you the same error?

If you made changes before actually trying it as it is, I suggest you uninstall and delete it and

then re-install and check again.

 

If you did use it without changes and it still did not work (by giving you the same error) check the following:

1. You have the newsletter block installed and enabled

2. Are you using a custom theme? If yes, then I am pretty sure that you must have a left column in your shop where the

newsletter block hooks into. If you don't have a left column then it probably will not work. 

 

Also you didn't mention what prestashop version you are using. For example I have not tested it at all in prestashop 1.6.

 

Cheers

[apatan]

Hi apatan,

 

I will try to help as best as I can. 

 

If you downloaded the last version (1.2.1) you should not have to make any changes to it.

 

Did you try it without making any changes? If you did try it, did it show you the same error?

If you made changes before actually trying it as it is, I suggest you uninstall and delete it and

then re-install and check again.

 

If you did use it without changes and it still did not work (by giving you the same error) check the following:

1. You have the newsletter block installed and enabled

2. Are you using a custom theme? If yes, then I am pretty sure that you must have a left column in your shop where the

newsletter block hooks into. If you don't have a left column then it probably will not work. 

 

Also you didn't mention what prestashop version you are using. For example I have not tested it at all in prestashop 1.6.

 

Cheers

 Hello Dr. Lobotomy

Thanks for a quick reply and your timely help. I have installed version 1.2.1 and I can now see the popup with the newsletter text box.

 

blocknewsletter has been installed and enabled- I am not using a default template but have customised it.  I am using blocknewsletter in the footer. I have added the dispayfooter hook in the homemodalwindow.php line number 210.

 

However, when I click on the submit button, I do not get any confirmation/error message for the same that the email id has been registered. What changes do I need to make in order to show the message to the user?

 

I am using Prestashop 1.5.6.0

 

Thanks a ton for your help. 

 

Regards!!

[Dr. Lobotomy]

Hi again apatan,

 

I did a fresh install of the plugin on a test prestashop installation and I added the newsletter block on the default theme and indeed it does not show the confirmation messages which is weird but it worked in my custom theme. I don't know what the difference is that makes it work on my custom theme but not the default one or yours. The GOOD news is that I did some poking around and I added 2 new lines which seem to have made the difference (all thanks to this Paul Campbell's article) .

 

I will upload a new updated version soon but you can also go ahead and do the following. Find  the comment line which says:

//return HTML of blocknewsletter module of the hook footer

and right below it add these 2 lines so that it looks like this:

//return HTML of blocknewsletter module of the hook footer
if (is_callable(array($object, 'hookDisplayLeftColumn')))
  $nvar = call_user_func(array($object, 'hookDisplayLeftColumn'), array());

Hopefully it will do the trick. It did work with the default theme. Don't change the hookDisplayLeftColumn in these 2 lines. It should work for the footer as it is.

 

The only other thing that you should do (if this works for you) is that you need to exclude the blocknewsletter from showing up in the index page. 

 

You should do this because if you leave it there, then it creates some small issues because the module is loaded 2 times. Once in the modal and once in the footer. What happens is that the confirmation/error messages will also show up somewhere in your page and not just in the modal. Most likely somewhere under the top horizontal menu but it will depend on the theme I guess. 

 

If you aren't sure how it is done you need to go to the modules positions, edit the Footer position and in the Exceptions box click on the one that says 'index' and then Save.

 

Best of luck!!! 

Edited March 15, 2015 by Dr. Lobotomy (see edit history)

[apatan]

Thanks a ton Dr. Lobotomy, it worked

 

Really appreciate your timely help. 

Edited March 16, 2015 by apatan (see edit history)

[Dr. Lobotomy]

Hey apatan, 

 

I am glad it worked!

 

Also glad that I could help! 

[wizardlopes]

Hi

Just a query. A soon an the email is submitted where de email address goes, and the windows that should say thank you. Is very small.

Thanks 

Kind regards 

[wizardlopes]

Hey apatan, 

 

I am glad it worked!

 

Also glad that I could help! 

 

 

Hi

Just a query. A soon an the email is submitted where de email address goes, and the windows that should say thank you. Is very small.

Thanks 

Kind regards 

[prestashopnew]

its great thank you!

working on ps 1.6.1.1

Edited March 23, 2016 by prestashopnew (see edit history)

[seboxp]

hi, how can i make active text after I click to open the popup? How looks the link?

[Inter Svetainė]

hi, how can i make active text after I click to open the popup? How looks the link?

Do You mean to add class="active" ?