Неактивна зіркаНеактивна зіркаНеактивна зіркаНеактивна зіркаНеактивна зірка
 

Описаним нижче методом я розширив слайдер на шаблоні Powertool, потім перевірив його на дефолтному.

Як відомо, дефолтний слайдер у OpenCart дуже простий і обмежений. Все, на що він здатний - це просто прокручувати зображення.

Це дуже незручно, якщо вам, скажімо, треба терміново відредагувати текст на слайді - вам доведеться відкривати растровий редактор, редагувати зображення, зберігати, завантажувати на сервер. А якщо немає файла-сирця? Тоді все ще складніше.

Тому сьогодні ми розширимо функціонал стандартного слайдера OpenCart і додамо можливість прописувати з адмінки заголовок слайду і текст. Забігаючи наперед скажу - у такий спосіб ви можете безмежно розширити свій слайдер і зробити з нього подобу Ревослайдера, або лайєрслайдера, все залежить тільки від вашого бажання та знань з анімаціїї CSS.

Одже, почнемо. Для початку треба стоврити додатковий рядок у базі данних сайту у таблиці oc_banner_image. Знаходимо цю таблицю і натискаємо кнопку "Структура".

01 m min

Після того, як ми зайшли у структуру таблиці, нам необхідно додати до неї ще один рядок, в якому зберігатиметься наш рекламний текст (рядок для заголовку слайда тут вже є, далі ми просто виведемо його у шаблоні). Опускаємося вниз і додаємо новий рядок.

02 m min

Далі заповнюємо необхідні віконця. Назва - b_text, тип - TEXT, довжина/значення - 800 (або як вам потрібно).

03 m min

Зберігяємо наш рядок. Тепер таблиця oc_banner_image має такий вигляд

04 m min

Тепер перейдемо до редагування файлів OpenCart. Почнемо з того, що додамо необхідні рядки у адмінці. Не забуваємо про резервні копії! Відкриваємо файл admin/model/design/banner.php, знаходимо рядок 11 який містить наступний код

View source
$this->db->query("INSERT INTO " . DB_PREFIX . "banner_image SET banner_id = '" . (int)$banner_id . "', language_id = '" . (int)$language_id . "', title = '" . $this->db->escape($banner_image['title']) . "', link = '" . $this->db->escape($banner_image['link']) . "', image = '" . $this->db->escape($banner_image['image']) . "', sort_order = '" . (int)$banner_image['sort_order'] . "'");

І заміняємо його на такий

View source
$this->db->query("INSERT INTO " . DB_PREFIX . "banner_image SET banner_id = '" . (int)$banner_id . "', language_id = '" . (int)$language_id . "', title = '" . $this->db->escape($banner_image['title']) . "', link = '" . $this->db->escape($banner_image['link']) . "', image = '" . $this->db->escape($banner_image['image']) . "', sort_order = '" . (int)$banner_image['sort_order'] . "', b_text = '" . $this->db->escape($banner_image['b_text']) ."'");

Тобто ми додали наш рядок з бази даних у модель. Ось код який ми додали:

View source
b_text = '" . $this->db->escape($banner_image['b_text']) ."'

Далі йдемо у рядок 27 який містить

View source
$this->db->query("INSERT INTO " . DB_PREFIX . "banner_image SET banner_id = '" . (int)$banner_id . "', language_id = '" . (int)$language_id . "', title = '" . $this->db->escape($banner_image['title']) . "', link = '" . $this->db->escape($banner_image['link']) . "', image = '" . $this->db->escape($banner_image['image']) . "', sort_order = '" . (int)$banner_image['sort_order'] . "'");

І змінюємо цей код на наступний

View source
$this->db->query("INSERT INTO " . DB_PREFIX . "banner_image SET banner_id = '" . (int)$banner_id . "', language_id = '" . (int)$language_id . "', title = '" . $this->db->escape($banner_image['title']) . "', link = '" . $this->db->escape($banner_image['link']) . "', image = '" . $this->db->escape($banner_image['image']) . "', sort_order = '" . (int)$banner_image['sort_order'] . "', b_text = '" . $this->db->escape($banner_image['b_text']) . "'");

