首页 > 解决方案 > 如何在 BigCommerce 中创建自定义标签

问题描述

我正在尝试在 BigCommerce 中创建自定义标签,但没有遇到任何令人满意的解决方案。

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

我想要特定产品的问答部分的动态选项卡。

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

标签: e-commercebigcommerce

解决方案


您可以使用 {{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 -->在部分之间指示内容应该在不同选项卡之间划分的位置。


推荐阅读