Magento. Как изменить количество колонок в списке категорий

Эта инструкция продемонстрирует, как установить количество колонок в списке категорий в магазине Magento.

В шаблоне, который мы выбрали для этой инструкции, продукты отображаются в 3 колонки.

Давайте посмотрим, сможем ли мы организовать их отображение в 4 колонки.

Редактирование XML файлов макета

Для начала откройте папку, в которой установлен магазин Magento и найдите XML файлы, отвечающие за структуру макета. Они обычно находятся в папке "app/design/frontend/default/theme###/layout".

Откройте из найденной папки файл catalog.xml с помощью редактора и найдите раздел отвечающий за настройки макета категорий:

    <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>

Теперь вам понадобится установить количество колонок категорий при отображении продуктов. Для этого добавьте следующий код:

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

перед

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

В результате вы должны получить следующее:

    <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>

Добавьте тот же код в настройки ключевых категорий. Пролистайте вниз файл catalog.xml и добавьте тот же код в настройки ключевых категорий:

<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>

Сохраните файл когда закончите.

Очистите кэш Magento

Перед тем, как вы сможете увидеть изменения в интерфейсе Magento, вам понадобится очистить кеш Magento. Для того что бы сделать это войдите в вашу учетную запись в административной панели Magento и перейдите на страницу "System > Cache Management".

Выберите там все типы кеша, и "Refresh" в выпадающем списке. После этого нажмите кнопку Submit.

Теперь откройте страницу вашего магазина, обновите ее, и вы увидите все изменения в интерфейсе.

Как вы видите товары выровнены не подходящим образом. Это вызвано стилями CSS. Стили CSS в настоящее время определены для отображения товаров в три колонки.

Редактирование стилей CSS

В шаблоне Magento CSS файлы находятся в папке "skin/frontend/default/theme###/css". Используйте инструменты разработчика в вашем браузере для определения классов и стилей товаров и расположения стилей. Обычно стили для отображения товаров определены в файле style.css.

Внимание: имя класса и свойства стилей в вашем шаблоне могут отличаться.

Давайте посмотрим, что мы можем изменить. Для списка категорий установлены следующие стили:

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

Здесь мы можем изменить ширину (width) и отступы (margin). Уменьшение этих значений даст нам следующий результат:

Итак … это не идеал, но истина где-то рядом! Нам осталось изменить свойства стилей так, что бы название и цена продуктов и кнопка добавления в корзину выровнялись. Смело экспериментируйте со значениями для получения подходящего результата.

После нескольких минут экспериментов мы получили следующий результат:

Спасибо за внимание. Мы надеемся, что эта инструкция позволит вам решить возникшую проблему.

Вы можете посмотреть в следующем видео, какие изменения в CSS были внесены:

Magento. Как установить количество колонок в списке категорий