Estudi de programació i serveis informàtics

Create advice popup with cookies on Prestashop

dijous, maig 7th, 2015

Email this to someoneShare on LinkedIn0Tweet about this on TwitterShare on Google+0Print this page

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:

 

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: , ,

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

  1. Santos Lina ha dit:

    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

    • Roger ha dit:

      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.

  2. Lina Santos ha dit:

    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?

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *