Скрипти платформи

Скрипти для платформи SaaS BooStore.pro CMS

Інструкція з використання скриптів

Ви можете скопіювати шлях до файлу скрипту або його код і вставити в блок/меню на вашому сайті. Рекомендується розміщувати всі скрипти в один блок/меню. Такий блок/меню можна розмістити в розділі: «Службові теги перед тегом Body (Header Meta)», «Шапка сайту (Header)» або «Низ сайту (Footer)».

При додаванні скриптів безпосередньо через код (не через шлях до файлу) оптимальний спосіб — використовувати інструмент «Блоки / Меню». Встановіть галочку «JavaScript / CSS style» та виберіть режим «JavaScript». Можна вибрати режим «JavaScript – defer/async» для відкладеного завантаження, що додатково покращує показники оптимізації сайту.

Цей спосіб гарантує, що при оновленні функцій платформи та зміні назв параметрів або класів елементів на сайті вони автоматично оновляться. Ваш код при цьому коректно перетвориться в JS-файл. Оскільки блок/меню одразу створює JS-файл, обов'язково видаліть обгортку «<script> </script>».
Для додавання CSS рекомендується використовувати «Редактор дизайну» — вкладку «CSS стилі». Він автоматично оптимізує код, видаляє зайві пробіли та порожні рядки.


Приклад використаних скриптів і функцій
Цей список корисний для розробників. Ви зможете змінити вбудовані скрипти та уточнити вбудовані callback-функції.

🛍️ SHOP & PRODUCT SCRIPTS

💬 POPUPS & DIALOGS

  • hotengine-script-mircomodal.js - системний скрипт спливаючих вікон
  • hotengine-script-popup.js - скрипт спливаючих вікон при натисканні на .hotengine-script-popup
  • hotengine-script-forms-popup.js - Скрипт спливаючого вікна з формою для відправки різних даних. Завантаження та відправка форми при натисканні на елемент з класом «.hotengine-form-constructor». Використовується для форм, створених у розділі Мої форми (Зворотній звʼязок, Зворотній дзвінок, Швидке замовлення та інші).
  • hotengine-script-dialog-email.js - Спливаюче вікно для відправки e-mail (вбудована форма зворотного звʼязку). Завантаження та відправка форми при натисканні на елемент з класом «.hotengine-dialog-email». Аналогічна форма є на функціональній сторінці /ru/feedback.html
  • hotengine-script-dialog-rating.js - вікно з відгуками про сайт
  • hotengine-script-dialog-stock-inform.js - вікно "Повідомити про наявність"
  • hotengine-script-callback_hotengine_authorize_result.js - результат авторизації

🛒 CART & ORDER

📂 MENUS & NAVIGATION

⚙️ SYSTEM & INTERFACE

📰 BLOG

📅 BOOKING


🎨 Набір стандартних CSS-стилів.


Стилі, що завантажуються за замовчуванням. Ці стилі використовуються в базовій версії сайту, а поверх них застосовуються шаблони. CSS-файли містять стандартні стилі для кнопок, сторінок, пунктів меню та інших елементів.
Текстові повідомлення для авторизації: успішна авторизація, активація, помилки.


Спливаюче вікно

Інструкції, приклад, а також автоматична генерація спливаючих вікон доступні за цим посиланням: Генератор спливаючих вікон

[Пример кнопки - всплывающее окно с видео]

Спливаюче вікно з формою

Інструкції, приклад, а також автоматична генерація спливаючих вікон з формою доступні за цим посиланням: Генератор спливаючих вікон з формою

Заміна тексту про вибір різновидності

Повідомлення про необхідність вибрати різновид товару реалізовано в діалоговому вікні за допомогою CSS елемента. Замінити написи ви можете в CSS стилях:
Code: CSS
:lang(ru) .hotengine-shop_cart_add_error_wrong_variety:after{ content:"Вы не выбрали разновидность товара."; }
:lang(en) .hotengine-shop_cart_add_error_wrong_variety:after{ content:"You did not select a complete set of goods."; }
:lang(uk) .hotengine-shop_cart_add_error_wrong_variety:after{ content:"Вы не обрали різновид товару."; }
:lang(pl) .hotengine-shop_cart_add_error_wrong_variety:after{ content:"Nie wybrałeś typu produktu."; }


Для того, щоб замінити повідомлення про не вибрану різновидність, у картці товару необхідно додати код функції callback_hotengine_variety_require (якщо не вибрана різновидність, перед викликом діалогового вікна повідомлення). Функція запускається у випадку, коли не вибрана різновидність.

У картці товару вкажіть текст «Заголовок різновидності». Залежно від тексту змінюється значення для класу «.hotengine-shop-product-variety-title». Наприклад, у випадку, якщо вказано текст «Виберіть вагу:», то клас заголовка буде «.hotengine-shop-product-variety-title_24». Перевірити клас при зміні значень ви можете переглянувши вихідний код сторінки, після вказання заголовка різновидності.

Код заміни тексту:
Code: html
<script> 
function callback_hotengine_variety_require(){

  let htmlLang = document.documentElement.getAttribute(`lang`) || `en`;
  const languageMap = { `uk`: `ua` };
  htmlLang = languageMap[htmlLang] || htmlLang;

  const messages = {
    weight: {
      ru: `Вы не выбрали вес!`,
      ua: `Ви не обрали вагу!`,
      pl: `Nie wybrano wagi!`,
      en: `You did not select weight!`
    },
    quantity: {
      ru: `Вы не выбрали количество!`,
      ua: `Ви не обрали кількість!`,
      pl: `Nie wybrano ilości!`,
      en: `You did not select quantity!`
    },
    color: {
      ru: `Вы не выбрали цвет!`,
      ua: `Ви не обрали колір!`,
      pl: `Nie wybrano koloru!`,
      en: `You did not select color!`
    },
    variety: {
      ru: `Вы не выбрали разновидность!`,
      ua: `Ви не обрали різновид!`,
      pl: `Nie wybrano odmiany!`,
      en: `You did not select variety!`
    }
  };

  let text;
  if(document.querySelector(`.hotengine-shop-product-variety-title_24`)){
    text = messages.weight[htmlLang] || messages.weight.en;
  } else if(document.querySelector(`.hotengine-shop-product-variety-title_38`)){
    text = messages.quantity[htmlLang] || messages.quantity.en;
  } else if(document.querySelector(`.hotengine-shop-product-variety-title_26`)){
    text = messages.color[htmlLang] || messages.color.en;
  } else {
    text = messages.variety[htmlLang] || messages.variety.en;
  }

  const errorDiv = document.createElement(`div`);
  errorDiv.id = `hotengine-shop_cart_add_error_wrong_variety`;
  errorDiv.innerHTML = `
    <b align="center" style="display:block;">${text}</b>
    <a class="hotengine-shop_cart_add_error_wrong_variety-btn-close" data-micromodal-close onclick="return false;"></a>
  `;
  document.body.appendChild(errorDiv);

  hotengine_micromodal({
    id: `hotengine-shop-cart-add-error-wrong-variety`,
    content: document.querySelector(`#hotengine-shop_cart_add_error_wrong_variety-data`).innerHTML,
    defaultWidth: window.innerWidth > 410 ? `410px` : `90%`,
    defaultHeight: ``,
    minWidth: `290px`,
    onCloseRemove: false,
    unsetContentHeight: true,
    onCloseEvent: (id) => {
                setTimeout(() => {
                   const m = document.getElementById(id);
                   if (m && m.getAttribute("aria-hidden") === "true") m.remove();
                }, 500);
                }
  });

  return false;
}

  </script>

Спливаюче вікно буде містити вказаний текст у змінній $text.

Аналогічна функція при перегляді списку товарів, callback_hotengine_variety_require_list($href), доповнена посиланням на картку товару, і відповідно може бути використана в діалоговому вікні.

Повідомлення після авторизації або активації акаунта

Для того, щоб створити спливаюче вікно з повідомленням про статус авторизації або активації, необхідно створити функцію callback_hotengine_authorize_result


callback_hotengine_authorize_result($result) - функція після авторизації користувача ($result - результат виконання: 1-успішно, 2-помилка логіна або пароля, 3-акаунт заблоковано, 4-необхідна активація, 5-Активація пройшла успішно, 6-Невірний код Captcha)

Приклад стандартної функції, яка буде викликана при відсутності вашої власної функції:
/templates/scripts/hotengine-script-callback_hotengine_authorize_result.js

Текстові повідомлення, що завантажуються за допомогою CSS стилів:
/templates/styles/css_hotengine_script_callback_hotengine_authorize_result.css

Завантаження списку товарів з функціями «Віджета з товарами» за допомогою JavaScript


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


Приклад створення базового оточення для показу списку товарів

При використанні цього оточення для відображення списку товарів можна підключати скрипти, які дозволяють гортати товари вперед і назад, змінювати стиль показу та додавати додаткові ефекти — такі як Scroll, Swipe та інші.

Code: JavaScript

<!-- Контейнер для списка товаров -->
<div id="someID">
  <div class="hotengine-shop-products-list-div" 
       data-hotengine-shop-products-list-param=":shop_products_slider:start-0:on_page-20:description:button-cart:auto_width:swipe:scroll-9999x8x0:id-someID" 
       data-product_limits="20" data-swipe="1" data-scroll-width="9999" 
       data-scroll-product-add="8" data-scroll-max-products="0">
    <span class="hotengine-shop-products-list-div-button-left hotengine-shop-products-list-div-button" data-product_limits_start_n="0"></span>
    <div class="hotengine-shop-products-list-content"></div>
    <span class="hotengine-shop-products-list-div-button-right hotengine-shop-products-list-div-button" data-product_limits_start_n="0"></span>
  </div>
</div>

<script>
let $param = `:shop_products_slider:start-0:on_page-20:description:button-cart:auto_width:swipe:scroll-9999x8x0:id-someID`;
let $onpage = 20;

let $container = $("#someID .hotengine-shop-products-list-content");

fetch(`/ajax_get_list_shop.php?n=0&onpage=${$onpage}${(window.location.search.includes("cacheclear") ? "&cacheclear" : "")}&param=${encodeURIComponent($param)}`, {
    method: "GET",
    credentials: "same-origin",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        "X-Requested-With": "XMLHttpRequest"
    },
    signal: (() => { const c = new AbortController(); setTimeout(() => c.abort(), 20000); return c.signal; })()
})
.then(response => response.text())
.then(data => {
    $container.html(data);
    // После загрузки выполняем callback функции для инициализации кнопок, слайдера, спиннера и прокрутки
    if(typeof(callback_hotengine_shop_products_list_div_button) === "function"){ callback_hotengine_shop_products_list_div_button(); }
    if(typeof(callback_hotengine_ajax_load_products_list) === "function"){ callback_hotengine_ajax_load_products_list(); }

    
if (document.querySelectorAll(".hotengine-shop-products-list-div[data-append-replace]").length) {
    if (typeof window.$hotengine_shop_product_base_append_replace === "undefined") {
        const s = document.createElement("script");
        s.async = true;        s.src = "/templates/scripts/hotengine-script-shop-products-list-append-replace.js?v60";
        s.onerror = (e) => { console.error(`Failed to load script: ${s.src}`, e); };
        document.head.appendChild(s);
    } else if (typeof window.ProductWidgetAppendReplaceMode === "function") {
        window.ProductWidgetAppendReplaceMode();
    }
}

if (document.querySelectorAll(".hotengine-shop-products-list-div .hotengine-shop-products-list-auto_width").length) {
    if (typeof window.$hotengine_shop_product_base_slider_auto_width === "undefined") {
        const s = document.createElement("script");
        s.async = true;
        s.src = "/templates/scripts/hotengine-script-shop-products-list-base-slider-autowidth.js?v60";
        s.onerror = (e) => { console.error(`Failed to load script: ${s.src}`, e); };
        document.head.appendChild(s);
    } else if (typeof window.ProductWidgetAutoWidthMode === "function") {
        window.ProductWidgetAutoWidthMode();
    }
}

    

if (document.querySelectorAll(".hotengine-shop-products-add-count-spinner").length){
    if (typeof $hotengine_shop_product_count_spinner === "undefined"){
        const s = document.createElement("script");
        s.async = true;
        s.src = "/templates/scripts/hotengine-script-shop-product-count-spinner.js?v60";
        s.onload = () => {
            if(typeof window.callback_hotengine_add_count_spinner === "function"){
                window.callback_hotengine_add_count_spinner();
            }
        };
        document.head.appendChild(s);
    } else if (typeof window.callback_hotengine_add_count_spinner === "function"){
        window.callback_hotengine_add_count_spinner();
    }
}



if (document.querySelectorAll(`.hotengine-shop-products-list-div[data-swipe="1"]`).length) {
    if (typeof window.$hotengine_shop_product_base_slider_touch === "undefined") {
        const s = document.createElement("script");
        s.async = true;
        s.src = "/templates/scripts/hotengine-script-shop-products-list-base-slider-swipe.js?v60";
        s.onerror = (e) => { console.error(`Failed to load script: ${s.src}`, e); };
        document.head.appendChild(s);
    }
}


    if (document.querySelectorAll(".hotengine-shop-products-list-div[data-scroll-width]").length) {
    if (typeof window.$hotengine_shop_product_base_slider_scroll === "undefined") {
        const s = document.createElement("script");
        s.async = true;
        s.src = "/templates/scripts/hotengine-script-shop-products-list-base-slider-scroll.js?v60";
        s.onerror = (e) => { console.error(`Failed to load script: ${s.src}`, e); };
        document.head.appendChild(s);
    }
}

})
.catch(() => {});
</script>
    

Функции прокрутки и визуальных эффектов реализованы с помощью JavaScript-скрипта — hotengine-script-shop-products-list-base-slider.js.





Стилізація кнопок перемотування та «Показати ще»

Як працюють кнопки?
Блок товарів може працювати у двох режимах:

  • Scroll-режим — з боків відображаються дві круглі кнопки «‹» і «›» для горизонтального прокручування товарів.
  • Append-режим (:append) — ліва кнопка приховується, а права перетворюється на кнопку «Показати ще» під списком товарів.

Що відбувається після натискання?
При кліку JS-скрипт підвантажує через AJAX наступну порцію товарів (число задається в onpage) і додає їх у кінець списку. Коли всі товари закінчилися — кнопка автоматично приховується. Вам потрібно лише оформити її зовнішній вигляд.

Стилі за замовчуванням знаходяться в системному файлі css_hotengine_require_system.css (/*SHOP PRODICT LIST MENU AJAX*/):

  • Кнопки «‹»/«›» — абсолютне позиціонування, розмір 32×32px, сіре коло при наведенні.
  • Кнопка «Показати ще» — блочна під товарами, символ трьокрапки «…» через ::after.

Як створити власний стиль?
Достатньо перевизначити CSS-класи кнопок у Редакторі дизайну. Основний клас для append-режиму — .hotengine-shop-products-list-div-append .hotengine-shop-products-list-div-button-right. Готовий приклад кастомного стилю ви знайдете у файлі:
/templates/templates_base_styles/products/load-products-list-div-append.css




Код завантаження списку товарів + застосування параметрів Віджета (стилізація та доп. функції):


/templates/scripts/hotengine-scripts-additional/hotengine-shop-products-list-generated.js


Скрипт формує простір для відображення списку товарів з можливістю активації функцій віджета товарів: прокручування товарів, ефекти та стилізація. У даному скрипті передбачено безліч налаштовуваних параметрів — ви можете змінити список товарів, категорію, спосіб відображення та інші налаштування. Всі параметри задаються аналогічно параметрам для «Віджета з товарами», тому при необхідності можна самостійно розширити їх перелік.

Як встановити скрипт?


