Adding Fancybox to CMS pages

[amir0n]

Dear readers,

 

I'm developing, designing and scripting. So basicly i'm a noob because i'm doing to many things and not specialised in just scripting. I've got a problem and i cant find any answer on google let alone in this forum.

 

So I hope somebody could help me with my problem.

What i've done is. i've changed the CMS pag. in the footer to:

• Contact
  
• Delivery
  
• Legal Notice
  
• Terms and conditions of use
  

 

Now what I want to do is, that if you click on one of them that a frame pops up.

I found on order-carrier.tpl a piece of code that lets me do just that:

 

<a href="{$link_conditions}" class="iframe">{l s='(read)'}</a>

</p>

<script type="text/javascript">$('a.iframe').fancybox();</script>

 

Step 1

terms and conditions of use is easy to change

Legal Notice/delicery/contact is not so easy to change

 

The reason is because i dont know if they have a $link_ like conditions and if I use the normal way to go directly to the source then i get the header inside the popup frame. Could anybody help me with this problem

 

Step 2

my next problem is it works at the moment only in order-carrier. I think i can fix this on my own but haven't looked in to this yet. Any help would be appreciated.

[amir0n]

For anybody that is interested i found the code to do just that.

 

../cms.php?id_cms=3&content_only=1

../cms.php?id_cms=2&content_only=1

../cms.php?id_cms=1&content_only=1

 

Now next problem: Step 2

How do i get it to work on all the pages?

I remember that i have to add a piece of code to cms.tpl and cms.php

[AKJV]

I'm using a simple thickbox on some of my pages by adding the call to the script in relevant tpl files.

I just gave instructions in this topic:

http://www.prestashop.com/forums/topic/45313-including-thickbox-on-all-the-pages-not-only-product-info-page/

 

I found another topic for adding a fancybox call that may be more useful to you:

http://www.prestashop.com/forums/topic/114328-fancybox-lightbox-on-all-pages/

[AKJV]

Ok, below I have summarized the steps you'll need to carry out to get fancybox popups for all your CMS links in your footer. It re-uses most of the instructions that forum user kallym gave (see 2nd link in my post above) with some extra info for your case.

 

1) In /classes/FrontController.php, change this part:

public function setMedia()
{
 global $cookie;
 Tools::addCSS(_THEME_CSS_DIR_.'global.css', 'all');
 Tools::addJS(array(_PS_JS_DIR_.'jquery/jquery-1.4.4.min.js', _PS_JS_DIR_.'jquery/jquery.easing.1.3.js', _PS_JS_DIR_.'tools.js'));
 if (Tools::isSubmit('live_edit') AND Tools::getValue('ad') AND (Tools::getValue('liveToken') == sha1(Tools::getValue('ad')._COOKIE_KEY_)))
 {
  Tools::addJS(array(
   _PS_JS_DIR_.'jquery/jquery-ui-1.8.10.custom.min.js',
   _PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js',
   _PS_JS_DIR_.'hookLiveEdit.js')
   );
  Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css');
 }
 $language = new Language($cookie->id_lang);
 if ($language->is_rtl)
  Tools::addCSS(_THEME_CSS_DIR_.'rtl.css');
}

into this:

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_.'jquery/jquery-1.4.4.min.js', _PS_JS_DIR_.'jquery/jquery.easing.1.3.js', _PS_JS_DIR_.'tools.js', _PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js'));
 if (Tools::isSubmit('live_edit') AND Tools::getValue('ad') AND (Tools::getValue('liveToken') == sha1(Tools::getValue('ad')._COOKIE_KEY_)))
 {
  Tools::addJS(array(
   _PS_JS_DIR_.'jquery/jquery-ui-1.8.10.custom.min.js',
   _PS_JS_DIR_.'hookLiveEdit.js')
   );
 }
 $language = new Language($cookie->id_lang);
 if ($language->is_rtl)
  Tools::addCSS(_THEME_CSS_DIR_.'rtl.css');
}

