ShadowBox es una herramienta realmente interesante para nuestra tienda. Básicamente, es una herramienta para mejorar el diseño de nuestra tienda al mostrar las fotos de nuestros productos. Podéis ver un ejemplo aquí. Simplemente, es el típico efecto de sombra para mostrar una imagen:
Pasos a seguir para instalar este efecto en nuestra tienda Magento:
Paso 1
Nos descargamos los archivos necesarios. Podéis hacerlo en la página oficial (la segunda opción, archivos necesarios) o directamente aquí.
Paso 2
Suponiendo que tenemos instalado Magento en el directorio raíz:
- creamos una nueva carpeta dentro del directorio js llamada “sb”
yourdomain.com/js/sb
- dentro de la nueva carpeta, subimos las subcarpetas /build, /images y /src. Quedará de la siguiente manera:
yourdomain.com/js/sb/build
yourdomain.com/js/sb/images
yourdomain.com/js/sb/src
Paso 3
Ahora abrimos la carpeta CSS del template que estemos utilizando (este tutorial supone que estás utilizando el default) y subimos el archivo shadowbox.css (este archivo lo encontramos en /build/css/ del .zip original que te ha descargado previamente) en esta carpeta. Quedará de la siguiente manera:
yourdomain.com/skin/frontend/default/default/css/shadowbox.css
Paso 4
En este mismo template, en la carpeta /images creamos un nuevo directorio llamado “sb” y subimos las imágenes de Shadowbox, quedando de la siguiente manera:
yourdomain.com/skin/frontend/default/default/images/sb/loading.gif
yourdomain.com/skin/frontend/default/default/images/sb/loading-light.gif
yourdomain.com/skin/frontend/default/default/images/sb/overlay-85.png
Paso 5
Ahora debemos modificar el archivo Shadobox.js que encontrarás en:
yourdomain.com/js/sb/shadowbox.js
Alrededor de la linea 81, remplazamos:
loadingImage: ‘images/loading.gif’,
por:
loadingImage: SKIN_URL + ‘images/sb/loading.gif’,
Alrededor de la linea 131, remplazamos:
overlayBgImage: ‘images/sb/overlay-85.png’,
por:
overlayBgImage: SKIN_URL + ‘images/sb/overlay-85.png’,
Graba y cierra.
Paso 6
- Ahora vamos a modificar el template de Magento para usar Shadowbox. Abre:
yourdomain.com/app/design/frontend/default/default/layout/page.xml
Alrededor de la linea 42, busca:
<action method=”addJs”><script>mage/cookies.js</script></action>
e inserta esto a continuación:
<action method=”addJs”><script>sb/src/js/lib/yui-utilities.js</script></action>
<action method=”addJs”><script>sb/src/js/adapter/shadowbox-prototype.js</script></action>
<action method=”addJs”><script>sb/src/js/shadowbox.js</script></action>
Alrededor de la linea 49, busca:
css/menu.css
e inserta esto a continuación:
css/shadowbox.css
Graba y cierra.
- Ahora abrimos: yourdomain.com/app/design/frontend/default/default/template/catalog/product/view/media.phtml
Alrededor de la linea 51, reemplazamos:
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a href=“<?php echo $this->helper(’catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile()); ?>” title=“<?php echo $_product->getName();?>”><img src=“<?php echo $this->helper(’catalog/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(68, 68); ?>” width=“68″ height=“68″ alt=“”/></a>
</li>
<?php endforeach; ?>
por:
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a href=“<?php echo $this->helper(’catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile()); ?>” rel=“shadowbox[rotation]“ title=“<?php echo $_product->getName();?>”><img src=“<?php echo $this->helper(’catalog/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(68, 68); ?>” width=“68″ height=“68″ alt=“”/></a>
</li>
<?php endforeach; ?>
Graba y cierra.
- Ahora abrimos: yourdomain.com/app/design/frontend/default/default/template/page/html/head.phtml
Reemplazamos:
<script type=“text/javascript”>
var BLANK_URL = ‘<?php echo $this->helper(’core/js‘)->getJsUrl(’blank.html‘) ?>’;
var BLANK_IMG = ‘<?php echo $this->helper(’core/js‘)->getJsUrl(’spacer.gif‘) ?>’;
</script>
por:
<script type=“text/javascript”>
var BLANK_URL = ‘<?php echo $this->helper(’core/js‘)->getJsUrl(’blank.html‘) ?>’;
var BLANK_IMG = ‘<?php echo $this->helper(’core/js‘)->getJsUrl(’spacer.gif‘) ?>’;
var SKIN_URL = ‘<?php echo $this->helper(’core/js‘)->getJsSkinUrl(”) ?>’;
</script>
<!– Added Shadowbox –>
<script type=“text/javascript”>
window.onload = function(){ Shadowbox.init(); };
</script>
<!– end Added Shadowbox –>
Graba y cierra.
¡¡Y a disfrutar de una herramienta que será las delicias de nuestros visitantes!!
Podéis consultar el tutorial original aquí. Muchas gracias Chad Coleman.
