Содержание
Улучшение стандартного слайдера Opencart 2 ⋆
Опубликовано: , автор — Глава 8-ми ушей
В Opencart второй версии и более ранних, есть стандартный модуль SlideShow — слайдер картинок, который управляется непосредственно из административной панели сайта. Базовый функционал слайдера ограничен и, зачастую, требуются его доработки. Одна из таких доработок — это отображение некоторого текста на слайдах.
В этой статье рассмотрим процесс улучшения стандартного слайд-шоу в Опенкарт 2 — добавим текстовое содержание к каждому слайду, задаваемое непосредственно в административной части сайта.
Итак, чтобы на слайдере отображался текст (мини-описание), нужно выполнить несложные доработки базового функционала стандартного модуля SlideShow. Для этого, идём по пути /catalog/view/theme/default/template/module/slideshow. tpl
Здесь вы увидите небольшой код, который нам нужно слегка модернизировать.
Как вам известно (если вы уже пробовали создавать слайд-шоу в Opencart 2) — слайд может быть ссылкой, а может и не быть таковой. Эта особенность описывается в этой части кода:
<?php if ($banner[‘link’]) { ?>
<a href=»<?php echo $banner[‘link’]; ?>»><img src=»<?php echo $banner[‘image’]; ?>» alt=»<?php echo $banner[‘title’]; ?>» /></a>
<?php } else { ?>
<img src=»<?php echo $banner[‘image’]; ?>» alt=»<?php echo $banner[‘title’]; ?>» />
<?php } ?>
| <?php if ($banner[‘link’]) { ?> <a href=»<?php echo $banner[‘link’]; ?>»><img src=»<?php echo $banner[‘image’]; ?>» alt=»<?php echo $banner[‘title’]; ?>» /></a> <?php } else { ?> <img src=»<?php echo $banner[‘image’]; ?>» alt=»<?php echo $banner[‘title’]; ?>» /> <?php } ?> |
Т. е. если для баннера (слайда) указана ссылка, то и выводиться ссылка-картинка. Если наоборот — то просто картинка.
В админке сайта для каждого слайда мы можем задать его описание. Описанием будет поле, которое называется — «заголовок»:
Теперь нам остаётся только вывести этот заголовок поверх самого слайда. Чтобы это сделать, нужно код:
<?php if ($banner[‘link’]) { ?>
<a href=»<?php echo $banner[‘link’]; ?>»><img src=»<?php echo $banner[‘image’]; ?>» alt=»<?php echo $banner[‘title’]; ?>» /></a>
<?php } else { ?>
<img src=»<?php echo $banner[‘image’]; ?>» alt=»<?php echo $banner[‘title’]; ?>» />
<?php } ?>
| <?php if ($banner[‘link’]) { ?> <a href=»<?php echo $banner[‘link’]; ?>»><img src=»<?php echo $banner[‘image’]; ?>» alt=»<?php echo $banner[‘title’]; ?>» /></a> <?php } else { ?> <img src=»<?php echo $banner[‘image’]; ?>» alt=»<?php echo $banner[‘title’]; ?>» /> <?php } ?> |
Заменить таким:
<?php if ($banner[‘link’]) { ?>
<a href=»<?php echo $banner[‘link’]; ?>»><div><?php echo $banner[‘title’]; ?></div><img src=»<?php echo $banner[‘image’]; ?>» alt=»<?php echo $banner[‘title’]; ?>» /></a>
<?php } else { ?>
<div><?php echo $banner[‘title’]; ?></div><img src=»<?php echo $banner[‘image’]; ?>» alt=»<?php echo $banner[‘title’]; ?>» />
<?php } ?>
| <?php if ($banner[‘link’]) { ?> <a href=»<?php echo $banner[‘link’]; ?>»><div><?php echo $banner[‘title’]; ?></div><img src=»<?php echo $banner[‘image’]; ?>» alt=»<?php echo $banner[‘title’]; ?>» /></a> <?php } else { ?> <div><?php echo $banner[‘title’]; ?></div><img src=»<?php echo $banner[‘image’]; ?>» alt=»<?php echo $banner[‘title’]; ?>» /> <?php } ?> |
Мы добавили в код:
<div><?php echo $banner[‘title’]; ?></div>
| <div><?php echo $banner[‘title’]; ?></div> |
Этот блок будет содержать заголовок слайда, который мы указываем в админке. Остаётся только добавить стилей, чтобы текст отображался так, как нам нужно.
Например:
.text-slider{
position: absolute;
left: 26px;
top: 26px;
font-size: 26px;
color: #000;
padding: 17px;
background-color: #fff;
}
1 2 3 4 5 6 7 8 9
| .text-slider{ position: absolute; left: 26px; top: 26px; font-size: 26px; color: #000; padding: 17px; background-color: #fff; } |
Таким образом, внеся минимум изменений в программный код, мы получаем желаемый результат — мини-описание для каждого слайда в стандартном Слайдшоу Opencart.
Слайдшоу, Банеры, Галереи — OpenCart Club
Модуль для добавления видео с YouTube в карточку товара.
Другие сервисы, а также загрузка видео на сервер сайта не поддерживаются.
Продуманность:
чтобы добавить видео достаточно вставить ссылку на ролик
адаптивность, плеер подстраивается под размеры родительского блока
при размещении во вкладке плеер не создаёт нагрузку на страницу
сохранение оригинального превью видео для использования на сайте
получение оригинального названия видео с возможностью изменения
автоматическая смена плеера на миниатюры при наличии дополнительных видео
автоматическое создание/восстановление отсутствующих превью
возможность импорта в базу данных через шаблон-строку
Изменяемые опции:
5 вариантов расположения видео на странице
4 размера: на всю ширину / 640px / 853px / миниатюра и всплывающее окно
позиция видео перед или после изображений
название видео: при наведении / под миниатюрой
иконка в списке каталога о наличии видео с подсказкой
открыть видео в списке товаров
количество видео в изображениях: одно / все (opencart 3)
Модуль адаптирован под шаблоны, указанные ниже. Если на каком-то из них модуль работает некорректно, то обратитесь за бесплатной помощью к разработчику. Если вашего шаблона в списке нет, то приобретать модуль нужно с опцией установки. Во всех этих случаях понадобится доступ к FTP и админке сайта.
Готовые адаптации под шаблоны Opencart 2:
anystore, aurus, barbaratheme, bestshop, boocity, butik, casualbag, coloring, cosyone, cyberstore, cyberwire, emarket, fashionmart, fastfood, fastor, fiji, fractal, journal2, journal3, julytheme, lightshop, logancee, luxury, magazin, mediastore, modern, moneymaker2, newstore, onlytemplate, pav_moby, pixelshop, revolution, royal, sagitta, silvers, so-emarket, sstore, techboom, techstore, theme714, tt_urani, unishop, unitystore, zendtheme
Готовые адаптации под шаблоны Opencart 3:
aurus, bodysport, cyberstore, emarket, fortsi, ft_frame, grand, grandstore, jewelry, journal3, lightshop, madeshop, moda1, modern, newstore, oct_feelmart, oct_remarket, oct_ultrastore, onlytemplate, revolution, royal, smart, so-kstore, so-furnicom, storeflex, technics, tt_plantmore, tt_sinrato, unishop2, yoga, zeexo, простор
Архив комплектуется только адаптацией под стандартную default тему. Для получения одной бесплатной адаптации под ваш шаблон из списка выше пишите в личные сообщения.
Актуальность готовых адаптаций поддерживается по мере обращений в случаях их некорректной совместимости, например, при обновлении шаблона его автором.
Не совместим с шаблонами: Pavilion (BurnEngine)
Демо с несколькими видео
Демо с одним видео
Системные требования к хостингу: php 5.5 и выше + ionCube Loader + cURL
Если вы не знаете состояние этих параметров, то скачайте модификатор и следуйте инструкции.
Ключ активации высылается по запросу через личные сообщения
Укажите в сообщении:
название используемого шаблона
версия opencart
Обратите внимание!
Тестовый сайт может быть только поддоменом основного сайта, техническим доменом хостинга или папкой с сайтом на локальном сервере без точки в названии. Не указывайте в качестве тестового отдельный полноценный домен.
Дополнительная информация:
Opencart Slideshow Scheduler — Руководство пользователя — Блог Knowband
Последнее обновление: Джо Паркер
Руководство пользователя Opencart, Руководство пользователя
Как установить плагин на свой сервер
1. Структура папок папки плагина Slideup Promotion.
2. Откройте папку загрузки, и вы найдете следующую структуру папок:
Для работы этого плагина у вас должен быть установлен VQMOD. Если VQMOD не установлен, загрузите и установите его по следующему URL-адресу:
https://code.google.com/p/vqmod/
3. Выберите все папки и перетащите их в корневой каталог вашего магазина OpenCart через FTP.
4. Вы сможете найти подключаемый модуль, готовый к установке, в модулях в вашем магазине OpenCart, как показано ниже.
5. Нажмите ссылку «Установить», чтобы установить подключаемый модуль. Это также добавит раскрывающийся список в строку меню, в котором будут перечислены все плагины Velocity, установленные в вашем магазине, для быстрой навигации. В этом раскрывающемся списке также есть окно сообщений, с помощью которого мы можем сообщить вам о новом запущенном плагине или новом обновлении.
6. Удалите файлы Vqcache из папки vqmod/vqcache.
7. Чтобы получить доступ к плагину Slideup Promotion, нажмите кнопку редактирования в разделе модулей, как показано ниже:
8. При нажатии кнопки редактирования откроется модуль плагина. Он содержит панель навигации вверху, меню слева и основное содержимое в центре, как показано ниже.
1. Вкладка «Общие настройки»
На вкладке «Общие настройки» есть возможность включить/отключить этот плагин.
Включение этой кнопки означает, что баннеры будут отображаться на основе предоставленных диапазонов дат. Отключение этой кнопки приведет к отображению всех баннеров, добавленных через этот модуль или модуль слайд-шоу по умолчанию, независимо от диапазонов дат, выбранных для отображения.
Вкладка «Настройки баннера» содержит следующие параметры для настройки:
1. Баннер: это раскрывающийся список со списком всех баннеров, добавленных в систему.
2. Размеры: укажите здесь ширину и высоту. Это обязательное поле, игнорирование которого приведет к появлению предупреждающего сообщения в правом верхнем углу, когда вы попытаетесь нажать «Сохранить и остаться».
Нажатие на кнопку сохранения без ввода размеров ограничит вас в сохранении изменений и отобразит сообщение об ошибке, как показано на рисунке ниже:
3. Макет: Выберите из нескольких макетов, на которые вы можете поместить это слайд-шоу.
4. Позиция: выберите позицию на макете, где вы можете разместить слайд-шоу.
5. Статус: Выберите, включать или выключать этот баннер.
6. Часовой пояс: выберите из списка часовых поясов из раскрывающегося списка, для которого вы хотите указать время 9Диапазон 0021.
7. Дата начала: выберите дату начала для каждого баннера, после которой его слайд-шоу должно начать появляться на указанном макете. Если дата не выбрана, вам будет предложено сделать это при сохранении данных с помощью предупреждающего сообщения.
8. Дата окончания: Выберите дату окончания для каждого баннера, до которой его слайд-шоу должно отображаться на
указанном макете.
Обратите внимание, что вы должны выбрать дату окончания больше, чем дата начала. Кроме того, убедитесь, что даты начала и окончания для любых двух баннеров не перекрываются, если они являются одними и теми же баннерами и добавляются в один и тот же макет и позиции, иначе вы не сможете остановить предупреждающие сообщения, ограничивающие вас для продолжения.
9. Порядок сортировки: введите порядок сортировки слайд-шоу.
10. Удалить: Чтобы удалить баннер или строку, нажмите эту кнопку.
11. Добавить модуль: нажмите эту кнопку, чтобы добавить еще одну строку или баннер, а затем введите необходимые данные.
Примечание. Любые изменения, такие как добавление, удаление модуля в этом плагине или внесение изменений в любое из полей
, упомянутых ранее, будут отражены в плагине слайд-шоу по умолчанию для opencart. И, аналогично, все изменения, сделанные в модуле слайд-шоу по умолчанию, будут отражены в этом плагине. Таким образом, оба модуля будут синхронизированы друг с другом.
3. Получить поддержку
Нажав на вкладку «Получить поддержку», вы будете перенаправлены на наш веб-сайт поддержки, где вы можете обратиться в нашу службу поддержки за помощью. Используйте эту вкладку, если у вас есть какие-либо вопросы/проблемы или вы обнаружили ошибку.
Store Front
В интерфейсе посетители сайта увидят только те слайд-шоу, для которых текущая локальная дата
(в соответствии с часовым поясом) находится между диапазоном дат, установленным администратором.
Джо Паркер
Мы гордимся лучшими в отрасли плагинами для систем электронной коммерции и имеем многолетний опыт работы с веб-сайтами электронной коммерции.
Мы предоставляем лучшие плагины для таких платформ, как Magento, Prestashop, OpenCart и Shopify. Мы также предоставляем услуги по разработке и настройке модулей для веб-сайта и модулей.
Magic Slideshow — бесплатное демонстрационное слайд-шоу изображений
Дом
» Magic Slideshow — бесплатное демонстрационное слайд-шоу изображений
Описание
Технические характеристики
Отзывы (0)
Magic Slideshow — бесплатное демонстрационное слайд-шоу изображений
Создавайте красивые слайд-шоу изображений на своем сайте OpenCart с помощью мощного Magic Slideshow™.
Разместите слайд-шоу на домашней странице, страницах товаров, страницах категорий. Установите модуль, затем отредактируйте свой шаблон в том месте, где вы хотите создать слайд-шоу.
Попробуйте демо здесь!
Загрузите бесплатную пробную версию прямо сейчас. Чтобы убрать сообщение «Пожалуйста, обновите», купите лицензию за 39 долларов США..
Преимущества
- Адаптивный дизайн – Каждое устройство, большое или маленькое, может наслаждаться слайд-шоу идеальной ширины. Magic Slideshow™ реагирует на окружающую среду, автоматически уменьшая масштаб до размера экрана пользователя.
- Используйте свой палец – проведите пальцем влево и вправо, чтобы поменять местами слайды. Работает на всех портативных устройствах.
- Полноэкранный вариант – показ впечатляющей полноэкранной версии слайд-шоу.
- Полная совместимость – Работает во всех браузерах + iPad/iPhone.
- vQmod готов – файлы ядра не будут изменены при установке Magic Slideshow™.
- Работает со всеми версиями OpenCart , включая OpenCart 2 .
Основные элементы
- Эффект Кена Бернса.
- Параметры автоигры.
- Поддержка содержимого HTML.
- Клавиатурная навигация.
- Полная поддержка мобильных/сенсорных экранов.
- Быстрая загрузка.
- Адаптивная поддержка гибкого макета.
- Полноэкранный режим.
- Навигация с помощью пуль.
- + больше.
vQmod
Magic Slideshow™ vQmod готов . Если вы используете в своем магазине популярное расширение OpenCart, никакие основные файлы не будут изменены при установке Magic Slideshow™.
Не беспокойтесь, если вы не используете vQmod. Вы по-прежнему можете установить Magic Slideshow™ на свой веб-сайт.
Индивидуальная настройка
Выберите одну из более чем 50 пользовательских настроек, чтобы идеально вписать каждое слайд-шоу в ваш магазин. Внесение изменений на странице настроек Magic Slideshow занимает несколько секунд. Перейдите по ссылке: Extensions > Modules > Magic Slideshow > Edit .
Доступные варианты:
- Показать эскизы
- Добавить стрелки
- Эффект Кена Бернса
- Выберите селекторы
- Скорость
- Эффект (скольжение, затухание, растворение)
- Продолжительность эффекта
- Добавить заголовок
- Полноэкранный режим
- Добавить водяной знак и многое другое
Поддерживаемые страницы и блоки
Добавьте слайд-шоу практически в любую часть вашего магазина OpenCart:
- Последний блок
- Избранный блок
- Блок бестселлеров
- Специальный блок
- Ручная установка в другом месте
Этот модуль был создан для OpenCart, чтобы упростить добавление слайд-шоу JavaScript на ваш сайт.