7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Magento

Desarrollo del Tema de Magento: Página de Categoría, Parte 1

Scroll to top
Read Time: 13 mins
This post is part of a series called Magento Theme Development.
Magento Theme Development: Home Page Styling
Magento Theme Development: Category Page, Part 2

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Felicidades por completar la página principal de su nuevo tema y comenzar con la siguiente página. En este tutorial, comenzaremos a modificar la página de categorías de nuestro tema de 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 de las tres primeras secciones de este artículo, y luego en el siguiente tutorial, modificaremos la barra lateral y realizaremos algunas correcciones de CSS.

Si miras cualquier página de categoría de nuestro tema, en la actualidad se verá algo como esto:

Category Page before editingCategory Page before editingCategory Page before editing

Si bien queremos hacer que se vea así:

HTML design Category PageHTML design Category PageHTML design Category Page

Si te das cuenta, nuestra página de categoría actual tiene amplios espacios vacíos a la izquierda y derecha. Tenemos que averiguar por qué el área de contenido no está tomando suficiente espacio. Veamos primero qué plantilla es responsable de procesar esta página. Podemos hacer esto permitiendo sugerencias de plantilla desde el panel de administración, como lo ha hecho varias veces antes en esta serie.

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

Template Hints for Category PageTemplate Hints for Category PageTemplate Hints for Category Page

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

Changing Page LayoutChanging Page LayoutChanging Page Layout

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

Como en este artículo sólo cambiaremos el área correcta (no la barra lateral), iniciaremos el proceso de edición desde la barra de herramientas. Con las sugerencias de la plantilla activadas, comprobaremos los archivos phtml responsables de la representación, activando nuevamente las sugerencias de la plantilla.

Como hemos descubierto, es este archivo: \ template \ catalog / product / list / toolbar.phtml.

Copiamos eso en nuestro nuevo tema, lo comparamos con el código de nuestro archivo HTML y luego empezamos a hacer cambios. Nuestro código actual del archivo toolbar.phtml tiene este aspecto:

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

Comenzaremos a modificar este código introduciendo las etiquetas dinámicas y las diferentes sentencias for y if. Por ejemplo, para representar los enlaces de los modos de cuadrícula y lista para el modo de visualización, agregaremos este código:

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

Del mismo modo, puede modificar las partes de clasificación sort-by y limitación limiter comparándolas con el archivo toolbar.phtml real. Después de las modificaciones, el código final para este archivo se verá así:

Y si actualizamos la página ahora, se verá algo así. Todo está en su lugar, pero el CSS está bastante apagado, que vamos a arreglar en el próximo artículo.

Toolbar after editingToolbar after editingToolbar after editing

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 activamos sugerencias de plantillas para averiguar el archivo responsable de esta parte, veremos que el código para el modo de cuadrícula y de lista está escrito 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:

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

La modificación de este código es bastante simple. Utilizaremos estas líneas de inicialización:

Entonces pondremos un bucle for alrededor de la etiqueta li:

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

Ahora, si actualizamos la página, veremos que la página de categorías en modo de lista se verá así. Sé que no es lo que queremos que parezca, pero todo nuestro HTML está en su lugar, por lo que ahora sólo tenemos que modificar su CSS, que vamos a hacer en el próximo tutorial.

List Mode after editingList Mode after editingList Mode after editing

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

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

La modificación de esta parte será bastante similar a lo que hicimos en la parte de la lista. Primero haremos una inicialización, como en el archivo list.phtml por defecto.

A continuación vamos a envolver cada elemento li 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 las etiquetas dinámicas relevantes. Puede encontrarlos muy convenientemente desde el archivo real list.phtml.

El código final se verá así:

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

Grid Mode after editingGrid Mode after editingGrid Mode after editing

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.