Только пользователям разрешено входить в центр администрирования. Войти

Генератор виджетов

Виджет с товарами магазина

«Виджет» – это интерактивный блок с данными для размещения на сайте. Виджет можно генерировать при помощи специального короткого кода («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.




Запустить генератор «Виджета с товарами»
Показать раздельный код для меню
Или вставить в виде кода [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 - на нужные вам значения.