Magento para diseñadores Parte 5

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 hacerla nuestra propia..

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

Parte 1: Instalación y configuración
Parte 2: Productos, impuestos, categorías, pasarelas de pago, etc..
Parte 3: Theming
Parte 4: Construyendo el tema
Parte 5: Creación de la página de información del producto

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 tematización 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 construyendo hoy??

Hoy, construiremos la página de vista de producto individual. Al igual que antes, se incluyen los archivos de origen, tanto el extremo frontal como el final. Puede 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. Así que hasta que construyamos el resto, trate de no aventurarse 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 para 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 haya aprendido los principios generales, siéntase libre de agregar tantas características de whizbang como sea posible.

El look basico

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

Paso 1 - El HTML

Primero veremos el HTML para la parte de contenido solo. Supongo que usted es bastante fluido en HTML y CSS, así que me saltaré a las partes bastante importantes.

  
  Disponibilidad En stock
 Precio $ 29.00
 Añadir a la cesta 
 Photoshop a HTML
 vista rápida
  Descripción del producto

En primer lugar, observe que he envuelto la imagen del producto con un div para que sea más fácil agregar funciones en el futuro. Supongamos que desea 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 información sobre disponibilidad y precios junto con el añadir a la cesta botón. 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

 / * Página del producto * / # main-product-image margen: 0 20px 10px 0; relleno: 10px; flotador izquierdo; borde: 1px sólido # E1E1E1; fondo: # F3F3F3;  # product-details width: 180px; relleno: 10px; flotar derecho; borde: 1px sólido # E1E1E1; fondo: # F3F3F3; margen: 0 0 0 20px;  # product-available span.available, # product-price span color: # 7db000; flotar derecho;  .button margen: 10px auto; bloqueo de pantalla; ancho: 140px; relleno: 5px 10px; text-align: center; texto-decoración: ninguno; color: # 555; borde: 1px sólido #ccc; tamaño de fuente: 18px; fondo: #ddd; radio del borde: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; cuadro de sombra: 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; fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, de (#eeeeee), a (#cccccc)); fondo: -moz-linear-gradient (arriba, #eeeeee, #cccccc);  .button: hover background: # 014464; fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, desde (#cccccc), hasta (# 999999)); fondo: -moz-linear-gradient (arriba, #cccccc, # 999999); color: # 000;  .button: active -moz-box-shadow: 0 2px 6px negro; -webkit-box-shadow: 0 2px 6px negro;

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 construyendo hoy se basa en un archivo llamado catalog.xml Definir sus contenidos y estructura..

Este archivo debe estar presente en el diseño carpeta, así que vamos a crear un archivo XML y el nombre catalogar.

El archivo completo para hoy se ve así. Te explico cada bit parte por parte abajo.

    Vista del producto del catálogo (cualquiera)      css / product.css

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

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

Ahora, le decimos a Magento que cargue el 1column.phtml archivo como la plantilla maestra principal para esta vista. Esto se debe a que cada vista individual puede usar cualquier estructura predefinida. Por ejemplo, su página de inicio podría usar una estructura personalizada muy compleja, su página de producto una columna doble y su página de búsqueda 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 está modificando esta plantilla para su uso personal, editar el nombre del archivo es mucho más fácil que agregar fragmentos de XML al archivo de diseño.

  css / product.css

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 optimizar 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 toda la página específica de CSS que vimos arriba.

Tenga en cuenta que no está limitado a CSS. Incluyendo JS y otros activos es posible también.

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

Este bloque define todos los bloques individuales dentro del bloque de contenido principal. Esencialmente, 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, nuestra base. catalog.xml el archivo esta completo.

Paso 4 - Creando nuestra plantilla principal

Ok, ahora que hemos especificado nuestro diseño podemos pasar a crear el catálogo / producto / view.phtml archivo que especificamos como la plantilla principal para la sección de contenido en el XML anterior.

Este archivo es ligeramente 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 API para ayudarnos.

 ayudante ('catálogo / salida'); $ _product = $ this-> getProduct (); ?> getOptions ()):?> enctype = "multipart / form-data">    getChildHtml ('media')?>
  getChildHtml ('product_type_data')?> getChildHtml ('addtocart')?> 
 productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getShortDescription ()):?> __ ('Descripción general rápida')?>
 productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>
  getChildHtml ('descripción')?>

Si echa un vistazo rápido, notará que estamos haciendo una serie de getChildHtml Llamadas para adquirir ese contenido de bloques. Estos funcionan como se esperaba y los contenidos de estos contenidos se cubrirán un poco más adelante..

 ayudante ('catálogo / salida'); $ _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.

 getOptions ()):?> enctype = "multipart / form-data">

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

 productAttribute ($ _ product, $ _product-> getName (), 'name')?>

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

 getShortDescription ()):?> __ ('Descripción general rápida')?>
 productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>

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 aparición en nuestro código:

Imagen del producto

getChildHtml ('media') mapas directamente a catálogo / producto / ver / media.phtml. Nuestro archivo se ve así:

 getProduct (); $ _helper = $ this-> helper ('catalog / output'); ?> 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') mapas directamente a catálogo / producto / vista / tipo / simple.phtml. Nuestro archivo se ve así:

 getProduct ()?> Disponibilidad isSaleable ()):?> __ ('En stock')?>  __ ('Agotado')?>  
 Precio getPriceHtml ($ _ producto)?>

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

Añadir a la cesta

getChildHtml ('addtocart') mapas directamente a catálogo / producto / vista / addtocart.phtml. Nuestro archivo se ve así:

 getProduct ()?> isSaleable ()):?>

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 ('descripción') mapas directamente a catálogo / producto / vista / descripción.phtml. Nuestro archivo se ve así:

 getProduct () -> getDescription (); ?>  Descripción del producto
 helper ('catalog / output') -> productAttribute ($ this-> getProduct (), nl2br ($ _ description), 'description')?>

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 tenga 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 construir en la siguiente parte

... es completamente de usted. Hay un buen número de vistas que podrías diseñar, pero es bastante presuntuoso de mi parte elegir uno. Por lo tanto, le pido a usted, el lector, que sugiera una vista para cubrir en la siguiente parte a través de un comentario en la sección de comentarios a continuación. No olvides decirme cual es el siguiente para cubrir!

La última palabra

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

Preguntas? Cosas bonitas que decir? Criticas? Pulsa la sección de comentarios y déjame un comentario. Feliz codificacion!

Código