Implementar Shadowbox en Prestashop

Pasos a seguir para modificar el lightbox que trae por defecto Prestashop, en este caso, implementamos Shadowbox.

Vamos a realizar la implementación sobre el tema que trae Prestashop por defecto, situado en ‘themes/prestashop’

1. Nos vamos a ‘http://www.shadowbox-js.com/’ y nos descargamos los ficheros con la configuración según nuestras necesidades.
2. Una vez bajado, dejamos los ficheros en el directorio ‘js/jquery’ donde hemos instalado la tienda.
3. 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]
4. 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]
5. Abrimos el fichero «product.tpl» del tema y comentamos la línea (12):
   [javascript]var jqZoomEnabled = {if $jqZoomEnabled}true{else}false{/if};[/javascript]
6. 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]

7. 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]

8. 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]
9. Comentamos también la linea (85):
   [php]__PS_BASE_URI__.’js/jquery/thickbox-modified.js’,[/php]
10. 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]