Magento para diseñadores: parte 6

() translation by (you can also view the original English article)

Magento es una plataforma de comercio electrónico increíblemente poderosa. En esta miniserie, aprenderemos cómo comenzar con la plataforma, conocer las terminologías, configurar una tienda y todos los aspectos relacionados con ella, y finalmente aprender a personalizarla.

En esta sexta parte, crearemos una de las funciones más solicitadas por el lector: obtener un control deslizante de producto destacado en la página de inicio. ¿Emocionado? ¡Empecemos!

La serie completa

Un resumen rápido

En la última parte, construimos la página de información del producto y echamos un buen vistazo a cómo se extraen y se muestran los datos en un tema típico de Magento.

También echamos un vistazo a los diversos métodos básicos que utiliza nuestro tema para obtener diversos medios y datos sobre nuestro producto. Espero que recuerdes al menos una pequeña porción de esa información porque la usaremos nuevamente hoy.

¿Qué estamos construyendo hoy?

Hoy, construiremos la página de inicio más importante. Como siempre, lo mantendré lo más simple posible y omitiré cualquier característica extraña. Las diferentes tiendas tienen diferentes contenidos en sus páginas de inicio. Una de las características más populares y definitivamente una de las más solicitadas es la visualización de un control deslizante de contenido con JavaScript que presenta productos destacados especiales. Sé que suena interesante y te mueres por empezar. ¡Empecemos!

Objetivos para la página

Al igual que con nuestras otras páginas, nuestros objetivos para esta página específica son relativamente simples. Queremos un control deslizante simple que muestra productos específicos en un deslizador ordenado. Por lo tanto, he elaborado una breve lista de elementos que creo necesita:

Control deslizante de JavaScript en la página de inicio
El control deslizante necesita una imagen pegadiza a la izquierda para atraer la atención sobre el producto
En la parte derecha, incluiremos el nombre del producto, el precio y una breve descripción
Una mini navegación dentro del control deslizante para cambiar entre diferentes diapositivas
Y lo más importante de todo, no confíes en una extensión para obtener los elementos destacados

Eso es. Quiero mantenerlo lo más simple posible y, por lo tanto, opté por no sobre-complicarlo. Por supuesto, necesitaremos trabajar tanto con la parte front-end como con la back-end para lograr todos nuestros objetivos.

El aspecto básico

La página básicamente tiene que verse así:

Paso 1 - El HTML

Primero veremos el HTML solamente para la parte del contenido. Supongo que dominas bastante bien el HTML y el CSS, así que saltearé las partes bastante importantes.


<div id="home-slideshow">

    <div class="slide">

        <div class="product-image">
            <a href="#" title="Zonda F">
                <img src="images/zonda.jpg" alt="Zonda F" title="Zonda F" />
            </a>
        </div>

        <div class="product-details">
            <h2>Zonda F</h2>
            <div class="price">700,000.00 </div>
            <p>The Pagani Zonda is a mid-engined sports car produced by Pagani in Italy. </p>
        </div>

    </div>

<!-- More slides for successive products -->

</div>

En este punto, todo esto es bastante básico. home-slideshow es el contenedor con el que estamos envolviendo la presentación de diapositivas completa y se pasará al JavaScript responsable del control deslizante.

Cada diapositiva está envuelta por una div llamada slide. En el interior tenemos dos contenedores flotantes: uno para la imagen y el segundo para la información sobre el producto en sí.

Eso es todo. Podemos pasar a la parte de diseño ahora.

Paso 2 - El CSS


/* Home page */

.slide {
    clear: both;
    overflow: auto;
    padding: 10px;
    width: 898px;
    border: 1px solid #E1E1E1;
    background: #F6F6F6;
}

.product-image {
    float: left;
    width: 650px;
    padding: 10px;
    border: 1px solid #E1E1E1;
    background: #FAFAFA;
  
}

.product-details {
    float: left;
    width: 190px;
    margin: 0 0 0 20px;
}

.product-details .price {
    margin: -15px 0 0 0;
    color : #7db000;
}

.product-details p{
    margin: 10px 0 0 0;
}

#nav {
    position: absolute;
    top: 255px;
    right: 250px;
    z-index: 2000;
}

#nav a { 
    margin-right: 10px; 
    height: 5px;
    width: 5px; 
    z-index: 1000;
    float: left;
    text-indent: -9999px;
    cursor: pointer;
    border: 1px solid #fff;
    background:  #eee;
}

#nav a:hover { 
    border: 1px solid #fff;
    background:  #999;
}

#nav a.activeSlide { 
    border: 1px solid #444;
    background:  #333;
}

Nada elegante aquí. CSS muy básico para colocar los elementos en posición.

El único punto a tener en cuenta es la declaración para la clase activeSlide. Esta clase se asigna al ancla de navegación respectiva de la diapositiva actual.

Paso 3 - Configurando nuestra tienda