Ви можете або повністю скопіювати скрипт і змінити в ньому параметри (вони вказані в коментарях з інструкціями, а також на сторінці «Віджет з товарами»). Або (рекомендується) вказати параметри окремо, і завантажити файл через Load Script:
Code: JavaScript
<script>
(function(){
// ============================
// CONFIGURATION (edit values)
// ============================
// This file defines all the parameters that will be
// used when generating the product block.
// This file is loaded BEFORE the main script
// hotengine-shop-products-list-generated.js
// via load Script to pass variables.
// =============================

// targetInsertSelector: selector (id/class/tag) AFTER which the product block will be inserted.
// Example: "#product-details" or ".product-page .right-col" or "body" (appends at end).
window.targetInsertSelector = "#hotengine-header";

// insertMode: "after" = insert after element (default), "replace" = replace element
window.insertMode = "after";

// targetBlockId: ID or Class for the generated product block container.
// Example: "#hotengine-shop-products-list-generated"
window.targetBlockId = "hotengine-shop-products-list-generated";

// shop_cat_page_id: ID of the current product to SKIP (exclude from results).
window.shop_cat_page_id = "";

// products_id: Optional. Comma-separated product IDs or SKUs to SHOW.
// Example: "482626,482624" or "" to omit.
window.products_id = "";

// site: Optional numeric site ID. Use if the script is used outside your main site.
// Leave 0 or "" to omit.
window.site = 0;

// favorite: 1 => add ":favorite-icon", 0 => do not add.
window.favorite = 0;

// variety: 1 => add ":variety", 0 => no.
window.variety = 0;

// variety_crop: integer >0 — only sent if >0 (trim variety names length).
window.variety_crop = 0;

// lazy_load: 0 = enabled (adds ":lazy-0"), 1 = disabled (no lazy param).
window.lazy_load = 0;

// cart_add_count: 0 none, 1 counter block, 2/4 spinner behavior.
window.cart_add_count = 2;

// compare_pos: position for "Add to compare" (real values from design).
// 1=icon block; 0=after cart; 4=before cart; 2=after title; 3=bottom
window.compare_pos = 1;

// favorite_pos: position for "Add to favorites" (same code meanings).
window.favorite_pos = 1;

// onpage: default number of products to request / display.
// Note: if auto_width === 1 it is recommended to set onpage = 1.
window.onpage = 3;

// stock: availability filter
// ""=all; 0=in stock; 1=in stock+preorder+check; 2=in stock; 3=preorder; 4=check avail
window.stock = 1;

// scroll: whole scroll parameter or empty string.
// Example: "scroll-9999x8x64x3,3" or "" to disable.
window.scroll_param = "scroll-9999x8x64x3,3";

// widget_style: 0 = append (default), 1 = list, 2 = swipe
window.widget_style = 2;

// auto_width: 1 = enable auto width (recommended onpage=1), 0 = disable
window.auto_width = 1;

// lang: optional language code (e.g. "ru","ua","en","pl"). If empty, :lang not added.
window.lang = "ru";

// pers_cat_id: optional personal category id (keeps original logic)
window.pers_cat_id = 0;

// not_in: comma-separated product IDs to EXCLUDE from results (optional, only if not empty)
window.not_in = "";


    const s = document.createElement(`script`);
    s.async = true;
    s.src = `/templates/scripts/hotengine-scripts-additional/hotengine-shop-products-list-generated.js`;
    s.onerror = (e) => { console.error(`Failed to load script: ${s.src}`, e); };
    document.head.appendChild(s);
})();

</script>


Рекомендується додавати цей скрипт через інструмент «Блоки / Меню», встановивши галочку «JavaScript / CSS style» і вибравши режим «JavaScript – defer». Такий спосіб гарантує, що при зміні назв параметрів або класів елементи будуть автоматично оновлені, а ваш код коректно перетвориться в JS-файл. Такий блок меню одразу створює JS файл, тому обов'язково видаліть обгортку <script> </script>

Показати супутні товари в кошику (З товаром купують)

На основі скрипта Завантаження списку товарів з функціями «Віджета з товарами» за допомогою JavaScript можна виконати завантаження списку товарів, які будуть містити список «Супутні товари».
Примітка: Перед підключенням скриптів можна вказати налаштування:
  • window.auto_width = 1; — увімкнути автоширину.
  • window.onpage = 8; — кількість товарів при першому завантаженні.
  • window.widget_style = 2; — стиль завантаження віджета.
  • window.lang = "en"; — мова відображуваних товарів (інші будуть пропущені; можна вказати порожнє значення, щоб вимкнути фільтрацію за мовою).
Якщо параметри не задані, скрипт автоматично застосує значення за замовчуванням.
Повний перелік параметрів доступний в інструкціях до файлу hotengine-shop-products-list-generated.js вище.

При перегляді кошика:

При перегляді кошика створюється елемент мікророзмітки, який містить список «З товаром купують». Список таких товарів можна відобразити у спливаючому вікні або у вигляді блоку з товарами.
Розмістіть у тексті сторінки код відображення списку з товарами на сторінці «cart_send» - «Функціональна сторінка» - «Кошик.

Код додавання списку при перегляді кошика (під кнопкою «Продовжити покупки»):




Список відображатиметься лише за наявності супутніх товарів. Для стилізації блок оточений як стандартний блок/меню.

Приклад CSS стилю:
Code: CSS
.menu_bought_with_generated #menu_c .headm:before{ content:"З вибраними товарами купують:"; display:block; text-align:center; line-height:30px;}
.menu_bought_with_generated {margin-top:50px;} .menu_bought_with_generated #menu_c .headm b{display:none;}



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


Список таких товарів можна відобразити у спливаючому вікні.
Розмістіть у тексті сторінки код відображення списку з товарами на сторінці «cart_send» - «Функціональна сторінка» - «Кошик.


Вікно спливатиме лише у випадку, коли виявлено супутні товари.

.hotengine-bought_with-window-btn-close - вкажіть стиль для кнопки закриття вікна (відображається під списком товарів у вікні).

