Описание
Плагин заменяет стандартные похожие и рекомендуемые товары (апсейлы) на карусели-слайдеры с помощью скрипта glide.js, который не зависит от jQuery. Данный скрипт работает в разы быстрее чем его аналоги слайдеры или карусели.
Просто активируйте плагин, и карусель похожих товаров уже появится в вашем магазине. Помимо прочего, вы можете отдельно настроить сопутствующие продукты или рекомендуемые (Upsells) продукты.
Дизайн карточек товаров будет соответствовать дизайну вашей темы, но следует отметить, что некоторые шаблоны имеют свои собственные карусели рекомендуемых или похожих товаров.
Настройки плагина
- Woocommerce → Настройки → Товары → Карусель похожих товаров
- Woocommerce → Настройки → Товары → Карусель рекомендуемых
Возможности:
- Заменяет стандартный вывод похожих и рекомендуемых (апсейлов) товаров на карусель
- Нет зависимости от jquery, загрузка очень быстрая
- Вы можете изменить заголовок стандартной секции
- Вы можете включить или отключить автозапуск карусели
- Вы можете изменить временной интервал автопрокрутки карусели
- Вы можете указать количество продуктов в карусели
- Вы можете указать количество видимых товаров (указать сетку, колонки)
- Вы можете указать количество отображаемых продуктов на мобильных устройствах и планшетах.
- Похожие и рекомендуемые товары не отображаются, если их количество меньше указанного в карусели видимых товаров. То есть карусель не будет создана. Только качественная оптимизация.
- Вы можете отключить карусель и управлять другими функциями — заголовок секции, количество отображаемых продуктов, количество колонок
Новые расширенные настройки
- Подсказка на мобильном устройстве (см. скриншоты)
- Стилизация мобильной подсказки (см. скриншоты)
- Центральный режим с обрезкой (см. скриншоты)
- Центральный режим только на мобильном устройстве
- Выбор анимации перехода карусели
- Настройка длительности анимации перехода
- Установка расстояния между продуктами
- Выбор иконок навигации (см. скриншоты)
- Настройка цвета навигации
У всех новых опций есть подсказки прямо в админ панели. Вы всегда можете более точно настроить карусель.
Преимущества плагина
Самое важное преимущество плагина “Carousel Upsells and Related Product for Woocommerce” заключается в том, что он использует “чистую” javascript библиотеку glide.js и не имеет зависимостей от jQuery. Основной JS файл плагина весит всего ~23kb, а в сжатом виде всего ~7kb. По сравнению с подобными каруселями-слайдерами, такие как Slick Slider(88kb, а в сжатом 44kb), Swiper Slide(более 100kb) или OWL carousel (89kb, а в сжатом 44kb) – это в разы меньше и напомню glide.js без зависимостей jQuery. При всем этом у glide.js присутствует режим Touch Swipe, который позволяет пальцем (касанием по элементу) двигать карусель в нужном направлении на мобильных устройствах.
В итоге данная карусель быстрее работает и моментально загружает ваши товары.
Обязательные плагины
Большое спасибо
- Спасибо за библиотеку javascript Glide.js Jędrzej Chałubek
- Благодарю за помощь и полезные советы разработчика Сampusboy
- Спасибо за помощь разработчику KAGG Design
- Отдельная благодарность разработчику и блогеру Артёму Абрамовичу
- За помощь Telegram каналу «WordPress & WooCommerce» и всем участникам
- За лучшую документацию на русском языке по WordPress wp-kama.ru
Поддержка плагина:
Переводы
Если вы хотите помочь с переводом этого плагина, добро пожаловать!
Чтобы внести свой вклад, посетите translate.wordpress.org
Статьи о плагине:
Как установить карусель товаров woocommerce для рекомендуемых и похожих товаров?
Скриншоты
Установка
В этом разделе описывается, как установить плагин и заставить его работать.
Установка из админ панели WordPress:
- Войдите в вашу админ-панель WordPress
- Перейти к плагинам -> Добавить новый
- Введите «Woocommerce Glide.js Carousel Upsells and Related Product» в поле поиска справа и нажмите Enter.
- Найдите этот плагин и Нажмите «Установить сейчас»
- Активируйте плагин
Ручная установка:
- Загрузите плагин из репозитория WordPress.org
- В панели администратора WordPress перейдите в раздел «Плагины -> Добавить новый -> Загрузить плагин».
- Upload the downloaded plugin file (carousel-upsells-and-related-product-for-woocommerce.0.4.6.zip) and click ‘Install Now’
- Активируйте ‘Woocommerce Glide.js Carousel Upsells and Related Product’ со страницы плагинов.
Часто задаваемые вопросы
-
Carousel does not work correctly, what should I do?
-
Если карусель не работает, сначала проверьте плагины кеширования. Сжатие JS-кода — довольно частая причина, по которой перестаёт работать карусель.
Например, если вы используете плагин Autoptimize, вы можете протестировать функциональность нашего плагина карусели без запуска плагина Autoptimize. В этом случае нет необходимости отключать плагин Autoptimize, достаточно добавить префикс ?ao_noptimize=1 в конец URL. Если карусель начала работать, просто добавьте исключение в плагин Autoptimize. Вот как это выглядит.
Если вы используете WP Rocket, проблема устраняется так же, как и в случае с Autoptimize. Смотрите тут.
Пожалуйста, создайте тему на форуме поддержки. Я постараюсь оказать помощь как можно быстрее. Плагин сложный, давайте сделаем его лучше вместе. Жду ваших рекомендаций и предложений
Отзывы
Участники и разработчики
«Carousel Upsells and Related Product for Woocommerce» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:
Участники«Carousel Upsells and Related Product for Woocommerce» переведён на 2 языка. Благодарим переводчиков за их работу.
Перевести «Carousel Upsells and Related Product for Woocommerce» на ваш язык.
Заинтересованы в разработке?
Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.
Журнал изменений
0.4.6
- Fixed an error in navigation arrows
0.4.5
- Tested WP ver 5.8
0.4.4
- Tested WP ver
- Added a description for solving problems with caching plugins
0.4.3
- Tested WP ver
0.4.2
- Updating details
0.4.1
- Plugin tested with WordPress version 5.5+
0.4.0
- Fixed carousel display in some themes
0.3.9
- Added a new function — initializing JS after loading the whole page
0.3.8
- Plugin tested with WordPress version 5.4+
0.3.7
- Added translation string for mobile tooltip
0.3.6
- Обновлен CSS
0.3.5
- Fixed a bug when choosing a navigation arrow in related products
- Added new settings for themes that apply filters and functions
0.3.4
- Исправлены ссылки для установленного WordPress в подпапке
0.3.3
- Обновлен CSS
0.3.2
- Обновлены стили настроек
0.3.1
- Исправлен перевод строки
0.3.0
- Последнее тестирование новых хуков и обновление плагинов
- Новая опция — Подсказка на мобильном устройстве
- Новая опция — Стилизация мобильной подсказки
- Новая опция — Центральный режима с обрезкой
- Новая опция — центральный режим только на мобильном устройстве
- Новая опция — Выбор анимации перехода карусели
- Новая опция — Установка продолжительности анимации перехода
- Новая опция — установка расстояния между товарами
- Новая опция — Выбор иконок навигации
- Новая опция — настроить цвет навигации
- Добавлены всплывающие подсказки в в админ панели
- Добавлены демонстрационные окна с каруселями
0.2.9
- Последнее тестирование новых хуков и обновление плагинов
0.2.8
- Ликвидирована ошибка с уведомлением
0.2.7
- Исправлена ошибка хука обновления
0.2.6
- Тестирование хука обновления
0.2.5
- Тестирование плагина на WordPress 5.3
- Добавлены новые уведомления
- Добавлены новые строки локализации
0.2.4
- Тестирование новой версии плагина WooCommerce 3.8
0.2.3
- Обновлен CSS
0.2.2
- Обновлен CSS
0.2.1
- Инсправлены ошибки
0.2.0
- Инсправлены ошибки
0.1.9
- Исправлена ошибка с текстовым доменом
0.1.8
- Ликвидирована ошибка со всплывающим окном
0.1.7
- Новый интерфейс
- Обновлен POT файл
- Обновлен CSS
- Обновлен JavaScript
- Добавлен новый параметр — отключить карусель
0.1.6
- Обновлен JavaScript
0.1.5
- Обновлен CSS
0.1.4
- Обновлен CSS
0.1.3
- Обновлен CSS
0.1.2
- Исправлена ошибка навигации слайдера
- Добавлен эффект при наведении на карусель в виде выезжающих навигационных стрелок
0.1.1
- Презентация настроек первой версии плагина
0.1.0
- Релиз