如何在OpenCart 3.x中使用模板语言Twig添加额外选项卡

时间:2017-12-04 11:45:17

标签: twig opencart

我想要一个额外的描述标签,称为"概述"对于nav nav-tabs类下的产品页面。

这是完整的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>

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

我想要一个更多的标签,说OVERVIEW有不同的内容。

有人可以帮我解决这个问题吗?

P.S:我读过这个:how to add extra tab without any extension in product page in opencart 但是,我不确定在哪里找到这段代码(我也尝试过查看产品TPL文件)。

2 个答案:

答案 0 :(得分:2)

您应该尝试此操作,它会添加新标签名称概述

<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>

输出图像

答案 1 :(得分:2)

您刚刚添加了两件事

ul 标记中的

添加此 li

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

并为标签内容

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