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

Мои статьи Добавить статью Экспортировать статьи Импортировать статьи

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

Виджет со статьми

«Виджет» – это интерактивный блок с данными для размещения на сайте. Виджет можно генерировать при помощи специального короткого кода («ShortCode»), который может содержать дополнительные параметры. Полученный код можно вставить на страницы или в Блоки/Меню.

Как вставить сгенерированное меню?

Вы можете воспользоваться кодом автоматической замены, введя [MENU:blog_page_slider:cat_id-0:site-0:start-0:on_page-10]
Список значений вы можете заполнить при помощи генератора «Видежт со статьями».
Вы можете вставить код сгенерированного меню в блоки/меню или на страницы.
Внимание! Если вы используете несколько меню на одной странице, то вам не нужно вставлять Java Script и CSS стиль повторно.
По умолчанию в стандартном наборе функций вашего магазина уже вшит данный JavaScript и CSS стиль. Вы можете повторно вставить код только если вам нужно изменить его дизайн или функции.

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

:cat_id- - ID категории (будут отображены статьи только из этой категории)
:site- - ID вашего сайта, но внутри вашего сайта можно не использовать
:on_page- - Количество отображаемых статей в слайдере
:start- - начальная страница слайдера, число, с которого начать просмотр продуктов. Например, если на странице отображается 6 статей, а стартовое число будет 2, то будут отображены статьи с 6 по 12.
:description - Показывать краткое описание
:repeat - повторять слайды после того, как закончится список статей
:random - Показывать без упорядочивания по ID
:one - Прокручивать только по одной статье
:blog_id - ID статей (через запятую, без пробелов)
:lang- - язык отображаемых статей (если не указан, то будет использоваться язык открытой страницы)
:order_by- - Сортировка. 0 - по Дате, 1 - По ID, 4 - По наименованию
:sort_by- - Сортировка. ASC - По возрастанию, DESC - По убыванию
:append - добавлять новые данные в конце
:swipe - добавить эффект Swipe смещения при прикосновении (работает только не указан :append и :carousel)
Инструкция (обязательно)
Внимание! Для работы данного скрипта на странице обязательно необходимо установить скрипт <script src="/templates/scripts/hotengine-script-blog-list-base-slider-touch.js"></script>
Данный параметр активируется, если у основного блока со списком статей (class="hotengine-blog-page-list-div") есть атрибут data-swipe="1" (в виджете это делается при помощи кода :swipe). Скрипт активирует кнопку прокрутки вперёд или назад.
:add-javascript - если не добавить данный параметр, то будет только список статей (без javscript и css стилей, которые нужно предварительно вставлять самостоятельно).
Данный параметр удобен в том случае, если вы хотите оформить собственный стиль для слайдера. В этом случае нужно вставить JavaScript, CSS код, и короткий код [MENU...]
:id- - привязать ID к основному DIV. Можно использовать для индивидуальной стилизации области слайдера

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

Предварительный просмотр меню со статьями

Предварительный просмотр

Код

Java Script

<span class="loading-spin"></span></div>`;
                const loader = contentDiv.querySelector(`.hotengine-blog-page-list-div-loading`);
                setTimeout(() => { if (loader) loader.style.opacity = "1"; }, 10);

const cacheParam = window.location.search.includes(`cacheclear`) ? `&cacheclear` : ``;
                const encodedParam = param.includes(`%3A`) ? param : encodeURIComponent(param);

fetch(`/ajax_get_list_blog.php?c=${c}&n=${n}${cacheParam}¶m=${encodedParam}`, {
                    method: `GET`,
                    credentials: `same-origin`,
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
                        "X-Requested-With": "XMLHttpRequest"
                    },
                    signal: (() => { const controller = new AbortController(); setTimeout(() => controller.abort(), 20000); return controller.signal; })()
                })
                .then(response => response.text())
                .then(data => {
                    if (loader) {
                        loader.style.opacity = "0";
                        setTimeout(() => {
                            loader.remove();
                            contentDiv.innerHTML = data;

contentDiv.querySelectorAll(`script`).forEach(oldScript => {
                                const newScript = document.createElement(`script`);
                                Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
                                newScript.appendChild(document.createTextNode(oldScript.innerHTML));
                                oldScript.parentNode.replaceChild(newScript, oldScript);
                            });

if (typeof window.callback_hotengine_blog_page_list_div_button === `function`) {
                                window.callback_hotengine_blog_page_list_div_button();
                            }
                        }, 300);
                    }
                })
                .catch(() => {
                    if (loader) loader.remove();
                });
            }
        }
    });
})();
</script>

Скрипт загрузки следующих и предыдущих статей в меню, нужно вставить либо в какое-то меню, которое открывается на всех страницах сайта (например в header или в то меню, в которое вы вставляете сгенерированный HTML код меню ).

CSS стиль

.hotengine-blog-page-list-content {
display:block;
position:relative;
}

.hotengine-blog-page-list-div { display:inline-block; max-width:90%;  }

.hotengine-blog-page-list-div-button {   position:absolute; z-index:2; 
  display:inline-block; width:32px; height:32px; top:0px;
 }
 
 .hotengine-blog-page-list-content { display:block;     margin: 0px 32px 0px 44px;}
 .hotengine-blog-page-list-content b { font-size:inherit; font-weight:inherit; text-align:left; display:block;}
 .hotengine-blog-page-list-content .hotengine-blog-content-read-more { text-align:right;}
 .hotengine-blog-page-list-content .footh { display:none; }

.hotengine-blog-page-list-div-button-right { right:0px;  margin:99px 5px 0px 0px;
  background:url(/img/icon/shop/hotengine-shop-products-list-next-prev.png) -32px -32px  no-repeat;
 }
 
 .hotengine-blog-page-list-div-button-left {  left:0px; width:32px; height:32px; margin:99px 0px 0px 5px;
  background:url(/img/icon/shop/hotengine-shop-products-list-next-prev.png) 0px -32px  no-repeat;
 }
 
 .hotengine-blog-page-list-div-button-right:hover {  cursor:pointer;
  background-position:-32px 0px;
 }

.hotengine-blog-page-list-div-button-left:hover { cursor:pointer; 
  background-position:0px 0px;
 }

</style>

CSS код вставляйте в редакторе дизайна, во вкладку CSS стили, предварительно убрав "<style type="text/css">" в начале, и </style> в конце. Если код используется не в редакторе CSS стилей, то код можно уставлять без изменений. .hotengine-blog-categories-menu-active { - выделение активного пункта в меню. Замените "color:red;" на нужный вам цвет или стиль.

Показать раздельный код для меню