Desarrollo del tema Magento página de categoría, parte 1

Felicitaciones por completar la página de inicio de su nuevo tema y comenzar con la página siguiente. En este tutorial, comenzaremos a modificar la página de categorías de nuestro tema Magento.

La página de categorías consta esencialmente de cuatro secciones: la barra de herramientas, el modo de cuadrícula, el modo de lista y la barra lateral. Trataremos las tres primeras secciones de este artículo y luego, en el siguiente tutorial, modificaremos la barra lateral y haremos algunas correcciones de CSS..

Si te fijas en cualquier página de categoría de nuestro tema, actualmente se verá algo como esto:

Si bien queremos que se vea así:

Si se da cuenta, nuestra página de categoría actual tiene amplios espacios vacíos a la izquierda y la derecha. Necesitamos averiguar por qué el área de contenido no ocupa suficiente espacio. Veamos primero qué plantilla es responsable de representar esta página. Podemos hacer esto habilitando sugerencias de plantillas desde el panel de administración, como lo ha hecho varias veces en esta serie.

Aquí descubrimos que tenía un diseño de tres columnas que mostraba esta página, y esta es la razón por la que hay un amplio espacio vacío a la izquierda, ya que no hay bloques asignados a la barra lateral izquierda.

Para que esta página se vea como nuestro diseño HTML, la cambiaremos a dos columnas. Desde el panel de administración, vaya a Catálogo> Gestionar categorías> Diseño personalizado> Diseño de página y cambiarlo a 2 columnas con barra izquierda.

Ahora nuestra página debe tener un diseño de dos columnas con una barra lateral en el lado izquierdo, como era el requisito de nuestro diseño.

Como en este artículo solo cambiaremos el área derecha (no la barra lateral), comenzaremos el proceso de edición desde la barra de herramientas. Con las sugerencias de plantillas activadas, verificaremos los archivos phtml responsables de representar eso al habilitar nuevamente las sugerencias de plantillas.

Como lo descubrimos, es este archivo: \ template \ catalog / product / list / toolbar.phtml.

Lo copiaremos en nuestro nuevo tema, lo compararemos con el código de nuestro archivo HTML y luego comenzaremos a hacer cambios. Nuestro código actual del archivo toolbar.phtml tiene este aspecto:

getCollection () -> getSize ()):?>  isExpanded ()):?>  isEnabledViewSwitcher ()):?>  getModes (); ?> 1):?> __ ('Ver como')?> getModes () como $ _code => $ _ label):?> isModeActive ($ _ code)):?>   getModeUrl ($ _ code)?> "title ="">    
   __ ('Ordenar por')?>  getCurrentDirection () == 'desc'):?> getOrderUrl (null, 'asc')?> "title ="__ ('Establecer dirección ascendente')?> ">__ ('Establecer dirección ascendente')?>  getOrderUrl (null, 'desc')?> "title ="__ ('Establecer dirección descendente')?> ">__ ('Establecer dirección descendente')?>  
 
    getLastPageNum ()> 1):?>  __ ('% s-% s de% s', $ this-> getFirstNum (), $ this-> getLastNum (), $ this-> getTotalNum ())?> 
   __ ('% s Item (s)', $ this-> getTotalNum ())?> 
   __ ('Mostrar')?>  
 
 getPagerHtml ()?>

Tenemos que compararlo con el código HTML responsable de la parte de la barra de herramientas, que es esto:

  ListGrid
 Ordenar por :  
 Mostrar :

Comenzaremos a modificar este código poniendo etiquetas dinámicas y diferentes. para y Si declaraciones Por ejemplo, para representar los enlaces para los modos de cuadrícula y lista para el modo de vista, agregaremos este código:

1):?> getModes () como $ _code => $ _ label):?> isModeActive ($ _ code)):?> "href =" # ">  "href ="getModeUrl ($ _ code)?> ">

Lo que esencialmente hace este código es iterar sobre todos los modos activos (lista y cuadrícula), y luego listar una etiqueta de anclaje para cada uno de estos. Aquí, muy inteligentemente, les hemos asignado diferentes clases y títulos, usando el $ _label Variable, que será diferente para cada modo..

Del mismo modo puedes modificar el ordenar por y limitador reparte tú mismo comparándolo con el archivo real toolbar.phtml. Después de las modificaciones, el código final de este archivo tendrá un aspecto similar al siguiente:

getCollection () -> getSize ()):?>  isExpanded ()):?>  isEnabledViewSwitcher ()):?>  getModes (); ?> 1):?> getModes () como $ _code => $ _ label):?> isModeActive ($ _ code)):?> "href =" # ">  "href ="getModeUrl ($ _ code)?> ">    
  Ordenar por :  getCurrentDirection () == 'desc'):?> getOrderUrl (null, 'asc')?> "title ="__ ('Establecer dirección ascendente')?> ">__ ('Establecer dirección ascendente')?>  getOrderUrl (null, 'desc')?> "title ="__ ('Establecer dirección descendente')?> ">__ ('Establecer dirección descendente')?>  
 __ ('Mostrar:')?>  
 
  getPagerHtml ()?>

Y si actualizamos la página ahora, se verá algo así. Todo está en su lugar, pero el CSS está bastante apagado, lo cual lo arreglaremos en el siguiente artículo.

Ahora es el momento de cambiar los productos reales que se muestran en esta página. Los productos aquí se pueden mostrar de dos maneras diferentes, es decir, modo de lista y modo de cuadrícula. Si habilitamos sugerencias de plantilla para encontrar el archivo responsable de esta parte, veremos que el código para los modos de cuadrícula y lista están escritos en el mismo archivo, que es frontend \ rwd \ default \ template \ catalog / product / list .phtml.