Тобто ми знову додали наш рядок з БД у файл моделі OpenCart. Цей код відповідає на завантаження та відображення рядків з БД. Ми просто прописали туди свій новий рядок. Далі знаходимо рядок 91, який містить код

View source
'sort_order' => $banner_image['sort_order']

Ставимо кому, відбиваємо новий рядок і додаємо

Show/Hidden php code

View source
'b_text' => $banner_image['b_text']

Тепер ця секція має наступний вигляд:

Show/Hidden php code

View source
foreach ($banner_image_query->rows as $banner_image) {
    $banner_image_data[$banner_image['language_id']][] = array(
        'title' => $banner_image['title'],
        'link' => $banner_image['link'],
        'image' => $banner_image['image'],
        'sort_order' => $banner_image['sort_order'],
        'b_text' => $banner_image['b_text']
    );
}

Зберігаємо файл, завантажуємо на сервер. Далі займемося контролером. Не забуваємо про резервні копії! Відкриваємо файл admin/controller/design/banner.php, знаходимо рядок 356, який містить

Show/Hidden php code

View source
'sort_order' => $banner_image['sort_order']

Ставимо після нього кому, відбиваємо новий рядок і додаємо

View source
'b_text' => $banner_image['b_text']

Тепер вся секція має такий вигляд:

View source
$data['banner_images'][$key][] = array(
    'title' => $banner_image['title'],
    'link' => $banner_image['link'],
    'image' => $image,
    'thumb' => $this->model_tool_image->resize($thumb, 100, 100),
    'sort_order' => $banner_image['sort_order'],
    'b_text' => $banner_image['b_text']
);

Зберігаємо файл і завантажуємо на сервер. Наступний і останній файл адмінпанелі який ми редагуватимемо - це файл форми банера, тобто шаблон в якому ми редагуємо сам банер чи слайдер (вони використовують один шаблон) у адмінці. Не забуваємо про резервні копії! Відкриваємо admin/view/template/design/banner_form.twig, знаходимо рядок 62, це голова таблиці,

Show/Hidden html5 code

View source
<thead>
 <tr>
 <td class="text-left">{{ entry_title }}</td>
 <td class="text-left">{{ entry_link }}</td>
 <td class="text-center">{{ entry_image }}</td>
 <td class="text-right">{{ entry_sort_order }}</td>
 <td></td>
 </tr>
</thead>

і замінюємо код на наступний

Show/Hidden html5 code

View source
<thead>
 <tr>
 <td class="text-left">{{ entry_title }}</td>
 <td class="text-left">{{ entry_link }}</td>
 <td class="text-left">Текст</td>
 <td class="text-center">{{ entry_image }}</td>
 <td class="text-right">{{ entry_sort_order }}</td>
 <td></td>
 </tr>
</thead>

Тобто ми додали ще один стовпчик, з написом "Текст". Далі, йдемо до рядку номер 80 (після того як ми додали рядок вище, у дефолтному файлі це 79)

View source
<td class="text-left" style="width: 30%;"><input type="text" name="banner_image[{{ language.language_id }}][{{ image_row }}][link]" value="{{ banner_image.link }}" placeholder="{{ entry_link }}" class="form-control" /></td>

І після нього додаємо наступний код

View source
<td class="text-left" style="width: 25%;"><textarea name="banner_image[{{ language.language_id }}][{{ image_row }}][b_text]" value="{{ banner_image.b_text }}" placeholder="Текст" class="form-control">{{ banner_image.b_text }}</textarea></td>

Також, для більш-менш зручного відображення у рядку 80 треба змінити width: 30% на width: 25%. Ми щойно додали у адмінку наш рядо з бази даних, який ми тепер можемо змінювати, редагувати і писати в ньому усілякі корисні тексти. Тепер трохи підправимо низ нашої таблиці. Йдемо до рядка 93 (дефолтний 91) і змінюємо colspan="4" на colspan="5".