Приклад CSS стилю:
Code: CSS
.hotengine-bought_with-window-btn-close:before{ content:"Закрити";}
.hotengine-bought_with-window-btn-close {
  display:block;
  background:none;
  width:110px;
  line-height:38px;
  height: auto;
  padding: 0px 0px;
  white-space:nowrap;
  background: #4f86b1;
  cursor: pointer;
  transition-delay: 0;
  transition-duration: 0.2s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0, 0, 1, 1);
  border:none; box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
  text-shadow:1px 1px 1px rgba(1, 39, 106, 1);
  color: #fff!important;
  text-decoration: none;
  margin:-10px auto 0px auto;
  text-align: center;
}
.hotengine-bought_with-window-btn-close:hover { background:#24689E; opacity: 1;   }


Список «З товаром купують» додатково відображається і при перегляді картки товару. Якщо вам необхідно зробити спливаюче вікно або список товарів, що відображається лише в кошику, то використовуйте «Список товарів для розсилки». У такому випадку замініть «data-hotengine-marking-boughtwith» на «data-hotengine-marking-boughtwith-email»


Супутні товари - спливаюче вікно після додавання товару в кошик


На основі скрипта Завантаження списку товарів з функціями «Віджета з товарами» за допомогою JavaScript можна виконати завантаження списку товарів, які будуть містити список «Супутні товари».
Після додавання товарів у кошик, виконується callback функція «callback_hotengine_cart_plus_after_boughtwith», яка містить список «З товаром купують». Список таких товарів можна відобразити у спливаючому вікні або у вигляді блоку з товарами.
Функцію callback_hotengine_cart_plus_after_boughtwith можна замінити на callback_hotengine_cart_plus_after_boughtwith_email, для відображення такого ж списку але для email розсилки (E-mail розсилка інших товарів).

Вікно спливатиме лише у випадку, коли виявлено супутні товари.

.hotengine-bought_with-window-btn-close - вкажіть стиль для кнопки закриття вікна (відображається під списком товарів у вікні).
Створіть «Блок/меню», розмістіть його в «Footer» або в розділі «Службові теги», та налаштуйте відображення на всіх сторінках або лише на тих сторінках, де є товар з кнопкою «Додати в кошик».

Приклад CSS стилю:
Code: CSS
.hotengine-bought_with-window-btn-close:before{ content:"Закрити";}
.hotengine-bought_with-window-btn-close {
  display:block;
  background:none;
  width:110px;
  line-height:38px;
  height: auto;
  padding: 0px 0px;
  white-space:nowrap;
  background: #4f86b1;
  cursor: pointer;
  transition-delay: 0;
  transition-duration: 0.2s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0, 0, 1, 1);
  border:none; box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
  text-shadow:1px 1px 1px rgba(1, 39, 106, 1);
  color: #fff!important;
  text-decoration: none;
  margin:-10px auto 0px auto;
  text-align: center;
}
.hotengine-bought_with-window-btn-close:hover { background:#24689E; opacity: 1;   }


Функція після додавання товару в кошик. Сповіщення про розмір знижки покупця


Функція callback_hotengine_cart_plus_after викликається після додавання товару в кошик. У даному прикладі реалізовано сповіщення про розмір знижки покупця, якщо вона є. Дані беруться з мікророзмітки data-hotengine-cart-discount в кошику.

Code: html
<script>
window.callback_hotengine_cart_plus_after = function() {
    const stickCart = document.querySelector(`.hotengine-shop-cart-sticker-cart-cart`);
    if(stickCart){
        const yourDiscount = stickCart.getAttribute(`data-hotengine-cart-discount`);
        if(yourDiscount !== `` && yourDiscount !== null && yourDiscount !== undefined){
            const cartEl = document.querySelector(`#cart`);
            if(cartEl){
                const span = document.createElement(`span`);
                span.className = `hotengine-your_discount`;
                span.textContent = yourDiscount;
                cartEl.insertAdjacentElement(`afterend`, span);
            }
        }
    }
};


window.callback_hotengine_cart_plus_after();

  -->
  </script>

Для того, щоб сповіщення викликалося не лише після додавання товару в кошик, необхідно продублювати скрипт перевірки наявності мікророзмітки про знижку. Для прикладу це реалізовано за допомогою додаткового виклику функції callback_hotengine_cart_plus_after(); без додавання товару в кошик.

Приклад CSS стилю:
Code: CSS
.hotengine-your_discount  { 
    white-space: nowrap;
    position: absolute;
    margin-top: -32px;
    right: 47px;
    background: #f00;
    color: #fff;
    border-radius: 50px 50px 0px 50px;
    line-height: 30px;
    width: 50px;
    opacity: 0.9;
    text-align: center;
  }


Завантаження списку статей за допомогою Javascript


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


Code: html
<div class="blog-page-list-AJAXLOAD">
</div>
<script>
(function() {
  const blog_marking = document.querySelector(`.hotengine-marking[data-hotengine-marking-type="blog_catalog_page"]`);
  if (blog_marking) {
    const $site_id = "XXXX";
    const $blog_cat_id = blog_marking.getAttribute("data-hotengine-marking-blog_cat_page_catid");
    const $onpage = "4";
    const $param = `:blog_page_slider:cat_id-${$blog_cat_id}:site-${$site_id}:start-0:on_page-${$onpage}:description:append:id-hotengine-blog-page-list-AJAXLOAD`;
    
    const ajaxLoadContainer = document.querySelector(`.blog-page-list-AJAXLOAD`);
    if (ajaxLoadContainer) {
      ajaxLoadContainer.innerHTML = `
      `;
    }

    const container = document.querySelector(`#hotengine-blog-page-list-AJAXLOAD .hotengine-blog-page-list-content`);
    if (container) {
      container.innerHTML = `<div class="hotengine-blog-page-list-content-loading"><span class="loading-spin"></span></div>`;

    }

    fetch(`/ajax_get_list_blog.php?c=${$site_id}&n=0&onpage=${$onpage}&param=${$param}`, {
      method: "GET",
      credentials: "same-origin",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        "X-Requested-With": "XMLHttpRequest"
      },
      signal: (() => {
        let c = new AbortController();
        setTimeout(() => c.abort(), 20000);
        return c.signal;
      })()
    })
    .then(response => response.text())
    .then(data => {
      const loading = document.querySelector(`.hotengine-blog-page-list-content-loading`);
      if (loading) {
        loading.style.transition = "opacity 0.2s";
        loading.style.opacity = "0";
        setTimeout(() => {
          loading.remove();
          if (container) {
            container.innerHTML = data;
            
            const scripts = container.querySelectorAll("script");
            scripts.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);
            });

            const ajaxWrapper = document.getElementById(`hotengine-blog-page-list-AJAXLOAD`);
            const emptyBlock = ajaxWrapper?.querySelector(`.hotengine-blog-product-list-block-empty`);
            if (ajaxWrapper && container.innerHTML.trim() !== "" && !emptyBlock) {
              ajaxWrapper.style.display = "block";
            }
          }
        }, 200);
      }
    })
    .catch(() => {
      const loading = document.querySelector(`.hotengine-blog-page-list-content-loading`);
      if (loading) loading.style.display = "none";
    });
  }
})();
  </script>

Даний код завантажує статті, як за допомогою "Генератора блоку/меню, слайдер зі статтями". У даному скрипті завантаження відбувається із заміною батьківської категорії списку статей, який визначається за допомогою мікророзмітки.
XXXX - ID сайту.
$onpage - кількість статей на одній сторінці (слайді)
$blog_cat_id - категорія каталогу, яка в прикладі вказується за допомогою мікророзмітки з даної відкритої статті.
.blog-page-list-AJAXLOAD - Блок, в який завантажуються статті.


Завантаження статті за допомогою Javascript у JSON форматі

Скрипт завантаження статті у JSON форматі

Дані статті доступні за запитом /ajax.php?json&blog_cat_p=XX

  • XX - ID статті

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


