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

Виджеты?...

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

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

«Виджет» – это интерактивный блок с данными для размещения на сайте. Виджет можно генерировать при помощи специального короткого кода («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]
    Список значений вы можете заполнить при помощи генератора «Видежт с товарами».
  2. Вы можете вставить сгенерированный код в блок/меню или на страницу.
  3. Внимание! Если вы используете несколько меню на одной странице, то вам не нужно вставлять Java Script и CSS стиль повторно.
    По умолчанию в стандартном наборе функций вашего магазина уже вшит данный JavaScript и CSS стиль. Вы можете повторно вставить код только если вам нужно изменить его дизайн или функции.


В коде можно использовать следующие параметры:

  • :cat_id- - ID категории общего каталога Hotlist.biz (будут отображены товары только из этой категории общего каталога)
  • :pers_cat_id- - ID категории (будут отображены товары только из этой категории вашего каталога). Можно несклько значений, через запятую.
  • :subcategoriesproduct - Показывать товары подкатегорий.
  • :site- - ID вашего сайта, но внутри вашего сайта можно не использовать
  • :producer- - ID производителя (будут отображены товары только из этой категории производителей, вашего каталога. Можно несклько значений, через запятую.
  • :producer_country- - страна производитель (будут отображены товары только из этой страны производителя. Текстовое значение).
  • :collection- - ID коллекции (будут отображены товары только из этой категории - коллекции, вашего каталога). Можно несклько значений, через запятую.
  • :product_type- - ID Типа товара (будут отображены товары только указанного типа. Можно несклько значений, через запятую.
  • :on_page- - Количество отображаемых товаров в слайдере, например 4. При использовании «Авто-ширина» значение будет измнено в зависимости от размера экрана.
  • :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- - товары Синонимы (слово синоним )
  • :mosaic-sides - разделить блок на две части. 0 - Выкл, 1 - Вкл, 2 - Вкл + Заголовок над изображением, 3 - Вкл + Заголовок над изображением + Иконки над изображением, 4 - Вкл + Иконки над изображением.
    CSS стиль для эффекта мозаики
    Для того, чтобы товары зеркально меняли свой стиль через один товар, добавьте CSS стиль в Редактор дизайна:
    Code: CSS
    .hotengine-shop-products-mosaic-sides .hotengine-shop-product-list-block:nth-child(even) { flex-direction: row-reverse; }

    Базовый CSS стиль мозаики hotengine-template-products-mosaic-style.css
  • :lazy - ускоренная загрузка изображений. 0 - Вкл, 1 - Выкл. По умолчанию используется значение из общих настроек магазина, если параметр lazy не указан
  • :order_by- - Сортировка. 0 - По ID товара, 4 - По Наименованию, 5 - По Приоритету, 1 - По Дате, 2 -По Цене
  • :sort_by- - Сортировка. ASC - По возрастанию, DESC - По убыванию
  • :price_from- - Цена от
  • :price_to- - Цена до
  • :repeat - повторять слайды после того, как закончится список товаров
  • :auto_width - Авто-ширина (количество отображаемых карточек изменяется)
  • :append - добавлять новые данные в конце списка.
    Способ добавления параметра с зависимостью от размера экрана
    Блок с товарами будет переключен в режим append при указанных в параметрах значениях, например «:append-900x9999», где:
    • 900 — минимальная ширина экрана (в пикселях), с которой активируется функция;
    • 9999 — максимальная ширина экрана (в пикселях), до которой функция работает (опционально).

    Режим :append будет работать только в диапазоне ширины экрана от минимального до максимального значения. В других случаях :append отключается, и начинают работать другие способы визуальной работы виджета (scroll, swipe, автоподстройка ширины и т.д.).
    Если указан только первый параметр, например «:append-900», функция будет активна для экранов шириной от 900px и выше - рекомендуемый способ указания параметра.

    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;}
  • :swipe - добавить эффект Swipe смещения при прикосновении (работает только не указан :append и :carousel)
  • :scroll-9999x8x64x3,3 - Scroll эффект - заменить способ отображения на блок с прокруткой товаров. Данный способ удобен для мобильных устройств (имитируя Swipe) и не забирая лишнее пространство. Товары будут автоматически добавляться в список при прокрутке блока до предпоследнего товара. Работает только если не указан :append и :carousel.
    Способ добавления параметра
    Блок с товарами будет заменен при указанных в параметрах значениях, например «:scroll-9999x8x64x3,3», где:
    • 9999 — минимальная ширина экрана, меньше которой активируется функция;
    • 8 — количество товаров, загружаемых при одной подгрузке;
    • 64 — максимальное общее количество товаров (0 — без ограничений);
    • 3 — количество точек по умолчанию в пагинации;
    • 3 — максимальное количество точек, добавляемых при подгрузке (можно оставить пустым, если не требуется).
    Если параметр пагинации не указан, точки выключены. Если указано одно число или два через запятую, пагинация включена.
  • :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; 
  $("#MAIN_ID_PRODUCT_LIST").css("width",$nw)
  $(window).on("resize load", function(){
  $nw = $(window).width()-60; 
  $("#MAIN_ID_PRODUCT_LIST").css("width",$nw)
  
  })
  }
  
  });</script>
  • :add-javascript - если не добавить данный параметр, то будет только список товаров (без javscript и css стилей, которые нужно предварительно вставлять самостоятельно).
    Данный параметр удобен в том случае, если вы хотите оформить собственный стиль для слайдера. В этом случае нужно вставить JavaScript, CSS код, и короткий код [MENU...]
  • :id- - привязать ID к основному DIV. Можно использовать для индивидуальной стилизации области слайдера, например указав :id-start_product_list можно задать стиль к кнопке прокрутки #start_product_list .hotengine-shop-products-list-div-button-right:after{ content:"\2026"; color:#b5b5b5; font-family:Arial, Helvetica, sans-serif;}


