PrestaShop 1.7
How to create a popup window to show custom content?
Transformer v4 and Panda v2 have 4 modules which you can use to create popup windows.
- "Notification" module and "Newsletter popup" module, they can be used to create popup windows, which will be opened automatically on page load, to show anything you want.
- "Product video and size chart" module, it can be used to create popup windows on the product page to show videos and size charts.
- "Advanced custom content block" module, it can be used to create popup window to show a big image on click of the image’s thumbnail, here are examples http://panda2.sunnytoo.com/en/content/20-text-with-image
It’s easy to create a popup window on click on a button. See screenshot.
Here is the code
1 2 3 | <p><a class="inline_popup_tri " href="#my_popup_content_1" title="Popup window" rel="nofollow">Click to open a popop window</a></p> <p><a class="inline_popup_tri btn btn-default " href="#my_popup_content_1" title="Popup window" rel="nofollow">Click to open a popop window</a></p> <div id="my_popup_content_1" class="inline_popup_content mfp-hide mfp-with-anim">You can put any content here.</div> |
You can find examples on this page http://panda2.sunnytoo.com/en/content/24-how-to-have-a-popup-window-on-click-of-a-button-in-prestashop-17
How to show content from a CMS page in a popup windown when a link is clicked?
1. Put this code to the custom js code field in the Theme editor module.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | $(document).on('click', '.tri_popup_cms', function (event) { event.preventDefault(); var url = $(this).attr('href'); if (url) { if (url.indexOf('?') != -1) url += '&content_only=1'; else url += '?content_only=1'; $.get(url, function(content) { var terms_content = $(content).find('.page-cms').html(); var terms_easy_content = $(content).find('#body_wrapper .easycontent_container'); if(terms_easy_content.length){ terms_easy_content.each(function(){ if($(this).closest('#displayBanner').length) return true; terms_content += $(this).wrap('<div></div>').parent().html(); }); } $.magnificPopup.open({ items: { src: '<div class="inline_popup_content mfp-with-anim">'+terms_content+'</div>', type: 'inline' } }); }).fail(function(resp) { }); } }); |
2. Add a class attribute to the link, like this
PrestaShop 1.6
If you are using Transformer v3 or Panda v1, you can also have popup windows on the click of a button. See screenshot.
Here is the code
1 2 3 4 | <p><a class="st_image_popup btn btn-default" title="Click here" data-img-title="Title" data-img-href="#popup_content_1">Click here to open a popup window</a></p> <p><a class="st_image_popup" title="Click here" data-img-title="Title" data-img-href="http://panda.sunnytoo.com/upload/sample_post_img_2.jpg">Click here to open an image in a popup window</a></p> <div id="popup_content_1" class="display_none pad_10" style="width: 400px;">You can put any content here.</div> <p><a class="st_image_popup" title="Click here" data-img-title="Title" data-img-href="http://panda.sunnytoo.com/upload/sample_post_img_2.jpg"><img src="http://panda.sunnytoo.com/upload/sample_post_img_2_small.jpg" alt="Popup" width="254" height="346" /></a></p> |
You can find examples on this page http://panda.sunnytoo.com/en/content/1-delivery
The above code can work fine in the Custom content block module. If you want to do the same on cms pages, then you have to edit the /classes/CMS.php file.
Change this code
1 | ‘content’ => array(‘type’ => self::TYPE_HTML, ‘lang’ => true, ‘validate’ => ‘isCleanHtml’, ‘size’ => 3999999999999), |
to this one
1 | ‘content’ => array(‘type’ => self::TYPE_HTML, ‘lang’ => true, ‘validate’ => ‘isAnything’, ‘size’ => 3999999999999), |
If you are using Transformer v3 or Panda v1 which is lower than v1.3.5, then you have to add this code to the Custom JAVASCRIPT code field in the Theme editor module.
1 2 3 4 5 6 7 8 9 10 11 | jQuery(function($){ $(".st_image_popup").click(function(e) { e.preventDefault(); $.fancybox({ 'padding': 0, 'href': $(this).data('img-href'), 'title': $(this).data('img-title') }); return false; }); }) |
Hey Jonny,
Thank you for this very good contribution.
One question: how can I hide the "X" to close the window?
What I have done is add the following code in CSS:
.mfp-close-btn-in .mfp-close {
display: none;
}
But I don't know if it is the best or if there is any other solution.
Thanks in advance
Hi,
Are you using my theme? if yes, send me your site URL on the forum or contact us via my account page, we will check it for you: https://www.sunnytoo.com/contact
Best regards.
Hallo Jonny
this does not work for me vers. 1.7.8.4
The pages which should open in popup , open simply normal
they open not as popup
Can yu help me please?
regards