Code: JavaScript
<script>
(function() {
    const decodeHtml = (str) => {
        const map = {
            "&amp;": "&",
            "&lt;": "<",
            "&gt;": ">",
            "&quot;": "\"",
            "&#039;": "'"
        };
        return str.replace(/&amp;|&lt;|&gt;|&quot;|&#039;/g, (m) => map[m]);
    };

    const initBlogFetch = () => {
        fetch(`/ajax.php?json&blog_cat_p=14673`, {
            method: `GET`,
            credentials: `same-origin`,
            headers: {
                "X-Requested-With": "XMLHttpRequest"
            }
        })
        .then(response => response.json())
        .then(blog => {
            if (blog && Object.keys(blog).length > 0) {
                if (blog.blog_cat_page_title_inpage) console.log(decodeHtml(blog.blog_cat_page_title_inpage));
                if (blog.blog_cat_page_description) console.log(decodeHtml(blog.blog_cat_page_description));
                if (blog.blog_cat_page_text) console.log(decodeHtml(blog.blog_cat_page_text));
                if (blog.blog_cat_page_datestamp) console.log(decodeHtml(blog.blog_cat_page_datestamp));
            }
        })
        .catch(error => {
            console.error(`Failed to fetch blog data:`, error);
        });
    };

    initBlogFetch();
})();
</script>


Стилізація пошукового фільтра (приховування списку значень при натисканні)

Якщо вам необхідно зробити приховування/розкриття значень пошукового фільтра, то ви можете використати скрипт із прикладу нижче. Скрипт записує ID блоку зі списком значень у Cookies та відображає/приховує його відповідно до вибраного користувачем варіанту.
Увага! Для використання пошукового фільтра, спочатку створіть «Тип продукту» та вкажіть значення для виду характеристики. Даний скрипт рекомендується використовувати для «Множинного значення».



hotengine-script-shop-product-types-filter-toggle.js

Створення власного сортування списку товарів


Якщо вам необхідно створити власну форму сортування товарів, то це можна зробити за допомогою передачі GET змінних. Нижче знайдете інструкцію зі збереження вибраного сортування в COOKIES, а також приклад реалізації сортування. Для швидкого створення сортування ви можете використати «Функціональне меню» - «Сортування товарів». У меню буде вставлено пошукову форму, а також базові поля для сортування.


Доступні наступні GET параметри для власного сортування:
«order_by»:
  • 0 - за id товару
  • 1 - за датою додавання товару
  • 2 - за ціною товару
  • 4 - за найменуванням товару
  • 5 - за пріоритетом товару

«sort_by»:
  • 0 - За спаданням (DESC)
  • 1 - За зростанням (ASC)

«sort_instock_priority»: (сортування за пріоритетом, товари в наявності вище ніж товари не в наявності)

  • 0 - не враховувати параметр
  • 1 - спочатку товари в наявності та під замовлення, потім ті, яких немає в наявності. Далі враховуються параметри сортування, вказані вище.
  • 2 - спочатку товари яких немає в наявності.

«price_from» - ціна від
«price_to» - ціна до
«producer» - виробник (id або найменування виробника)
«collection» - колекція (id або найменування колекції)
«search» - пошуковий запит
«smart_search» - дані пошукового запиту з пошукового фільтра

Крім того значення, які враховуються якщо вказано не порожнє значення (Наприклад «1»):
«shop_sale» - акційні,
«shop_new_goods» - новинки,
«shop_bestsellers» - хіти продажів,
«shop_discount» - знижка,
«shop_reduced_price» - Ціна знижена,
«order_by_param» - додатковий параметр з довільним значенням, для створення власного списку сортування за назвою або значенням.

При виявленні GET змінної «sort_by» в адресі відкритої сторінки, дані сортування будуть встановлені відповідно до цих значень. Якщо відкрита сторінка зі списком товарів, то значення будуть заповнені з посилання елемента «.hotengine-pagination-current». Крім того, при відкритті сторінки з сортуванням будуть створені COOKIE для запам'ятовування вибраних користувачем параметрів. Скрипт, що виконує цю функцію, який також встановлюється при створенні функціонального меню сортування, розташований за адресою /templates/scripts/hotengine-script-shop-products-list-sort-form.js.

Комбіноване сортування товарів (функціональне меню).


Комбінована версія сортування дозволяє об'єднувати кілька критеріїв, наприклад, сортування за ціною, новизною або акціями. Це зручно, якщо ви хочете одночасно враховувати кілька параметрів при відображенні товарів.
Приклад комбінованого меню сортування:

  • Сортування за ціною: можна вибрати зростання або спадання.
  • Додаткові параметри: новинки, акції, товари зі знижкою, знижені ціни, хіти продажів.
  • Прапорець «В наявності спочатку»: при активації спочатку будуть показані товари, які є в наявності.

Для використання даного сортування створіть Функціональне меню «Сортування товарів Combo» в розділі «Мої Блоки/Меню».

Розглянемо приклад створення сортування з власними значеннями.

Це можна зробити за допомогою додаткового параметра «order_by_param», при виборі якого будуть змінюватися значення полів «order_by», «sort_by» та інших.
Встановимо одне поле (#order_by_param) з вибором варіантів , а також залишимо кількість відображуваних товарів.


Створіть "Блок/Меню", розташування "вгорі".
Ім'я Блока/Меню: hotengine_sort_products
Заголовок Блока/Меню: hotengine_sort_products
Положення Блока/Меню: вгорі
Показувати Блок/Меню на сторінках: всюди
Введіть символи, при виявленні яких відображати Блок/Меню: (Без пробілів)
/pers_shop/ /producer/ /collection/ /shop/

Введіть символи, при виявленні яких не відображати Блок/Меню: (Без пробілів)
.htm
Текст меню:
Code: JavaScript
<form id="hotengine-sort-products-generated" name="hotengine-sort-products-generated" method="get" action="">
 <span>

<label for="order_by_param">
<select name="order_by_param" id="order_by_param">
<option value="none">Сортировать</option>
<option value="lowtohight">От дешевых к дорогим</option>
<option value="highttolow">От дорогих к дешевым</option>
<option value="new">Новинки</option>
<option value="sales">Акционные</option>
<option value="date">По Дате</option>
</select>
</label>

<div class="hidden">
<select name="shop_new_goods" id="shop_new_goods"><option value=""><option value="1"></select>
<select name="shop_sale" id="shop_sale"><option value=""><option value="1"></select>

 <label for="sort_by">
 <select name="sort_by" id="sort_by"> 
 <option value="ASC">Сортировать:</option>
 <option value="ASC">По возрастанию</option>
 <option value="DESC">По убыванию</option>
 </select>
 </label>
<label for="order_by">
 <select name="order_by" id="order_by"> 
 <option value="5">Сортировать:</option>
 <option value="0">По ID товара</option>
 <option value="4">По Наименованию</option>
 <option value="1">По Дате</option>
 <option value="2">По Цене</option>
 </select>
 </label>
</div>
<label for="NUM_ONPAGE">
 <select name="NUM_ONPAGE" id="NUM_ONPAGE" onchange="this.form.submit()"> 
 <option value="10">10</option>
 <option value="20">20</option>
 <option value="30">30</option>
 <option value="50">50</option> 
 </select>
 </label>
 <input class="smart_search" name="smart_search" type="hidden" value="">
 <input class="search" name="search" type="hidden" value="">
 </span>
 </form> 
 
 



 <script src="/templates/scripts/hotengine-script-shop-products-list-sort-form.js"></script>


CSS стиль для сортування (додати в редакторі дизайну в CSS стилі):
Code: CSS
.menu_position_top_000000 #menu_c .headm{ display:none; }
.menu_position_top_000000 #menu_c { border: none; background: none; text-align: right;}
.menu_position_top_000000 #menu_c select { 
 background: transparent; 
 padding: 5px 8px 5px 5px; 
 font-size: 12px;
 line-height: 1;
 border-radius: 2px;
 height: 24px;
 -webkit-appearance: none;
 overflow: hidden;
 background: url(/templates/styles/menu_arrow/arrow-down.svg) no-repeat 95%; background-size: 16px;

 }
 .menu_position_top_000000 #menu_c select[name="NUM_ONPAGE"] { background:none;}
 .menu_position_top_000000 #menu_c span:before{ content:"Сортувати:"; display:inline-block; padding: 5px; font-size: 12px; }
 
 @-moz-document url-prefix(){ 
 .menu_position_top_000000 #menu_c select {
  padding:0px!important;
  background:none!important;

 }

}

Де 000000 потрібно замінити на ID створеного меню з кодом сортування.



При зміні поля «order_by_param» будуть змінені значення сортування та виконано відправлення форми. У Формі додані поля сортування, в тому числі «Новинки» та «Акція». Поля приховані, оскільки візуально використовуватиметься лише окремий список «order_by_param» та кількість відображуваних товарів. Після відправлення форми значення будуть збережені в COOKIE.

Завантаження кошика при наведенні курсора


Якщо вам необхідно відображати вміст кошика при наведенні на іконку кошика, то ви можете увімкнути параметр «Короткий + Вміст при наведенні» в «Налаштуваннях», у вкладці «Магазин» - «Оформлення кошика». Або виконати GET звернення за адресою «/ajax.php?cart&load_cart_ajax»
JavaScript відображення вмісту кошика:

Code: JavaScript
<script src="/templates/scripts/hotengine-script-shop-cart-hover-block.js"></script>


CSS стиль:
Code: JavaScript
/*CART HOVER BLOCK*/
#hotengine-cart_menu-hover-block{position:absolute; z-index:99; background:#fff; color:#444; border:1px solid #C7C7C7; padding:20px; display:block; width:50%; display:none; text-align:left;}
#hotengine-cart_menu-hover-block:before{ content:""; height:15px; width:100%; display:block; position:absolute; top:-10px; left:0px; z-index:99999;  }
#hotengine-cart_menu:hover + #hotengine-cart_menu-hover-block{ display:block; }
#hotengine-cart_menu-hover-block:hover{display:block; }
#hotengine-cart_menu-hover-block .hotengine-cart_menu-hover-block-close:after {
    content: "x";
    background: rgb(255,255,255);
    background: radial-gradient(circle,rgba(255,255,255,0) 0%,rgba(182,182,182,1) 100%);
    oveflow: hidden;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    width: 15px;
    height: 15px;
    position: absolute;
    right: 5px;
    top: 5px;
    line-height: 14px;
    text-align: center;
    color: #656565;
    cursor: pointer;
    opacity: 0.8;
    font-size: 9px;
}
/*CART HOVER BLOCK*/

Скрипт відображає додатковий блок у разі виявлення товарів у кошику та наведенні курсора миші на «#hotengine-cart_menu» (кошик у блоці/меню сайту).




Дочірні зображення картки товару

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

Для кожної картки товару можна отримати список вкладених зображень у JSON форматі. Для цього необхідно виконати запит на сторінку «/ajax.php?get_shop_images=PATH», де PATH - шлях до будь-якого зображення товару або ID товару.

Завантаження списку зображень товару в спливаючій галереї Simple lightbox:

Для додавання іконки, при натисканні на яку буде спливати галерея Simple lightbox, з прокруткою всіх доступних у товарі зображень, додайте наступний скрипт у Блок/Меню:


CSS стиль іконки:
Code: JavaScript
/*CHILD IMAGES SHOW POPUP IN SHOP LIST*/
.hotengine-shop-product-img-load-list {
    background: url(/templates/styles/mobile/search.png) no-repeat center center;
    width: 18px;
    height: 18px;
    position: absolute;
    z-index: 5;
    background-size: contain;
    display:inline-block;
}
/*CHILD IMAGES SHOW POPUP IN SHOP LIST END*/

