Акции заметны на витрине
Карточка с картинкой, заголовком и кнопкой ведёт покупателя на страницу акции, раздела или товара. Вся карточка кликабельна.
Платформа
Разработчик
плагин
Promocards для Shop-Script
Промокарточки на витрине: акции, коллекции и таймер
Показывайте акции, подборки и новинки через заметные карточки с изображением, кнопкой и при необходимости таймером. Группы размещаются в выбранном месте темы магазина.
- Карточки для акций и коллекцийИзображение, заголовок, описание и кнопка с переходом.
- Гибкие группы и оформлениеСоздавайте несколько групп и настраивайте их вид и раскладку.
- Размещение под вашим контролемВставьте код группы в нужное место шаблона темы Shop-Script.
Зачем это магазину
Акции и коллекции — на витрине, где их увидят
Акция, о которой посетитель не узнал, не работает. Promocards выводит на нужных страницах блоки с картинкой, заголовком, кнопкой и таймером, и вы сами решаете, где они стоят. Количественных результатов плагин не обещает: они зависят от вашего ассортимента и покупателей.
Любое число блоков
Группа — это один блок из одной–пяти карточек. Групп можно создать сколько нужно: у каждой свои вид, размер, формат и код вставки.
Таймер для ограниченных акций
Обратный отсчёт до даты и времени окончания показывает дни, часы, минуты и секунды. Когда время вышло, таймер показывает нули, а карточку убираете вы.
Настройка без программирования
Вид, высота и раскладка выбираются нажатием на картинку. В шаблон темы вставляется одна строка кода; цвета и шрифты при необходимости подстраиваются через CSS.
Как это работает
Группа карточек, код в шаблоне, блок на витрине
Блок появляется только там, куда вы вставили код группы. Одну и ту же группу можно вставить на несколько страниц.
Создайте группу
Выберите, сколько карточек в ряду, их вид и высоту. Первая группа уже есть в настройках.
Заполните карточки
Заголовок, описание, кнопка, ссылка, фоновое изображение и при желании таймер — на отдельной вкладке каждой карточки.
Вставьте код в шаблон
Код группы вставляется в шаблон темы там, где нужен блок: на главной, в категории или в карточке товара.
Оформление группы
Три настройки применяются ко всем карточкам группы.
- 4 вида: подпись внизу, текст при наведении, тёмная полоса под текстом, затемнённый фон
- 4 высоты: 150, 200, 250 и 400 px
- Выбор нажатием на картинку-подсказку
Раскладка и адаптивность
Формат определяет, сколько карточек в ряду и какой они ширины.
- От одной карточки на всю ширину до пяти в ряд
- Две раскладки «широкая + узкая»: 60/40 и 40/60
- На планшете и телефоне карточки перестраиваются сами
Для каких задач
Пять типичных задач
Схемы ниже собираются из тех же настроек: формат, размер, вид и содержимое карточек.
Акция до конкретной датырезультатКарточка с таймером
Заголовок со скидкой, кнопка и обратный отсчёт до окончания акции.
Таймер
Нужны быстрые переходы в разделырезультатРяд из 3–5 карточек
Короткие заголовки в одно слово и кнопка «Выбрать» на узких карточках.
Категории
Новая коллекция или распродажарезультатШирокий баннер
Одна карточка на всю ширину высотой до 400 px.
Баннер
Разные акции на разных страницахрезультатСвоя группа на каждой странице
Каждая группа со своим кодом вставки, видом и размером.
Группы
Кнопки должны быть как в темерезультатКласс кнопки и собственный CSS
Подставьте класс кнопки своей темы или стилизуйте карточки через поле «Пользовательский CSS».
Оформление
Возможности
Содержимое, оформление и раскладка
Всё, что видит покупатель на карточке, настраивается на странице плагина.
Заголовок и описание с HTML
Теги вроде <b> позволяют выделить цифру цветом или жирным. Переносы строк делаются тегом <br>.
Кнопка и ссылка
Текст кнопки, её CSS-класс из вашей темы и ссылка. Карточка и кнопка ведут по одному адресу.
Фон и копия в webp
Фоновое изображение png, jpg, gif или svg. Копия в webp необязательна: современные браузеры загрузят её вместо обычной.
Таймер обратного отсчёта
Укажите дату и время окончания. Отсчёт идёт по часам посетителя; по окончании показываются нули.
Свой CSS
Шрифты, цвета и отступы настраиваются в поле «Пользовательский CSS»; можно оформить отдельную группу по её номеру.
Адаптивные карточки
На узких экранах карточки перестраиваются в две колонки или в одну. Проверено на экране шириной 390 px.
Настоящий интерфейс
Как это выглядит на витрине и в настройках
Снимки сделаны в версии 1.0.5 на тестовом магазине с вымышленными товарами. Нажмите на скриншот, чтобы рассмотреть детали.
Первый запуск
От установки до первых карточек
Плагин устанавливается через Установщик Webasyst. Дополнительных настроек сервера не требуется.
Установите плагин через Установщик Webasyst в разделе «Плагины» Shop-Script.
Откройте страницу плагина в разделе «Плагины», выберите формат, вид и размер первой группы и заполните вкладки карточек: заголовок, ссылку и фоновое изображение. Нажмите «Сохранить».
Скопируйте код установки группы, например {shopStart_promocardsPlugin::setPromocardsGroup(1)}.
Вставьте код в шаблон темы («Сайт» → «Дизайн» → «Код», например, home.html) и откройте витрину: на месте кода появится блок карточек.
Перед установкой
Что важно знать
Требования
- Webasyst Shop-Script; версия 1.0.5 проверялась на Webasyst 4.3 и Shop-Script 12.7 (тема «Дефолт 2.0», PHP 8.2)
- Shop-Script X и более ранние версии
- Поддерживает старые браузеры (Internet Explorer 9+)
- Хорошо работает с плагином Start Slider
- На витрине подключён jQuery: карточки собирает скрипт на его основе
- Расширение PHP fileinfo: плагин проверяет тип загружаемых изображений
- Право записи в папку wa-data/public/shop/plugins/start_promocards/, куда сохраняются картинки
Ограничения
- В одной группе не больше пяти карточек; сколько из них показывается, определяет формат группы.
- Одиночный апостроф и перенос строки в текстах карточек ломают вывод всей группы: используйте ’ или ' и тег <br>.
- Файл картинки с уже существующим именем заменяет прежний во всех карточках, где он использовался.
- Карточки собираются скриптом в браузере посетителя: нужны jQuery и включённый JavaScript.
- Таймер не работает на iOS и в Internet Explorer; по окончании отсчёта показывает нули, а карточка остаётся на сайте до тех пор, пока вы её не уберёте.
- Цвета, шрифты и отступы в настройках не меняются: для них используется поле «Пользовательский CSS». Встроенного drag-and-drop конструктора нет.
Частые вопросы
Коротко о главном
Остальные ответы — в разделе «Вопросы и неполадки» руководства.
Сколько карточек можно создать?
Групп — сколько угодно. В одной группе до пяти карточек; сколько из них показывается, определяет формат группы.
Блока нет на витрине. Что проверить?
Код группы должен быть вставлен в шаблон темы (например, home.html), а не в текст страницы. Проверьте также, что настройки сохранены и что на витрине подключён jQuery. Очистите кеш Webasyst и браузера.
Группа пропала после правки текста. Почему?
Скорее всего, в тексте карточки появился одиночный апостроф или перенос строки: они ломают вывод всей группы. Замените апостроф на ’ или ', а перенос строки — на тег <br>.
Как работает таймер и что с карточкой после окончания акции?
Таймер считает время до указанных даты и времени по часам посетителя. Когда оно вышло, показываются нули, а карточка остаётся на сайте: уберите её вручную. На iOS и в Internet Explorer таймер не работает, поэтому срок акции пишите и в тексте карточки.
Можно ли изменить цвета и шрифты?
Да, через поле «Пользовательский CSS» на странице настроек. Для цвета и размера шрифта достаточно класса, для выравнивания текста может потребоваться !important. Примеры — в разделе «Свои стили».
Нужно ли программировать?
Нет. Единственное действие в шаблоне темы — вставить код группы, который плагин показывает на странице настроек.
Помощь и инструкции
Руководство владельца магазина
Подробное руководство по версии 1.0.5: от первой группы до обновления. Программировать не нужно.
Promocards для Shop-Script
Выведите акции и коллекции на витрину
Создайте первую группу карточек, вставьте её код в шаблон темы и проверьте блок на витрине.