Основні модулі платформи. Типи даних і сторінок.

☰

Типи даних/сторінок

📄

Сторінки

System Block

Сторінка — блок, що розташовується в центрі сайту, в області для контенту, який може містити будь-які HTML дані (HTML, XHTML, JAVASCRIPT, CSS або інші).

Ajax завантаження контенту сторінки.

<a class="ajax_load_page" href="/index.htm" data-content-block=".contenth_ajax">ЗАВАНТАЖИТИ СТОРІНКУ</a>

loader.style.transition = "opacity 0.4s";
                loader.style.opacity = "0";
                setTimeout(() => { loader.style.opacity = "1"; }, 10);

fetch(`/ajax.php?p=${href}`, {
                    method: "GET",
                    credentials: "same-origin",
                    headers: {
                        "X-Requested-With": "XMLHttpRequest"
                    },
                    signal: (() => {
                        const c = new AbortController();
                        setTimeout(() => c.abort(), 20000);
                        return c.signal;
                    })()
                })
                .then(response => response.text())
                .then(data => {
                    loader.style.opacity = "0";
                    setTimeout(() => {
                        loader.remove();
                        contentBlock.innerHTML = data;

<div class="contenth_ajax">КОНТЕНТ</div>

Посилання з класом ajax_load_page відкриватиме Ajax контент всередині блоку, заданого в атрибуті data-content-block.
Шлях до сторінки, що завантажується, задано в параметрі href.
Шлях до сторінки може бути відносним або повним, з http.
Ви також можете використовувати власні скрипти, передаючи GET або POST параметр p, з ім'ям
(або повною адресою) сторінки, за адресою /ajax.php

Крім того, можливе використання прямих запитів без використання Ajax.
Наприклад, для завантаження даних в iframe. Шлях такий же як і при використанні Ajax.

Скрипт завантаження даних у спливаючому вікні:
Скрипт спливаючого вікна із завантаженням Ajax контенту

📰

Каталог статей

Content Module

Каталог статей — такий же блок, як і сторінки, який додатково має короткі описи, що відображаються у вигляді списку з посиланням для перегляду повного тексту, а також можливістю розділяти списки за категоріями.

Списки статей можна відображати не тільки всередині категорій, але й генерувати власні списки.

Ajax завантаження контенту статті

Ajax завантаження контенту статті.

<a class="ajax_load_blog" href="https://boostore.pro/ua/blog/news_ru/1.htm" data-content-block=".contenth_ajax">ЗАВАНТАЖИТИ СТАТТЮ</a>

loader.style.transition = "opacity 0.4s";
                loader.style.opacity = "0";
                loader.style.display = "block";
                setTimeout(() => { loader.style.opacity = "1"; }, 10);

fetch(`/ajax.php?blog_cat_p=${encodeURIComponent(href)}`, {
                    method: "GET",
                    credentials: "same-origin",
                    headers: {
                        "X-Requested-With": "XMLHttpRequest"
                    },
                    signal: (() => {
                        const c = new AbortController();
                        setTimeout(() => c.abort(), 20000);
                        return c.signal;
                    })()
                })
                .then(response => response.text())
                .then(data => {
                    loader.style.opacity = "0";
                    setTimeout(() => {
                        loader.remove();
                        contentBlock.innerHTML = data;

<div class="contenth_ajax">КОНТЕНТ</div>

Посилання з класом ajax_load_blog відкриватиме Ajax контент всередині блоку, заданого в атрибуті data-content-block.
Шлях до сторінки, що завантажується, задано в параметрі href.
Шлях до сторінки може бути відносним або повним, з http.
Ви також можете використовувати власні скрипти, передаючи GET або POST параметр blog_cat_p, з повною адресою
статті, за адресою /ajax.php

Крім того, можливе використання прямих запитів без використання Ajax.
Наприклад, для завантаження даних в iframe. Шлях такий же як і при використанні Ajax.

Скрипт завантаження даних у спливаючому вікні:
Скрипт спливаючого вікна із завантаженням Ajax контенту

Приклад Ajax скрипта завантаження власного списку статей

Приклад Ajax завантаження статті у JSON форматі

📐

Блок / Меню

Layout Module

Блок/Меню — це універсальний контейнер для будь-яких HTML кодів і системних функцій (кошик, фільтр, хіти продажу). Дозволяє формувати структуру сайту, розміщувати скрипти в мета-тегах і керувати їхньою видимістю на різних пристроях.

Використовуйте Header і Footer для загальних елементів дизайну (логотип, контакти), а бічні або внутрішні блоки — для контентних модулів і скриптів.

Позиції розміщення:

Шапка сайту (Header): всередині елемента #hotengine-header, над контентом.
Низ сайту (Footer): всередині елемента #hotengine-footer, під контентом.
Зліва / Справа: бічні панелі біля основного блоку з контентом.
Вгорі / Внизу: всередині області контенту, у верхній або нижній частині.
Вгорі > cat_tree: позиція одразу під деревом категорій.
Службові теги (Header Meta): під Meta-тегами для вставки JavaScript і системних даних.

До всіх меню автоматично додається CSS-клас позиції та унікальний menu_id.

📋 Основна розмітка блоків сайту

Для розширеного мобільного меню використовуйте Конструктор мобільного меню.

🛒

Магазин

E-commerce Module

Магазин — модуль для організації каталогу товарів з функціоналом замовлення. Підтримує сегментацію за виробниками, категоріями, типами та характеристиками.

Віджет з товарами

Списки можна вбудовувати в сторінки, блоки або статті через Генератор слайдерів. Приклад роботи віджета з товарами

Віджети категорій

Відображення структури розділів у будь-якому місці сайту за допомогою Віджета категорій.

Ajax завантаження товару

Ajax завантаження товару.

<a class="ajax_load_shop" href="https://boostore.pro/ua/blog/news_ua/pers_shop/store_ru/21956.htm" data-content-block=".contenth_ajax">ЗАВАНТАЖИТИ ТОВАР</a>

fetch(`/ajax.php?shop_cat_p=${encodeURIComponent(href)}`, {
                    method: "GET",
                    credentials: "same-origin",
                    headers: {
                        "X-Requested-With": "XMLHttpRequest"
                    },
                    signal: (() => {
                        const c = new AbortController();
                        setTimeout(() => c.abort(), 20000);
                        return c.signal;
                    })()
                })
                .then(response => response.text())
                .then(data => {
                    loader.style.opacity = "0";
                    setTimeout(() => {
                        loader.remove();
                        contentBlock.innerHTML = data;

<div class="contenth_ajax">КОНТЕНТ</div>

Посилання з класом ajax_load_shop відкриватиме Ajax контент всередині блоку, заданого в атрибуті data-content-block.
Шлях до сторінки, що завантажується, задано в параметрі href.
Шлях до сторінки може бути відносним або повним, з http.
Ви також можете використовувати власні скрипти, передаючи GET або POST параметр shop_cat_p, з повною адресою
товару, за адресою /ajax.php

Крім того, можливе використання прямих запитів без використання Ajax.
Наприклад, для завантаження даних в iframe. Шлях такий же як і при використанні Ajax.
Скрипти додавання товару в кошик потрібно підвантажувати додатково, якщо ви використовуєте iframe.

Скрипт завантаження даних у спливаючому вікні:
Скрипт спливаючого вікна із завантаженням Ajax контенту

Ajax завантаження відгуків до товарів ↓

Приклад Ajax скрипта завантаження списку товарів + «Генератор списку товарів»

Ajax завантаження кошика

Ajax завантаження кошика.

<a class="ajax_load_cart" href="javascript://" data-content-block=".content_cart_ajax">ЗАВАНТАЖИТИ КОШИК</a>

fetch(`/ajax.php?cart&load_cart_ajax`, {
                    method: "GET",
                    credentials: "same-origin",
                    headers: {
                        "X-Requested-With": "XMLHttpRequest"
                    },
                    signal: (() => {
                        const c = new AbortController();
                        setTimeout(() => c.abort(), 20000);
                        return c.signal;
                    })()
                })
                .then(response => response.text())
                .then(data => {
                    loader.style.opacity = "0";
                    setTimeout(() => {
                        loader.remove();
                        contentBlock.innerHTML = data;

<div class="content_cart_ajax">КОНТЕНТ</div>

Посилання з класом ajax_load_cart відкриватиме Ajax контент всередині блоку, заданого в атрибуті data-content-block.
Для завантаження кошика достатньо виконати звернення до сторінки «/ajax.php?cart&load_cart_ajax»

Приклад Ajax скрипта завантаження кошика при наведенні курсора мишки

Ajax завантаження списку зображень картки товару

Ajax завантаження списку всіх категорій у JSON форматі

Ajax завантаження списку всіх категорій у JSON форматі.

Для отримання списку всіх категорій магазину достатньо виконати запит за адресою /ajax.php?json&shop_categories&start=0&param=:products

Де

&start= — ID категорії, з якої почати відображення.
&param= параметри, які можна отримати у Віджеті з категоріями (не обов'язковий параметр)
Запит працює тільки із зазначенням вашого домену, наприклад http://example.com/ajax.php?json&shop_categories&start=0

Приклад результату: {"id":"ID категорії","parentID":"ID батьківської категорії","child_cat":"Кількість вкладених категорій","child_items":"Кількість товарів у категорії","image":"Шлях до зображення категорії","title":"Назва категорії"},

Ajax завантаження товару в JSON форматі

Ajax завантаження товару в JSON форматі.

Для отримання даних карток товарів у JSON форматі, достатньо виконати запит за адресою /ajax.php?json&shop_products&id=0

При вивантаженні товарів можна вказати параметри сортування та фільтрації за наступними параметрами:

id — ID картки товару (одне або декілька значень, через кому).
pers_shop_cat_page_catid — ID категорії магазину (одне або декілька значень, через кому)
producer – виробник (одне або декілька значень, через кому)
collection — колекція (одне або декілька значень, через кому)
sort_by – сортування
order_by – сортування
sort_instock_priority – сортування пріоритет
price_from – ціна від
price_to – ціна до
stock — наявність

Запит працює тільки із зазначенням вашого домену, наприклад http://example.com/ajax.php?json&shop_products&id=0

Форма (Form)

📝

Форми

Data Capture Module

Форма — розділ документа, що дозволяє користувачеві вводити інформацію для подальшої обробки системою. На платформі BooStore.pro ви зможете створювати повноцінні форми, з прив'язкою імен, id та class'ів для полів. Дані форм можна обробляти на нашій платформі або відправляти на будь-який інший ресурс.

✔ Гнучке налаштування

Прив'язка унікальних імен та ідентифікаторів для кожного поля форми.

➡ Обробка даних

Можливість локальної обробки в системі або відправки на зовнішні ресурси.

Ajax завантаження форм (спливаючі форми)

3 способи створення форми:

1 Конструктор форм (Найбільш гнучкий)

Відкрийте конструктор форм і створіть структуру, задавши потрібні поля. Всі інструкції доступні всередині модуля.

2 Функціональна сторінка

Створіть сторінку типу feedback. При її відкритті відображатиметься стандартна форма зворотного зв'язку.

3 Спливаюча форма (через код)

HTML

<a class="hotengine-dialog-email" data-site="XXXX" href="javascript://">Написати нам</a>

class="hotengine-dialog-email" — виклик вікна. data-site="XXXX" — ваш ID сайту (зазначений в адмін-панелі).
Додатково можна використовувати: data-title (заголовок), data-close-button (текст закриття), data-width та data-height.

Приклад стилізації полів (CSS)

Зміна назв полів для різних мов через псевдоелементи:

CSS


:lang(ru) .hotengine-form-feedback-text-title:after{ content:"Текст:"; }
  :lang(en) .hotengine-form-feedback-text-title:after{ content:"Text:"; }
  :lang(uk) .hotengine-form-feedback-text-title:after{ content:"Текст:"; }
  :lang(de) .hotengine-form-feedback-text-title:after{ content:"Text:"; }
  :lang(es) .hotengine-form-feedback-text-title:after{ content:"Texto:"; }
  :lang(fr) .hotengine-form-feedback-text-title:after{ content:"Texte:"; }
  :lang(kk) .hotengine-form-feedback-text-title:after{ content:"Мәтін:"; }
  :lang(be) .hotengine-form-feedback-text-title:after{ content:"Тэкст:"; }
  :lang(ro) .hotengine-form-feedback-text-title:after{ content:"Text:"; }
  :lang(tr) .hotengine-form-feedback-text-title:after{ content:"Metin:"; }
  :lang(it) .hotengine-form-feedback-text-title:after{ content:"Testo:"; }
  :lang(sk) .hotengine-form-feedback-text-title:after{ content:"Text:"; }
  :lang(da) .hotengine-form-feedback-text-title:after{ content:"Tekst:"; }
  :lang(pl) .hotengine-form-feedback-text-title:after{ content:"Tekst:"; }
  :lang(zh) .hotengine-form-feedback-text-title:after{ content:"文本："; }
  :lang(hi) .hotengine-form-feedback-text-title:after{ content:"पाठ:"; }
  :lang(ar) .hotengine-form-feedback-text-title:after{ content:"النص:"; }
  :lang(pt) .hotengine-form-feedback-text-title:after{ content:"Texto:"; }
  :lang(bn) .hotengine-form-feedback-text-title:after{ content:"টেক্সট:"; }

:lang(ru) .hotengine-form-feedback-yourname-title:after{ content:"Ваше имя:"; }
  :lang(en) .hotengine-form-feedback-yourname-title:after{ content:"Your name:"; }
  :lang(uk) .hotengine-form-feedback-yourname-title:after{ content:"Ваше ім'я:"; }
  :lang(de) .hotengine-form-feedback-yourname-title:after{ content:"Ihr name:"; }
  :lang(es) .hotengine-form-feedback-yourname-title:after{ content:"Su nombre:"; }
  :lang(fr) .hotengine-form-feedback-yourname-title:after{ content:"Votre nom:"; }
  :lang(kk) .hotengine-form-feedback-yourname-title:after{ content:"Сіздің атыңыз:"; }
  :lang(be) .hotengine-form-feedback-yourname-title:after{ content:"Ваша імя:"; }
  :lang(ro) .hotengine-form-feedback-yourname-title:after{ content:"Numele dvs.:"; }
  :lang(tr) .hotengine-form-feedback-yourname-title:after{ content:"Adınız:"; }
  :lang(it) .hotengine-form-feedback-yourname-title:after{ content:"Il tuo nome:"; }
  :lang(sk) .hotengine-form-feedback-yourname-title:after{ content:"Vaše meno:"; }
  :lang(da) .hotengine-form-feedback-yourname-title:after{ content:"Dit navn:"; }
  :lang(pl) .hotengine-form-feedback-yourname-title:after{ content:"Twoje imię:"; }
  :lang(zh) .hotengine-form-feedback-yourname-title:after{ content:"你的名称："; }
  :lang(hi) .hotengine-form-feedback-yourname-title:after{ content:"आपका नाम:"; }
  :lang(ar) .hotengine-form-feedback-yourname-title:after{ content:"اسمك:"; }
  :lang(pt) .hotengine-form-feedback-yourname-title:after{ content:"Seu nome:"; }
  :lang(bn) .hotengine-form-feedback-yourname-title:after{ content:"আপনার নাম:"; }

:lang(ru) .hotengine-form-feedback-yoursoname-title:after{ content:"Ваша фамилия:"; }
  :lang(en) .hotengine-form-feedback-yoursoname-title:after{ content:"Your name:"; }
  :lang(uk) .hotengine-form-feedback-yoursoname-title:after{ content:"Ваше прізвище:"; }
  :lang(de) .hotengine-form-feedback-yoursoname-title:after{ content:"Ihr name:"; }
  :lang(es) .hotengine-form-feedback-yoursoname-title:after{ content:"Su nombre:"; }
  :lang(fr) .hotengine-form-feedback-yoursoname-title:after{ content:"Votre nom:"; }
  :lang(kk) .hotengine-form-feedback-yoursoname-title:after{ content:"Сіздің аты-жөні:"; }
  :lang(be) .hotengine-form-feedback-yoursoname-title:after{ content:"Ваша прозвішча:"; }
  :lang(ro) .hotengine-form-feedback-yoursoname-title:after{ content:"Numele dumneavoastră:"; }
  :lang(tr) .hotengine-form-feedback-yoursoname-title:after{ content:"Adınız:"; }
  :lang(it) .hotengine-form-feedback-yoursoname-title:after{ content:"Il tuo nome:"; }
  :lang(sk) .hotengine-form-feedback-yoursoname-title:after{ content:"Vaše meno:"; }
  :lang(da) .hotengine-form-feedback-yoursoname-title:after{ content:"Dit navn:"; }
  :lang(pl) .hotengine-form-feedback-yoursoname-title:after{ content:"Imię i nazwisko:"; }
  :lang(zh) .hotengine-form-feedback-yoursoname-title:after{ content:"你的名称："; }
  :lang(hi) .hotengine-form-feedback-yoursoname-title:after{ content:"आपका नाम:"; }
  :lang(ar) .hotengine-form-feedback-yoursoname-title:after{ content:"اسمك:"; }
  :lang(pt) .hotengine-form-feedback-yoursoname-title:after{ content:"O seu apelido:"; }
  :lang(bn) .hotengine-form-feedback-yoursoname-title:after{ content:"আপনার নাম:"; }
:lang(ru) .hotengine-form-feedback-yourphone-title:after{ content:"Ваш телефон:"; }
  :lang(en) .hotengine-form-feedback-yourphone-title:after{ content:"Your phone:"; }
  :lang(uk) .hotengine-form-feedback-yourphone-title:after{ content:"Ваш мобільний телефон:"; }
  :lang(de) .hotengine-form-feedback-yourphone-title:after{ content:"Ihr Telefon:"; }
  :lang(es) .hotengine-form-feedback-yourphone-title:after{ content:"Su teléfono:"; }
  :lang(fr) .hotengine-form-feedback-yourphone-title:after{ content:"Votre téléphone:"; }
  :lang(kk) .hotengine-form-feedback-yourphone-title:after{ content:"Телефон:"; }
  :lang(be) .hotengine-form-feedback-yourphone-title:after{ content:"Ваш тэлефон:"; }
  :lang(ro) .hotengine-form-feedback-yourphone-title:after{ content:"Telefonul dvs.:"; }
  :lang(tr) .hotengine-form-feedback-yourphone-title:after{ content:"Telefon:"; }
  :lang(it) .hotengine-form-feedback-yourphone-title:after{ content:"Il telefono:"; }
  :lang(sk) .hotengine-form-feedback-yourphone-title:after{ content:"Váš telefón:"; }
  :lang(da) .hotengine-form-feedback-yourphone-title:after{ content:"Din telefon:"; }
  :lang(pl) .hotengine-form-feedback-yourphone-title:after{ content:"Telefon:"; }
  :lang(zh) .hotengine-form-feedback-yourphone-title:after{ content:"你的电话："; }
  :lang(hi) .hotengine-form-feedback-yourphone-title:after{ content:"अपने फोन:"; }
  :lang(ar) .hotengine-form-feedback-yourphone-title:after{ content:"الهاتف:"; }
  :lang(pt) .hotengine-form-feedback-yourphone-title:after{ content:"Seu telefone:"; }
  :lang(bn) .hotengine-form-feedback-yourphone-title:after{ content:"আপনার ফোন:"; }

:lang(ru) .hotengine-form-feedback-youremail-title:after{ content:"Ваш e-mail:"; }
  :lang(en) .hotengine-form-feedback-youremail-title:after{ content:"Your e-mail:"; }
  :lang(uk) .hotengine-form-feedback-youremail-title:after{ content:"Ваш e-mail:"; }
  :lang(de) .hotengine-form-feedback-youremail-title:after{ content:"Ihre e-mail:"; }
  :lang(es) .hotengine-form-feedback-youremail-title:after{ content:"Su e-mail:"; }
  :lang(fr) .hotengine-form-feedback-youremail-title:after{ content:"Votre e-mail:"; }
  :lang(kk) .hotengine-form-feedback-youremail-title:after{ content:"Сіздің e-mail:"; }
  :lang(be) .hotengine-form-feedback-youremail-title:after{ content:"Ваш e-mail:"; }
  :lang(ro) .hotengine-form-feedback-youremail-title:after{ content:"Adresa de e-mail:"; }
  :lang(tr) .hotengine-form-feedback-youremail-title:after{ content:"E-mail:"; }
  :lang(it) .hotengine-form-feedback-youremail-title:after{ content:"Il tuo indirizzo e-mail:"; }
  :lang(sk) .hotengine-form-feedback-youremail-title:after{ content:"E-mail:"; }
  :lang(da) .hotengine-form-feedback-youremail-title:after{ content:"Din e-mail:"; }
  :lang(pl) .hotengine-form-feedback-youremail-title:after{ content:"Twój e-mail:"; }
  :lang(zh) .hotengine-form-feedback-youremail-title:after{ content:"你的电子邮件:"; }
  :lang(hi) .hotengine-form-feedback-youremail-title:after{ content:"अपने ई-मेल:"; }
  :lang(ar) .hotengine-form-feedback-youremail-title:after{ content:"البريد الإلكتروني:"; }
  :lang(pt) .hotengine-form-feedback-youremail-title:after{ content:"Seu e-mail:"; }
  :lang(bn) .hotengine-form-feedback-youremail-title:after{ content:"আপনার ই-মেইল:"; }
:lang(ru) .hotengine-form-feedback-youraddress-title:after{ content:"Ваш адрес:"; }
  :lang(en) .hotengine-form-feedback-youraddress-title:after{ content:"Your address:"; }
  :lang(uk) .hotengine-form-feedback-youraddress-title:after{ content:"Ваша адреса:"; }
  :lang(de) .hotengine-form-feedback-youraddress-title:after{ content:"Ihre Adresse:"; }
  :lang(es) .hotengine-form-feedback-youraddress-title:after{ content:"Su dirección:"; }
  :lang(fr) .hotengine-form-feedback-youraddress-title:after{ content:"Votre adresse:"; }
  :lang(kk) .hotengine-form-feedback-youraddress-title:after{ content:"Сіздің мекен-жайы:"; }
  :lang(be) .hotengine-form-feedback-youraddress-title:after{ content:"Ваш адрас:"; }
  :lang(ro) .hotengine-form-feedback-youraddress-title:after{ content:"Adresa:"; }
  :lang(tr) .hotengine-form-feedback-youraddress-title:after{ content:"Adresi:"; }
  :lang(it) .hotengine-form-feedback-youraddress-title:after{ content:"Indirizzo:"; }
  :lang(sk) .hotengine-form-feedback-youraddress-title:after{ content:"Adresa:"; }
  :lang(da) .hotengine-form-feedback-youraddress-title:after{ content:"Din adresse:"; }
  :lang(pl) .hotengine-form-feedback-youraddress-title:after{ content:"Adres:"; }
  :lang(zh) .hotengine-form-feedback-youraddress-title:after{ content:"你的地址："; }
  :lang(hi) .hotengine-form-feedback-youraddress-title:after{ content:"आपके पते की:"; }
  :lang(ar) .hotengine-form-feedback-youraddress-title:after{ content:"العنوان الخاص بك:"; }
  :lang(pt) .hotengine-form-feedback-youraddress-title:after{ content:"O seu endereço:"; }
  :lang(bn) .hotengine-form-feedback-youraddress-title:after{ content:"আপনার ঠিকানা:"; }

/*FORM TEXT TITTLES*/

Увага! На сайті передбачена можливість створювати власні форми в автоматичному режимі, а також використовувати спливаючі вікна для відправки необхідних від відвідувача даних. Для цього скористайтеся Конструктор форм.

Коментарі / Відгуки

💬

Коментарі та Відгуки

Social & Feedback Module

Система дозволяє залишати коментарі на всіх типах сторінок. Підтримуються гнучкі налаштування прив'язки до розділів, система оцінок (рейтинг) та захист Captcha. Для товарів передбачена спеціалізована форма — Відгуки.

✔ Оцінки

Можливість включення зіркового рейтингу для наочного зворотного зв'язку.

🔒 Захист

Вбудована перевірка через захисне зображення для запобігання спаму.

Ajax завантаження коментарів

Ajax завантаження коментарів.

<span class="ajax_load_comments" data-nc="0" data-on-page="20" data-page-id="12" data-scpt="page" data-content-block=".contenth_comments_ajax">ЗАВАНТАЖИТИ КОМЕНТАРІ</span>

if (contentBlock) {
                contentBlock.insertAdjacentHTML("beforeend", `<div class="loading" align="center"><span class="loading-spin"></span></div>`);
                const loader = contentBlock.querySelector(`.loading`);
                
                loader.style.transition = "opacity 0.4s";
                loader.style.opacity = "0";
                setTimeout(() => { loader.style.opacity = "1"; }, 10);

fetch(`/ajax.php?hotengine_comments_hotengine_page_id=${pageId}&hotengine_comments_page_type=${pagetype}&nc=${nc}&snc_on_page=${sncOnPage}`, {
                    method: "GET",
                    credentials: "same-origin",
                    headers: {
                        "X-Requested-With": "XMLHttpRequest"
                    },
                    signal: (() => {
                        const c = new AbortController();
                        setTimeout(() => c.abort(), 20000);
                        return c.signal;
                    })()
                })
                .then(response => response.text())
                .then(data => {
                    loader.style.opacity = "0";
                    setTimeout(() => {
                        loader.remove();
                        contentBlock.innerHTML = data;
                        contentBlock.querySelector(`.hotengine-comments-replay-send`)?.remove();
                    }, 300);
                })
                .catch(error => {
                    if (error.name === "AbortError") {
                        alert("Request timeout. Please try again.");
                    } else {
                        alert(`Error executing Ajax request #ajaxloadcomments490. \n\nError result: ${error}`);
                    }
                    loader?.remove();
                });
            }
            e.preventDefault();
            return false;
        }
    });
});
</script>

<div class="contenth_comments_ajax">Коментарі</div>

Елемент з класом "ajax_load_comments" відкриватиме Ajax контент всередині блоку, заданого в атрибуті data-content-block.
ID сторінки, що завантажується, задано в параметрі data-page-id. Додатково можна відфільтрувати коментарі за рейтингом, передавши змінну starrating_quality, наприклад starrating_quality=5.

Для коментарів використовуються 4 параметри:

hotengine_comments_hotengine_page_id — ID сторінки.
nc — номер сторінки коментарів.
snc_on_page — кількість коментарів на сторінці (від 1 до 50).
hotengine_comments_page_type — тип сторінки.

Типи доступних сторінок (обов'язковий параметр):

page — сторінки
shop_category — категорії магазину
shop_collection — колекції магазину
shop_producer — виробники
blog_category — категорія каталогу статей
blog_page — стаття

Ви можете використовувати власні скрипти, передаючи GET або POST параметри hotengine_comments_hotengine_page_id та hotengine_comments_page_type, за адресою /ajax.php. nc — номер сторінки, snc_on_page — кількість коментарів на сторінці.

Для отримання даних у JSON форматі, достатньо додати GET/POST змінну json.

Ajax завантаження відгуків до товарів

Ajax завантаження відгуків до товарів.

<a class="ajax_load_shop_comments" data-nc="0" data-on-page="20" href="https://boostore.pro/ua/blog/news_ua/pers_shop/store_ru/21956.htm" data-content-block=".contenth_shop_comments_ajax">ЗАВАНТАЖИТИ ВІДГУКИ</a>

loader.style.transition = "opacity 0.4s";
                loader.style.opacity = "0";
                setTimeout(() => { loader.style.opacity = "1"; }, 10);

fetch(`/ajax.php?hotengine_shop_comments_shop_cat_page_id=${productId}&nc=${nc}&snc_on_page=${sncOnPage}`, {
                    method: "GET",
                    credentials: "same-origin",
                    headers: {
                        "X-Requested-With": "XMLHttpRequest"
                    },
                    signal: (() => {
                        const c = new AbortController();
                        setTimeout(() => c.abort(), 20000);
                        return c.signal;
                    })()
                })
                .then(response => response.text())
                .then(data => {
                    loader.style.opacity = "0";
                    setTimeout(() => {
                        loader.remove();
                        contentBlock.innerHTML = data;
                        contentBlock.querySelector(`.hotengine-shop-comments-replay-send`)?.remove();
                    }, 300);
                })
                .catch(error => {
                    if (error.name === "AbortError") {
                        alert("Request timeout. Please try again.");
                    } else {
                        alert(`Error executing Ajax request #ajaxloadcomments490. ajax.php Please try again. \n\nError result: ${error}`);
                    }
                    loader?.remove();
                });
            }
            e.preventDefault();
            return false;
        }
    });
});
</script>

<div class="contenth_shop_comments_ajax">ВІДГУКИ</div>

Посилання з класом ajax_load_shop_comments відкриватиме Ajax контент всередині блоку, заданого в атрибуті data-content-block.
Шлях до сторінки, що завантажується, задано в параметрі href.

Для відгуків використовуються три параметри:
hotengine_shop_comments_shop_cat_page_id — ID товару.
nc — номер сторінки коментарів.
snc_on_page — кількість коментарів на сторінці (від 1 до 50).
Шлях до сторінки може бути відносним або повним, з http. Шлях має бути або шляхом до товару, або можна одразу вказати ID товару, відгуки до якого необхідно завантажити.
Ви також можете використовувати власні скрипти, передаючи GET або POST параметр hotengine_shop_comments_shop_cat_page_id, з повною адресою
товару (або ID товару), за адресою /ajax.php. nc — номер сторінки, snc_on_page — кількість коментарів на сторінці. Додатково можна відфільтрувати коментарі за рейтингом, передавши змінну starrating_quality, наприклад starrating_quality=5.

Крім того, можливе використання прямих запитів без використання Ajax.
Наприклад, для завантаження даних в iframe. Шлях такий же як і при використанні Ajax.
Скрипти додавання товару в кошик потрібно підвантажувати додатково, якщо ви використовуєте iframe.

Скрипт завантаження даних у спливаючому вікні:
Скрипт спливаючого вікна із завантаженням Ajax контенту
Для отримання даних у json форматі, достатньо додати GET/POST змінну json.

Налаштувати коментарі можна для кожного розділу індивідуально або в загальних налаштуваннях сайту. Налаштування доступне для категорій магазину, виробників, колекцій, а також для сторінок, карток товарів або статей.

Multilanding / Динамічні сторінки

🎯

Multilanding / Динамічні сторінки

Dynamic Content Module

Multilanding — це технологія автоматичної зміни контенту сторінки залежно від ключового запиту відвідувача, встановлених у рекламі змінних (UTM) або його місцезнаходження.

🔄 Гнучка підміна

При збігу запиту система змінює вміст цілих блоків на сторінках, у товарах або елементах меню.

📊 Джерела даних

Використовуються пошукові фрази або GET-змінні, такі як utm_term у рекламних оголошеннях.

Як використовувати Multilanding?

Ви налаштовуєте правила підміни так, щоб при частковому або повному збігу ключового слова відвідувач бачив максимально релевантний контент. Наприклад, якщо в URL присутній utm_term=купить_ноутбук, заголовок і банер на сторінці можуть автоматично змінитися під цей запит.

Терміни зберігання даних:
• Інформація про звичайне джерело переходу зберігається 24 години.
• Дані про переходи за партнерською програмою зберігаються протягом 120 днів.

Індивідуальні налаштування Multilanding дозволяють значно підвищити конверсію рекламного трафіку за рахунок точної відповідності очікуванням користувача.

Приклад роботи з Блоком/Меню

📑

Робота з Блоками та Меню

Layout & Meta Module

Інструмент Блоки/Меню дозволяє гнучко керувати структурою сайту, від підтвердження прав власності в пошукових системах до створення унікальних елементів дизайну.

✔ Верифікація

Додавання тегів <meta> для Google Search Console, Яндекс.Вебмайстер та інших сервісів.

⚙ Кастомізація

Створення власних Header (шапка) та Footer (підвал) сайту з використанням будь-якого HTML-коду.

Приклад підтвердження сайту:

Створіть новий Блок/Меню в панелі управління.
Вставте наданий сервісом <meta> код у поле вмісту.
В налаштуваннях відображення виберіть розташування в службових тегах (head).

Автоматична оптимізація: Ви можете вставляти JavaScript та CSS прямо в блоки. Система інтелектуально обробить їх і перетворить на окремі файли для прискорення завантаження сторінок.

Приклад спільного використання категорій та виробників (додаткових категорій)

📦

Категорії та Виробники

Store Structure Module

Для кожного товару можна задати основну Рубрику (персональну категорію) та Виробника (додаткову категорію). Це дозволяє одному товару перебувати одночасно в різних списках: наприклад, телефон Samsung буде доступний і в розділі «Смартфони», і в розділі «Samsung».

💡 Гнучкість назв

Рубрику «Виробник» можна перейменувати на будь-яке зручне для вас слово.

📌 Рекомендація

Першу батьківську рубрику рекомендується називати «Магазин» (Store).

Створення основної категорії:

1. Відкрийте редактор категорій магазину.
2. Натисніть «Додати категорію», виберіть сайт і підтвердьте.
3. Введіть системне ім'я (URL). Наприклад, для групи «Магазин» вкажіть store.

Управління розділом Виробники (додаткові категорії) відбувається аналогічним чином.

Фільтрація через URL:
Щоб показати товари конкретної рубрики та конкретного виробника, додайте GET-змінну producer (ID або ім'я).
Приклад: /pers_shop/water/?producer=bonaqua — відобразить товари з категорії «water» тільки бренду «bonaqua».

➠ Основні блоки та їх розташування

Віджети

🧱

Віджети та ShortCodes

Interactive UI Module

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

Налаштування віджета відбувається в спеціальному інтерактивному блоці управління. Ви можете детально сконфігурувати зовнішній вигляд і поведінку елемента перед тим, як отримати готовий код для вставки.

✨ Динаміка

Контент у віджетах оновлюється автоматично при зміні даних в базі (нові товари, статті).

📋 Універсальність

Один і той же ShortCode можна використовувати в різних частинах сайту, зберігаючи єдність стилю.

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

📁 Категорії магазину

Генерація списку або сітки ваших категорій.

📦 Товари магазину

Слайдери або сітки товарів з фільтрами.

🏭 Виробники

Виведення логотипів та назв брендів.

📝 Статті та новини

Віджет для виведення останніх публікацій.

Як це працює: Перейдіть у потрібний генератор, налаштуйте зовнішній вигляд і скопіюйте отриманий код типу [MENU:...]. Вставте його в будь-яке місце на сайті, де має з'явитися блок.

← Назад

Короткий огляд можливостей | | Рекомендації з просування | Скрипти для використання на сайтах