CSS3 en Magento: Listado de productos
08

sep

 

CSS3 en Magento: Listado de productos

CSS3 en Magento: Añadiendo efectos al listado de productos.

 

Mi experiencia en el campo de la consultoría ecommerce me ha hecho darme cuenta que, muchas veces, especialmente cuando el diseño de un nuevo proyecto se realiza sobre una plantilla que elige el cliente y a la cual se le aplican personalizaciones y mejoras, la cantidad de efectos que se incluyen en las mismas llega a ser desorbitado. Ciertos efectos son útiles de cara a mejorar la usabilidad y la experiencia de compra de nuestra tienda online. Si bien, considero que en otros casos sobrecargar nuestro ecommerce con estos efectos puede ser una arma de doble filo, ya que en el peor de los casos pueden suponer en tanto un descenso del rendimiento en nuestra plataforma como actuar como foco de distracción del cliente final haciendo que el proceso de compra se dilate demasiado en el tiempo. Con esto, y dado que esta entrada trata de como incluir efectos en el listado de productos mediante css3 en Magento me gustaría resaltar  la importancia de hacer un uso racional de estas funcionalidades que tanto nos pueden ayudar de cara a la personalización y optimización de nuestro ecommerce.

En este artículo vamos a ver como añadir efectos css3 en Magento. Básicamente ampliaremos la funcionalidad del listado de productos modificando minimamente el template original y añadiendo un poco de css3 en Magento. En una instalación estándar de Magento, al situar el cursor encima de una imagen del listado de productos tenemos la opción de dirigirnos a la ficha principal del producto en cuestión. Modificando mímimamente el template y añadiendo un poco de código css3 en Magento ampliaremos la funcionalidad estándar mejorando la experiencia de compra de nuestros clientes.

He realizado el siguiente video introductivo para que se pueda observar claramente la diferencia de una instalación base de Magento antes de modificar la estructura del listado y sin añadir ningún efecto css3 en Magento y el funcionamiento tras aplicar los cambios de estructura y añadir los efectos css3 en Magento.

 

Para conseguir el funcionamiento mostrado dividiremos el artículos en los siguientes puntos:

1- Modificación del template original

2- Inserción del código CSS3 en Magento

1- Modificación del template original.

Para que sea mas sencilla la comprensión del artículo os dejo un zip que contiene tanto el fichero list.phtml original de Magento y el fichero list.phtml con las modificaciones de estructura que hemos empleado para añadir los efectos css3 en Magento:

Ficheros listado

Como observareis al abrir el archivo nos hemos centrado únicamente en la vista modo Grid. No obstante, comprendida la funcionalidad modificar la estructura y añadir los efectos css3 en Magento, añadirlos en la vista en modo List es un proceso muy parecido.

Para nuestro ejemplo vamos a emplear el template Modern, template presente en cualquier instalación base de Magento. Lo primero que debemos realizar es la modificación de la estructura del fichero list.phtml. Este fichero, como su nombre indica, es el encargado de presentar la información de los productos en el listado. Sin más, nos dirigimos a la ruta “app/design/frontend/default/modern/template/catalog/product/list.phtml” y abrimos el archivo.

La estructura básica que emplearemos para trabajar es:

<div class=”item-container img-thumbnail”>: Contenedor principal de la ficha del producto

<div class=”item-flipper”>: Contenedor con la información del producto sin pasar el cursor. Este div contiene únicamente la imagen del producto

<div class=”item-back”>: Contenedor con la información del producto tras situar el cursor encima de la imagen. este div contendrá el nombre del producto, la referencia del producto, la descripción corta y el enlace a mas detalles.

Aquí la porción del código del fichero list.phtml modificado que nos interesa y sobre el que emplearemos los efectos css3 en Magento. Los comentarios incluidos ayudan a entender mejor cada sección:

<!-- AQUÍ EL LISTADO DE PRODUCTOS -->
 <div class="item-container img-thumbnail">
 <div class="item-flipper"> <!-- Voy a rotar la imagen -->
 <div class="item-front"> <!-- Contenido del Front: La imagen -->

 <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(170); ?>" width="170" height="170" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
 </div>
 <div class="item-back"> <!-- Contenido del back: Fondo base con información -->
 <!-- Contenido del Back -->
 <div class="product-info">
 <!-- Nombre del producto -->
 <div class="h4"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a>
 </div>
 <div class="h4 red"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getSku(), null, true) ?>"><?php echo 'Ref: '.$_helper->productAttribute($_product, $_product->getSku(), 'sku') ?></a>
 </div>
 <!-- descripción corta del producto -->
 <!--Limitamos la descripción corta para dar cabida al botón detalles-->
 <div class="short-description"><?php $short_description = $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
 <?php echo Mage::helper('core/string')->truncate($short_description, '80'); ?>
 </div>
 <!-- info --><!-- Botóna detalles del producto -->
 <p><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="btn btn-block btn-success"><?php echo $this->__('Product Details')?></a></p>
 </div>
 </div> <!-- item-back -->
 </div> <!-- item-flipper -->
 </div> <!-- item-container img-thumbnail --> 

