En el diseño de su sitio web de negocios en línea , el aspecto visual de su sitio es muy importante. Esta es la primera impresión que hará que usted quiere o no su posible comprador para continuar en su sitio o para ir a su competidor.
Por lo tanto, debe tener en cuenta: calidad de imagen, visualización de la velocidad, la navegación fácil a través de su sitio ... pero la presentación de imágenes de las hojas de su producto también es importante. Por ejemplo, para mostrar una imagen de un punto sobre un fondo negro, al hacer clic sobre ella para ampliarla, puede hacer y tener un producto más agradable.
Esta función está integrada de serie en Prestashop , pero no en Magento . La solución es utilizar el script de lightbox.js (se puede ver ejemplos en: Lightbox 2 ).
Un muy buen artículo por Enders Sebastián explica cómo en el wiki de Magento .
Así que te voy a dar a continuación una traducción de estas explicaciones, con algunas modificaciones:
Comience por descargar la versión comprimida de la mesa de luz y descansar.
No he probado con una versión más reciente, pero de acuerdo a Sebastian nuevas versiones no son compatibles con la versión del prototipo utilizado por Magento.
Para empezar se supone que Magento Magento es instalado en una carpeta en el servidor.
Copia de archivos en Magento lightbox
Primero cree un directorio en la mesa de luz js lightbox.js Magento y copiar el archivo que acaba de descomprimir en este directorio.
A continuación, copie el archivo en el lightbox.css / skin / frontend / default / default / css / Magento.
Cree un directorio / skin / frontend / default / default / images / lightbox / Magento y copiar todos los archivos de esa carpeta se encuentran las imágenes de la carpeta descomprimida lightbox.
Cambio de css y js lightbox
A continuación, abra el archivo que está en lightbox.css / magento / skin / frontend / default / default / css y reemplazar:
background: url transparente (.. / images / blank.gif) no-repeat;
por:
background: url transparente (/ magento / skin / frontend / default / default / images / lightbox / blank.gif) no-repeat
y:
# PrevLink: hover, # prevLink: visited: hover {background: url (.. / images / prevlabel.gif) dejó el 15% no-repeat;}
por:
# PrevLink: hover, # prevLink: visited: hover {background: url (/ magento / skin / frontend / default / default / images / lightbox / prevlabel.gif) dejó el 15% no-repeat;}
y:
# Nextlink: hover, # Nextlink: visited: hover {background: url (.. / images / nextlabel.gif) el derecho del 15% no-repeat;}
por:
# Nextlink: hover, # Nextlink: visited: hover {background: url (/ magento / skin / frontend / default / default / images / lightbox / nextlabel.gif) el derecho del 15% no-repeat;}
A continuación, abra: / magento / js / lightbox / lightbox.js, buscar y reemplazar:
fileLoadingImage var = "images / loading.gif";
fileBottomNavCloseImage var = "images / closelabel.gif";
por:
fileLoadingImage var = "/ magento / skin / frontend / default / default / images / lightbox / loading.gif";
fileBottomNavCloseImage var = "/ magento / skin / frontend / default / default / images / lightbox / closelabel.gif";
Insertar una llamada a los archivos JavaScript y hojas de estilo en Magento lightbox
Abrir el archivo: / magento / app / design / frontend / default / default / layout / page.xml e insertar entre:
= “head” as= “head” > <block "page/html_head" name = type = "head" as= "head">
....
</ Block>
las dos líneas siguientes:
method="addJs"> <accion lightbox <script> / lightbox.js </ script> </ accion>
<accion method="addCss"> <stylesheet> css / lightbox.css </ stylesheet> </ accion>
Inserción de la convocatoria de una caja de luz en el producto
Abrir el archivo:
/ Magento / app / design / frontend / default / default / template / catalog / producto / view / media.phtml
y reemplazar:
<? Php foreach ($ this-> getGalleryImages () as $ _image):>
<li>
<A href = "#" onclick = "popWin ('<? Php echo $ this-> getGalleryUrl ($ _image )?>'," Galería "," barras de desplazamiento = yes, width = 200, height = 200, resizable = yes ') return false; ">
<? Img src = "<php echo $ this-> helper ('catalog / imagen') -> init ($ this-> obtenerProducto (), 'miniatura', $ _image-> getFile cambiar el tamaño de ())-> (68 , 68);?> "alt =" <php echo $ this-> htmlEscape ($ _image-> getLabel ())?> "title =" <php echo $ this-> htmlEscape ($ _image-> getLabel ( )) ?>"/>
</ A>
</ Li>
<? Php endforeach;?>
por:
<? Php foreach ($ this-> getGalleryImages () as $ _image):>
<li>
<A href = "<php echo $ this-> helper ('catalog / imagen') -> init ($ this-> obtenerProducto (), 'la imagen', $ _image-> getFile ());?>" Rel = "lightbox [rotación]" title = "<? php echo $ _product-> getName ();?>">
<? Img src = "<php echo $ this-> helper ('catalog / imagen') -> init ($ this-> obtenerProducto (), 'miniatura', $ _image-> getFile cambiar el tamaño de ())-> (68 , 68);?> "width =" 68 "height =" 68 "alt =""/>
</ A>
</ Li>
<? Php endforeach;?>
Que si ahora haces un click en un producto de Magento aparecerá grandes sobre un fondo negro con la luz pública.
Para una correcta visualización de fotos que le recomendamos para limitar su tamaño a 600 x 600 píxeles.
- Fotos con Xnview optimizaciones para integrarlos en su tienda en línea Por favor regístrese para canales RSS no se pierda el paso article.1ère: Preparación de fotos para incorporar en su tienda de comercio electrónico que vimos en nuestro anterior Venta de entradas: Cómo optimizar las hojas de fotos de los productos ...
- ¿Cómo prepararse para la creación de su tienda online con Magento o Prestashop Siéntase libre de firmar para arriba para RSS para no perderse ningún article.Vous quieren participar en el comercio electrónico y desarrollar una tienda online, hay dos posibilidades usted: usted ya tiene un negocio y quieres desarrollar tu ...
- Cómo optimizar las fotos de su producto de información de comercio electrónico Una de las tedioso trabajo en el diseño de un sitio de comercio electrónico es que para la misma foto de un producto que necesita para cambiar su tamaño y la disminución de tamaños diferentes. El software entonces utiliza este tamaño de imagen para la visualización de miniaturas ...
Artículos sobre este tema:
Palabras clave:
e-commerce , de hecho , negro , caja de luz , Magento , imágenes
en la versión 1.5.1.0 que ya no existe: / magento / app / design / frontend / default / default / layout / page.xml
y no podía: / magento / app / design / frontend / default / default / template / catalog / producto / view / media.phtml
¿Cómo es eso? gracias
En la última versión de los archivos de Magento ruta ha cambiado, alguien tiene una versión actualizada de este tutorial?
genial! funciona muy bien! Gracias por este tutorial!
Hola, tengo un tema personal de magento, me puede decir qué hacer. Gracias
Para la visualización de imágenes de alta definición a pantalla completa que se adapte a todas las pantallas PhotoSupplements ver.
http://www.photosupplements.com
No es un sitio de comparación con la caja de luz.