1

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

作为参考，网站当前在列表视图中显示产品的方式可以在这里看到几个测试产品：http ://soundcherry.com/index.php/sound-effects.html

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

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

4

1 回答 1

1

我打算发表评论，但不合适

编辑模板文件和 css 文件

例如在 style.css

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

在第 799 行更改填充：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> 维度，

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

注意 如果您使用的是 Firefox，请右键单击要更改的位置并单击“检查元素”，与左侧框交互以直观地选择您想要的元素，然后您将在右侧框中找到该类或 id 所在的行Inspector 的 id 是唯一的，由 #id_name { } 显示，class 显示如下 .class_name { }

评论后编辑

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

看看这个页面，因为它有很多有用的信息

点击这里

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

由于 < div > 和 < p > 标签（可能出现如 < div class="desc dtd" > ）是块元素，您应该对它们应用 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 > </div > 和 < p > </p > 标签，使它们都出现在一行中，例如：

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

CSS 教程

加上这个 Magento 设计指南：

Magento 设计指南

我知道它现在不好玩，但相信我它很容易（但你试图从一个复杂的脚本和模板开始，请谷歌搜索简单的例子来开始学习 CSS 和 HTML） ，一旦你学会了 CSS和 HTML，您会非常喜欢它们

于 2013-06-29T19:45:14.653 回答