При отображении товаров рекомендуется:
  • включить «:auto_width» — Авто-ширина (количество отображаемых карточек изменяется автоматически, чтобы заполнить всю доступную область блока);
  • включить «:swipe» — Swipe эффект (прокрутка пальцем или курсором) для улучшения удобства использования;
  • включить «:scroll-9999x8x0» — заменить способ отображения на блок с прокруткой товаров на мобильных устройствах (при ширине экрана менее 9999px), чтобы сэкономить место и убрать кнопки перемотки;
  • включить «:lazy-0» — ускоренная загрузка изображений карточек товаров.
  • кроме того, вы можете совместить «:append» и «:scroll» — блок будет добавлять новые товары в конец списка на экранах шире указанной границы, а на меньших автоматически переключаться в scroll-режим. Например «:append-900:scroll-9999x8x0» — append активен только при ширине экрана больше 900px;
CSS-стиль для адаптивного изменения ширины карточек товаров в зависимости от размера блока с товарами:

Если используется стандартный шаблон — стиль уже подключён автоматически.
Code: CSS
/*MODAL WINDOW PRODUCT LIST STYLE */
.modal__content {
    container-type: inline-size;
}

.modal__content .hotengine-shop-product-list-block {
    width: 24%;
    display: inline-block;
}

@container (max-width: 1900px) {
    .modal__content .hotengine-shop-product-list-block {
        width: 15%;
    }
}

@container (max-width: 1500px) {
    .modal__content .hotengine-shop-product-list-block {
        width: 20%;
    }
}

@container (max-width: 980px) {
    .modal__content .hotengine-shop-product-list-block {
        width: 32%;
    }
}

@container (max-width: 600px) {
    .modal__content .hotengine-shop-product-list-block {
        width: 49%;
    }
}
/*MODAL WINDOW PRODUCT LIST STYLE */


/* PRODUCT LIST ADAPTIVE INSIDE WIDGET CONTENT */
.hotengine-shop-products-list-div {
    container-type: inline-size;
}

@container (min-width: 1900px) {
    .hotengine-shop-products-list-div .hotengine-shop-product-list-block {
        width: 14%;
    }
}

@container (max-width: 1900px) {
    .hotengine-shop-products-list-div .hotengine-shop-product-list-block {
        width: 15%;
    }
}


@container (max-width: 1500px) {
    .hotengine-shop-products-list-div .hotengine-shop-product-list-block {
        width: 20%;
    }
}

@container (max-width: 980px) {
    .hotengine-shop-products-list-div .hotengine-shop-product-list-block {
        width: 32%;
    }
}

@container (max-width: 600px) {
    .hotengine-shop-products-list-div .hotengine-shop-product-list-block {
        width: 49%;
    }
}
/* PRODUCT LIST ADAPTIVE INSIDE WIDGET CONTENT */


Ajax загрузка списка товаров:
Генератор блока с товарами можно загрузить при помощи GET/POST/AJAX запроса. Для этого необходимо выполнить запрос с вашего сайта (вашего домена) на страницу «/ajax_get_list_shop.php». В запросе можно указать дополнительные свойства для отображения товаров. Список всех возможных значений вы можете узнать выше. Для корректного отображения стиля списка товаров, необходимо добавить HTML оболочку и родительские элементы, а также кнопки для перематывания/продолжения списка товаров (прокрутка вперед/назад). Пример такой оболочки и передачи параметров показан по ссылке - Пример загрузки списка товаров и передачи параметров через AJAX/POST/GET.
Показать раздельный код для меню