Implementar Shadowbox en Prestashop
Escrito por Luis Ruiz Actualizado el
Vamos a realizar la implementación sobre el tema que trae Prestashop por defecto, situado en ‘themes/prestashop’
- Nos vamos a ‘http://www.shadowbox-js.com/’ y nos descargamos los ficheros con la configuración según nuestras necesidades.
- Una vez bajado, dejamos los ficheros en el directorio ‘js/jquery’ donde hemos instalado la tienda.
- Abrimos el fichero ‘header.tpl’ y agregamos
[javascript]
<link href=»{$content_dir}js/jquery/shadowbox-3.0.3/shadowbox.css» rel=»stylesheet» type=»text/css» media=»all» />
<script type=»text/javascript» src=»{$content_dir}js/jquery/shadowbox-3.0.3/shadowbox.js»></script>
<script type=»text/javascript»>window.onload = Shadowbox.init;</script>
[/javascript] - Después del siguiente código en la línea (31)
[javascript]
<script type=»text/javascript» src=»{$content_dir}js/jquery/jquery.hotkeys-0.7.8-packed.js»></script>
[/javascript] - Abrimos el fichero «product.tpl» del tema y comentamos la línea (12):
[javascript]var jqZoomEnabled = {if $jqZoomEnabled}true{else}false{/if};[/javascript] - Reemplazamos la línea (102):
[javascript]<img src=»{$link->getImageLink($product->link_rewrite, $cover.id_image, ‘large’)}» {if $jqZoomEnabled}class=»jqzoom» alt=»{$link->getImageLink($product->link_rewrite, $cover.id_image, ‘thickbox’)}»{else} title=»{$product->name|escape:’htmlall’:’UTF-8′}» alt=»{$product->name|escape:’htmlall’:’UTF-8′}» {/if} id=»bigpic»/>[/javascript]Por:
[javascript]<a href=»{$link->getImageLink($product->link_rewrite, $cover.id_image, ‘large’)}» rel=»shadowbox[galerieproduit]»><img src=»{$link->getImageLink($product->link_rewrite, $cover.id_image, ‘large’)}» title=»{$product->name|escape:’htmlall’:’UTF-8′}» alt=»{$product->name|escape:’htmlall’:’UTF-8′}» /></a>[/javascript] - Reemplazamos la línea (ligne 116) :
[javascript]<li id=»thumbnail_{$image.id_image}»>
<a href=»{$link->getImageLink($product->link_rewrite, $imageIds, ‘thickbox’)}» rel=»other-views» title=»{$image.legend|htmlspecialchars}»>
<img id=»thumb_{$image.id_image}» src=»{$link->getImageLink($product->link_rewrite, $imageIds, ‘medium’)}» alt=»{$image.legend|htmlspecialchars}» height=»{$mediumSize.height}» width=»{$mediumSize.width}» />
</a>
</li>[/javascript]Por :
[javascript]<li id=»thumbnail_{$image.id_image}»>
<a href=»{$link->getImageLink($product->link_rewrite, $imageIds, ‘thickbox’)}» rel=»shadowbox[galerieproduit]» title=»{$image.legend|htmlspecialchars}»>
<img id=»thumb_{$image.id_image}» rel=»shadowbox[nomdelagalerie]» src=»{$link->getImageLink($product->link_rewrite, $imageIds, ‘medium’)}» alt=»{$image.legend|htmlspecialchars}» height=»{$mediumSize.height}» width=»{$mediumSize.width}» />
</a>
</li>[/javascript] - Abrimos el fichero «product.php» , situado en el raíz de la tienda y comentamos la línea (79):
[php]$css_files = array(
__PS_BASE_URI__.’css/thickbox.css’ => ‘screen’
);[/php] - Comentamos también la linea (85):
[php]__PS_BASE_URI__.’js/jquery/thickbox-modified.js’,[/php] - Comentamos la línea (93)
[php]/* jqZoom */
$jqZoomEnabled = (Configuration::get(‘PS_DISPLAY_JQZOOM’) == 1);
if ($jqZoomEnabled)
{
$js_files[] = __PS_BASE_URI__.’js/jquery/jquery.jqzoom.js’;
$css_files[__PS_BASE_URI__.’css/jqzoom.css’] = ‘screen’;
}[/php]
