Question

我希望设置与此处类似的产品列表：http://www.diptyqueparis.com/personal-fragrances.html

CSS到目前为止只得到了我。我的list.phtml目前是库存（来自空白主题）。我希望我的第一个和最后一个图像以与产品图像的其余部分不同的尺寸显示，并相应地调整网格。然后我会假设我必须修改ul以适应这些变化，但不能自己这样做，这就是我需要帮助的地方。

任何让我走向正确（逻辑）方向的建议都将受到赞赏。谢谢你的阅读。

编辑：我没有编辑任何核心文件。这与空白（或任何）主题中的list.phtml有关。

Answer 1

关于Magento最棘手的部分之一是了解整体。花一些时间来理解模板和设计覆盖。

实践说：

在您的magento设计主管实例中创建一个新的主题目录
将list.phtml复制到该新设计目录中的同一目录中
对您的副本进行更改
在配置的设计区域中指定新主题目录作为覆盖

这就是你需要在坚果壳中做的事情。不要只是开始改变Magento核心中的list.phtml ...如果你这样做，你会后悔:)

---后来加法---

为了实现布局，我建议使用某种“计数器”，在第一个和（在你的例子中）第十个项目上插入一些额外的css类。

您还可以编辑布局xml文件，使列表一次显示10个（如果不是直接通过配置

编辑：

<?php // Grid Mode ?>

<?php $_collectionSize = $_productCollection->count() ?>
<?php $_columnCount = $this->getColumnCount(); ?>
<?php $lastItem = 10; // added this line ?>
<?php $i=0; foreach ($_productCollection as $_product): ?>

    <?php if ($i++%$_columnCount==0): ?>
    <ul class="products-grid">
    <?php endif ?>
        <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>
            <?php if($i==0): ?> firstItem<?php elseif($i==($lastItem-1):?> lastItem<?php endif; // added this line ?>">
            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a>

list.phtml上的Magento图像

1 个答案: