如何在 BigCommerce 中创建自定义选项卡

Question

我正在尝试在 BigCommerce 中创建自定义选项卡，但没有找到任何令人满意的解决方案。

这是产品页面的格式，我已经在其中获得了此默认选项卡

• 产品说明
• 保修
• 评论
• 其他详情

我想要特定产品的Q&A部分的动态选项卡。

我知道可以通过脚本完成但找不到它。任何帮助将非常感激。

Answer 1

您可以使用 {{split}} 把手助手将产品描述内容拆分为应显示在不同选项卡上的部分。

例如，您可以像这样编辑您的description-tabs.html文件（如果您使用的是Cornerstone以外的主题，则为等效文件）以添加新选项卡并将产品描述内容分为两部分：

<ul class="tabs" data-tab>
    <li class="tab is-active">
        <a class="tab-title" href="#tab-description">{{lang 'products.description'}}</a>
    </li>
    {{#if product.warranty}}
        <li class="tab">
            <a class="tab-title" href="#tab-warranty">{{lang 'products.warranty'}}</a>
        </li>
    {{/if}}
    <li class="tab">
            <a class="tab-title" href="#tab-faq">Q & A</a>
        </li>
</ul>
<div class="tabs-contents">
    <div class="tab-content is-active" id="tab-description">
        {{{first (split product.description '<!-- tab -->')}}}
    </div>
   {{#if product.warranty}}
       <div class="tab-content" id="tab-warranty">
           {{{product.warranty}}}
       </div>
   {{/if}}
   <div class="tab-content" id="tab-faq">
           {{{last (split product.description '<!-- tab -->')}}}
       </div>
</div>

我们指定的分隔符是

<!-- tab -->

。要将描述内容划分到不同的选项卡中，请在产品描述编辑器中输入产品描述和问答部分，并在各部分之间使用

<!-- tab -->

来指示内容应在不同选项卡中划分的位置。

Answer 2

上面的答案有效，但不要使用

'<!-- tab -->'

它在源代码中编译为

<!-- tab -->

，因此它不起作用。使用任何带有普通字符的字符串。例如：

'splity'

Answer 3

感谢您的回答。

我已经成功添加了一个额外的选项卡，但是多个选项卡的代码会是什么样子。例如问答、技术规格、品牌等

我不确定要复制/编辑代码的哪一部分。

非常感谢任何帮助