magento修改列表页每行显示数量

magento产品列表产品数量

magento任何页面的改动都是需要css的配合的,所以代码中改了magento列表页每行产品的显示数量,就一定要将你的css与之对应。
很多时候人们问我怎么将每行的数量改成三个或者四个,我就惆怅,因为css往往也是需要改的。css却是每个模板都不一样,让我说怎么改,不看下模板的 css,没法说。

此篇文章供magento初学者做个参考,也好丰富下我博客的内容,最近没什么时间,只能写点简单的充充门面,让大家知道,我尽管最近不露面了,但还是在关注着大家。谢谢。

以magento 1.4 版本的default模板文件为例,并且用首页显示产品的代码做分析。

{{block type="catalog/product_list" category_id="3" template="catalog/product/list.phtml"}}

此段代码用来在 magento的cms中显示某一个分类的产品的列表。代码中的template=”catalog/product/list.phtml“是使用catalog/product/list.phtml这个路径下的模板文件的样式来显示。

此list.phtml文件路径:app\design\frontend\base\default\template\catalog\product\list.phtml

所以当我们的list.phtml文件显示的是每行3件产品,很多人想让其每行显示4件。那么我们就在此文件路径:文件路径:app\design \frontend\base\default\template\catalog\product里面,也就是list.phtml一个文件夹中建个文件 list4.phtml,将list.phtml中的代码复制到list4.phtml中。

所以此时我们的首页显示产品的代码就变成了

{{block type="catalog/product_list" category_id="3" template="catalog/product/list4.phtml"}}

我们让他使用list4.phtml这个模板文件,下面我们对list4.phtml进行修改,让其每行显示4个产品。

我们将list4.phtml改下,

截取代码片段如下

<?php $_columnCount = $this->getColumnCount(); ?>  //搜下“columnCount”关键字就搜到

将其改为

<?php $_columnCount = 4 ?>

这样就每行显示4个产品了,想显示5个就改成5。

这样就改好了。

但是我们的问题还没有解决。原先每行3个,现在变成每行4个了,如果你的列表的宽度没有变,图片每行4个也许放不下的,那么你就需要去改产品的图片尺寸。另一种情况是,css原先定义的是每行三个,每个图片区域宽度是300像素(或者33%),现在每行变成4个了,每个还是300像素(33%)也许就放不下了。这样页面可能就会出问题。所以还需要改下css。

改图片尺寸我之前的文章有讲到,改css还是需要从长计议。我的magento模板开发指导的文章也有讲到在哪里学习css。

我想对普通用户说,如果你有时间去学下css就去学下,如果没有时间就让别人帮着改下,一般的模板都比较好改,几分钟就 fix的差不多了。

转载表明出处:hellokeykey.com

《magento修改列表页每行显示数量》有14个想法

  1. 你好。钥匙大哥。最近一直在接触magento。在你的网站上学到不少基本知识。先谢谢你了。我通过学习,找到了你在官网上发布的Helloblank模板!感觉非常好。但是也遇到了首页显示的问题。我想让产品换行。我想把它修改成每行显示3个或者4个产品。因为默认的5个实在太多了。我在网上找了资料。说是在appdesignfrontenddefaultdefaulttemplatecatalogproduct new.phtml 中修改代码。可是我看了下你模板里面的代码。尝试着去修改。一直都没有成功。希望你能帮忙看下嘛?

    getProductCollection()) && $_products->getSize()): ?>

    __(‘New Products’) ?>

    getItems() as $_product): ?>
    5): continue; endif; ?>

    <a class="product-image" href="getProductUrl() ?>” title=”htmlEscape($_product->getName()) ?>”><img class="product-image" src="helper(‘catalog/image’)->init($_product, ‘small_image’)->resize(80, 77) ?>” width=”80″ height=”77″ alt=”htmlEscape($_product->getName()) ?>” title=”htmlEscape($_product->getName()) ?>” />
    <a href="getProductUrl() ?>” title=”htmlEscape($_product->getName()) ?>)”>htmlEscape($_product->getName()) ?>
    getReviewsSummaryHtml($_product, ‘short’) ?>
    getPriceHtml($_product, true, ‘-new’) ?>
    isSaleable()): ?>
    <button type="button" class="button" onclick="setLocation('getAddToCartUrl($_product) ?>’)”>__(‘Add to Cart’) ?>

    __(‘Out of stock’) ?>

    helper(‘wishlist’)->isAllow()) : ?>
    <a href="getAddToWishlistUrl($_product) ?>”>__(‘Add to Wishlist’) ?>

    getAddToCompareUrl($_product)): ?>
    | <a href="”>__(‘Add to Compare’) ?>

     

    上面是你模板里面的代码。要如何修改才能完成换行设置。每行显示3-4个产品。让首页看起来更美观呢?

  2. 产首页显示方式有grid,和列表俩种。当在分类显示中选择列表时,会影响首页的显示,比如我首页显示的是grid,但是在分类中我改变为列表,当我打开首页时就变成了列表。如何让首页只显示grid的方式。
    需要修改哪句代码。

    1. 去修改你首页使用的那个模板文件,就是首页显示商品使用的那个list phtml文件,修改里面的判断语句

评论已关闭。