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: Category Page, Part 2
Magento Theme Development: Product Page, Part 2

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

现在我们已经完成了主页和类别页面,在本教程中,我们将开始编辑电子商务网站的第三个最重要的页面:产品页面。 让我们首先打开产品页面,看看它现在的样子以及我们希望它看起来如何。

HTML设计中的产品页面如下所示:

HTML design of product page

我们当前的产品页面如下所示:

Product Page before editing

要开始编辑它,我们将执行与目前为止数十次相同的步骤,即启用模板提示以确定哪些模板文件负责呈现此页面。

Enabling template hints

我们可以看到,该页面是十几个文件的汇编,但幸运的是我们不必编辑所有这些文件。 我们只需编辑其中的三个或四个文件,其余的我们只需修改样式,使它们看起来像我们的设计,而不会弄乱phtml文件。

如果仔细观察,产品部分的整体结构来自\ template \ catalog \ product \ view.phtml文件。 我已经通过上图中的箭头指出了这一点。 此文件提供所有组件的外部结构,然后内部部件来自其他模板,但我们将首先编辑此外部模板。

我们将此view.phtml文件复制到我们的新主题中,然后开始编辑它。 此文件的当前代码如下所示:

现在我们必须查看我们的HTML代码,然后我们将所有HTML代码放入此view.phtml文件中,然后开始编辑它。 我们的HTML设计文件中details.html文件的当前代码是这样的(我只复制产品部分的代码,不包括页眉,页脚部分等):

我知道这是很多代码,可能会吓跑你。 但不要担心,因为当你开始在其中放置动态标签时,你会看到,代码将开始快速融化,我们不必担心大部分内容。

现在我们将通过从实际的view.phtml文件中插入动态标记来开始编辑此HTML代码。

首先,我们将在顶部添加这些行,以进行一些初始化:

然后关闭文件末尾的product-view div(第314行):

接下来,我们将产品详细信息div包装在表单元素中,就像在实际的view.phtml文件中一样。 所以我们将在第10行的product-details div中添加这些行:

同样,我们现在将关闭此form,并在第77行从view.phtml复制此JavaScript:

在下一步中,在tab-box div中(从第129行开始),删除所有现有代码,并从view.phtml复制以下选项卡代码(用这几行代替大约100行代码)。 为了确保选项卡JavaScript保持正常工作,我们将添加当前类选项卡tab-box div,因此新代码将如下所示:

完成所有这些后,现在我们将在删除现有代码后在热门产品div中插入<?php echo $ this->getChildHtml('related_products')?>标签,以便在第166行看起来像这样:

看看如何用这三行代替大约150行代码? 让我们保存所有内容,看看页面到目前为止是如何出现的。 如果你做的一切都正确,它应该是这样的:

Product page after editing viewphtml

它可能看起来很混乱,但相信我,我们越来越接近我们希望页面看起来像。 在下一篇文章中,我们将编辑负责呈现图像部分,相关产品等的文件,我们最后会做一些样式修复,我们的产品页面就准备好了。

最后,让我重申一下,上面显示的大块代码可能会让你感到恐惧,但是一旦你开始用适当的动态标签替换代码,你很快就会意识到编辑这些代码并不是很有用。

在下一篇文章中,我们将通过编辑其他phtml文件来完成本页的其余部分。

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.