CMS OpenCart 3.0 работаем с модулем Слайд-шоу (1 часть)

Всем привет, в нашей группе в соц. сети ВК меня обвинили в хреновых статьях о переделке и правке CMS OpenCart 3.0 и предложили написать полезную статью о доработке стандартного  модуля Слайд-шоу. Я в программировании мало разбираюсь (от слова совсем) — я больше по вёрстке, графике, наполнению и продвижению, ну да ладно, если где то в коде будет косяк специалисты по php думаю не сильно обругают и поправят мои ошибки.

Список задач на сегодня:

1. Делаем запрос к базе данных (Ваш хостинг -> Базы данных -> phpMyAdmin)
2. Правим файл banner_form.twig (файл шаблона)
3. Правим файл banner.php (файл перевода)
4. Правим файл banner.php (контроллер)
5. Правим файл banner.php (модель)
6. Правим файл slideshow.php (контроллер)
7. Правим файл ru-ru.php (файл перевода)
8. Правим файл slideshow.twig (файл шаблона)
9. Правим файл stylesheet.css (файл стилей)

Приступим:

1. Заходим к себе на хостинг и переходим в управление базами данных (вкладка базы данных, mySQL и т.д.), ищем в списке свою базу данных и нажимаем кнопку phpMyAdmin, после этого переходим на вкладку SQL и вводим вот такой запрос:

ALTER TABLE `oc_banner_image` 
    ADD COLUMN mytitle VARCHAR(255) NOT NULL,
    ADD COLUMN mytext TEXT NOT NULL,
    ADD COLUMN mylink VARCHAR(255) NOT NULL;

P.S. — в запросе указан стандартный префикс oc_, если вы при установке движка выбрали другой префикс для таблиц базы данных то внесите правку в запрос, вместо oc_ укажите свой префикс.

2. Откроем файл ../admin/view/template/design/banner_form.twig и после этих строк (64-66):

<td class="text-left">{{ entry_title }}</td>
<td class="text-left">{{ entry_link }}</td>
<td class="text-center">{{ entry_image }}</td>

вставим эти:

<td class="text-center">{{ entry_mytitle }}</td>
<td class="text-center">{{ entry_mytext }}</td>
<td class="text-center">{{ entry_mylink }}</td>

а после этих строк (83-84):

<td class="text-center"><a href="" id="thumb-image{{ image_row }}" data-toggle="image" class="img-thumbnail"><img src="{{ banner_image.thumb }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
  <input type="hidden" name="banner_image[{{ language.language_id }}][{{ image_row }}][image]" value="{{ banner_image.image }}" id="input-image{{ image_row }}" /></td>

вставим эти:

<td class="text-center"><input type="text" name="banner_image[{{ language.language_id }}][{{ image_row }}][mytitle]" value="{{ banner_image.mytitle }}" placeholder="{{ entry_mytitle }}" class="form-control" /></td>                 
<td class="text-center"><input type="text" name="banner_image[{{ language.language_id }}][{{ image_row }}][mytext]" value="{{ banner_image.mytext }}" placeholder="{{ entry_mytext }}" class="form-control" /></td>
<td class="text-center"><input type="text" name="banner_image[{{ language.language_id }}][{{ image_row }}][mylink]" value="{{ banner_image.mylink }}" placeholder="{{ entry_mylink }}" class="form-control" /></td>

вместо этой строки (82):

<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"><input type="text" name="banner_image[{{ language.language_id }}][{{ image_row }}][link]" value="{{ banner_image.link }}" placeholder="{{ entry_link }}" class="form-control" /></td>

вместо этой (97):

<td colspan="4"></td>

вставим эту:

<td colspan="7"></td>

вместо этой строки (115):

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>';

вставим эту:

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

а после этой строки (116):

html += '  <td class="text-center"><a href="" id="thumb-image' + image_row + '" data-toggle="image" class="img-thumbnail"><img src="{{ placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="banner_image[' + language_id + '][' + image_row + '][image]" value="" id="input-image' + image_row + '" /></td>';

вставим эти:

html += '  <td class="text-center"><input type="text" name="banner_image[' + language_id + '][' + image_row + '][mytitle]" value="" placeholder="{{ entry_mytitle }}" class="form-control" /></td>';
  html += '  <td class="text-center"><input type="text" name="banner_image[' + language_id + '][' + image_row + '][mytext]" value="" placeholder="{{ entry_mytext }}" class="form-control" /></td>';
  html += '  <td class="text-center"><input type="text" name="banner_image[' + language_id + '][' + image_row + '][mylink]" value="" placeholder="{{ entry_mylink }}" class="form-control" /></td>';

3. Откроем файл ../admin/language/ru-ru/design/banner.php и после этих строк (19-21):

$_['entry_title']       = 'Заголовок';
$_['entry_link']        = 'Ссылка';
$_['entry_image']       = 'Изображение';

вставим эти:

$_['entry_mytitle']     = 'Текстовый заголовок';
$_['entry_mytext']      = 'Текст';
$_['entry_mylink']      = 'Ссылка кнопки';

4. Откроем файл ../admin/controller/design/banner.php и после этих строк (352-353):

'title'      => $banner_image['title'],
'link'       => $banner_image['link'],

вставим эти:

