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

Magento主题发展:主页,第2部分

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

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

在本系列的上一个教程中,我们开始修改主页的标题部分。 在本教程中,我们将从我们停止的头部分改进开始,然后我们将创建新的滑块CMS块并从我们的模板文件中调用它。 正如我们在本文中要介绍的那样,让我们不再拖延地开始吧。

由于我们已经部分修复了顶部标题,唯一需要修复的是顶部购物车部分。 要自定义标题购物车,首先我们将尝试找出哪些模板文件负责呈现该部分。 为了分析这一点,我们首先将一些产品添加到购物车,以便我们可以对其进行全面调查。

Enabling Template Tags

在我们启用模板提示时,我们可以看到标题购物车的外部容器来自此模板文件:frontend/rwd/default/template/checkout/cart/minicart.phtml. 然后单击,展开的部分将通过此文件呈现:frontend/rwd/default/template/checkout/cart/minicart/items.phtml. 最后,每个购物车项目都通过此文件呈现:frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

我们将所有这些文件导入到我们新创建的主题中,然后开始修改它们。

让我们用最外面的minicart.phtml文件开始修改过程。 这是此文件的当前代码:

在我们开始对其进行任何修改之前,让我们检查原始HTML文件中的标题购物车部分的代码。 那里的代码看起来像这样:

因此,我们将开始修改PHP文件代码,使其与我们的HTML代码类似。 我们只需在此处使用锚标记来包装购物车图标,然后我们将显示迷你网页内容。 因此,我们的代码将如下所示:

在这里,我们已经替换了顶部购物车的最外层包装,但现在我们需要编辑下拉部分包装器。 正如我们已经看到的那样,包装器来自frontend/rwd/default/template/checkout/cart/minicart/items.phtml. 让我们检查一下这个文件的当前代码:

当我们将它与您的HTML模板进行比较时,我们需要做几件事。 首先,在minicart-wrapper div中,我们将开始实现我们的ul,对于每个项目,我们将在li标签下进行迭代。 最后,我们会显示购物车总数,或者表明购物车中没有商品。 我们对此文件的最终代码如下所示:

现在剩下的最后一部分是为购物车清单项目本身设计样式。 正如我们已经想到的那样,负责该部分的文件是:frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

这个文件的当前代码看起来很长很难理解,但不要被吓倒。 我们不需要编辑所有这些,因为文件代码的主要部分只是计算合适的价格和其他产品选项。 同样,我们将检查我们的HTML代码,将其放在此文件中,然后开始用动态值替换静态文本。 这是我们HTML中每个购物车项目的代码:

我们将用以下内容替换img标记:

接下来,我们将用动态代码替换名称:

要显示产品选项,我们将使用此动态代码:

然后我们将使用此代码确定并显示数量:

对于价格计算,我们将在静态价格的位置输入此代码:

作为最后一步,我们将替换href以使用以下内容删除URL:

我从实际的default.phtml中找到了所有这些代码。 您不必自己弄清楚所有逻辑和代码,但如果仔细观察,可以在要修改的文件中找到它。

所以,我们的default.phtml文件的最终代码如下所示:

现在,如果您保存所有这些文件并重新加载主页,您应该看到如下内容:

Top Cart Fixed

我们在样式方面存在一些问题,但HTML呈现非常接近我们所需的HTML设计。 现在我们已经完成了顶部标题部分,接下来是徽标部分。 幸运的是,除了样式部分(使徽标中心对齐)之外,没有什么可做的,我们将在造型文章中做。 我们的菜单项似乎与我们期望的非常接近,因此我们只需要修改搜索栏,然后修改主滑块。

要修改我们的搜索栏,让我们打开模板提示,看看哪个部分负责呈现此代码:frontend/rwd/default/template/catalogsearch/form.mini.phtml.

目前这个文件看起来像这样:

因此,我们将使用HTML的外部div,并用动态内容替换内部内容。 我们新的form.mini.phtml文件如下所示:

在本文的最后一部分,我们将编辑主滑块。 为此,我们将创建一个新的静态块,方法是转到CMS>Static Blocks>Add New Block。 我们将这个Block命名为'Homepage Slider',我们将标识符作为'home-slider'插入 - 这就是代码能够找到这个块的方式。

Creating Homepage Slider Static Block

现在我们将从您的HTML输入滑块代码。

请注意,我们已使用skin_url标记替换了相对于skin目录的图像源,如下所示:

现在我们将在上一篇文章中创建的header.phtml文件中添加这些行,就在最后一行的上方<?php echo $this->getChildeHtml('topContainer'); ?>

最后一步是删除当前滑块。 为此,请转到CMS-Pages>Madison Island,然后从“Content ”部分删除所有代码,直到样式部分的开头。

Removing previous Home Slider

保存所有内容并重新加载主页,现在你应该看到一切都很顺利。 有些样式已关闭,但我们将在单独的样式教程中处理。 现在我们只需要关注主页的内容部分,我们将在其中显示最新的产品轮播,然后我们将自定义页脚。 我们将在下一个教程中完成所有这些,敬请期待!

Envato qr branded
关注我们的公众号
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.