З таблицею закінчили. Але тепер, якщо ми додамо новий слайд у наш слайдер в ньому не буде текстовго поля. Що робити? Підправимо трохи скрипт, який відповідає за цю функцію. Йдемо до рядку 111 (дефолтний 109)

View source
html += ' <td class="text-left" style="width: 30%;"><input type="text" name="banner_image[' + language_id + '][' + image_row + '][link]" value="" placeholder="{{ entry_link }}" class="form-control" /></td>';

Одразу ж тут заміняємо width: 30%; на width: 25%; і після нього, одбивши новий рядок, додаємо

View source
html += ' <td class="text-left" style="width: 25%;"><textarea name="banner_image[' + language_id + '][' + image_row + '][b_text]" value="" placeholder="Текст" class="form-control"></textarea></td>';

Все. Тепер і нові рядки будуть мати той вигляд і функціонал, який ми задумали. На цьому редагування адміністративної частини завершено, перейдемо частини фронтальної. Тут все дуже просто.

Не забуваємо про резервні копії! Відкриваємо файл catalog/controller/extension/module/slideshow.php. Знаходимо рядок 21

View source
'link' => $result['link'],

І додаємо з нового рядка наступний код

View source
'text' => html_entity_decode($result['b_text'], ENT_QUOTES, 'UTF-8'),

Виникає питання: навіщо декодувати? Справа в тому, що OpenCart кодує всі спецсимволи у html і якщо вам, припустимо, знадобиться зробити перенос рядка, або позначити текст жирним - ви не зможете цього зробити, на сайті ви побачите теги, а якщо декодувати - все буде як треба. Зберігаємо, завантажуємо на сервер. Наступним і останнім буде файл шаблону слайдера. Відкриваємо catalog/view/theme/default/template/extension/module/slideshow.twig. Як я вже писав вище, рядок для заголовку банера в OpenCart вже є. У шаблоні слайдера цей рядок виводиться через {{ banner.title }}. Ми додамо тільки контейнер для тексту і обгорнемо {{ banner.title }} у h3, або ви самі вирішите який тег вам потрібний. Я у файл шаблону після картинки вставив наступну конструкцію:

View source
<div class="baner-desc"><h3>{{ banner.title }}</h3>{% if banner.text %}<div class="b-text">{{ banner.text }}</div>{% endif %}</div>

Як бачите, я встановив умову, відображати блок с текстом тільки якщо рядок для тексту не порожній. Для зручності, щоб порожні блоки не заважали. Цю конструкцію слід встановити як у випадку слайда з посиланням, так і у випадку слайда без посилання, інакше наші зміни працюватимуть лише в одному випадку. Тобто html-код шаблону (без скрипта, тільки блоки) в мене зараз виглядає так:

View source
<div class="swiper-viewport default">
 <div id="slideshow{{ module }}" class="swiper-container">
 <div class="swiper-wrapper"> {% for banner in banners %}
 <div class="swiper-slide text-center">{% if banner.link %}<a href="{{ banner.link }}"><img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" /><div class="baner-desc"><h3>{{ banner.title }}</h3>{% if banner.text %}<div class="b-text">{{ banner.text }}</div>{% endif %}</div></a>{% else %}<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" /><div class="baner-desc"><h3>{{ banner.title }}</h3>{% if banner.text %}<div class="b-text">{{ banner.text }}</div>{% endif %}</div>{% endif %}</div>
 {% endfor %} </div>
 </div>
 <div class="swiper-pagination slideshow{{ module }}"></div>
 <div class="swiper-pager">
 <div class="swiper-button-next"></div>
 <div class="swiper-button-prev"></div>
 </div>
</div>

Зберігаємо, завантажуємо на сервер. Заходимо у адмінку і чистимо кеш шаблону.

05 min

06 min

Відкриваємо наш слайдер і перевірямо

07 m min

Власне на цьому все. Далі вам залишається тільки оформити стилі наших нових блоків на ваш смак. Таким чином можна розширити слайдер і у OpenCart 2, єдина різниця буде у файлі шаблону виводу.

Приклад внесених змін з простенькою анімацією ви можете побачити за цим посиланням. Уявіть які можливості перед вами відкриваються.