Відображати дочірні зображення в списку товарів з кнопками прокрутки списку із зображеннями:

Якщо вам необхідно відображати дочірні зображення в списку товарів, то увімкніть параметр «Вкладені зображення в списку товарів» в налаштуваннях магазину, у вкладці «Перегляд товару/Вкладки». Додайте наступний скрипт у Блок/Меню (встановивши JavaScript / CSS style -> Javascript - defer):
Code: JavaScript

  (function(){
  if(!window.matchMedia || !matchMedia("(hover: hover)").matches || !matchMedia("(pointer: fine)").matches){return;}
  var s = document.createElement("script");
  s.src = "/templates/scripts/hotengine-script-shop-products-list-images-child-slider.js";
  s.defer = true;
  document.head.appendChild(s);
  })();


CSS стиль:
Code: JavaScript
/*CHILD IMAGES SHOW IN SHOP LIST*/
.hotengine-shop-product-list-block .hotengine-imgchenge { position:absolute; z-index:2; padding:15px; font-size:20px; display:inline-block;  background: #858585;
    color: #fff;
    border-radius: 50%;
    height: auto;
    width: auto; line-height:20px; top: 50%; cursor:pointer; margin:-30px 5px 5px 5px; opacity:0;}
.hotengine-shop-product-list-block .hotengine-imgchenge::after{ 
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    font-size: 30px;
    line-height: 23px;
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.hotengine-shop-product-list-block .hotengine-imgchenge-left {left:0px;} 
.hotengine-shop-product-list-block .hotengine-imgchenge-left::after {
    content: "\2039";
}
.hotengine-shop-product-list-block .hotengine-imgchenge-right {right:0px;} 
.hotengine-shop-product-list-block .hotengine-imgchenge-right:after{content:"\203A";}
.hotengine-shop-product-list-block:hover .hotengine-imgchenge{ opacity:1; -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;}

.hotengine-shop-view-liststyle .hotengine-shop-product-list-block .hotengine-imgchenge-right{left: 30%;} 
/*CHILD IMAGES SHOW IN SHOP LIST END*/

Якщо товар містить дочірні зображення, то скрипт відображає кнопки для їх прокрутки, вперед і назад.

Відображати дочірні зображення в списку товарів: Заміна зображення при наведенні курсора:

Якщо вам необхідно відображати дочірнє зображення при наведенні курсора в списку товарів, то увімкніть параметр «Вкладені зображення в списку товарів» в налаштуваннях магазину, у вкладці «Перегляд товару/Вкладки». Додайте наступний скрипт у Блок/Меню (встановивши JavaScript / CSS style -> Javascript - defer):
Code: JavaScript

  (function(){
  if(!window.matchMedia || !matchMedia("(hover: hover)").matches || !matchMedia("(pointer: fine)").matches){return;}
  var s = document.createElement("script");
  s.src = "/templates/scripts/hotengine-script-shop-products-list-images-child-on-hover.js";
  s.defer = true;
  document.head.appendChild(s);
  })();


Скрипт випадного меню

Скрипт випадного меню (за замовчуванням)

За замовчуванням ви можете налаштувати спосіб відображення дочірніх пунктів Головного меню. Це можна зробити в «Редакторі дизайну», у вкладці «Головне меню», або при зміні пунктів головного меню в розділі «Мої Блоки/Меню».

При зміні параметрів, до елемента «id="hotengine-mainmenu"» будуть додаватися відповідні класи.

  • «.hotengine-mainmenu-dropdown-default» - випадні пункти за замовчуванням
  • «.hotengine-mainmenu-categories-popup» - спливаюче вікно з пунктами меню на всю ширину сторінки
  • «.hotengine-mainmenu-categories-column» – випадне вікно з пунктами меню на всю ширину сторінки
Для коректного використання скриптів до елементів списку, що містять підпункти, присвоєно клас «.hotengine-mainmenu-dropdown».
Вимкнувши дані скрипти в параметрах Головного меню або видаливши наведені вище класи, ви можете встановити власний код подій або CSS стилі при наведенні.

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

Випадне меню за замовчуванням
Code: JavaScript
<script>
(function(){
document.addEventListener("DOMContentLoaded", function(){
    if(
        document.querySelector(".hotengine-mainmenu-categories-column") &&
        document.querySelector("#hotengine-mainmenu .hotengine-mainmenu-dropdown")
    ){  
        if(typeof window.$hotengine_mainmenu_categories_popup_column === "undefined"){
            const s = document.createElement("script");
            s.async = true;
            s.src = `/templates/scripts/hotengine-script-mainmenu-categories-popup-column.js?v60`;
            s.onerror = (e) => { console.error(`Failed to load script: ${s.src}`, e); };
            document.head.appendChild(s);
        }
    }
});
})();
</script>

Спливаюче вікно
Code: JavaScript
<script>
(function(){
document.addEventListener("DOMContentLoaded", function(){
    if(
        document.querySelector(".hotengine-mainmenu-categories-popup") &&
        document.querySelector("#hotengine-mainmenu .hotengine-mainmenu-dropdown")
    ){
        if(typeof window.$hotengine_mainmenu_categories_popup === "undefined"){
            const s = document.createElement("script");
            s.async = true;
            s.src = `/templates/scripts/hotengine-script-mainmenu-categories-popup.js?v60`;
            s.onerror = (e) => { console.error(`Failed to load script: ${s.src}`, e); };
            document.head.appendChild(s);
        }
    }
 });
})();
</script>

Випадне вікно
Code: JavaScript
<script>
(function(){
document.addEventListener("DOMContentLoaded", function(){
    if(
        document.querySelector(".hotengine-mainmenu-categories-column") &&
        document.querySelector("#hotengine-mainmenu .hotengine-mainmenu-dropdown")
    ){  
        if(typeof window.$hotengine_mainmenu_categories_popup_column === "undefined"){
            const s = document.createElement("script");
            s.async = true;
            s.src = `/templates/scripts/hotengine-script-mainmenu-categories-popup-column.js?v60`;
            s.onerror = (e) => { console.error(`Failed to load script: ${s.src}`, e); };
            document.head.appendChild(s);
        }
    }
});
})();
</script>

Скрипт після завантаження Автоматичних описів

Скрипт додавання кнопки «Купити» після завантаження Автоматичних описів у картці товару

Якщо ви використовуєте автоматичні описи в скороченому вигляді, то після натискання «Читати далі» можна додати кнопку «Купити», а також ціну.
Після завантаження тексту буде виконана callback функція «callback_hotengine_shop_autodescription_readmore».

Code: JavaScript
<script>
window.callback_hotengine_shop_autodescription_readmore = function($id, $job){
    if($job === "load"){
        const clone = document.querySelector(".hotengine-shop-product-offerdetails .hotengine-shop-product-cart_icon")?.cloneNode(true);
        const priceblock = document.querySelector(".hotengine-shop-product-offerdetails .hotengine-shop-product-price_box")?.cloneNode(true);

        const target = document.querySelector(
            `.hotengine-store-autodescription-block .hotengine-store-autodescription-list-block[data-hotengine-marking-id="${$id}"] .hotengine-store-autodescription-fulltext`
        );

        if(target){
            if(priceblock) target.appendChild(priceblock);
            if(clone) target.appendChild(clone);
        }
    }
};}
</script>

JSON завантаження товарів

Скрипт завантаження картки товару в JSON форматі

Дані карток товарів доступні за запитом /ajax.php?json&shop_products

При вивантаженні товарів можна вказати параметри сортування та фільтрації за наступними параметрами:
  • 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


Code: JavaScript
<script>
(function() {
    function decodeHtml(str) {
        let map = {
            "&amp;": "&",
            "&lt;": "<",
            "&gt;": ">",
            "&quot;": "\"",
            "&#039;": "'"
        };
        return str.replace(/&|<|>|"|'/g, function(m) { return map[m]; });
    }

    const init = () => {
        fetch(`/ajax.php?json&shop_products&id=12345,12346`, {
            method: "GET",
            credentials: "same-origin",
            headers: {
                "X-Requested-With": "XMLHttpRequest"
            }
        })
        .then(response => response.json())
        .then(offers => {
            if (offers.offers && Object.keys(offers.offers).length > 0) {
                Object.values(offers.offers).forEach(items => {
                    Object.values(items).forEach(item => {
                        if (item.description) console.log(decodeHtml(item.description));
                        if (item.text) console.log(decodeHtml(item.text));
                    });
                });
            }
        })
        .catch(error => {
            console.error("Failed to fetch shop products:", error);
        });
    };

    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", init);
    } else {
        init();
    }
})();
</script>

