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:
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
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
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.
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?
Yes, this changes must be made on active template.