Қол жоқ осы бетте. Егер сіз өтіп, сәйкестендіру, онда бұл ма - Кіру
Виджет генераторы
Дүкен элементінің виджеті
«Виджет» – это интерактивный блок с данными для размещения на сайте. Виджет можно генерировать при помощи специального короткого кода («ShortCode»), который может содержать дополнительные параметры. Запустить генератор «Виджета с товарами»Как вставить сгенерированное меню?- 1)Вы можете воспользоваться кодом автоматической замены, введя [MENU:shop_products_slider:htmlonly:pers_cat_id-0:cat_id-0:site-0:start-0:on_page-3:description:button-cart:lazy-0:bestseller:sale]
В коде можно использовать следующие параметры:- :cat_id- - ID категории общего каталога Hotlist.biz (будут отображены товары только из этой категории общего каталога)
- :pers_cat_id- - ID категории (будут отображены товары только из этой категории вашего каталога). Можно несклько значений, через запятую.
- :subcategoriesproduct - Показывать товары подкатегорий.
- :site- - ID вашего сайта, но внутри вашего сайта можно не использовать
- :producer- - ID производителя (будут отображены товары только из этой категории производителей, вашего каталога. Можно несклько значений, через запятую.
- :producer_country- - страна производитель (будут отображены товары только из этой страны производителя. Текстовое значение).
- :collection- - ID коллекции (будут отображены товары только из этой категории - коллекции, вашего каталога). Можно несклько значений, через запятую.
- :product_type- - ID Типа товара (будут отображены товары только указанного типа. Можно несклько значений, через запятую.
- :on_page- - Количество отображаемых товаров в слайдере, рекомендованное число - 3
- :start- - начальная страница слайдера, число, с которого начать просмотр продуктов. Например, если на странице отображается 6 товаров, а стартовое число будет 2, то будут отображены товары с 6 по 12.
- :button-cart - Показывать кнопку добавления в корзину
- :button-compare - Показывать кнопку Сравнения
- :description - Показывать краткое описание товара
- :rating-stars - Показывать Star Rating/Оценку товара
- :favorite-icon - Показывать Иконку добавления в избранные
- :variety - Показывать Разновидность (только при оплаченном хостинге)
- :random - Показывать без упорядочивания по ID
- :one - Прокручивать только по одному товару
- :bestseller - Показывать только Хиты продаж
- :discount - Показывать только товары со скидкой
- :sale - Показывать только акционные товары
- :stock- - Наличие (указать только определенный статус наличия)
- :new-products - Показывать только товары отмеченные как Новинки
- :reduced-price - Показывать только товары отмеченные как Цена снижена
- :recently-viewed-products - Недавно просмотренные товары
- :favorite-products - Избранные товары
- :search- - поисковый запрос (текстовый поиск по товарам) [возможно уточнение с разделением символом «~» - равнозначно уточнению «И»] или [возможно уточнение с разделением символом «||» - равнозначно уточнению «ИЛИ»]
- :products_id- - id товаров (через запятую, без пробелов)
- :lang- - язык отображаемых статей (если не указан, то будет использоваться язык открытой страницы)
- :products_synonyms- - товары Синонимы (слово синоним )
- :lazy - ускоренная загрузка изображений. 0 - Вкл, 1 - Выкл. По умолчанию используется значение из общих настроек магазина, если параметр lazy не указан
- :order_by- - Сортировка. 0 - По ID товара, 4 - По Наименованию, 5 - По Приоритету, 1 - По Дате, 2 -По Цене
- :sort_by- - Сортировка. ASC - По возрастанию, DESC - По убыванию
- :price_from- - Цена от
- :price_to- - Цена до
- :repeat - повторять слайды после того, как закончится список товаров
- :auto_width - Авто-ширина (количество отображаемых карточек изменяется)
- :append - добавлять новые данные в конце CSS стиль при использовании параметра append ↓ Для того, чтобы кнопка добавления оставшихся товаров под список отображалась внизу, необходимо добавить следующий css стиль. #product_list - id блока с товарами.
Code: CSS #product_list #product_list .hotengine-shop-products-list-div-append .hotengine-shop-products-list-div-button-right:after{ content:'\2026'; color:#b5b5b5; font-family:Arial, Helvetica, sans-serif;} #product_list .hotengine-shop-products-list-div-button-left { display: none!important; }
- :carousel - экспериментальная функция owl-carousel, прокрутка с поддержкой touch swipe *Изменение параметров ↓
По умолчанию размер окна определяется при помощи Javascript.
Вы можете указать множество дополнительных параметров, список которых доступен по этой ссылке: Docs Options.
Для того, чтобы задать параметр воспользуйтесь шаблоном:
:carousel-autoplayTimeout-1000
:carousel-autoplaySpeed-5000
:carousel-autoplay-true
и так далее (:carousel-ПАРАМЕТР-ЗНАЧЕИЕ).
Кроме того, опцию можно указать при помощи JavaScript атрибута carousel-...
data-carousel-autoplayTimeout="1000"
data-carousel-autoplaySpeed="5000"
data-carousel-autoplay="true"
и так далее (data-carouserl-ПАРАМЕТР="значение")
Вы так же можете нарастить слайдер поверх стандартного слайдера платформы при помощи JavaScript.
Создайте стандартный слайдер при помощи кода [MENU... и добавьте к блоку .hotengine-shop-products-list-div-append class hotengine-shop-products-list-carousel.
Пример:Code: JavaScript <script> $(function(){ if($(window).width()<900){ //если размер окна менее 900пикс. $(".hotengine-shop-products-list-div-append").addClass("hotengine-shop-products-list-carousel"); //добавить carousel $nw = $(window).width()-60; $("#stones_product_list").css("width",$nw) $(window).on("resize", function(){ $nw = $(window).width()-60; $("#stones_product_list").css("width",$nw) }) } });</script>
- :htmlonly - только список товаров (без javscript и css стилей, которые нужно предварительно вставлять самостоятельно).
Данный параметр удобен в том случае, если вы хотите оформить собственный стиль для слайдера. В этом случае нужно вставить JavaScript, CSS код, и короткий код [MENU...]- :id- - привязать ID к основному DIV. Можно использовать для индивидуальной стилизации области слайдера
#start_product_list .hotengine-shop-products-list-div-button-right:after{ content:'\2026'; color:#b5b5b5; font-family:Arial, Helvetica, sans-serif;}
- 2)Вы можете вставить код сгенерированного меню вручную. Для этого создайте Блок/Меню, с положением вверху или внизу, и вставьте в него код, написанный ниже. Так же код можно вставить внутрь страницы. Вставлять необходимо все поля.
Внимание! Если вы используете несколько меню на одной странице, то вам не нужно вставлять Java Script и CSS стиль повторно.
По умолчанию в стандартном наборе функций вашего магазина уже вшит данный JavaScript и CSS стиль. Вы можете повторно вставить код только если вам нужно изменить его дизайн или функции. Просто так вставлять JavaScript код и CSS стиль повторно не нужно.
Ajax загрузка списка товаров:
Генератор блока с товарами можно загрузить при помощи GET/POST/AJAX запроса. Для этого необходимо выполнить запрос с вашего сайта (вашего домена) на страницу «/ajax_get_list_shop.php». В запросе можно указать дополнительные свойства для отображения товаров. Список всех возможных значений вы можете узнать выше. Для корректного отображения стиля списка товаров, необходимо добавить HTML оболочку и родительские элементы, а также кнопки для перематывания/продолжения списка товаров (прокрутка вперед/назад). Пример такой оболочки и передачи параметров показан по ссылке - Пример загрузки списка товаров и передачи параметров через AJAX/POST/GET.
Запустить генератор «Виджета с товарами»Предварительный просмотр меню с товарами
Предварительный просмотр
Код
Java Script
Скрипт загрузки следующих и предыдущих товаров в меню, нужно вставить либо в какое-то меню, которое открывается на всех страницах сайта (например в header или в то меню, в которое вы вставляете сгенерированный HTML код меню ).
CSS стиль
CSS код вставляйте в редакторе дизайна, во вкладку CSS стили, предварительно убрав "<style type="text/css">" в начале, и </style> в конце. Если код используется не в редакторе CSS стилей, то код можно уставлять без изменений. .hotengine-shop-categories-menu-active { - выделение активного пункта в меню. Замените "color:red;" на нужный вам цвет или стиль.
Показать раздельный код для меню
Или вставить в виде кода [MENU:shop_products_slider:pers_cat_id-0:cat_id-0:button-cart:lazy-0:repeat:site-0:start-0:on_page-3:description:bestseller:sale]
Обязательно замените цифры 0 - на нужные вам значения. - :carousel - экспериментальная функция owl-carousel, прокрутка с поддержкой touch swipe *Изменение параметров ↓