Volver a Proyectos Listado de Artículos

Implementar Shadowbox en Prestashop

Luis Ruiz

Escrito por Luis Ruiz Actualizado el

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]