Quick Tip: Triggering custom Popups in Prestashop

In this quick tip we will see how to trigger custom Popups in Prestashop, and how easy it is to enable them for all pages we need

Watch the Screencast

You like the tuts and want to say "thank you"? Well, you can always feel free to donate:

  • J. Donovan

    Hi Nemo,

    I am working on a custom module, and I am adding fancybox to my images.

    The thing is, I only want the triggered pop up to show the clicked image in full size and at the moment the result I am getting is the equivalent of what I would get if I pushed my image into a text editor.

    Why can’t “myfancybox” show a jpg and do you have a fix to this ?

    Thanks for your work.

    • NemoPS

      Hmmm that’s strange, are you passing the link to the image as argument? the .fancybox() should be attached to a link, not to the img tag

  • Stephen Schmidt

    IN my child theme, i edited custom.js adding the lines

    $(document).ready(function(){
    $(‘.myfancybox’).fancybox({type:’ajax’});
    });

    The link created does not go to a fancybox, but loads a screen. Do I need to insert line:

    $this->context->controller->addjQueryPlugin( ‘fancybox’ );

    Where or what file would i create to insert this code that would make it available from all pages.

    I am running Prestashop 1.7.2.4

  • Stephen Schmidt

    In prestashop 1.7 Where do I add the Js lines that you previously added to global.js?

    • NemoPS

      themesclassicassetsjscustom.js should be the file you are looking for

  • michael

    Hi Nemo,

    I have used many of your tutorials, they are very very helpful, thank you for this.

    In this tutorial i have followed the video and managed to implement a custom popup as required.

    One problem i have found, as soon as i add the script in the global.js, javascript becomes broken in general across my website. for example home featured products no longer show on the home page, mouse hover elements no longer work.

    Any thoughts on this would be hugely appreciated.

    I am running the latest version of prestashop 1.6.1.4

    • NemoPS

      I’d see if anything in the code you write is broken (using the js console)
      It’s more than likely some kind of typo

      • michael

        Hi,

        Thank you for your response, i did as you asked and found that the fancybox function was uncaught, which led me to find that the fancybox code was not loaded on the homepage of my website, but it is loaded on the product page.

        Should i put the code $(‘.myfancybox’).fancybox({type:’ajax’}); in my product.js in this case?

        Or should fancybox be loaded on every page of my website and for some reason it is not?

        Thanks again!

        Michael

        • NemoPS

          You must include it with a module that hooks to the header then, to have it on all pages

          $this->context->controller->addjQueryPlugin( ‘fancybox’ );

  • JD Dishan

    this is scr

  • JD Dishan

    i can’t find the url, how to get more link url (http://localhost/prestashop/content/1-delivery?content_only-1)??

  • JD Dishan

    i can’t find the url, how to get more link url (http://localhost/prestashop/content/1-delivery?content_only-1)?

Store Top Sales

You like the tuts and want to say "thank you"? Well, you can always feel free to donate: