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 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 sus páginas de productos también es importante. Por ejemplo, para mostrar una imagen de un punto sobre un fondo negro, cuando se hace clic para verla más grande, vamos a llevarlo a cabo y tener un producto más agradable.
Esta función se integra como estándar en Prestashop , pero no en Magento . La solución es utilizar las secuencias de comandos lightbox.js (se puede ver ejemplos en: 2 mesa de luz ).
Un muy buen artículo por Enders Sebastián explica cómo en el wiki de Magento .
Así que voy a ofrecer a continuación una traducción de estas explicaciones, con algunas modificaciones:
Comience por la descarga de la versión comprimida de la colección y descomprimir.
No he probado con una versión más reciente, pero de acuerdo a Sebastián nuevas versiones no son compatibles con la versión del prototipo utilizado por Magento.
Para empezar se supone que está instalado Magento Magento en una carpeta en el servidor.
Copiar archivos en la colección de Magento
En primer lugar crear un directorio en la caja de luz js lightbox.js Magento y copiar el archivo que ha descomprimido en este directorio.
A continuación, copie los archivos en el lightbox.css / skin / frontend / default / default / css / Magento.
Crear un directorio / skin / frontend / default / default / images / caja de luz / Magento en ella y copiar todos los archivos que encuentre en las imágenes lightbox en la carpeta descomprimida.
Cambio de css y js caja de luz
A continuación, abra el archivo que se encuentra en lightbox.css / magento / skin / frontend / default / default / css y reemplazar:
background: url transparente (.. / imágenes o blank.gif) repetir ninguna;
por:
background: url transparente (/ magento / skin / frontend / default / default / images / caja de luz / 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 / caja de luz / prevlabel.gif) dejó el 15% no-repeat;}
y:
# NEXTLINK: hover, # NEXTLINK: visited: hover {background: url (images / .. nextlabel.gif) El derecho de 15% no-repeat;}
por:
# NEXTLINK: hover, # NEXTLINK: visited: hover {background: url (/ magento / skin / frontend / default / default / images / caja de luz / nextlabel.gif) El derecho de 15% no-repeat;}
Ahora abierto: / magento / js / lightbox / lightbox.js, búsqueda y reemplazo:
fileLoadingImage var = "images / loading.gif";
fileBottomNavCloseImage var = "images / closelabel.gif";
por:
fileLoadingImage var = "/ magento / skin / frontend / default / default / images / caja de luz / loading.gif";
fileBottomNavCloseImage var = "/ magento / skin / frontend / default / default / images / caja de luz / closelabel.gif";
Inserte la llamada a los archivos de JavaScript y hojas de estilo en la colección de Magento
Abra 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 <script> mesa de luz / lightbox.js </ script> </ accion>
<accion method="addCss"> <stylesheet> css / lightbox.css </ stylesheet> </ accion>
La inserción de la convocatoria de una caja de luz en el producto
Abra el archivo:
/ Magento / app / design / frontend / default / default / template / catalog / product / view / media.phtml
y reemplazar:
<? Php foreach ($ this-> getGalleryImages () as $ _image):>
<li>
<A href = "#" onclick = "popWin ('<? Php echo $ this-> getGalleryUrl ($ _image)>', 'Galería', 'scrollbars = yes, width = 200, height = 200, resizable = yes ') return false; ">
<? Img src = "<php echo $ this-> helper ('catalog / imagen') -> init ($ this-> obtenerProducto (), 'imagen', $ _image-> GetFile ()) -> tamaño (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 (), 'imagen', $ _image-> GetFile ()) -> tamaño (68 , 68);?> "width =" 68 "height =" 68 "alt =" "/>
</ A>
</ Li>
<Php endforeach;?>
Eso si, ahora haga clic en un producto de Magento que aparecerá en letras grandes sobre un fondo negro con la función de caja de luz.
Para una correcta visualización de fotos que le aconsejará para limitar su tamaño a 600 x 600 píxeles.
- Optimizaciones fotos con Xnview para integrarlos en su tienda en línea Siéntase libre para firmar para arriba para los canales RSS no se pierda ningún paso article.1ère: Preparación de imágenes para la integración en su tienda de comercio electrónico que vimos en nuestro anterior Venta de entradas: Cómo optimizar las fotos para obtener información de productos ...
- Cómo prepararse para crear su tienda en línea con Magento o Prestashop No dude en inscribirse en RSS ¿quieres faltar a la puesta en marcha article.Vous en el comercio electrónico y poner en práctica una tienda en línea, hay dos opciones disponibles usted: Usted ya tiene un negocio y quieres desarrollar tu ...
- Cómo optimizar las fotos para su producto de información de comercio electrónico Uno de 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 ese tamaño de foto para mostrar en miniatura ...
Los artículos sobre el mismo tema:
Palabras clave:
comercio electrónico , de hecho , fondo 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 / product / view / media.phtml
¿Cómo es eso? muchas gracias
En la última versión de Magento ruta de los archivos ha cambiado, alguien tendría una versión actualizada de este tutorial?
muy bien! funciona muy bien! Gracias por este tutorial!
Hola, tengo un tema personal de Magento, ¿me puede dar el procedimiento. Gracias
Para la visualización de imágenes de alta definición en pantalla completa que se adapte a todas las pantallas PhotoSupplements ver.
http://www.photosupplements.com
Hay un sitio de comparación con la caja de luz.