Create advice popup with cookies on Prestashop

Prestashop

Dijous, maig 7th, 2015

This post talks about how to create a popup advice (as age filter question, for example) on Prestashop platform. In this example I use cookies to control when appears the popup.

I don’t explain how to create an extension, only some steps to put a popup advice before loading Prestashop site.

Scenario:

Prestashop 1.6
Default bootstrap template enabled
write access to Prestashop site files
I use a jquery cookie plugin (https://github.com/js-cookie/js-cookie)

1. Download a jquery cookie js file and upload into ~/themes/default-bootstrap/js/

2. Edit ~/themes/default-bootstrap/header.tpl (I suppose a console access)

nano ~/themes/default-bootstrap/header.tpl

3. Include jquery cookie js on head html section. Under line 62 put this line:

<script src="{$content_dir}themes/default-bootstrap/js/jquery.cookie.js" type="text/javascript"></script>

4. Add custom function scripts into head html section (about line 72)

<script>
window.onload = function() {
//this site needs verify the age of visitors
if ($.cookie('is_legal') == "yes") {
 //legal!
} else { //cookie not found or expired
    $(".overview").hide(0).delay(5).fadeIn(3000)
}

};
// when shows pop-up and answer no. redirect to another page
function sayNo() {
document.location = "http://studi7.com";
}
//when shows pop-up and answer yes. pop-up hide
function sayYes() {
  $.cookie("is_legal", "yes", { expires: 365, path: '/' }); //create cookie for one year
$(".overview").hide(0);

}
</script>

5. After add this styles:

<style>
.overview {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
z-index: 19999;
background: none repeat scroll 0% 0% rgba(25, 25, 25, 0.7);
display:none;
}

.agebox {
height: 300px;
background-color: #FFF;
width: 400px;
margin: 150px auto 0px;
text-align:center;
padding:20px;
border-radius:8px;
}
</style>

6. Add after body html tag, this html code:

<div class="overview"> <!-- overview tho set website under transparency div-->
<div class="agebox"> <!--pop-up box -->
<h2>Title</h2>
<p><strong>Some strong text</strong></p>Another text bla bla bla blah
<p><strong>Are you over 18?</strong></p><br/><br/>
<a href="#" class="btn btn-success" onclick="sayYes()">Yes</a>
<a href="#" class="btn btn-danger" onclick="sayNo()">No</a>
</div>
</div>

View this advice in action here

Save file and enjoy pop-up!

Etiquetes: pop-up, jquery, cookies

4 respostes a “Create advice popup with cookies on Prestashop”

Santos Lina ha dit:

6 de juny de 2016 a les 17:48

Hello,

I’ve tried your code but it does not create a pop-up, I got just some text inside the main page with the question if the user is over 18 or not.

Could you give me a hand with this please.

Thank you

Respon
- Roger ha dit:
  
  27 de juny de 2016 a les 20:57
  
  It’s seems that the javascript cookie library (step 3) and custom js code (step 4) isn’t loaded correctly.
  
  You can verify js loading with firebug tool on web browser or clear prestashop and naviagtor cache and make sure that js lines appears in source code of home page.
  
  Respon
Lina Santos ha dit:

22 de juny de 2016 a les 21:50

Hello, I am trying to implement this on Prestashop 1.6.1.5 without success. We only implement the code in header.tpl of the template we are using?

Respon
- Roger ha dit:
  
  27 de juny de 2016 a les 20:42
  
  Yes, this changes must be made on active template.
  
  Respon