现在我们已经完全定制了前半部分主页，接下来我们需要修改主页的内容。如果我们看看我们的HTML设计，首页内容部分只有一个标题和最新的轮播产品。有一个 Magento 小部件，我们可以使用它来显示最新的产品主页。实际上，如果我们查看当前的主页部分，它已经有其上启用了最新的产品小部件，但我们需要修改它以匹配我们的设计要求。
如果我们通过管理面板查看主页内容 > CMS > 页面 > MadisonIsland > 内容，我们会看到只有一行PHP代码（除了一些样式标签），即：
{{widget type="catalog/product_widget_new" display_type="new_products" products_count="5" template="catalog/product/widget/new/content/new_grid.phtml"}}
所以，基本上所有的首页内容都来自于此模板（这只是展示新产品的模板）。我们将复制这个文件从 RWD 主题到我们的新主题，位于 catalog/product/widget/new/content/new_grid.phtml，并开始编辑它，使其看起来像我们的 HTML 设计。如果我们看一下该文件的当前代码是：
getProductCollection()) && $_products->getSize()): ?>
当我们查看本部分的 HTML 代码时，它看起来像这样：
Hot Products
因此，我们首先在此 HTML 中插入动态标签。我的原因是向您显示该文件的当前代码，以便您可以找到所需的该代码中的动态标记，并将它们放入 HTML 中。
我们不必对 div 结构进行任何更改，因此第一行需要更改的是
h3标记：Hot Products
我们需要将
Hot和Products的静态文本替换为 Magento$this标签，以便 Magento 稍后可以根据用户偏好翻译这些标签。因此，这一行将变成这样：__('New') ?>__(' Products') ?>
下一行需要更改的是
image标记，我们需要在其中更改relevant path of the image source. Currently it looks 像这样：我们将其更改为：
<img src="helper('catalog/image')->init($_product, 'small_image')->resize(236, 357) ?>"/>这里这个动态标签将获取产品的实际小图像236 x 357 像素大小。接下来，我们需要更改这个
Add to Cart链接：我们将其更改为：
<a href="getProductUrl() ?>" class="info"> isSaleable()): ?> __('Add to Cart') ?> __('Out of stock') ?>它有一个产品详细信息页面的动态 URL，并且仅显示“添加到”购物车”（如果产品可用）。否则会显示“缺货”。最后，我们将通过替换此行来更新产品价格和名称：
Iphone 5s Gold 32 Gb 2013$451.00
有了这个：
helper('catalog/output')->productAttribute($_product, $_product->getName() , 'name') ?>getPriceHtml($_product, true, '-widget-new-grid') ?>
这将使我们的单一产品视图准备就绪，但要迭代它新产品，我们必须将 item div 包含在循环中，因此我们将添加这一行在它的顶部：
getItems() as $_product): ?>最后的这一行用于终止循环：
So the full code for that file will become 像这样：
getProductCollection()) && $_products->getSize()): ?>__('New') ?>__(' Products') ?>
getItems() as $_product): ?><img src="helper('catalog/image')->init($_product, 'small_image')->resize(236, 357) ?>"/>getProductUrl() ?>" class="info"> isSaleable()): ?> __('Add to Cart') ?> __('Out of stock') ?>helper('catalog/output')->productAttribute($_product, $_product->getName() , 'name') ?>getPriceHtml($_product, true, '-widget-new-grid') ?>
立即刷新您的主页。它应该有一个完美的工作和风格new products section, which would look 像这样：
现在我们需要在完成主页之前修改页脚。如果我们看看我们的 HTML 设计，页脚有四个部分。第一个显示“我们的品牌，第二个显示订阅框和社交媒体链接，第三个显示一些 URL，第四个只是版权声明。
第四部分已经存在于我们的主题中，所以我们只需必须修改内容和样式，但其他三个组件我们必须添加到主题中。
要添加组件，我们将创建一个新的来自管理面板的静态块并将我们的内容放在那里。那么，我们将前往管理面板 > 静态块 > 添加新块阻止，并为我们的品牌部分。我们将块标题更改为“我们的品牌”，设置标识符为“our_brands”，选择“All Store Views”的商店视图，然后输入内容部分：
如果你仔细观察，它与我们在 HTML 中的代码相同部分 – 我们刚刚更改了图像的相对路径，同时手动从所见即所得编辑器中上传新图像。保存块，并且开始为注册部分创建另一个块。
对于第二个块，我们将使用“页脚上方”的块标题。对于标识符，我们将使用“above_footer”，对于内容，我们将输入以下代码：
现在我们必须以类似的方式创建链接块。我们将创建一个新块的块标题为“页脚链接”，标识符为“footer_links”，并将以下代码放入其中：
Customer Support
Customer Support
Customer Support
所有这些链接现在都没有链接，但您可以稍后修改它们。图像链接再次使用所见即所得的上传功能动态生成编辑。所有其余代码只是从 HTML 复制并粘贴。
也保存这个块，然后查看主页，但仍然看不到这些三个街区出现。这是因为你必须明确告诉 Magento在哪里显示这些新块，我们可以从布局部分做到这一点。为了为此，转到
layout/local.xml文件，并在default标记结束之前添加这些行。footer_links above_footer our_brands这个XML 代码基本上是告诉 Magento 将这两个新块添加到 Magento 中页脚部分。最后，我们需要从页脚 phtml 调用这些块文件。为此，我们将在此位置创建一个新的 footer.phtml 文件：
template/page/html/footer.phtml。在此
footer.phtml文件中添加此代码：getChildHtml("our_brands") ?>这个 is again just HTML code taken, where all the section codes are替换为静态块的相关链接。版权部分是替换为版权动态标签。
现在检查主页，它现在应该显示这些新创建的静态Blocks, and should look 像这样：
我们的主页现已完成。唯一剩下的就是一些风格修正，我们将在下一篇文章中做到这一点。
以上就是继续探索：Magento主题开发之首页设计，第三部分的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1552035.html赞 (0)打赏微信扫一扫
支付宝扫一扫
微信扫一扫 
支付宝扫一扫 关于作者
相关推荐
-
PHP 函数与 Magento 函数比较
php函数是php语言内置的通用函数，magento函数是magento框架中用于电子商务任务的特定函数。它们在命名约定、参数、返回值和用途上存在差异。php函数以小写开头、参数强制，单一返回值，而magento函数以大写开头、参数可选，返回对象。 PHP 函数与 Magento 函数：深入比较 了…
-
VSCode主题定制：从颜色选择到完整主题开发
答案：VSCode主题定制可通过修改settings.json中的workbench.colorCustomizations和editor.tokenColorCustomizations实现个性化配色，或使用Yeoman创建扩展开发完整主题，结合textmate作用域定义语法高亮，最终打包发布至市…
