如何在 OpenCart 中使用模板语言 Twig 添加额外的标签 3.x

How to Add Extra Tab Using Template Language Twig In OpenCart 3.x

我想要一个名为 "Overview" 的额外描述标签,用于导航标签下的产品页面 class。

这是完整的 Twig 模板代码:

<ul class="nav nav-tabs">
        <li class="active"><a href="#tab-description" data-toggle="tab">{{ tab_description }}</a></li>
        {% if attribute_groups %}
        <li><a href="#tab-specification" data-toggle="tab">{{ tab_attribute }}</a></li>
        {% endif %}
        {% if review_status %}
        <li><a href="#tab-review" data-toggle="tab">{{ tab_review }}</a></li>
        {% endif %}
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab-description">{{ description }}</div>
        {% if attribute_groups %}
        <div class="tab-pane" id="tab-specification">
          <table class="table table-bordered">
            {% for attribute_group in attribute_groups %}
            <thead>
              <tr>
                <td colspan="2"><strong>{{ attribute_group.name }}</strong></td>
              </tr>
            </thead>
            <tbody>
            {% for attribute in attribute_group.attribute %}
            <tr>
              <td>{{ attribute.name }}</td>
              <td>{{ attribute.text }}</td>
            </tr>
            {% endfor %}
              </tbody>
            {% endfor %}
          </table>
        </div>
        {% endif %}
        {% if review_status %}
        <div class="tab-pane" id="tab-review">
          <form class="form-horizontal" id="form-review">
            <div id="review"></div>
            <h2>{{ text_write }}</h2>
            {% if review_guest %}
            <div class="form-group required">
              <div class="col-sm-12">
                <label class="control-label" for="input-name">{{ entry_name }}</label>
                <input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
              </div>
            </div>
            <div class="form-group required">
              <div class="col-sm-12">
                <label class="control-label" for="input-review">{{ entry_review }}</label>
                <textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
                <div class="help-block">{{ text_note }}</div>
              </div>
            </div>
            <div class="form-group required">
              <div class="col-sm-12">
                <label class="control-label">{{ entry_rating }}</label>
                &nbsp;&nbsp;&nbsp; {{ entry_bad }}&nbsp;
                <input type="radio" name="rating" value="1" />
                &nbsp;
                <input type="radio" name="rating" value="2" />
                &nbsp;
                <input type="radio" name="rating" value="3" />
                &nbsp;
                <input type="radio" name="rating" value="4" />
                &nbsp;
                <input type="radio" name="rating" value="5" />
                &nbsp;{{ entry_good }}</div>
            </div>
            {{ captcha }}
            <div class="buttons clearfix">
              <div class="pull-right">
                <button type="button" id="button-review" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_continue }}</button>
              </div>
            </div>
            {% else %}
            {{ text_login }}
            {% endif %}
          </form>
        </div>
        {% endif %}</div>
    </div>

使用此代码,页面如下所示:

我想要一个标签,上面写着不同内容的“概述”。

谁能帮我解决这个问题?

P.S:我读过这个: 但是,我不确定在哪里可以找到这段代码(我也试过查看产品 TPL 文件)。

你应该试试这个,它会添加新的标签名称 Overview

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab-description" data-toggle="tab">{{ tab_description }}</a></li>
    {% if attribute_groups %}
    <li><a href="#tab-specification" data-toggle="tab">{{ tab_attribute }}</a></li>
    {% endif %}
    {% if review_status %}
    <li><a href="#tab-review" data-toggle="tab">{{ tab_review }}</a></li>
    {% endif %}
    <li><a href="#tab-overview" data-toggle="tab">Overview</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab-description">{{ description }}</div>
    {% if attribute_groups %}
    <div class="tab-pane" id="tab-specification">
      <table class="table table-bordered">
        {% for attribute_group in attribute_groups %}
        <thead>
          <tr>
            <td colspan="2"><strong>{{ attribute_group.name }}</strong></td>
          </tr>
        </thead>
        <tbody>
        {% for attribute in attribute_group.attribute %}
        <tr>
          <td>{{ attribute.name }}</td>
          <td>{{ attribute.text }}</td>
        </tr>
        {% endfor %}
          </tbody>
        {% endfor %}
      </table>
    </div>
    {% endif %}
    {% if review_status %}
    <div class="tab-pane" id="tab-review">
      <form class="form-horizontal" id="form-review">
        <div id="review"></div>
        <h2>{{ text_write }}</h2>
        {% if review_guest %}
        <div class="form-group required">
          <div class="col-sm-12">
            <label class="control-label" for="input-name">{{ entry_name }}</label>
            <input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
          </div>
        </div>
        <div class="form-group required">
          <div class="col-sm-12">
            <label class="control-label" for="input-review">{{ entry_review }}</label>
            <textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
            <div class="help-block">{{ text_note }}</div>
          </div>
        </div>
        <div class="form-group required">
          <div class="col-sm-12">
            <label class="control-label">{{ entry_rating }}</label>
            &nbsp;&nbsp;&nbsp; {{ entry_bad }}&nbsp;
            <input type="radio" name="rating" value="1" />
            &nbsp;
            <input type="radio" name="rating" value="2" />
            &nbsp;
            <input type="radio" name="rating" value="3" />
            &nbsp;
            <input type="radio" name="rating" value="4" />
            &nbsp;
            <input type="radio" name="rating" value="5" />
            &nbsp;{{ entry_good }}</div>
        </div>
        {{ captcha }}
        <div class="buttons clearfix">
          <div class="pull-right">
            <button type="button" id="button-review" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_continue }}</button>
          </div>
        </div>
        {% else %}
        {{ text_login }}
        {% endif %}
      </form>
    </div>
    {% endif %}
    <div class="tab-pane" id="tab-overview">
        <h1>Overview</h1>
        <!-- Your HTML and twig code here-->
    </div>
</div>

输出图像

您刚刚添加了两件事

ul 标签中添加这个 li

<li><a href="#tab-overview" data-toggle="tab">My Tab</a></li>

并为 tab-content 添加一个 div

<div class="tab-pane" id="tab-overview">
     <h1>My Tab Content</h1>
     <!-- Your HTML and twig code here-->
</div>