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

Всем привет, давненько не было статей на нашем блоге (что поделать — работа). Наконец появилось свободное время и я решил немного поработать с модулем слайд-шоу.

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

1. Работаем с файлом slideshow.twig (файл шаблона)
2. Работаем с файлом banner_form.twig (файл шаблона)
3. Работаем с файлом banner.php (файл перевода)

Приступим:

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

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

вставим эти:

<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" />
                      <div class="infoslider">
                         {% if banner.mytitle %}<h3>{{ banner.mytitle }}</h3>{% endif %}
                         {% if banner.mytext %}<p>{{ banner.mytext }}</p>{% endif %}
                    </div>                   
                </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 %}
                         {% if banner.mylink %}<a class="infolink" href="{{ banner.mylink }}">{{ text_link }}</a>{% endif %}
                    </div>
                     {% 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. — Мы немного упростили условия вывода слайдов, теперь у нас доступно 2 варианта:

1. Если вам нужен переход по нажатию на картинку баннера — заполняете ссылку картинки
2. Если вам нужен переход по нажатию на кнопку подробнее — заполняете ссылку кнопки

Текст или заголовок вы можете заполнять на свой выбор, заполнили — выводится, не заполнили — нет, на мой взгляд так логичнее и проще, чем я сделал изначально (в первой статье).

Теперь давайте сделаем небольшую подсказку для сотрудников работающим с нашими баннерами, для этого переходим ко второму шагу.

2. Откроем файл ../admin/view/template/design/banner_form.twig и вместо этой строки (65):

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

вставим эту:

<td class="text-left"><span data-toggle="tooltip" title="{{ help_link }}">{{ entry_link }}</span></td>

а вместо этой (69):

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

вставим эту:

<td class="text-center"><span data-toggle="tooltip" title="{{ help_mylink }}">{{ entry_mylink }}</span></td>

P.S. — Мы вставили иконку со знаком вопроса в заголовки Ссылка и Ссылка кнопки, теперь необходимо добавить текст-подсказку, которая появится при наведении на заголовок. Переходим к третьему шагу.

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

$_['entry_sort_order']  = 'Порядок сортировки';

вставим эти:

// Help
$_['help_link']        = 'Заполни и картинка-баннер будет ссылкой';
$_['help_mylink']      = 'Заполни и кнопка подробнее будет ссылкой, ссылку изображения оставляем пустой!';

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

$_['entry_link']        = 'Ссылка';

вставим эту:

$_['entry_link']        = 'Ссылка изображения';

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

На мой взгляд неплохо, так пока и оставим. На сегодня всё, следите за выходом новых материалов и вступайте в нашу группу в ВК.

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