Magento para diseñadores: Parte 5

() 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 de ella y, finalmente, aprender a personalizarla para que sea nuestra.

En esta quinta parte, construiremos una de las vistas principales de nuestra tienda: la página de información del producto. ¿Emocionado? ¡Empecemos!

La serie completa

Un resumen rápido

En la última parte, establecimos el marco para el tema construyendo las partes repetidas del tema y esencialmente definiendo el diseño general del tema.

También observamos de manera práctica cómo funciona la inclusión de una plantilla en Magento al analizar cómo se construye el diseño, cómo funcionan los bloques y cómo encajan todas las diferentes piezas del rompecabezas.

¿Qué estamos desarrollando hoy?

Hoy, construiremos la página de los detalles del producto. Al igual que antes, se incluyen los archivos de origen, tanto el extremo frontal como el final. Puedes usarlo para ver cómo se ve la página, pero fuera de eso, el tema debería verse roto ya que, aún no hemos tocado el resto de las vistas. Entonces, hasta que desarrollemos el resto, trata de no aventurarte fuera de nuestra caja de arena.

Objetivos para la página

Nuestro objetivo para esta página específica es relativamente simple. Queremos una página sin sentido que haga solo lo esencial. Por lo tanto, he elaborado una breve lista de elementos que creo que necesita:

Título del producto: Bastante obvio.
Posibilidad de mostrar una imagen del producto.
Un resumen rápido y completo
Disponibilidad y precio del producto, y finalmente...
Un botón para añadir al carrito y colocarlo en el carrito.

Eso es. Quiero que sea lo más simple posible y, por lo tanto, opté por no hacerlo en exceso. Una vez que hayas aprendido los principios generales, siéntete libre de agregar tantas características como sea posible.

La apariencia básica

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

Paso 1 - El HTML

Primero veremos el HTML para la parte de contenido solamente. Asumo eres bastante fluido en HTML y CSS, así que me saltaré a las partes bastante importantes.


<div id="content" class="product">
<div id="main-product-image"><img src="images/primg.gif" /></div>

<div id="product-details">
<div id="product-availability">Availability <span class="available">In stock</span></div>
<div id="product-price">Price <span>$29.00</span></div>
<a class="button" href="#">Add to cart</a>
</div>

<h1>Photoshop to HTML</h1>

<h2>Quick Overview</h2>
<p class="quick-overview">
</p>

<h2>Product Description</h2>
<div class="product-description">

</div>

En primer lugar, observa que he envuelto la imagen del producto con un div para que sea más fácil agregar funciones en el futuro. Supongamos que deseas agregar un título rápido a la imagen mostrada en el futuro, de esta manera nos permitirá agregar esto mucho más rápido.

Tenemos otro elemento div que contiene la disponibilidad y la información de precios junto con el botón Agregar al carrito. Lo arreglaremos con un poco de CSS3 en un momento.

El resto del HTML es muy sencillo. El título reside en una sección h1, mientras que los encabezados de cada sección individual ocupan h2. El resumen rápido se anida en un párrafo, mientras que el resumen completo ocupa un div.

Podemos pasar a la parte de estilo ahora.

Paso 2 - El CSS


/* Product page */

#main-product-image {
  margin: 0 20px 10px 0;
	padding: 10px;
	float: left;
	border: 1px solid #E1E1E1;
	background: #F3F3F3;
}

#product-details {
	width: 180px;
	padding: 10px;
	float: right;
	border: 1px solid #E1E1E1;
	background: #F3F3F3;
	margin: 0 0 0 20px;
}

#product-availability span.available, #product-price span {
	color: #7db000;
	float: right;
}

