Доброго часу доби шановні користувачі нашого сайту.
Давно вже нічого тут не писав, все часу не вистачало, сьогодні ж хочу поділиться простим методом додавання контенту з використанням табів (вкладок) саме на інформаційних сторінках 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>
|
Ну ось і все, тепер у вас на сторінці буде відображатися додана інформація саме у вкладках.
Пробуйте тестуйте якщо щось не вийде запитуйте в коментарях.
Немає коментарів
Ви можете залишити коментар першим.