[SOLVED] add fancybox in product page

[sooroos]

Hi,

 

i have added a link in product page, something like:

<a href="{$link->getCMSLink('1', 'Shiping')}">Shiping Costs</a>

 

can somebody guide me how to open this link as fancybox?

Edited April 25, 2014 by sooroos (see edit history)

[vekia]

add class="iframe" to your link (<a class="iframe">)

 

+ add this script

script type="text/javascript">
	$('a.iframe').fancybox({
		'type' : 'iframe',
		'width':600,
		'height':600
	});
</script>

[sooroos]

Thank You Milos!

 

One more question though:

how can i make it to capture only the content of the cms link (like terms and condition in order-carrier) meaning without header and footer etc. ?

Edited April 23, 2014 by sooroos (see edit history)

[sooroos]

I have this code added to ProductController.php:

protected function _assignIShipping()
{
 
$this->link_shipping = $this->context->link->getCMSLink('1', 'shipping');
if (!strpos($this->link_shipping, '?'))
$this->link_shipping .= '?content_only=1';
else
$this->link_shipping .= '&content_only=1';
 
$this->context->smarty->assign(array(
'link_shipping' => $this->link_shipping
));
}

 

and then added to product.tpl:

<a href="{$link_shipping|escape:'html':'UTF-8'}" class="iframe" rel="nofollow">Versandkosten</a>

 

but it says "The requested content cannot be loaded.

Please try again later."

 

 

[vekia]

hello

and if you check link in front office, it contains "content_only=1" variable?

[sooroos]

do i need to turn off url rewriting off in order to check this? because i dont see it for Terms either

[vekia]

so let's try something

<a href="{$link_shipping|escape:'html':'UTF-8'}?content_only=1" class="iframe" rel="nofollow">Versandkosten</a>

can you use this code (for test purposes only)

[vekia]

i tried it on my own and it works well

 

even with / without friendly urls active

[sooroos]

adding "?content_only=1" works like a charm, and moreover i dont need to edit the controller.

Thanks again vekia

[datasphere]

I am wondering can I do the same but for adding an aditional html page loading in fancybox

besides products images on the product display page ?

Do you have maybe some commercial module @ your shop for acheiving this Vekia?

 

to clarify large  produc display on the left

below two or three product images and a last one link to the fancy box

I have a code for older PS versions but dont know how and where to implement it on the new PS 1.6

[vekia]

I am wondering can I do the same but for adding an aditional html page loading in fancybox

besides products images on the product display page ?

module allows to use html code in popup.

if you want to add additional product image, it will be necessary to add it to to the product images,

then with jquery you will be able to add jquery action to this image to popup created popupblock.

its possible to achieve, but with little knowhow

 

 

 

 

 

to clarify large  produc display on the left

below two or three product images and a last one link to the fancy box

I have a code for older PS versions but dont know how and where to implement it on the new PS 1.6

[amerigeau]

 

add class="iframe" to your link (<a class="iframe">)

 

+ add this script

script type="text/javascript">
	$('a.iframe').fancybox({
		'type' : 'iframe',
		'width':600,
		'height':600
	});
</script>

 

This work perfectly on PrestaShop 1.6.0.5

Thanks

[uddhava]

// File: product.tpl

// Line: 225 (depends on desired location)

// This code will display a translatable link that will display a fancybox popup.

// The content for this fancybox is a CMS page that is displayed as content-only.

// Change the CMS ID with the correct cms page.

// Change the width&height of the fancybox with javascript and the size of the cms page.

 

<!-- 108Bits -->

    {if !$logged}

     <p><a href="{$link->getCMSLink('8')}?content_only=1" class="iframe" rel="nofollow">

     {l s='Shipping Terms'}</a></p>

    {/if}

<!-- END 108Bits -->

 

// Add this at the end of the file (after {/if} )

<script type="text/javascript">

    $('a.iframe').fancybox({

        'type' : 'iframe',

        'width':500,

        'height':900

    });

</script>

[misu3108]

Question:

 

I want to open  a popup (iframe fancybox) when I click on the HTML content at the top on either of the images. I'm using PS 1.6.0.9.

 

I've tried to add the class iframe to the hook.tpl file in /modules/themeconfigurator/views/templates/hook/hook.tpl and added the script at the end but with no luck. ANyone has any suggestions?

{*
* 2007-2014 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2014 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
{if isset($htmlitems) && $htmlitems}
<div id="htmlcontent_{$hook|escape:'htmlall':'UTF-8'}">
	<ul class="htmlcontent-home clearfix row">
		{foreach name=items from=$htmlitems item=hItem}
			{if $hook == 'left' || $hook == 'right'}
				<li class="htmlcontent-item-{$smarty.foreach.items.iteration|escape:'htmlall':'UTF-8'} col-xs-12">
			{else}
				<li class="htmlcontent-item-{$smarty.foreach.items.iteration|escape:'htmlall':'UTF-8'} col-xs-4">
			{/if}
					{if $hItem.url}
						<a href="{$hItem.url|escape:'htmlall':'UTF-8'}" class="item-link iframe"{if $hItem.target == 1} onclick="return !window.open(this.href);"{/if} title="{$hItem.title|escape:'htmlall':'UTF-8'}">
					{/if}
						{if $hItem.image}
							<img src="{$link->getMediaLink("`$module_dir`img/`$hItem.image`")}" class="item-img iframe {if $hook == 'left' || $hook == 'right'}img-responsive{/if}" title="{$hItem.title|escape:'htmlall':'UTF-8'}" alt="{$hItem.title|escape:'htmlall':'UTF-8'}" width="{if $hItem.image_w}{$hItem.image_w|intval}{else}100%{/if}" height="{if $hItem.image_h}{$hItem.image_h|intval}{else}100%{/if}"/>
						{/if}
						{if $hItem.title && $hItem.title_use == 1}
							<h3 class="item-title">{$hItem.title|escape:'htmlall':'UTF-8'}</h3>
						{/if}
						{if $hItem.html}
							<div class="item-html">
								{$hItem.html} <i class="icon-double-angle-right"></i>
							</div>
						{/if}
					{if $hItem.url}
						</a>
					{/if}
				</li>
		{/foreach}
	</ul>
</div>
{/if}
<script type="text/javascript">
	$('a.iframe').fancybox({
		'type' : 'iframe',
		'width':600,
		'height':600
	});
</script>

Thanks.

 

Edited November 26, 2014 by misu3108 (see edit history)