Lo primero que debemos hacer es configurar una categoría separada a la que podamos asignar todos los productos que necesitamos para que aparezcan en nuestro deslizante. Haga clic en el menú catalog y luego en las categoríes. Elija add new root category.

Escriba el nombre que prefiera y luego elija no para el menú desplegable is active. No deseamos que se muestre en otras partes del sitio.

Una vez que se ha guardado la nueva categoría, puede encontrar la ID a la que se le ha asignado. Tenga en cuenta esto. Lo necesitaremos para más tarde.

Paso 4 - Creando nuestro código principal

Usaremos un solo archivo de plantilla para extraer la información relevante, formatearla según sea necesario y mostrar todo. Tiene total libertad con respecto al nombre y la ubicación de este archivo, pero con el interés de mantenerlo simple, lo he llamado featured.phtml y lo he colocado en catalog/product/featured.phtml. Recuerde, esto va a su carpeta de plantilla, no a su carpeta de diseño.

El contenido del archivo se ve así. No se preocupe por la longitud, veremos que cada pieza funciona después del código.


<?php 
$cat_id = "2"; 
$_productCollection = Mage::getResourceModel('catalog/product_collection')
->addAttributeToSelect(array('name', 'price', 'small_image', 'short_description'), 'inner')
->addCategoryFilter(Mage::getModel('catalog/category')->load($cat_id));

if(!$_productCollection->count()): 
    echo $this->__('There are no products matching the selection.'); 
else: ?>

    <div id="home-slideshow">
        <?php $i=0; foreach ($_productCollection as $_product): ?>

        <div class="slide">

            <div class="product-image">
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>">
                <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(650, 250); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a>
            </div>

            <div class="product-details">
                <h2><?php echo $_product->getName(); ?></h2>
                <div class="price"><?php echo number_format($_product->getFinalPrice(),2);?> </div>
                <p><?php echo $_product->getShortDescription(); ?></p>
            </div>

        </div>
        <?php endforeach ?>

    </div>

<?php endif; ?>

Aquí está la primera pieza:

1
2	$cat_id = "2";

Primero, necesitaremos especificar el ID de la categoría de la cual queremos obtener nuestros productos. En nuestro caso, este será 2, el ID de la categoría que acabamos de crear.

1
2	$_productCollection = Mage::getResourceModel('catalog/product_collection')
3	->addAttributeToSelect(array('name', 'price', 'small_image', 'short_description'), 'inner')
4	->addCategoryFilter(Mage::getModel('catalog/category')->load($cat_id));

Esto parece un poco complicado, pero déjame asegurarte, es muy simple. Para decirlo en términos sencillos, esencialmente pasamos el ID de la categoría que necesitamos a través de la variable cat_id y pedimos a Magento que recupere el nombre, precio, imagen y breve descripción de los productos que coinciden. En este momento, te aconsejo que no experimentes con el resto a menos que estés bien entrenado en MVC y otros aspectos de la arquitectura de Magento.

1
2	if(!$_productCollection->count()):
3	echo $this->__('Sorry, no items matched your selection criteria');
4	else: ?>

Tendremos que verificar si tenemos elementos coincidentes, ¿no? Eso es lo que estamos haciendo aquí. Solo asegurándonos de que tengamos elementos que coincidan. Si no, mostramos un error.

1
2	<?php $i=0; foreach ($_productCollection as $_product): ?>

¡Comencemos recorriendo nuestra colección de productos!

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>">

<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(650, 250); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a>

1
2	<h2><?php echo $_product->getName(); ?></h2>
3	<div class="price"><?php echo number_format($_product->getFinalPrice(),2);?> </div>
4	<p><?php echo $_product->getShortDescription(); ?></p>

Si ha leído la parte anterior de esta serie, este código debe serle familiar. Usamos los métodos de Magento para recuperar los medios pertenecientes a nuestro producto.

El segundo fragmento puede parecer un poco diferente porque en lugar de usar métodos un poco más abstractos, utilicé métodos más cercanos para adquirir directamente los datos que necesitamos.

Si te sientes un poco confundido aquí, simplemente revisa el código anterior una vez más. El nombre de los métodos es bastante explicativo. El único obstáculo debe ser cómo adquirimos la imagen en sí: pedimos a uno de nuestros ayudantes que adquiera la imagen y la cambie de tamaño al tamaño que necesitamos. Nada más.

Tenga en cuenta que abrimos y cerramos una div slide cada vez que se ejecuta nuestro ciclo. Esto es para encapsular la información de cada producto con un elemento contenedor para facilitar la creación de un control deslizante más adelante.

Y con esto, nuestro código PHP base está completo.

Paso 5 - El JavaScript

No tiene sentido reinventar por completo la rueda aquí ya que el foco principal de esta serie está en Magento. Por lo tanto, utilizaremos un complemento excelente para crear nuestro control deslizante hoy: el complemento jQuery Cycle.