El código de lista en este archivo está en las líneas 44 a 116, que es la siguiente:

 getMode ()! = 'grid'):?>      getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> ">         stripTags ($ _ product-> getName (), null, true); ?> getProductUrl ()?> "title ="">productAttribute ($ _ product, $ _product-> getName (), 'name'); ?>
 getRatingSummary ()):?> getReviewsSummaryHtml ($ _ producto)?>  getChild ('name.after')) $ _nameAfterChildren = $ this-> getChild ('name.after') -> getSortedChildren (); foreach ($ _nameAfterChildren como $ _nameAfterChildName) $ _nameAfterChild = $ this-> getChild ('name.after')> getChild ($ _ nameAfterChildName); $ _nameAfterChild-> setProduct ($ _ product); echo $ _nameAfterChild-> toHtml (); ?> 
  getPriceHtml ($ _ producto, true)?> 
  canConfigure () && $ _product-> isSaleable ()):?> 
 getStockItem () && $ _product-> getStockItem () -> getIsInStock ()):?> __ ('Ver detalles')?> "Href ="getProductUrl ()?> ">__ ('Ver detalles')?>
  __ ('Agotado')?>
   helper ('wishlist') -> isAllow ()):?> helper ('wishlist') -> getAddUrl ($ _ product)?> ">__ ('Agregar a lista de deseos')?>
  getAddToCompareUrl ($ _ producto)):?> | ">__ ('Agregar para comparar')?>
  
 
  productAttribute ($ _ product, $ _product-> getShortDescription (), 'short_description')?> getProductUrl ()?> "title ="">__ ('Learn More')?>

Ahora tenemos que compararlo con el código de lista HTML en productlist.html en nuestra plantilla HTML.

  Nuevo
 
  Productos de Lincoln Corner Unit
 02 Revisión (s)
 Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Portal ante ipsum primis en faucibus orci luctus et ultri ces posuere cubilia curae. Proin lectus ipsum, gravida etds mattis vulputate, tristique ut lectus. Sed et lorem nunc ... 
  450.00^PS450.00^PS

Modificar este código es bastante simple. Usaremos estas líneas de inicialización:

 getMode ()! = 'grid'):?>

Luego colocaremos un bucle for alrededor del li etiqueta:

Y finalmente, reemplazaremos el nombre del producto, el precio, la descripción, el enlace del archivo de imagen y la URL con las etiquetas dinámicas. El código final se verá así:

 getMode ()! = 'grid'):?>        
  productAttribute ($ _ product, $ _product-> getName (), 'name'); ?>
 getRatingSummary ()):?> getReviewsSummaryHtml ($ _ producto)?>  
 productAttribute ($ _ product, $ _product-> getShortDescription (), 'short_description')?>
  getPriceHtml ($ _ producto, true)?>

Ahora, si actualizamos la página, veremos que la página de categorías en el modo de lista se verá así. Sé que no es lo que queremos que se vea, pero todo nuestro HTML está en su lugar, por lo que ahora solo necesitamos modificar su CSS, lo que haremos en el siguiente tutorial..

Ahora que llega al modo de cuadrícula, el código para eso es de 118 a 176 en el mismo archivo list.phtml.

 contar ()?> getColumnCount (); ?>      getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> ">     getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> ">productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getChild ('name.after')) $ _nameAfterChildren = $ this-> getChild ('name.after') -> getSortedChildren (); foreach ($ _nameAfterChildren como $ _nameAfterChildName) $ _nameAfterChild = $ this-> getChild ('name.after')> getChild ($ _ nameAfterChildName); $ _nameAfterChild-> setProduct ($ _ product); echo $ _nameAfterChild-> toHtml (); ?> getPriceHtml ($ _ producto, true)?> getRatingSummary ()):?> getReviewsSummaryHtml ($ _ producto, 'corto')?>   canConfigure () && $ _product-> isSaleable ()):?>  getStockItem () && $ _product-> getStockItem () -> getIsInStock ()):?> __ ('View Details')?> "href ="getProductUrl ()?> ">__ ('Ver detalles')?>  __ ('Agotado')?>
   helper ('wishlist') -> isAllow ()):?> helper ('wishlist') -> getAddUrl ($ _ product)?> ">__ ('Agregar a lista de deseos')?>
  getAddToCompareUrl ($ _ producto)):?> | ">__ ('Agregar para comparar')?>

El código HTML se ve así en el archivo productgrid.html en nuestra plantilla HTML:

       Lee mas 
 Iphone 5s Oro 32 Gb 2013
 $ 451.00

La modificación de esta parte será bastante similar a lo que hicimos en la parte de la lista. En primer lugar, haremos algo de inicialización, igual que en el archivo list.phtml predeterminado.

 contar ()?> getColumnCount (); ?>

A continuación vamos a envolver cada uno li Elemento dentro de un bucle for para iterar sobre todos los productos.

Por último, reemplazaremos los atributos del producto, como nombre del producto, precio, descripción, etc., con etiquetas dinámicas relevantes. Puede encontrarlos de manera muy conveniente desde el archivo list.phtml real.

El código final se verá así:

 contar ()?> getColumnCount (); ?>         getProductUrl ()?> "> Agregar al carrito 
 stripTags ($ _ product-> getName (), null, true)?>
 getPriceHtml ($ _ producto, true)?>

Ahora, si actualizas la página, el modo de cuadrícula se verá así:

En este artículo, hemos modificado la barra de herramientas y las secciones de lista y cuadrícula de esta página. En el siguiente artículo modificaremos la barra lateral y haremos algunas correcciones de estilo CSS. Al final del próximo artículo, nuestra página de categorías se verá bastante similar al diseño HTML.

Código