html - 在 Magento 中，如何将产品 ListView 调整为更小、更简洁？

Question

基本上，我的问题很简单。目前，magento 在 ListView 中显示产品的方式对我的需求来说太大了。它使用了比我想要的大得多的图像，并且列出的每个产品都占用了大量空间。我想要的是调整列表的大小，以便每个产品基本上是一两行，包括左侧非常小的缩略图、标题、简短描述，最后是价格。如果我能以这种方式列出我的产品，更多的产品将能够以简洁的方式放在一个页面上(这正是我需要的)。

作为引用，可以在此处查看网站当前在 ListView 中显示产品的方式以及几个测试产品:http://soundcherry.com/index.php/sound-effects.html

有什么方法可以让我达到我想要的结果吗？我不确定要修改哪些文件或究竟要更改什么。我一直在做尽可能多的研究，但我有点业余(尤其是在任何类型的编码方面)并且我一直无法弄清楚。

任何帮助将不胜感激。谢谢!

Answer 1

本来想评论的，但是不合适

编辑模板文件和css文件

例如 style.css

(在您的主机上 http://soundcherry.com/skin/frontend/default/f002/css/styles.css )

在第 799 行更改 padding:12px 10px;填充:1px 2px；然后硬刷新(Ctrl+F5)并查看结果或者在第 801 行的同一文件上，您可以更改边距:0 0 10px；边距:0 0 2px；并将宽度和高度更改为宽度:80px；高度:80px；您还可以在第 801 行之后添加一行来强制调整这些图像的大小，如下所示:.products-list .product-image img { width:80px;高度:80px；

但是您应该在模板文件中更改 维度，

搜索您的模板文件夹，当您找到文件时，在 < img > 中编辑 width= 和 height=标签

注意 如果您使用的是 Firefox，请右键单击要更改的位置并单击检查元素，与左侧框交互以直观地选择您想要的元素，然后您将找出哪一行是该类或 id Inspector右边的box，id是唯一的，用#id_name { }表示，class是这样表示的.class_name { }

评论后编辑

为此你应该编辑你的模板文件，(它们是带有 .Phtml 文件扩展名的 html 文件位于 im/template/文件夹)找到你需要更改的文件并更改它

查看此页面，因为它有很多有用的信息

Click Here

编辑2

我用过其他系统，但没有用过 magento

我不知道它到底是哪个文件，我认为它可能是 products.phtml 或模板文件夹中的其他内容

代码是这样的

    <div class="f-fix">
    <h2 class="product-name"><a href="{$link}" title="{$title}">{$title}</a></h2>
    <div class="price-box"><span class="regular-price" id="product-price-3"><span class="price">{$price}</span></span></div>
    <p class="availability out-of-stock"><span>{$availability}</span></p>
    <div class="desc std">{$desc}<a href="{$link}" title="{$title}" class="link-learn">Learn More</a>
    </div><ul class="add-to-links"><li><a href="{$wishlist}" class="link-wishlist">Add to Wishlist</a></li>
    <li><span class="separator">|</span> <a href="{$compare}" class="link-compare">Add to Compare</a></li>
    </ul>
    </div>
    

因为

和

标签(可能出现如

)是 block 元素，你应该对它们应用 style="display:inline-block"这可以是像这样应用

<p class="availability out-of-stock" style="display:inline-block">    

或者你可以像这样通过空格将新类应用到当前标签

                                    |HERE|
<p class="availability out-of-stock new_class">

然后像这样在你的 style.css 中定义这个类

.new_class { display:inline-block; }

或删除

和

标签，使它们全部出现在一行中，例如:

    <div class="f-fix">
    <h2 class="product-name"><a href="{$link}" title="{$title}">{$title}</a></h2>
    <span class="regular-price" id="product-price-3"><span class="price">{$price}</span></span>
    <span style="availability out-of-stock">{$availability}</span>
    {$desc}<a href="{$link}" title="{$title}" class="link-learn">Learn More</a>
    <a class="add-to-links" href="{$wishlist}" class="link-wishlist">Add to Wishlist</a>
    <span class="separator">|</span> <a href="{$compare}" class="link-compare">Add to Compare</a>
    </div>

我想你编辑这样的脚本模板可能有点早，请考虑阅读 html 和 css 教程以及我先给你的页面

HTML Toturial

CSS Toturial

加上这个 Magento 设计指南:

Magento Design Guide

我知道目前这并不好玩，但相信我它太简单了(但是你正试图从一个复杂的脚本和模板开始，请谷歌搜索简单的例子来开始学习 CSS 和HTML) 一旦你学会了 CSS 和 HTML，你就会非常喜欢它们

关于html - 在 Magento 中，如何将产品 ListView 调整为更小、更简洁？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17383769/

上一篇：CSS:纯形式的 css 不会在按钮中添加颜色

下一篇：css - 在 knockoutjs 中应用 ko.observable 的 css 属性？