- OpenCart
- 10 Листопада 2018 року о 11:36
- 101
Описаним нижче методом я розширив слайдер на шаблоні Powertool, потім перевірив його на дефолтному.
Як відомо, дефолтний слайдер у OpenCart дуже простий і обмежений. Все, на що він здатний – це просто прокручувати зображення.
Це дуже незручно, якщо вам, скажімо, треба терміново відредагувати текст на слайді – вам доведеться відкривати растровий редактор, редагувати зображення, зберігати, завантажувати на сервер. А якщо немає файла-сирця? Тоді все ще складніше.
Тому сьогодні ми розширимо функціонал стандартного слайдера OpenCart і додамо можливість прописувати з адмінки заголовок слайду і текст. Забігаючи наперед скажу – у такий спосіб ви можете безмежно розширити свій слайдер і зробити з нього подобу Ревослайдера, або лайєрслайдера, все залежить тільки від вашого бажання та знань з анімаціїї CSS.
Одже, почнемо. Для початку треба стоврити додатковий рядок у базі данних сайту у таблиці oc_banner_image. Знаходимо цю таблицю і натискаємо кнопку “Структура”.
Після того, як ми зайшли у структуру таблиці, нам необхідно додати до неї ще один рядок, в якому зберігатиметься наш рекламний текст (рядок для заголовку слайда тут вже є, далі ми просто виведемо його у шаблоні). Опускаємося вниз і додаємо новий рядок.
Далі заповнюємо необхідні віконця. Назва – b_text, тип – TEXT, довжина/значення – 800 (або як вам потрібно).
Зберігяємо наш рядок. Тепер таблиця oc_banner_image має такий вигляд
Тепер перейдемо до редагування файлів OpenCart. Почнемо з того, що додамо необхідні рядки у адмінці. Не забуваємо про резервні копії! Відкриваємо файл admin/model/design/banner.php, знаходимо рядок 11 який містить наступний код
$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'] . "'");І заміняємо його на такий
$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']) ."'");Тобто ми додали наш рядок з бази даних у модель. Ось код який ми додали:
{b_text = '" . $this->db->escape($banner_image['b_text']) ."'Далі йдемо у рядок 27 який містить
$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'] . "'");І змінюємо цей код на наступний
$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, який містить код
'sort_order' => $banner_image['sort_order']Ставимо кому, відбиваємо новий рядок і додаємо
'b_text' => $banner_image['b_text']Тепер ця секція має наступний вигляд:
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, який містить
'sort_order' => $banner_image['sort_order']Ставимо після нього кому, відбиваємо новий рядок і додаємо
'b_text' => $banner_image['b_text']Тепер вся секція має такий вигляд:
$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, це голова таблиці,
<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>і замінюємо код на наступний
<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)
<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>І після нього додаємо наступний код
<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)
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%; і після нього, одбивши новий рядок, додаємо
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
'link' => $result['link'],І додаємо з нового рядка наступний код
'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, або ви самі вирішите який тег вам потрібний. Я у файл шаблону після картинки вставив наступну конструкцію:
<div class="baner-desc"><h3>{{ banner.title }}</h3>{% if banner.text %}<div class="b-text">{{ banner.text }}</div>{% endif %}</div>Як бачите, я встановив умову, відображати блок с текстом тільки якщо рядок для тексту не порожній. Для зручності, щоб порожні блоки не заважали. Цю конструкцію слід встановити як у випадку слайда з посиланням, так і у випадку слайда без посилання, інакше наші зміни працюватимуть лише в одному випадку. Тобто html-код шаблону (без скрипта, тільки блоки) в мене зараз виглядає так:
<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>Зберігаємо, завантажуємо на сервер. Заходимо у адмінку і чистимо кеш шаблону.
Відкриваємо наш слайдер і перевірямо
Власне на цьому все. Далі вам залишається тільки оформити стилі наших нових блоків на ваш смак. Таким чином можна розширити слайдер і у OpenCart 2, єдина різниця буде у файлі шаблону виводу.
Приклад внесених змін з простенькою анімацією ви можете побачити за цим посиланням. Уявіть які можливості перед вами відкриваються.