Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Magento
Code

Magento主题发展:类别页面,第1部分

by
Length:LongLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Home Page Styling
Magento Theme Development: Category Page, Part 2

Chinese (Simplified) (中文(简体)) translation by Wei Zhang (you can also view the original English article)

恭喜您完成新主题的主页,并从下一页开始。 在本教程中,我们将开始修改Magento主题的类别页面。

类别页面主要由四部分组成:工具栏,网格模式,列表模式和侧边栏。 我们将讨论本文的前三个部分,然后在下一个教程中,我们将修改侧边栏并执行一些CSS修复。

如果您查看我们主题的任何类别页面,它目前看起来像这样:

Category Page before editing

虽然我们想让它看起来像这样:

HTML design Category Page

如果您注意到,我们当前的类别页面左侧和右侧都有宽的空白区域。 我们需要弄清楚为什么内容区域没有占用足够的空间。 让我们首先看看哪个模板负责呈现此页面。 我们可以通过从管理面板启用模板提示来完成此操作,就像您在本系列之前多次完成一样。

在这里我们发现它有一个三列布局渲染这个页面,这就是左边有空宽空间的原因,因为没有块被分配给左侧边栏。

Template Hints for Category Page

为了使这个页面看起来像我们的HTML设计,我们将它改为两列。 在管理面板中,转到目录>管理类别>自定义设计>页面布局,然后使用左栏将其更改为2列

Changing Page Layout

现在我们的页面应该有一个双列布局,左侧有一个侧边栏,这是我们设计的要求。

在本文中,我们只会更改正确的区域(而不是侧边栏),我们将从工具栏开始编辑过程。 通过模板提示,我们将通过再次启用模板提示来检查负责呈现的phtml文件。

正如我们发现的那样,这个文件是:\template\catalog/product/list/toolbar.phtml.

我们将在我们的新主题中复制它,将其与我们的HTML文件的代码进行比较,然后开始进行更改。 我们当前的toolbar.phtml文件代码如下所示:

我们必须将它与负责工具栏部分的HTML代码进行比较,这是:

我们将通过放入动态标记和不同的forif语句来开始修改此代码。 例如,要为视图模式呈现网格和列表模式的链接,我们将添加以下代码:

这段代码基本上是迭代所有活动模式(列表和网格),然后列出每个模式的锚标记。 在这里,非常巧妙地,我们使用$_label变量为它们分配了不同的类和标题,每个模式都有不同的变量。

类似地,您可以通过将sort-bylimiter 部件与实际的toolbar.phtml文件进行比较来自行修改它。 修改后,此文件的最终代码如下所示:

如果我们现在刷新页面,它看起来就像这样。 一切都已到位,但CSS非常关闭,我们将在下一篇文章中解决。

Toolbar after editing

现在是时候更改此页面上显示的实际产品了。 这里的产品可以以两种不同的方式显示,即列表模式和网格模式。 如果我们启用模板提示来找出负责此部分的文件,我们将看到网格和列表模式的代码都写在同一个文件中,即frontend\rwd\default\template\catalog/product/list.phtml.

此文件中的列表代码位于第44到116行,这是:

我们现在必须将它与我们的HTML模板中的productlist.html中的HTML列表代码进行比较。

修改此代码非常简单。 我们将使用这些初始化行:

然后我们将在li标签周围放置一个for循环:

最后,我们将用动态代码替换产品名称,价格,描述,图像文件链接和URL。 最终代码如下所示:

现在,如果我们刷新页面,我们将看到列表模式中的类别页面看起来像这样。 我知道这不是我们想要的样子,但我们所有的HTML都已到位,所以现在我们只需要修改它的CSS,我们将在下一个教程中进行修改。

List Mode after editing

现在进入网格模式,在同一个list.phtml文件中,代码为118到176。

HTML代码在我们的HTML模板的productgrid.html文件中如下所示:

修改此部分将与我们在列表部分中所做的非常相似。 首先,我们将进行一些初始化,与默认的list.phtml文件相同。

接下来,我们将每个li项目包装在for循环中以迭代所有产品。

最后,我们将用相关的动态标签替换产品名称,价格,描述等产品属性。 您可以从实际的list.phtml文件中非常方便地找到它们。

最终代码如下所示:

现在,如果刷新页面,网格模式将如下所示:

Grid Mode after editing

在本文中,我们修改了此页面的工具栏以及列表和网格部分。 在下一篇文章中,我们将修改侧边栏,并进行一些CSS样式修复。 在下一篇文章的末尾,我们的类别页面看起来与HTML设计非常相似。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.