Вкладка «Характеристики» OpenCart по-умолчанию

По-умолчанию, в OpenCart 2 и более ранних версий движка главная вкладка, которую мы видим в карточке товара — это вкладка с описанием. Хотя здесь дело вовсе не в движке, а в используемом шаблоне сайта, многие сталкиваются с трудностями при смене этих вкладок. Допустим, вместо вкладки описания надо главной сделать вкладку характеристик или отзывов — начинающие пользователи впадают в ступор на этом моменте.

Рассмотрим как можно легко и просто сделать вкладку «Характеристики» вкладкой по-умолчанию, то есть той, которую мы будем видеть при открытии карточки любого товара на сайте.

Делаем вкладку «Характеристики» главной

Итак, все легко и просто. Здесь многие начинают лезть в контроллеры или модели, встречались и такие персонажи, которые советовали изменять порядок в массиве (вероятно массив со вкладками), но всё гораздо банальней.

Открываем файл product.tpl, отвечающий за вывод карточки товара на вашем сайте. Этот файл находится по пути:

ваш_сайт/catalog/view/theme/*название_темы*/template/product/product.tpl

В этом файле находим такой участок кода (может быть немного изменён в зависимости от используемой темы Опенкарт):

Уже поняли, что нужно сделать, чтобы вкладка характеристики (#tab-specification) была открыта в карточке товара Опенкарт по-умолчанию? Нет?

Обратите внимание на

• .Берём класс class=»active» из #tab-description и переносим его в #tab-specification. Получаем следующий код, которым заменяем код выше:
  
  <ul class="nav nav-tabs"> <li><a href="#tab-description" data-toggle="tab"><?php echo $tab_description; ?></a></li> <?php if ($attribute_groups) { ?> <li class="active"><a href="#tab-specification" data-toggle="tab"><?php echo $tab_attribute; ?></a></li> <?php } ?> <?php if ($review_status) { ?> <li><a href="#tab-review" data-toggle="tab"><?php echo $tab_review; ?></a></li> <?php } ?> </ul>

  1 2 3 4 5 6 7 8 9

  <ul class="nav nav-tabs">             <li><a href="#tab-description" data-toggle="tab"><?php echo $tab_description; ?></a></li>             <?php if ($attribute_groups) { ?>             <li class="active"><a href="#tab-specification" data-toggle="tab"><?php echo $tab_attribute; ?></a></li>             <?php } ?>             <?php if ($review_status) { ?>             <li><a href="#tab-review" data-toggle="tab"><?php echo $tab_review; ?></a></li>             <?php } ?>           </ul>

  
  Теперь активной по-умолчанию будет вкладка #tab-specification (характеристики), если нужно сделать главной вкладку с отзывами, то class=»active» указываем для li из #tab-review.

  Но это ещё не всё!

  Идём далее по файлу product.tpl, находим ниже код:

  <div class="tab-content"> <div class="tab-pane active" id="tab-description"><?php echo $description; ?></div> <?php if ($attribute_groups) { ?> <div class="tab-pane" id="tab-specification"> <table class="table table-bordered"> <?php foreach ($attribute_groups as $attribute_group) { ?> <thead> <tr> <td colspan="2"><strong><?php echo $attribute_group['name']; ?></strong></td> </tr> </thead> <tbody> <?php foreach ($attribute_group['attribute'] as $attribute) { ?> <tr> <td><?php echo $attribute['name']; ?></td> <td><?php echo $attribute['text']; ?></td> </tr> <?php } ?> </tbody> <?php } ?> </table> </div> <?php } ?> <?php if ($review_status) { ?> <div class="tab-pane" id="tab-review">

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

  <div class="tab-content">             <div class="tab-pane active" id="tab-description"><?php echo $description; ?></div>             <?php if ($attribute_groups) { ?>             <div class="tab-pane" id="tab-specification">               <table class="table table-bordered">                 <?php foreach ($attribute_groups as $attribute_group) { ?>                 <thead>                   <tr>                     <td colspan="2"><strong><?php echo $attribute_group['name']; ?></strong></td>                   </tr>                 </thead>                 <tbody>                   <?php foreach ($attribute_group['attribute'] as $attribute) { ?>                   <tr>                     <td><?php echo $attribute['name']; ?></td>                     <td><?php echo $attribute['text']; ?></td>                   </tr>                   <?php } ?>                 </tbody>                 <?php } ?>               </table>             </div>             <?php } ?>             <?php if ($review_status) { ?>             <div class="tab-pane" id="tab-review">

  Мы сделали вкладку с характеристиками товара Opencart отмеченной по-умолчанию, теперь нужно сделать так, чтобы содержимое вкладки характеристик было также отображалось по-умолчанию. Для этого, содержимому вкладки tab-specification нужно указать класс active.

  В коде выше активная содержимое — это вкладка tab-description (описание). Меняем классы:

  <div class="tab-content"> <div class="tab-pane" id="tab-description"><?php echo $description; ?></div> <?php if ($attribute_groups) { ?> <div class="tab-pane active" id="tab-specification"> <table class="table table-bordered"> <?php foreach ($attribute_groups as $attribute_group) { ?> <thead> <tr> <td colspan="2"><strong><?php echo $attribute_group['name']; ?></strong></td> </tr> </thead> <tbody> <?php foreach ($attribute_group['attribute'] as $attribute) { ?> <tr> <td><?php echo $attribute['name']; ?></td> <td><?php echo $attribute['text']; ?></td> </tr> <?php } ?> </tbody> <?php } ?> </table> </div> <?php } ?> <?php if ($review_status) { ?> <div class="tab-pane" id="tab-review">

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

  <div class="tab-content">             <div class="tab-pane" id="tab-description"><?php echo $description; ?></div>             <?php if ($attribute_groups) { ?>             <div class="tab-pane active" id="tab-specification">               <table class="table table-bordered">                 <?php foreach ($attribute_groups as $attribute_group) { ?>                 <thead>                   <tr>                     <td colspan="2"><strong><?php echo $attribute_group['name']; ?></strong></td>                   </tr>                 </thead>                 <tbody>                   <?php foreach ($attribute_group['attribute'] as $attribute) { ?>                   <tr>                     <td><?php echo $attribute['name']; ?></td>                     <td><?php echo $attribute['text']; ?></td>                   </tr>                   <?php } ?>                 </tbody>                 <?php } ?>               </table>             </div>             <?php } ?>             <?php if ($review_status) { ?>             <div class="tab-pane" id="tab-review">

  Если у вас тема DEFAULT, то все действия будут аналогичны приведённым выше. Если нет — можете обращаться в комментарии… постараемся помочь.

  Результаты до:

  

  После:

  

  Если вкладка с описанием продукта OpenCart пустая — удаляем её

  Представьте, вы не сделали вкладку с характеристиками главной, а во вкладке описание товара нет того самого описания. Она пустая.

  Пользователи, при открытии карточки товара будут видеть пустое место, хоть другие вкладки заполнены. Чтобы этого избежать, нужно скрыть пустую вкладку с описанием. Делается это довольно просто: нужно добавить небольшой скрипт в «подвал» сайта.

  Открываем файл footer.tpl, расположенный по пути:

  ваш_сайт/catalog/view/theme/*название_темы*/template/common/footer.tpl

  Прокручиваем его до самого низа и перед добавляем скрипт:

  <script> html_desc = $('#tab-description').html(); tab_selector = '#tab-specification'; if (html_desc=='<p><br></p>') { $('#tab-description').remove(); $('a[href=\'#tab-description\']').closest('li').remove(); $('a[href=\''+tab_selector+'\']').trigger('click'); } </script>

  1 2 3 4 5 6 7 8 9 10

  <script> html_desc = $('#tab-description').html(); tab_selector = '#tab-specification';   if (html_desc=='<p><br></p>') { $('#tab-description').remove(); $('a[href=\'#tab-description\']').closest('li').remove(); $('a[href=\''+tab_selector+'\']').trigger('click'); } </script>

  Этот скрипт проверит, и, если вкладка #tab-description пустая (содержит лишь <p><br></p>), то удалит эту вкладку с её содержимым, а затем отметит #tab-specification и покажет её.

  В общем-то всё. Успехов!