Code shown above is for PS v1.4.4.1 so, depending on your 1.4.x version, yours may look a bit different (though I think that this bit of code has not changed much in subsequent 1.4.x versions).

 

2) Add this:

<script type="text/javascript">$('a.iframe').fancybox();</script>

close to the end of your footer.tpl (just above the </body> closing tag would be fine)

 

3) Add this:

class="iframe"

within the <a href="...> tag that contains a link to a CMS page. Do this for all your CMS links.

 

Hope this works for you.

[ijaure]

great Stuff!!

 

how do you create a"wait sign" until the page that fits into that div loads completly?

[BoKr]

sorry I made a double post. here it continues:

 

http://www.prestashop.com/forums/index.php?/topic/45313-including-thickbox-on-all-the-pages-not-only-product-info-page/page__view__findpost__p__1045244

Edited December 20, 2012 by B.Köring (see edit history)

[kewix]

Hello ! 

 

I wanted to do the same thing on PS 1.6, and it's a lot more simple.

 

1) Enable quick_view in theme configurator module (it's mandatory to do that now. The best would be to seperate this from product quick view)

 

2) Change a line in theme/yourtheme/global.js 

function quick_view()
{
	$(document).on('click', '.quick-view:visible', function(e)
	{
		e.preventDefault();
		var url = this.rel; // remove this
                var url = this.rel ? this.rel : this.href; // add this
		if (url.indexOf('?') != -1)
			url += '&';
		else
			url += '?';

3) Now add "quick_view" class on any link you want to open in a modal window

 

You're done !

 

Enjoy

[selectshop.at]

Hello ! 

 

I wanted to do the same thing on PS 1.6, and it's a lot more simple.

 

1) Enable quick_view in theme configurator module (it's mandatory to do that now. The best would be to seperate this from product quick view)

 

2) Change a line in theme/yourtheme/global.js 

function quick_view()
{
	$(document).on('click', '.quick-view:visible', function(e)
	{
		e.preventDefault();
		var url = this.rel; // remove this
                var url = this.rel ? this.rel : this.href; // add this
		if (url.indexOf('?') != -1)
			url += '&';
		else
			url += '?';

3) Now add "quick_view" class on any link you want to open in a modal window

 

You're done !

 

Enjoy

Code change unfortunately not working for me on PS 1.6.0.9 (default bootstrap)

Edited October 19, 2014 by selectshop.at (see edit history)

[wiseprt]

Hi there,

 

I am using a custom popup in my prestashop 1.6.0.14 installation for login. When a user press "Log in" then opening a popup window with the authentication's page forms. My issue is that when the user enter the credentials and then submit, the popup stay open instead of returning to the original page (e.g. homepage) how i can achieve that?

 

This is my code:

 

 

{if !$logged}

    <a class="login" href="{$link->getPageLink('authentication', true)|escape:'html':'UTF-8'}?content_only=1" rel="nofollow" title="{l s='Log in to your customer account' mod='blockuserinfo'}">{l s='Login' mod='blockuserinfo'} / {l s='Register' mod='blockuserinfo'}</a>
<script type="text/javascript">
    window.close();
</script>

<script type="text/javascript">
$(document).on('click', '.login', function(e){
    e.preventDefault();
    var url = this.href;
    if (!!$.prototype.fancybox)
        $.fancybox({
            'padding':  20,
            'width':    980,
            'height':   400,
            'type':     'iframe',
            'href':     url + '',
        });
});
</script>

 

Thank you.

 

Best Regards

[wiseprt]

Anyone guys?

 

Hi there,

 

I am using a custom popup in my prestashop 1.6.0.14 installation for login. When a user press "Log in" then opening a popup window with the authentication's page forms. My issue is that when the user enter the credentials and then submit, the popup stay open instead of returning to the original page (e.g. homepage) how i can achieve that?

 

This is my code:

 

 

Thank you.

 

Best Regards

[somits1]

I only want to open new website with my current website in new page.  I am using prestashop 1.5.6 english. My site is http://www.slmobileprice.com

 

 

Can any one please help me?

 

Thanks,

Somit

[tiendatutorial]

try this