Pero primero, vaya a root/js y cree una carpeta llamada cirrus. Diferentes personas tienen diferentes métodos de organización aquí. Prefiero separar el JS de un tema en lugar de organizarlos por fuente. Necesitaremos una copia de jQuery [1.4 con suerte], el último complemento de ciclo y un archivo script personalizado, que estoy nombrando mocha.

Aquí está el contenido de nuestro archivo JS.


(function($) { 

$(document).ready(function(){
     $('#home-slideshow')
	 	.before('<div id="nav">')
		.cycle({
		fx: 'fade',
		speed:    1500, 
 		timeout:  5000,
 		pause: 1,
 		delay:  5000, 
		pager: '#nav'
	});
});
 })(jQuery)

Primero, observe que estamos envolviendo todo dentro de un bloque function($) { //Code })(jQuery) Esto es asegurarse de que jQuery no entre en conflicto con ninguna otra biblioteca incluida.

El bloque document ready, como siempre, es para asegurarse de que nuestro código se ejecute solo después de que se carguen todos los recursos de la página, ya que a Magento le gusta poner nuestros archivos JavaScript en la parte superior.

Inicializar el complemento es bastante simple. Simplemente escriba la ID del contenedor principal, la home-slideshow en nuestro caso, y listo. Acabo de ajustar algunas de las opciones para que cumplan nuestras órdenes.

Algo a tener en cuenta es que estamos creando y posicionando dinámicamente nuestro contenedor para los elementos de navegación dentro del DOM con JavaScriptS. Este elemento solo es necesario si JavaScript está habilitado. Si no es así, no queremos un código vacío e inútil en nuestra página.

También pasamos en el selector el contenedor de navegación al plugin deslizante.

Eso es. La parte JavaScript de nuestro código está lista.

Paso 6 - configurar nuestra página de inicio

Ahora que toda nuestra base se ha completado, finalmente podemos configurar nuestra página de inicio ahora.

Haga clic en el menú CMS y elija la opción pages. Haga clic en la página de inicio en la página resultante.

La primera pestaña debería ser bastante explicativa. Asegúrate de que nuestra página esté habilitada.

En la pestaña de contenido, asegúrese de ingresar lo siguiente después de deshabilitar el editor:

1
2	{{block type="catalog/product_list" block_id="featured.products" template="catalog/product/featured.phtml"}}

Este es el método de Magento para incluir bloques necesarios. Solo le damos una identificación para referirlo y dirigirlo a nuestra plantilla personalizada.

En la pestaña de diseño, cambie la plantilla de diseño a 1 columna ya que la estamos usando para todo y luego ingrese lo siguiente en el campo layout update xml.


<reference name="head">
          <action method="addCss"><stylesheet>css/home.css</stylesheet></action>
          <action method="addJs"><script>cirrus/jquery-1.4-min.js</script></action>
          <action method="addJs"><script>cirrus/cycle.js</script></action>
          <action method="addJs"><script>cirrus/mocha.js</script></action>
</reference>

¿Recuerdas que al crear la página del producto, incluimos CSS personalizados en el archivo de diseño de la página para asegurarte de que no se carga la base de código completa para cada página? Estamos haciendo esencialmente lo mismo aquí. En lugar de crear un archivo XML solo para esto, Magento nos permite ingresarlo directamente a través de la interfaz.

Solo cargamos nuestro CSS personalizado, nuestras bibliotecas JS y el archivo de script que contiene todo nuestro código.

Haga clic en "guardar" para guardar todo nuestro progreso, vaciar la memoria caché de Magento y ver cómo se desliza la hermosa barra deslizadora en su página de inicio en toda su gloria insoportablemente encantadora.

Lo que construiremos en la siguiente parte

.. depende completamente de ti. Ya he cubierto casi toda la información relevante para personalizar cualquier vista y pasar por todas y cada una de las vistas es completamente contra-intuitivo. Por lo tanto, he llegado a la conclusión de que todo lo que queda es cómo crear un módulo personalizado y creo que para entonces esta serie seguirá su curso. Puedo escribir unos rápidos ajustes de Magento y una guía de optimización si hay suficiente gente interesada por tal artículo.

Si siente que debe cubrirse algo más antes de que esta serie llegue a su fin, ¡no dude en dejar un comentario a continuación para informarme!

Las últimas palabras

¡Y hemos terminado! Hoy, aprendimos cómo crear una página de inicio personalizada completa con un control deslizante que muestra los productos destacados. También aprendimos a hacer todo esto sin depender de una extensión de terceros y, en cambio, codificamos todo esto nosotros mismos. Espero que esto haya sido útil para ti y lo encontraste interesante. Dado que este es un tema bastante nuevo para muchos lectores, estaré observando de cerca la sección de comentarios para que suene allí si tiene alguna duda.

¿Preguntas? ¿Cosas buenas para decir? ¿Criticas? Ve a la sección de comentarios y déjame una nota. ¡Feliz Programacion!