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
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.