Open a link on product page in a fancybox

[DARKF3D3]

I added a link to the products page of my website:

<a class="iframe" href="http:www.website.com/shipping/?content_only=1">Shipping cost</a>

The problem it's that it doesn't open it in a fancybox.

 

I lookedat the "ProductController.php" but I don't find what to modify to let this link opens in a fancybox instead of in a new page.

 

Someone know how can I do that?

[sandipchandela]

have you included javascript in productController.php ??

 

see method in file public function setMedia() 

[DARKF3D3]

Hi,

in ProductController I have this code this setMedia funcion:

	public function setMedia()
	{
		parent::setMedia();
		if (count($this->errors))
			return ;

		if (!$this->useMobileTheme())
		{
			$this->addCSS(_THEME_CSS_DIR_.'product.css');
			$this->addCSS(_THEME_CSS_DIR_.'print.css', 'print');
			$this->addJqueryPlugin(array('fancybox', 'idTabs', 'scrollTo', 'serialScroll', 'bxslider'));
			$this->addJS(array(
				_THEME_JS_DIR_.'tools.js',  // retro compat themes 1.5
				_THEME_JS_DIR_.'product.js'
			));
		}
		else
		{
			$this->addJqueryPlugin(array('scrollTo', 'serialScroll'));
			$this->addJS(array(
				_THEME_JS_DIR_.'tools.js',  // retro compat themes 1.5
				_THEME_MOBILE_JS_DIR_.'product.js',
				_THEME_MOBILE_JS_DIR_.'jquery.touch-gallery.js'
			));
		}

		if (Configuration::get('PS_DISPLAY_JQZOOM') == 1)
			$this->addJqueryPlugin('jqzoom');
	} 

This code "$this->addJqueryPlugin(array('fancybox'" shouldn't let iframe works on product pages?

[bellini13]

all you did was ensure that the fancybox plugin gets loaded into the browser.  you still need to add javascript code that will apply fancybox to your anchor (<a>)

[DARKF3D3]

Where? Into the product.js file?

Which is one js file that has the code that i have to copy?

[vekia]

you will have to use something like

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

[DARKF3D3]

There's not a file where i can take the code used for other pages? Because I notice that on some other page i can open link in fancybox simply adding the class, but not on product pages.

[sandipchandela]

<a class="various" data-fancybox-type="iframe" href="http://www.website.com/shipping/?content_only=1">Iframe</a>

in product.tpl or your selection file

 

href tag value should be not http: 

it should be followed protocols rules.

Correct href tag value should be : http://www.website.com

{literal}
<script>
$(document).ready(function() {
	$(".various").fancybox({
		maxWidth	: 800,
		maxHeight	: 600,
		fitToView	: false,
		width		: '70%',
		height		: '70%',
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});	
</script>
{/literal}

Edited January 26, 2015 by sandipchandela (see edit history)

[vekia]

There's not a file where i can take the code used for other pages? Because I notice that on some other page i can open link in fancybox simply adding the class, but not on product pages.

 

this is why in product.js file you have to use 

	$('a.iframe').fancybox({
		'type' : 'iframe',
		'width':600,
		'height':600
	});