2- Inserción del código CSS3 en Magento.

Una vez entendida la nueva estructura del listado de productos vamos con las modificaciones para añadir el css3 en Magento. Nuestra intención, es hacer mediante la introducción del css3 en Magento que cuando un usuario sitúe el cursor encima de una de las imágenes del listado de productos  esta rote 180º, se difumine,  para hacer que el texto que vamos a añadir en el espacio de la imagen sea legible y muestre la información presente en el div item-back que hemos habilitado. Para añadir este css3 en Magento nos dirigimos al fichero styles.css de nuestro tema situado en: “skin/frontend/default/modern/css/style.css” y añadimos el siguiente código sobre el que también he añadido comentarios para su comprensión.

</pre>
<pre>/*Añadimos código css3 en Magento fichero style.css del tema modern*/</pre>
<pre><pre>.item-container {
 -webkit-perspective:300px;
 -moz-perspective:300px;
 perspective:300px; /*https://developer.mozilla.org/es/docs/Web/CSS/perspective*/
 margin:0 auto;
 height:170px; /*LA ALTURA DE LA IMAGEN 170*/
 margin-bottom:10px;
 width:100%;
}
.products-grid li .item-container:hover .item-flipper {
 /*Aplicamos la transformación rotate sobre el eje y*/
 -moz-transform:rotateY(180deg);
 -webkit-transform:rotateY(180deg);
 transform:rotateY(180deg);
}
.products-grid li .item-container:hover .item-flipper .item-front{
 /*Tras rotar la imagen quiero que esta siga siendo visible. Sobre ella mostraré el resto de la información*/
 -webkit-backface-visibility:visible;
 -moz-backface-visibility:visible;
 backface-visibility:visible;
}
.products-grid li .item-container:hover .item-flipper .item-front a img{
 /* Tras rotar la imagen quiero que esta siga siendo visible pero le aplico una opacidad para permitir que la información mostrada sea legible*/
 opacity: 0.1;
 filter: alpha(opacity=40); /* For IE8 and earlier */
}
.products-grid li .item-front, .products-grid li .item-back {
 /* La información a mostrar en le back inicialmente oculta */
 height:140px;
 width:140px;
 -webkit-backface-visibility:hidden;
 -moz-backface-visibility:hidden;
 backface-visibility:hidden;
 position:absolute;
 top:0;
 left:0;
 background:none;
}
/*PROPIEDADES DE LA INFO A MOSTRAR DEL BACK*/
.products-grid li .item-back {
 -webkit-transform:rotateY(180deg);
 -moz-transform:rotateY(180deg);
 transform:rotateY(180deg);
 /*background:none repeat scroll 0 0 #000;*/
 color:#FFF;
 padding:15px;
}
.products-grid li .item-back .product-info {
 height:170px;
 font-weight: bold;
}
.products-grid li .item-back .product-info .h4 a {
 color:#FA9221;
 margin-bottom:5px;
 display:block;
 font-size: 13px;
 line-height: 14px;
 text-decoration:none;
}
.products-grid li .item-back .product-info .red a{color: red;}
.products-grid li .item-back .product-info .short-description {
 font-size:12px;
 line-height: 16px;
 color: #000;
}
/* FIN PROPIEDADES DE LA INFO A MOSTRAR DEL BACK*/

.products-grid li .item-flipper {
 -webkit-transition:.6s;
 -moz-transition:.6s;
 -ms-transition:.6s;
 transition:.6s;
 -moz-transform-style:preserve-3d;
 -webkit-transform-style:preserve-3d;
 transform-style:preserve-3d;
 position:relative;
}</pre>
<pre>/*Fin código css3 en Magento fichero style.css del tema modern*/</pre>
<pre>

Algunos enlaces de utilidad para la mejor compresión del css3 en Magento y profundizar en el campo de las transformaciones 3d  son:

Propiedad perspective

Transforms 3d

Espero que esta entrada os sirva como ayuda  a  la hora de añadir personalizaciones mediante css3 en Magento a las diferentes secciones de vuestro ecommerce.

Resumen
Nombre
CSS3 en Magento
Autor
Descripción
CSS3 en Magento: Listado de productos. Aprende a usar CSS3 en Magento. Crea efectos sorprendentes mediante las funcionalidades que te ofrece CSS3 en Magento
The following two tabs change content below.
Especialista en Magento y servicios ecommerce: Consultoría ecommerce, Optimización Magento, Desarrollo Magento, Integración Magento ERP y Posicionamiento SEO Magento.


2 Comments

  • Toni

    20. sep, 2014

    Fantástico artículo Jose Vicente!
    Muy buena explicación de como podemos personalizar el listado de productos de Magento. Tu entrada me ha sido de mucha utilidad. Gracias!

Deja un comentario
 

Tu email no será publicado. Campos obligatorios . *