Доброго времени суток уважаемые пользователи нашего сайта.
Давно уже ничего здесь не писал, все времени не хватало, сегодня же хочу поделится простым методом добавление контента с использованием табов ( вкладок ) именно на информационных страницах opencart.
Меня частенько спрашивают пользователи о такой возможности, многие просто не хотят плодить страницы на сайте а описать всю нужную информацию на одной странице, но так как иногда текста много да и еще он разный то страница может получится не красивой и очень длинной в связи с этим многим хотелось бы использовать именно вкладки на страницах в точности так же как в самой карточке товара....
Можно конечно найти различные скрипты в интернете для этих целей и делать вкладки на html , но зачем искать если в opencart уже есть данный функционал в карточке товара, давайте его же мы и применим для информационных страниц.
На самом деле все проще некуда и сводится к простому добавлению нескольких строк в файл шаблона который выводит саму страницу...
Ладно не буду здесь разводить поэзии а приступим не посредственно к самой задаче, да и поздно уже пишу с полузакрытыми сонными глазами...
Ниже на фото вы можете посмотреть что у нас в итоге должно получится:
И так для того что бы отобразить вкладки на opencart в страницах нам нужно открыть файл:
1
|
catalog/view/theme/default/template/information/information.tpl
|
И добавить перед кодом вывода подвала:
1
|
<?php echo $footer; ?>
|
Следующий код:
1
2
3
4
|
<script type="text/javascript" src="catalog/view/javascript/jquery/tabs.js"></script>
<script type="text/javascript"><!--
$('#tabs a').tabs();
//--></script>
|
Все больше править ничего не нужно, далее переходим в админ панель и открываем нужную страницу для редактирования, и в ней добавляем наш текст с применением такой разметки:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div id="tabs" class="htabs">
<a href="#tab1">Доставка</a>
<a href="#tab2">Оплата</a>
<a href="#tab3">Вкладка 1</a>
<a href="#tab4">Вкладка 2</a>
<a href="#tab5">Вкладка 3</a>
</div>
<div id="tab1" class="tab-content">Ваш текст первой вкладки</div>
<div id="tab2" class="tab-content">Ваш текст второй вкладки</div>
<div id="tab3" class="tab-content">Ваш текст третьей вкладки</div>
<div id="tab4" class="tab-content">Ваш текст четвертый вкладки</div>
<div id="tab5" class="tab-content">Ваш текст пятой вкладки</div>
|
Ну вот и все, теперь у вас на странице будет отображаться добавленная информация именно во вкладках.
Пробуйте тестируйте если что не получится спрашивайте в комментариях.
Нет комментариев
Вы можете оставить комментарий первым.