.button {
	margin: 10px auto;
	display: block;
	width: 140px;
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
	color: #555;
	border: 1px solid #ccc;
	font-size: 18px;
	background: #ddd;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	text-shadow: #fff 0px 1px 1px;
	background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
	background: -moz-linear-gradient(top,  #eeeeee,  #cccccc);

	}

.button:hover {
	background: #014464;
 	background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#999999));
	background: -moz-linear-gradient(top,  #cccccc,  #999999);
	color: #000;
	}

.button:active {
	-moz-box-shadow: 0 2px 6px black;
	-webkit-box-shadow: 0 2px 6px black;
	}

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

También he usado un poco de CSS3 para que los botones se vean mejor.

Paso 3 - Creando nuestro archivo catalog.xml

Como mencioné en la parte anterior, cada módulo obtiene su propio archivo XML para dictar qué elementos incluir y el diseño general de la página. La página que estamos creando hoy se basa en un archivo llamado catalog.xml para definir su contenido y estructura.

Este archivo debe estar presente en la carpeta layout, así que vamos a crear un archivo XML y denominarlo catálogo.

El archivo completo a día de hoy se ve así. Voy a explicar cada bit parte por parte a continuación.


<?xml version="1.0"?>
<layout version="0.1.0">
    <catalog_product_view translate="label">
        <label>Catalog Product View (Any)</label>
        <!-- Mage_Catalog -->
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>
		<reference name="head">
            <action method="addCss"><stylesheet>css/product.css</stylesheet></action>
        </reference>
        <reference name="content">
            <block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">
               <block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/>
               <block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml"/>
               <block type="catalog/product_view_type_simple" name="product.info.simple" as="product_type_data" template="catalog/product/view/type/simple.phtml"/>
               <block type="catalog/product_view" name="product.info.addtocart" as="addtocart" template="catalog/product/view/addtocart.phtml"/>
            </block>
        </reference>
    </catalog_product_view>
</layout>

Ignora las declaraciones iniciales de XML y de la versión de diseño. No tienen ningún significado para nosotros ahora.

1
2	<catalog_product_view translate="label">

Primero, le informamos al sistema que pretendemos modificar la parte de la vista del producto del sistema. Esto se debe a que catalog.xml aloja el diseño de varias otras vistas y, por lo tanto, es imperativo que especifiquemos qué vista queremos modificar.

1
2	<reference name="root">
3	<action method="setTemplate"><template>page/1column.phtml</template></action>
4	</reference>

Ahora, le pedimos a Magento que cargue el archivo 1column.phtml como la plantilla principal para esta vista. Esto se debe a que cada vista individual puede usar cualquier estructura predefinida. Por ejemplo, tu página de inicio podría usar una estructura personalizada muy compleja, tu página de producto con una columna doble y tu página de búsqueda con un diseño de columna única.

Si no se especifica nada, se cargará la plantilla predeterminada mencionada en page.xml. Ya que lo estamos utilizando para todo lo demás, esta parte es redundante, pero cuando modificas esta plantilla para tu uso personal, editar el nombre del archivo es mucho más fácil que agregar fragmentos de XML al archivo de diseño.

1
2	<reference name="head">
3	<action method="addCss"><stylesheet>css/product.css</stylesheet></action>
4	</reference>

Y ahora nos encontramos con una de las partes más nítidas de Magento. Sí, podemos lanzar toda nuestra vista CSS específica en un archivo CSS gigante pero no somos hombres de las cavernas, ¿verdad? Dejando a un lado los gritos de múltiples solicitudes HTTP, este método nos permite mejorar nuestro CSS.

Primero adquirimos una referencia a la sección principal del archivo y luego insertamos el contenido específico de nuestra página en él. Aquí, estoy insertando un archivo llamado product.css que contiene todo el CSS específico de la página que vimos anteriormente.

Ten en cuenta que no estás limitado a CSS. También es posible incluir JS y otros recursos.

1
2	<block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">

Ahora le pedimos a Magento que use una plantilla específica para la parte de contenido de la página


 <block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/>
 <block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml"/>
 <block type="catalog/product_view_type_simple" name="product.info.simple" as="product_type_data" template="catalog/product/view/type/simple.phtml"/>
 <block type="catalog/product_view" name="product.info.addtocart" as="addtocart" template="catalog/product/view/addtocart.phtml"/>

Este bloque define todos los bloques individuales dentro del bloque de contenido principal. Básicamente, usamos plantillas individuales para mostrar la imagen del producto, la descripción general y la descripción, la disponibilidad/precio y, finalmente, la funcionalidad de agregar al carrito.

Y con esto, nuestro archivo base catalog.xml está completo.

Paso 4 - Creando nuestra plantilla principal

Bien, ahora que hemos especificado nuestro diseño, podemos pasar a la creación del archivo catalog/product/view.phtml que especificamos como la plantilla principal para la sección de contenido en el XML anterior.

Este archivo es un poco diferente de la plantilla de esqueleto que creamos en la última parte porque agregaremos algunas cosas pequeñas directamente en lugar de ir a través de la ruta de la plantilla para evitar la acumulación junto con un poco de llamadas a la API para ayudarnos.


<?php
    $_helper = $this->helper('catalog/output');
    $_product = $this->getProduct();
?>

<form action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
        <div class="no-display">
            <input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
            <input type="hidden" name="related_product" id="related-products-field" value="" />
<div id="main-product-image"><?php echo $this->getChildHtml('media') ?></div>

<div id="product-details">
<?php echo $this->getChildHtml('product_type_data') ?>
<?php echo $this->getChildHtml('addtocart') ?>
</div>

<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>

<?php if ($_product->getShortDescription()):?>
                    <h2><?php echo $this->__('Quick Overview') ?></h2>
                    <p class="quick-overview"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></p>
<?php endif;?>

<?php echo $this->getChildHtml('description') ?>
</form>
</div>

Si le echas un vistazo rápido, notarás que estamos haciendo varias llamadas a getChildHtml para adquirir ese contenido de los bloques. Estos funcionan como se espera y los contenidos de estos contenidos se cubrirán un poco más adelante.


<?php
    $_helper = $this->helper('catalog/output');
    $_product = $this->getProduct();
?>

Por el momento, no necesitamos saber qué significa esto. Sin embargo, en términos sencillos, esencialmente le estamos pidiendo a Magento la información de la tienda de este producto específico para que podamos procesarla y luego mostrarla en la página.

1
2	<form action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>

Aquí usamos uno de los métodos API de Magento para generar dinámicamente la URL que el formulario debe enviar.

1
2	<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>

Usamos otro de los métodos de Magento para adquirir el título del producto directamente.


<?php if ($_product->getShortDescription()):?>
                    <h2><?php echo $this->__('Quick Overview') ?></h2>
                    <p class="quick-overview"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></p>
<?php endif;?>

Y nuevamente, dado que la descripción general rápida será solo una oración o dos, opto por importarla directamente en lugar de usar una plantilla. Usamos la misma función que usamos para adquirir el título.

Paso 5 - Creando las plantillas para nuestros bloques

Con todas las partes principales hechas, podemos concentrarnos en los bloques individuales ahora. Ahora que ya hemos lidiado con esto al construir la plantilla principal, esto debería ser mucho más fácil ahora.

Abordaremos cada uno en orden de apariencia en nuestro código:

Imagen del producto

getChildHtml('media') se asigna directamente a catalog/product/view/media.phtml. Nuestro archivo se ve así:


<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
?>

    <?php
        $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
?>

Algún código PHP simple. Usamos los métodos de ayuda para adquirir la imagen del producto y luego renderizarla en la pantalla.

Disponibilidad / Precio

getChildHtml('product_type_data') se asigna directamente a catalog/product/view/type/simple.phtml. Nuestro archivo se ve así:


<?php $_product = $this->getProduct() ?>
<div id="product-availability">Availability 
<?php if($_product->isSaleable()): ?>
    <span class="available"><?php echo $this->__('In stock') ?></span>
<?php else: ?>
    <span class="unavailable"><?php echo $this->__('Out of stock') ?></span>
<?php endif; ?>
</div>
<div id="product-price">Price <span><?php echo $this->getPriceHtml($_product) ?></span></div>

Primero verificamos si el elemento está disponible o no y luego generamos el HTML requerido. ¡Adquirir el precio del producto es un simple método de distancia!

Añadir al carrito

getChildHtml('addtocart') se asigna directamente a catalog/product/view/addtocart.phtml. Nuestro archivo se ve así:


<?php $_product = $this->getProduct() ?>

<?php if($_product->isSaleable()): ?>
        <button title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart"><?php echo $this->__('Add to Cart') ?></button>
<?php endif; ?>

Como es lógico, verificamos si un artículo está en venta antes de generar el HTML requerido. Es un botón simple como es aparente.

Descripción del producto

getChildHtml('description') se asigna directamente a catalog/product/view/description.phtml. Nuestro archivo se ve así:


<?php $_description = $this->getProduct()->getDescription(); ?>
<?php if ($_description): ?>
        <h2>Product Description</h2>
		<div class="product-description"><?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), nl2br($_description), 'description') ?></div>
