Magento. ¿Cómo configurar el número de columnas de la lista de categoría?

Este tutorial puede ayudarle a configurar el número de columnas de la lista de productos de categoría en la tienda de Magento.

En la plantilla que hemos elegido para este tutorial los productos son mostrados en 3 columnas.

Vamos a ver si podemos mostrar estos productos en 4 columnas.

Editar el fichero XML de diseño

En primer lugar hay que abrir el directorio de instalación de Magento y encontrar los ficheros XML del diseño de tema. Usualmente, se encuentran en el directorio "app/design/frontend/default/theme###/layout".

En la carpeta de diseño abra el fichero catalog.xml en su editor y busque la configuración de diseño de la categoría:

    <catalog_category_default translate="label">
       <label>Catalog Category (Non-Anchor)</label>
       <reference name="right">
           <block type="catalog/navigation" name="catalog.leftnav" before="-" template="catalog/navigation/left.phtml"/>
       </reference>
       <reference name="content">
           <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
               <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                   <block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
                       <block type="page/html_pager" name="product_list_toolbar_pager"/>
                       <!-- The following code shows how to set your own pager increments -->
                       <!--
                           <action method="setDefaultListPerPage"><limit>4</limit></action>
                           <action method="setDefaultGridPerPage"><limit>9</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>2</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>4</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>6</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>8</limit></action>
                           <action method="addPagerLimit" translate="label"><mode>list</mode><limit>all</limit><label>All</label></action>
                       -->
                   </block>
                   <action method="addColumnCountLayoutDepend"><layout>empty</layout><count>6</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>one_column</layout><count>5</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>two_columns_left</layout><count>4</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>two_columns_right</layout><count>4</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>three_columns</layout><count>3</count></action>
                   <action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
               </block>
           </block>
       </reference>
   </catalog_category_default>

Ahora es necesario configurar el número de columnas para la lista de productos de categoría. Agregue el siguiente código:

<action method="setColumnCount"><count>4</count></action>

antes de

<action method="addColumnCountLayoutDepend"><layout>empty</layout><count>6</count></action>

Como resultado, Usted debe obtener lo siguiente:

    <catalog_category_default translate="label">
       <label>Catalog Category (Non-Anchor)</label>
       <reference name="right">
           <block type="catalog/navigation" name="catalog.leftnav" before="-" template="catalog/navigation/left.phtml"/>
       </reference>
       <reference name="content">
           <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
               <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                   <block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
                       <block type="page/html_pager" name="product_list_toolbar_pager"/>
                       <!-- The following code shows how to set your own pager increments -->
                       <!--
                           <action method="setDefaultListPerPage"><limit>4</limit></action>
                           <action method="setDefaultGridPerPage"><limit>9</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>2</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>4</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>6</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>8</limit></action>
                           <action method="addPagerLimit" translate="label"><mode>list</mode><limit>all</limit><label>All</label></action>
                       -->
                   </block>
                   <action method="setColumnCount"><count>4</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>empty</layout><count>6</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>one_column</layout><count>5</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>two_columns_left</layout><count>4</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>two_columns_right</layout><count>4</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>three_columns</layout><count>3</count></action>
                   <action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
               </block>
           </block>
       </reference>
   </catalog_category_default>

Agregue el mismo código para la configuración de anclaje de categoría. En la parte inferior del fichero catalog.xml agregue el mismo código:

<catalog_category_layered translate="label">
       <label>Catalog Category (Anchor)</label>
       <reference name="right">
           <block type="catalog/layer_view" name="catalog.leftnav" before="-" template="catalog/layer/view.phtml"/>
       </reference>
       <reference name="content">
           <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
               <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                   <!-- <action method="addReviewSummaryTemplate"><type>default</type><template>review/helper/su.phtml</template></action> -->
                   <block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
                       <block type="page/html_pager" name="product_list_toolbar_pager"/>
                       <!-- The following code shows how to set your own pager increments -->
                       <!--
                           <action method="setDefaultListPerPage"><limit>4</limit></action>
                           <action method="setDefaultGridPerPage"><limit>3</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>2</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>4</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>6</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>8</limit></action>
                           <action method="addPagerLimit" translate="label"><mode>list</mode><limit>all</limit><label>All</label></action>
                           <action method="addPagerLimit"><mode>grid</mode><limit>3</limit></action>
                           <action method="addPagerLimit"><mode>grid</mode><limit>6</limit></action>
                           <action method="addPagerLimit"><mode>grid</mode><limit>9</limit></action>
                           <action method="addPagerLimit" translate="label"><mode>grid</mode><limit>all</limit><label>All</label></action>
                       -->
                   </block>
                   <action method="setColumnCount"><count>4</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>empty</layout><count>6</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>one_column</layout><count>5</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>two_columns_left</layout><count>4</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>two_columns_right</layout><count>4</count></action>
                   <action method="addColumnCountLayoutDepend"><layout>three_columns</layout><count>3</count></action>
                   <action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
               </block>
           </block>
       </reference>
   </catalog_category_layered>

Si ha terminado, guarde el fichero.

Borrar caché de Magento

Antes de que será capaz de revisar los cambios en la interfaz de Magento, es necesario borrar la memoria caché de Magento. Para hacer esto Usted necesita ingresar al panel de administración de Magento y hacer clic en "System > Cache Management" (Sistema > Administración de caché).

Marque todos los tipos de caché, en el cuadro de acciones elija "Refresh" (Actualizar) y haga clic en Submit (Enviar).

Ahora puede abrir frontend de la tienda y actualizar la página para revisar los cambios.

Como Usted puede notar los productos no están alineados de la manera que necesitamos. Esto es causado por los estilos CSS. Los estilos CSS son definidos para que los productos se muestren en un diseño de tres columnas.

Editar estilos CSS

En Magento los ficheros CSS del tema se encuentran en la carpeta "skin/frontend/default/theme###/css". Utilizando la herramienta de desarrollo del navegador Usted puede encontrar la clase de producto, las propiedades de estilo y la ubicación de estilo. Por lo general, las propiedades de estilo de lista de productos son definidas en el fichero style.css.

Tenga en cuenta: el nombre de clase y las propiedades de estilo pueden ser diferentes en su plantilla.

Vamos a ver qué se puede cambiar. Tenemos las siguientes propiedades de estilo asignadas a los productos de la lista de categoría:

.products-grid li.item {
   float: left;
   margin: 0 22px 0 0;
   padding: 0 0 29px;
   width: 200px;
}

Aquí podemos cambiar el ancho y el margen del elemento de la lista. Después de cambiar la anchura y valores de margen obtenemos el siguiente resultado:

Bueno… No es ideal… Ahora tenemos que modificar las propiedades de estilo del título del producto, precio, botón ‘Añadir al carrito’ y enlaces de productos. Siéntete libre de experimentar con las propiedades de estilo para obtener el resultado que necesita.

Después de varios experimentos obtenemos el siguiente resultado:

Gracias por su tiempo y atención. Esperamos que este tutorial puede ayudarle a resolver sus problemas.

Usted puede revisar los cambios de CSS realizados en el tutorial :

Magento. ¿Cómo configurar el número de columnas de la lista de categoría?