如何将自定义选项卡添加到 Magento 产品页_magento教程_php教程

如何将自定义选项卡添加到 Magento 产品页面？产品页都是您的存储区的最重要部分之一。所以很重视，使此页面看起来完美，这就是为什么。选项卡是显示很多紧凑型块中的数据的好方法。它有助于避免巨大的滚动条，也好看多了便携式设备上。

magento custom product tabs

你可以找到更多的 Magento 模板带有选项卡的产品视图页面上，我们要告诉你最简单的方法将它们添加到那里。所有这些示例都适用于默认的 Magento 主题，但与实践你可以使用下列方法以自定义您自己的主题。

首先，转到您的存储区的主题文件夹，在那里找到以下文件app/design/frontend/default/yourtheme/layout/catalog.xml。如果该文件不存在，则始终可以复制它从app/设计/前端/基地/默认/布局/。请注意您自己的主题可以位于不同的路径。在文件下中,，找到部分：

<!--

Product view

-->

<catalog_product_view translate="label">

<label>Bottom Block Options Wrapper</label>

<action method="insert"><block>product.tierprices</block></action>

<action method="append"><block>product.info.addtocart</block></action>

<action method="append"><block>product.info.addto</block></action>

</block>

在这一节后, 插入下面的块：

<alias>description</alias>

<title>Description</title>

<block>catalog/product_view_description</block>

<template>catalog/product/view/description.phtml</template>

</action>

<alias>additional</alias>

<title>Additional Information</title>

<block>catalog/product_view_attributes</block>

<template>catalog/product/view/attributes.phtml</template>

</action>

</block>

正如您可以看到内置的方法 'addTab' 内正在添加选项卡。在节点中，您可以选择您自己的数据块和 phtml 文件，您会看到在选项卡内。在我们的示例中，我们增加了两个选项卡说明和其他信息。Magento 安装包含这两个 phtml 文件，因此如果您在您自己的主题中找不到你可以将它从复制app/设计/前端/基地/默认/模板/目录/产品/视图/。第一个选项卡将包含产品的说明，第二个选项卡将附加产品的属性的列表。正如我们已经说过您可以添加您自己的块作为选项卡。别忘了完成此操作后清理 Magento 高速缓存。

第二，你需要复制下列文件app/design/frontend/default/modern/template/catalog/product/view/tabs.phtml

到app/设计/前端/默认/yourtheme/模板/目录/产品/视图/ .

此文件包含模型选项卡部分。

第三，您应添加样式的选项卡。转到您一般 css 文件（通常为skin/frontend/default/yourtheme/css/styles.css）并添加下列行：

/* Product Tabs */

.product-tabs { margin-bottom:15px; border-bottom:1px solid #666; background:#f2f2f2 url(../images/bkg_tabs.gif) 0 100% repeat-x; height: 25px;}

.product-tabs li { float:left; border-right:1px solid #a4a4a4; border-left:1px solid #fff; font-size:1.1em; line-height:1em; }

.product-tabs li.first { border-left:0; }

.product-tabs li.last { border-right:0; }

.product-tabs a { display:block; padding:6px 15px; color:#444; }

.product-tabs a:hover { background-color:#ddd; text-decoration:none; color:#444; }

.product-tabs li.active a,

.product-tabs li.active a:hover { background-color:#666; font-weight:bold; color:#fff; }

.product-tabs-content h2 { display:none; font-size:12px; font-weight:bold; }

最后我们到最后一步。转到文件app/design/frontend/base/default/template/catalog/product/view.phtml （如果没有任何此类文件您应该已经知道从哪里得到它）和插入以下行你想要查看的选项卡部分的地方：

1	<?php echo $this->getChildHtml('info_tabs') ?>

这是所有。可以肯定一切会好尝试在每一步后清理缓存。好运气，你可以问任何你的问题。

(责任编辑：好模板)