<?php endif; ?>

De manera similar a como incluimos la descripción general rápida, usamos los métodos incorporados de Magento para adquirir la información necesaria. Verificamos la existencia de la descripción antes de representarla.

En caso de que tengas curiosidad, normalmente tiendo a incluir la descripción por separado a través de plantillas, principalmente porque en las plantillas de producción casi siempre se procesará la descripción de alguna manera. En esos escenarios, es más fácil dividir esta lógica en su propia plantilla. Una visión general rápida, por otro lado, suele ser bastante pequeña y, por lo tanto, se incluye directamente.

Lo que vamos a desarrollar en la siguiente parte

...es completamente para ti. Hay un buen número de vistas que podrías diseñar, pero es bastante presuntuoso de mi parte elegir una. Por lo tanto, te pido a ti, el lector, que sugieras una vista para cubrir en la siguiente parte a través de un comentario en la sección de comentarios que encontrarás en la parte inferior. ¡No olvides decirme cuál cubriremos a continuación!

La última palabra

¡Y hemos terminado! Hoy, creamos la primera vista de nuestro tema personalizado de Magento, la vista para los detalles del producto, junto con la forma en que Magento nos permite agregar recursos y contenidos específicos de la página. Esperemos que esto te haya sido útil y que te haya parecido interesante. Dado que este es un tema bastante nuevo para muchos lectores, estaré observando atentamente la sección de comentarios, así que ve a allí si tienes alguna duda.

¿Preguntas? ¿Cosas bonitas que decir? ¿Críticas? Pulsa en la sección de comentarios y déjame un comentario. ¡Feliz codificación!