Magento. 如何在类别列表中设置列数

本教程展示了如何在Magento商店中设置类别og体育的列数.

在我们为本教程选择的模板中，产品显示在3列中.

让我们看看能否在4列中显示这些产品.

Edit XML layout file

First of all open the Magento installation directory and locate theme layout XML files. They are usually located in "app/design/frontend/default/theme###/layout" directory.

In the layout folder open the catalog.xml file with your editor and locate the category layout settings:

    
       Catalog Category (Non-Anchor)
       
           
       
       
           
               
                   
                       
                       
                       
                   
                   empty6
                   one_column5
                   two_columns_left4
                   two_columns_right4
                   three_columns3
                   product_list_toolbar
               
           
       
   

现在需要设置类别og体育的列数. Add the following code:

4

before

empty6

As a result you should have the following:

    
       Catalog Category (Non-Anchor)
       
           
       
       
           
               
                   
                       
                       
                       
                   
                   4
                   empty6
                   one_column5
                   two_columns_left4
                   two_columns_right4
                   three_columns3
                   product_list_toolbar
               
           
       
   

为锚分类设置添加相同的代码. Scroll down the catalog.xml 文件并将相同的代码添加到锚分类设置中:

       Catalog Category (Anchor)
       
           
       
       
           
               
                   
                   
                       
                       
                       
                   
                   4
                   empty6
                   one_column5
                   two_columns_left4
                   two_columns_right4
                   three_columns3
                   product_list_toolbar
               
           
       
   

When you are done Save the file.

Clear Magento cache

在您能够看到Magento上的更改之前 frontend you need to clear Magento cache. In order to do this you need to login to Magento admin panel and go to "System > Cache Management" page.

There select all cache types, in the actions box select "Refresh" and click the Submit button.

Now you can open the store frontend and refresh the page to see the changes.

正如你所看到的，产品不是按我们需要的方式排列的. This is caused by the CSS styles. CSS样式被定义为使产品以三列显示 layout.

Edit CSS styles

在Magento中，主题CSS文件位于“skin/frontend/default/theme###/css" folder. Using the browser 开发者工具可以定位产品类、样式属性和样式位置. 类中定义og体育样式属性 style.css file.

请注意:类名和样式属性在你的模板中可能是不同的.

Let’s see what can be changed. 我们将以下样式属性分配给类别列表中的产品:

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

这里我们可以改变列表项的宽度和边距. 减少宽度和边距值，我们得到以下结果:

Well … it’s not ideal but we are near. 现在我们需要修改产品标题的样式属性, price, add to cart button and product links. 您可以随意试验样式属性以获得所需的结果.

经过几分钟的实验，我们得到了以下结果:

Thank you for your time and attention. 我们希望本教程能够帮助您解决您的问题.

你可以在下面的视频教程中看到CSS的变化:

Magento. 如何在类别列表中设置列数