'mytitle'    => $banner_image['mytitle'],
'mytext'     => $banner_image['mytext'],
'mylink'     => $banner_image['mylink'],

5. Откроем файл ../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']) . "', mytitle = '" .  $this->db->escape($banner_image['mytitle']) . "', mytext = '" .  $this->db->escape($banner_image['mytext']) . "', mylink = '" .  $this->db->escape($banner_image['mylink']) . "', link = '" .  $this->db->escape($banner_image['link']) . "', image = '" .  $this->db->escape($banner_image['image']) . "', sort_order = '" .  (int)$banner_image['sort_order'] . "'");

вместо этой строки (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']) . "', mytitle = '" .  $this->db->escape($banner_image['mytitle']) . "', mytext = '" .  $this->db->escape($banner_image['mytext']) . "', mylink = '" .  $this->db->escape($banner_image['mylink']) . "', link = '" .  $this->db->escape($banner_image['link']) . "', image = '" .  $this->db->escape($banner_image['image']) . "', sort_order = '" . (int)$banner_image['sort_order'] . "'");

после этих строк (88-90):

'title'      => $banner_image['title'],
'link'       => $banner_image['link'],
'image'      => $banner_image['image'],

вставим эти:

'mytitle'    => $banner_image['mytitle'],
'mytext'     => $banner_image['mytext'],
'mylink'     => $banner_image['mylink'],

Смотрим что же у нас с вами получилось, переходим: Админка -> Дизайн -> Баннеры -> Home Page Slideshow -> Редактировать:

Чистим все кеши! Вносим любой текст в новые текстовые поля, нажимаем кнопку Сохранить, если админка не выдала никаких ошибок и при повторном открытии модуля введённый текст сохранился поздравляю, вы всё правильно сделали.

6. Откроем файл ../catalog/controller/extension/module/slideshow.php и после этих строк (20-21):

'title' => $result['title'],
'link'  => $result['link'],

вставим эти:

'mytitle' => $result['mytitle'],
'mytext' => $result['mytext'],
'mylink'  => $result['mylink'],

7. Откроем файл ../catalog/language/ru-ru/ru-ru.php и после этой строки (12):

$_['text_no'] = 'Нет';

вставим эту:

$_['text_link'] = 'Подробнее';

8. Откроем файл ../catalog/view/theme/default/template/extension/module/slideshow.twig и вместо этих строк (1-36):

<div class="swiper-viewport">
  <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" /></a>{% else %}<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" />{% 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>
<script type="text/javascript"><!--
$('#slideshow{{ module }}').swiper({
  mode: 'horizontal',
  slidesPerView: 1,
  pagination: '.slideshow{{ module }}',
  paginationClickable: true,
  nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 30,
  autoplay: 2500,
    autoplayDisableOnInteraction: true,
  loop: true
});
--></script>

вставим эти:

<div class="swiper-viewport">
    <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" />
                </a>
                {% else %}
                     {% if banner.mylink %}
                     <img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" />
                     <div class="infoslider">
                         {% if banner.mytitle %}<h3>{{ banner.mytitle }}</h3>{% endif %}
                         {% if banner.mytext %}<p>{{ banner.mytext }}</p>{% endif %}
                         <a class="infolink" href="{{ banner.mylink }}">{{ text_link }}</a>
                    </div>
                     {% else %}
                     <img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" />
                     {% endif %}
                {% 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>
<script type="text/javascript">
    <!--
    $('#slideshow{{ module }}').swiper({
        mode: 'horizontal',
        slidesPerView: 1,
        pagination: '.slideshow{{ module }}',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30,
        autoplay: 2500,
        autoplayDisableOnInteraction: true,
        loop: true
    });

    -->
</script>

P.S. — Вывод слайдов настроен следующим образом:

• Вписана ссылка изображения (и не заполнена ссылка кнопки) — выводится стандартное изображение с ссылкой (как было изначально)
• Вписана ссылка кнопки подробнее (и не заполнена ссылка изображения) — выводится заголовок (если заполнен), описание (если заполнено), кнопка подробнее
• Если не заполнена ни одна ссылка (ни ссылка изображения, ни ссылка кнопки подробнее) — выводится только картинка (без заголовка, без текста описания)

9. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла добавим эти строки (753-778):

.infoslider {
    position: absolute;
    top: 25%;
    left: 10%;
    margin: 0 auto;
}
.infoslider h3 {
  font-size: 36px;
    color: #F44336;
  text-transform: uppercase;
}
.infoslider p {
  font-size: 14px;
  color: #000;
  text-transform: uppercase;
  padding: 5px;
}
.infolink {
  background: #000;
  color: #fff;
  padding: 5px 10px;
}
.infolink:hover {
  background: #F44336;
  color: #fff;
}

Чистим все кеши и смотрим что у нас получилось:

В принципе неплохо получилось, конечно решение требует доработок и правок (к примеру в следующей части статьи мы встроим в описание поддержку html тегов, сейчас описание выводится как обычный текст и т.д.), но главное что оно работоспособно. При желании вы можете доработать код и стили под себя.

На этом всё, до новых встреч на страницах нашего блога.

P.S. — При обнаружении ошибок в коде и т.д. пишите в комментарии или в личку и статья будет исправлена.

Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru