По-умолчанию, в OpenCart 2 и более ранних версий движка главная вкладка, которую мы видим в карточке товара — это вкладка с описанием. Хотя здесь дело вовсе не в движке, а в используемом шаблоне сайта, многие сталкиваются с трудностями при смене этих вкладок. Допустим, вместо вкладки описания надо главной сделать вкладку характеристик или отзывов — начинающие пользователи впадают в ступор на этом моменте.
Рассмотрим как можно легко и просто сделать вкладку «Характеристики» вкладкой по-умолчанию, то есть той, которую мы будем видеть при открытии карточки любого товара на сайте.
Содержание
Делаем вкладку «Характеристики» главной
Итак, все легко и просто. Здесь многие начинают лезть в контроллеры или модели, встречались и такие персонажи, которые советовали изменять порядок в массиве (вероятно массив со вкладками), но всё гораздо банальней.
Открываем файл product.tpl, отвечающий за вывод карточки товара на вашем сайте. Этот файл находится по пути:
ваш_сайт/catalog/view/theme/*название_темы*/template/product/product.tpl
В этом файле находим такой участок кода (может быть немного изменён в зависимости от используемой темы Опенкарт):
|
1 2 3 4 5 6 7 8 9 |
<ul class="nav nav-tabs"> <li class="active"><a href="#tab-description" data-toggle="tab"><?php echo $tab_description; ?></a></li> <?php if ($attribute_groups) { ?> <li><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» из #tab-description и переносим его в #tab-specification. Получаем следующий код, которым заменяем код выше:
123456789<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, находим ниже код:
12345678910111213141516171819202122232425<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 (описание). Меняем классы:
12345678910111213141516171819202122232425<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
Прокручиваем его до самого низа и перед добавляем скрипт:
12345678910<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 и покажет её.
В общем-то всё. Успехов!
Получилось! Огромное Спасибо! Автору
Спасибо, мне помогло!
Добрый день , помогите мне сделать вышесказанное с нестандартным шаблоном. У меня нету таких строк как указано выше .
Здравствуйте!
Покажите код файла ваш_сайт/catalog/view/theme/*название_темы*/template/product/product.tpl. Постараемся помочь.
Данный способ к сожалению не помог! Все проделала как в описании (изложено очень доступно) но к сожалению нет результата….. Использую на сайте шаблон NewStore, указанные файлы и строки все имеются и испралены. Подскажите пожалуйста почему не помогает ОООООчень нужно!
Здравствуйте! Вероятно — мешают модификаторы.
Добрый день!
Тема Journal. Вот код:
journal2->settings->get(‘hide_product_description’)) { ?>
<li >
<li >
<li >
journal2->settings->get(‘additional_product_tabs’, array()) as $tab): $index++; ?>
<li ><a href="#additional-product-tab-» data-toggle=»tab»>
journal2->settings->get(‘hide_product_description’)) { ?>
<div class="tab-pane tab-content » id=»tab-description»>
<div class="tab-pane tab-content » id=»tab-specification»>
Вкладка с характеристиками, вообще не видна сайте.
Прошу помочь, где ошибка?
Заранее спасибо!
Здравствуйте!
Если актуально — напишите на почту, постараемся помочь.