Приховування/Відображення характеристик в описі товару

Приховування/Відображення характеристик в описі товару

У картці товару доступне відображення характеристик. Блок може містити довгий список, тому ви можете використовувати скрипт для приховування частини характеристик. Для цього створіть Блок/Меню та вставте наступний скрипт:
Code: JavaScript
<script defer src="/templates/scripts/hotengine-script-hide-properties.js"></script>

Скрипт можна змінити, вказав кількість полів для відображення за замовчуванням. Для цього скопіюйте скрипт з файлу та вставте в Блок/Меню.

CSS стиль кнопки:
Code: JavaScript
/*SHOW/HIDE PROPERTIES*/
.shop_catalog_product_properties_block_showblock{text-align:left; margin-bottom:40px;}
.shop_catalog_product_properties_block_showblock:before{
    content: "Показать все характеристики"!important;
    white-space: nowrap;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    height: auto;
    border-radius:0px;
    margin: 5px auto 5px auto;
    font-size: 15px;
    padding: 4px 4px;
    border-bottom: 1px dashed #666666;
    margin-left:19px;
    display: inline-block;
}
:lang(en) .shop_catalog_product_properties_block_showblock:before{
    content: "Show all characteristics"!important;
}
:lang(ru) .shop_catalog_product_properties_block_showblock:before{
    content: "Показать все характеристики"!important;
}
:lang(uk) .shop_catalog_product_properties_block_showblock:before{
    content: "Показати всі характеристики"!important;
}
:lang(pl) .shop_catalog_product_properties_block_showblock:before{
    content: "Pokaż wszystkie cechy"!important;
}

:lang(en) .shop_catalog_product_properties_block_showblock.visible:before{
    content: "Hide"!important;
}
:lang(ru) .shop_catalog_product_properties_block_showblock.visible:before{
    content: "Скрыть"!important;
}
:lang(uk) .shop_catalog_product_properties_block_showblock.visible:before{
    content: "Приховати"!important;
}
:lang(pl) .shop_catalog_product_properties_block_showblock.visible:before{
    content: "Ukrywać"!important;
}

.shop_catalog_product_properties_block_showblock:hover:before{
    color:#008fc3;
    border-color: #008fc3;
}
/*SHOW/HIDE PROPERTIES END*/


Додавання інформації про доставку в картку товару за допомогою Ajax


Рекомендований метод додавання інформації про доставку - Ajax завантаження інформації з раніше створеної сторінки. Даний механізм дозволить уникнути індексації повторюваного тексту на всіх сторінках карток товарів. Для початку, створіть сторінку. Наприклад, з ім'ям «delivery_info». Це можна зробити в розділі «Мої сторінки». Тепер розглянемо варіанти завантаження даної сторінки в картку товару.

Додавання інформації про доставку у Вкладку.

У картці товару доступне відображення вкладок. Для створення власної вкладки та відображення тексту про доставку при переході у вкладку, необхідно створити скрипт. Для цього створіть Блок/Меню та вставте наступний скрипт:
Code: JavaScript
<script async="" src="/templates/scripts/hotengine-scripts-additional/hotengine-shop-products-delivery-in-tab.js" data-insert-after="last" data-page="delivery_info.htm" ></script>

Атрибути для налаштування вкладки "Доставка"

  • data-insert-before — вставляє нову вкладку перед вказаною кнопкою. Значення: button_tabs-1 - кнопка "Опис", button_tabs-review - кнопка "Відгуки" (або інша за ID кнопки), first - перша, last - остання.
  • data-insert-after — вставляє нову вкладку після вказаної кнопки. Значення: button_tabs-1 - кнопка "Опис", button_tabs-review - кнопка "Відгуки" (або інша за ID кнопки), first - перша, last - остання.
  • data-page — шлях до файлу з контентом вкладки. Значення за замовчуванням: delivery_info.htm.

Показувати Блок/Меню на сторінках: «Тільки на сторінках Магазину». Введіть символи, при виявленні яких відображати Блок/Меню: «.htm». Даний скрипт створить вкладку, при натисканні на яку виконається завантаження даних з раніше створеної сторінки. Мова завантажуваної сторінки відповідає тій мові, якою переглядається картка товару.


Додавання інформації про доставку за допомогою кнопки, у спливаючому вікні.

Аналогічним чином, використовуючи скрипт, ви можете встановити подію для створення кнопки. При натисканні на яку буде завантажена раніше створена сторінка.
Code: JavaScript
(function(){

let langMeta = document.documentElement.getAttribute(`lang`);
let l = langMeta ? langMeta.getAttribute(`content`) : `en`;

const languageMap = { `uk`: `ua` };
l = languageMap[l] || l;

const deliveryTextMap = {
    `ru`: `Доставка`,
    `pl`: `Dostawa`,
    `en`: `Delivery`,
    `ua`: `Доставка`,
    `fr`: `Livraison`,
    `de`: `Lieferung`,
    `es`: `Entrega`
};
const deliveryText = deliveryTextMap[l] || `Delivery`;

const href = `/${l}/delivery_info.htm`;

document.querySelectorAll(`.hotengine-shop-product-offerdetails`).forEach(el => {
    const a = document.createElement(`a`);
    a.className = `delivery_button hotengine-script-popup`;
    a.target = `_blank`;
    a.setAttribute(`data-remove-on-close`, `1`);
    a.setAttribute(`data-iframe`, `14`);
    a.href = href;
    a.setAttribute(`data-title`, deliveryText);
    a.setAttribute(`data-header-fix`, `1`);
    a.setAttribute(`data-auto-width`, `320`);
    a.setAttribute(`data-auto-height`, `320`);
    a.setAttribute(`data-max-width`, `800`);
    a.setAttribute(`data-max-height`, `800`);
    a.setAttribute(`data-mobile-width`, `320`);
    a.setAttribute(`data-unset-height`, `1`);
    a.textContent = deliveryText;
    el.insertAdjacentElement(`afterend`, a);
});

})();



Динамічна зміна вартості при оформленні бронювання


Додавання чайових при оформленні бронювання

Розглянемо приклад додавання чайових при оформленні бронювання.

  1. У форму (у конструкторі форм), що використовується для бронювання, необхідно додати два поля:
      - form_tips — select-список для вибору чайових. У тексті опцій можна вказати 5%, 10%, 20%, а значеннями — числа 5, 10, 20.
      - form_price_no_tip — приховане поле для зберігання базової ціни без чайових.
  2. Поле form_price_no_tip має бути типу hidden, щоб користувач його не бачив, але скрипт міг використовувати для розрахунків.
  3. Далі створюємо блок меню з вашим скриптом callback_hotengine_booking_form, який буде обробляти зміни чайових і перераховувати підсумкову ціну.
  4. Розміщуємо цей блок на всіх сторінках, де присутня форма бронювання, щоб динамічний розрахунок вартості працював коректно всюди.

Скрипт формування підсумкової вартості.

