Fancybox Lightbox on all pages

[kallym]

Hi,

I wanted to have a newsletter signup in the permanent links block that would popup in a modal box.

I searched the forum all day to come up with a solution ( have version 1.4.017) and finally came up with the following after looking at the popup for the Read Terms on the order page. I don't know if it is perfect, but it is working for me. Hope it helps someone else.

Here's what I did:

added the following link in blockpermanentlinks-header.tpl

{l s='signup'}
   [removed]$('a.iframe').fancybox();[removed]

Note: this is not the blocknewsletter signup, but my own custom signup, but the above could be modified for any type of link.


Next, I modified classes/frontController.php by moving the two fancybox lines into the first part of the function

public function setMedia()
   {
       global $cookie;

       Tools::addCSS(_THEME_CSS_DIR_.'global.css', 'all');
       Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css');
       Tools::addJS(array(_PS_JS_DIR_.'tools.js', _PS_JS_DIR_.'jquery/jquery-1.4.4.min.js',
                        _PS_JS_DIR_.'jquery/jquery.easing.1.3.js',
                       _PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js'
                        ));

       if ($cookie->live_edit)
       {
           Tools::addJS(array(
                           _PS_JS_DIR_.'jquery/jquery-ui-1.8.10.custom.min.js', 
                           _PS_JS_DIR_.'hookLiveEdit.js')
                           );
       }
   }

Then, in product.js, I changed the following to false

$('.thickbox').fancybox({
       'hideOnContentClick': false,
       'transitionIn'    : 'elastic',
       'transitionOut'    : 'elastic'
   });

I also commented out the following lines in the setMedia function for ParentOrderCOntroller.php and ProductController.php

//Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css');
//_PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js'

I didn't put the before and after code, but if you look at the code in the setMedia() functions in the files I named, it should be pretty clear.

I think that in blockpermanentlinks I could also set parameters for fancybox, I didn't try it this time, but maybe something like:

[removed]$('a.iframe').fancybox({
       'width' : 550,
       'height' : 400,
       'autoScale' : false,
       'hideOnContentClick' : false});[removed] 

[beatstreet]

Thx, excellent tip.

I´ve tested only the changes in classes/Frontcontroller.php

        
Tools::addCSS(_THEME_CSS_DIR_.'global.css', 'all');

Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css');
...

and

        
_PS_JS_DIR_.'jquery/jquery-1.4.4.min.js', 

_PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js',
...

Now the fancybox is loading in index page also !

[cammo]

How would you go about enabling the modal window for an alert message like the newsletter signup 'success' or 'fail' message..?

[kallym]

I just used a PHP contact form script that posted to itself.

[cammo]

Hi,

I wanted to have a newsletter signup in the permanent links block that would popup in a modal box.

I searched the forum all day to come up with a solution ( have version 1.4.017) and finally came up with the following after looking at the popup for the Read Terms on the order page. I don't know if it is perfect, but it is working for me. Hope it helps someone else.

Here's what I did:

added the following link in blockpermanentlinks-header.tpl

{l s='signup'}
   [removed]$('a.iframe').fancybox();[removed]

Note: this is not the blocknewsletter signup, but my own custom signup, but the above could be modified for any type of link.


Next, I modified classes/frontController.php by moving the two fancybox lines into the first part of the function

public function setMedia()
   {
       global $cookie;

       Tools::addCSS(_THEME_CSS_DIR_.'global.css', 'all');
       Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css');
       Tools::addJS(array(_PS_JS_DIR_.'tools.js', _PS_JS_DIR_.'jquery/jquery-1.4.4.min.js',
                        _PS_JS_DIR_.'jquery/jquery.easing.1.3.js',
                       _PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js'
                        ));

       if ($cookie->live_edit)
       {
           Tools::addJS(array(
                           _PS_JS_DIR_.'jquery/jquery-ui-1.8.10.custom.min.js', 
                           _PS_JS_DIR_.'hookLiveEdit.js')
                           );
       }
   }

I made these changes too and it works well for a modal popup newsletter subscription box (in my case for mailchimp).

Rather than modifying the core files though, how does one go about implementing these changes to FrontController.php using the overrides/classes folder, to protect it from future prestashop updates?

I tried to make the changes and simply upload the modified file to the override folder, but it still reads the old one in classes/ so for now I've just overwritten the core file which isn't ideal.

[djvolt]

Hi

 

Please tell me why when I click on content the lightbox closing?

 

In jquery.fancybox-1.3.4.js line is:

 

 

$.fn.fancybox.defaults = {

padding : 10,

margin : 40,

opacity : false,

modal : false,

cyclic : false,

scrolling : 'auto', // 'auto', 'yes' or 'no'

 

width : 560,

height : 340,

 

autoScale : true,

autoDimensions : true,

centerOnScroll : false,

 

ajax : {},

swf : { wmode: 'transparent' },

 

hideOnOverlayClick : true,

hideOnContentClick : false,

 

overlayShow : true,

overlayOpacity : 0.7,

overlayColor : '#777',

 

Could you help me?

[popres]

Wow this seems great, thanks a lot!

 

Exactly what I am looking for.

 

Any of you guys mind sending me PM on your sites to see how it looks live ?

And can I run this on PS version 1.2.5 ?

[hulk]

Hi,

after updating my prestashop version to 1.4.8.2, i would like to open a cms page in a fancybox by clicking a link in my module free bloc.

 

can anybody tell me how can i integrate a fancy box in my free bloc in all my site page? and the files to modify.

 

thx

[Zolgreen]

Uau. THX Kallym! That is very usefull topic.

[jave.web]

previous answers contain deprecated code!

 

PrestaShop 1.6

Does not contain versions in file names anymore, CSS and JS of fancybox are at one place,

these addings are always done using controller!

 

There are 2 ways to do it in general:

 

A) Put it in FrontController (override)

To public function setMedia() in your FronController.php (override) put following after $this->addJquery(); :

$this->addCSS(_PS_JS_DIR_.'jquery/plugins/fancybox/jquery.fancybox.css');
$this->addJS(_PS_JS_DIR_.'jquery/plugins/fancybox/jquery.fancybox.js'); 

Put it in your module's header hook

To your module's public function hookHeader() or public function hookDisplayHeader() add following:

$this->context->controller->addCSS(_PS_JS_DIR_.'jquery/plugins/fancybox/jquery.fancybox.css');  
$this->context->controller->addJS(_PS_JS_DIR_.'jquery/plugins/fancybox/jquery.fancybox.js');

BTW: Basic module generated by PrestaShop Module Generator with no settings contains one of these hooks ready to go :-)