Створіть Блок/Меню та вставте наступний скрипт:
Code: JavaScript
window.callback_hotengine_booking_form = function (value) {
    if (value === 9) {
        var form = document.querySelector(`#dialog-booking-modal-content form`);
        if (!form) {
            console.log("no form found");
            return;
        }

        var bookingDataTextarea = document.querySelector(`textarea[name="booking_data"]`);
        var bookingDataText = bookingDataTextarea ? bookingDataTextarea.value : "";
        let bookingData = {};

        if (bookingDataText) {
            try {
                bookingData = JSON.parse(bookingDataText);
            } catch (e) {
                console.error("JSON parse error: ", e);
                return;
            }
        }

        if (bookingData.bookingData && !bookingData.bookingData.selectedFormPrice_BEFORE) {
            bookingData.bookingData.selectedFormPrice_BEFORE = bookingData.bookingData.selectedFormPrice || "-";
        }
        if (bookingData.bookingData && !bookingData.bookingData.form_price_BEFORE) {
            bookingData.bookingData.form_price_BEFORE = bookingData.bookingData.form_price || "-";
        }

        let baseTotalPrice = bookingData.bookingData ? bookingData.bookingData.form_price_BEFORE : "-";

        var formPriceNoTip = document.querySelector("#form_price_no_tip");
        if (formPriceNoTip) {
            formPriceNoTip.value = baseTotalPrice;
        }

        var tipsElement = document.querySelector(`#form_tips`);
        if (tipsElement) {
            tipsElement.addEventListener("change", function () {
                const tipValue = this.value;
                const bookingDataTextareaCurrent = document.querySelector(`textarea[name="booking_data"]`);
                
                if (tipValue === "-" || tipValue === "0" || parseInt(tipValue, 10) <= 0) {
                    const baseFormPrice = bookingData.bookingData.selectedFormPrice_BEFORE;
                    const baseTotalPriceVal = bookingData.bookingData.form_price_BEFORE;

                    const updatedDataArray = Object.assign({}, bookingData.bookingData, {
                        selectedFormPrice: baseFormPrice,
                        form_price: baseTotalPriceVal
                    });

                    const updatedJSON = JSON.stringify({ bookingData: updatedDataArray });

                    if (bookingDataTextareaCurrent) bookingDataTextareaCurrent.remove();
                    form.insertAdjacentHTML("beforeend", ``);
                    
                    var priceSpan = document.querySelector(".booking-text-form-price span");
                    if (priceSpan) priceSpan.textContent = baseTotalPriceVal;
                    return;
                }

                const tipPercentage = parseInt(tipValue, 10);
                let bFormPrice = bookingData.bookingData.selectedFormPrice_BEFORE;
                let bTotalPrice = bookingData.bookingData.form_price_BEFORE;

                let priceNumMatch = bFormPrice.match(/[\d.]+/);
                let totalNumMatch = bTotalPrice.match(/[\d.]+/);

                if (!priceNumMatch || !totalNumMatch) {
                    console.error("Failed to extract numeric values");
                    return;
                }

                let baseFormPriceValue = parseFloat(priceNumMatch[0]);
                let baseTotalPriceValue = parseFloat(totalNumMatch[0]);

                let newFormPriceVal = (baseFormPriceValue * (1 + tipPercentage / 100)).toFixed(2);
                let newTotalPriceVal = (baseTotalPriceValue * (1 + tipPercentage / 100)).toFixed(2);
                
                let newFormPrice = bFormPrice.replace(priceNumMatch[0], newFormPriceVal);
                let newTotalPrice = bTotalPrice.replace(totalNumMatch[0], newTotalPriceVal);

                const updatedDataArrayNew = Object.assign({}, bookingData.bookingData, {
                    selectedFormPrice: newFormPrice,
                    form_price: newTotalPrice
                });

                const updatedJSONNew = JSON.stringify({ bookingData: updatedDataArrayNew });

                if (bookingDataTextareaCurrent) bookingDataTextareaCurrent.remove();
                form.insertAdjacentHTML("beforeend", ``);
                
                var priceSpanNew = document.querySelector(".booking-text-form-price span");
                if (priceSpanNew) priceSpanNew.textContent = newTotalPrice;
            });
        }
    }
};


Скрипт змінює JSON дані з підсумковою вартістю вибраного слоту для бронювання.

Динамічна зміна вартості при оформленні замовлення


Додавання суми до підсумкової ціни замовлення в кошику

Ви можете використовувати приховане поле «form_price_append», щоб додавати певну суму до підсумкової вартості в кошику. Наприклад, якщо 5 товарів коштують 100$, а потрібно додати ще 50$, вкажіть це значення в «form_price_append».

Поле можна створити двома способами:
  • через редактор форми в налаштуваннях магазину, на вкладці «Оформлення замовлення» в розділі «Додати поля в форму замовлення»;
  • або програмно за допомогою скриптів, які динамічно змінюють його значення.
Це дозволяє враховувати чайові, додаткові послуги, ексклюзивні товари або будь-які інші надбавки до вартості замовлення, при цьому підсумкова сума буде коректно відображатися в кошику.

Скрипт для додавання поля «form_price_append» та додаткової націнки

Створіть функціональну сторінку «Кошик» і в тексті додайте наступний код:
Code: JavaScript
<script>
(function(){

const form = document.querySelector(`#hotengine-shop-cart-form`);
if(!form) return;

// --- Add hidden append field if missing ---
let appendField = form.querySelector(`input[name="form_price_append"]`);
if(!appendField){
    appendField = document.createElement(`input`);
    appendField.type = `hidden`;
    appendField.name = `form_price_append`;
    appendField.value = `0`;
    form.appendChild(appendField);
}

// --- Add temporary element for calculations ---
let tempPrice = form.querySelector(`.hotengine-shop-product-price_before_append`);
if(!tempPrice){
    tempPrice = document.createElement(`span`);
    tempPrice.className = `hotengine-shop-product-price_before_append`;
    tempPrice.style.display = `none`;
    form.appendChild(tempPrice);
}

// --- Add block for storing data via attributes ---
let infoAppend = document.querySelector(`.hotengine-shop-cart-cart_order_price_append`);
if(!infoAppend){
    const priceBlock = document.querySelector(`.hotengine-shop-cart-cart_order_price`);
    if(priceBlock){
        infoAppend = document.createElement(`div`);
        infoAppend.className = `hotengine-shop-cart-cart_order_price_append`;
        priceBlock.insertAdjacentElement(`afterend`, infoAppend);
    }
}

// --- Save base price if not already ---
const priceNumber = document.querySelector(`.hotengine-shop-cart-cart_order_price .hotengine-shop-product-price_number`);
if(priceNumber && !priceNumber.dataset.basePrice){
    priceNumber.dataset.basePrice = parseFloat(priceNumber.textContent) || 0;
}

// --- Price formatting function ---
const formatPrice = (price) => Number.isInteger(price) ? price : price.toFixed(2);

// --- Main update function ---
const updateCartPriceAppend = () => {
    const appendVal = appendField.value.trim();
    const basePrice = parseFloat(priceNumber.dataset.basePrice) || 0;
    let newPrice = basePrice;

    if(appendVal && appendVal !== `0`){
        // Handle percentage
        if(appendVal.indexOf(`%`) > -1){
            const percent = parseFloat(appendVal.replace(`%`,``));
            if(!isNaN(percent)) newPrice = basePrice * (1 + percent / 100);
        } else {
            const fixed = parseFloat(appendVal);
            if(!isNaN(fixed)) newPrice = basePrice + fixed;
        }
    }

    // Update temporary element
    tempPrice.textContent = formatPrice(newPrice);

    // Update price in cart
    priceNumber.textContent = formatPrice(newPrice);

    // Update data attributes only
    infoAppend.setAttribute(`data-base`, formatPrice(basePrice));
    infoAppend.setAttribute(`data-append`, appendVal || 0);
    infoAppend.setAttribute(`data-new`, formatPrice(newPrice));
};

// --- Event: recalc on change and page load ---
appendField.addEventListener(`input`, updateCartPriceAppend);
appendField.addEventListener(`change`, updateCartPriceAppend);

// --- Example: set additional +1000 on page load ---
appendField.value = `1000`;
updateCartPriceAppend();

})();

</script>

Для прикладу до суми додано 1000.

Відображення останньої оптової ціни в списку товарів


Якщо необхідно відобразити останню оптову ціну (тобто мінімальну) при відображенні списку товарів, то можна використати наступний CSS стиль:
Code: CSS
.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block .hotengine-shop-product-price_bulk, .hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block .hotengine-shop-product-price_bulk_moq { display: none; }
.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block .hotengine-shop-product-price_bulk:nth-last-of-type(2) { display: inline-block; }

.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block:hover{border-color:#f96013;}
.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block:hover .hotengine-shop-product-price_bulk { color:#f96013;}
.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block:hover {color:#f96013; }

Аналогічно для показу лише першої ціни (максимальної):
Code: CSS
.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block .hotengine-shop-product-price_bulk, .hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block .hotengine-shop-product-price_bulk_moq { display: none; }
.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block .hotengine-shop-product-price_bulk:first-child, .hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block .hotengine-shop-product-price_bulk_moq:first-child {display:inline-block;}

.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block:hover{border-color:#f96013;}
.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block:hover .hotengine-shop-product-price_bulk { color:#f96013;}
.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block:hover {color:#f96013; }