Скрипти платформи
Показати супутні товари в кошику (З товаром купують)
- window.auto_width = 1; — увімкнути автоширину.
- window.onpage = 8; — кількість товарів при першому завантаженні.
- window.widget_style = 2; — стиль завантаження віджета.
- window.lang = "en"; — мова відображуваних товарів (інші будуть пропущені; можна вказати порожнє значення, щоб вимкнути фільтрацію за мовою).
Повний перелік параметрів доступний в інструкціях до файлу hotengine-shop-products-list-generated.js вище.
При перегляді кошика:
При перегляді кошика створюється елемент мікророзмітки, який містить список «З товаром купують». Список таких товарів можна відобразити у спливаючому вікні або у вигляді блоку з товарами.Розмістіть у тексті сторінки код відображення списку з товарами на сторінці «cart_send» - «Функціональна сторінка» - «Кошик.
Код додавання списку при перегляді кошика (під кнопкою «Продовжити покупки»):
<script src="/templates/scripts/hotengine-scripts-additional/hotengine-script-additional-bought-with-after-continue-shopping-button.js"></script>
Список відображатиметься лише за наявності супутніх товарів. Для стилізації блок оточений як стандартний блок/меню.
Приклад 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» - «Функціональна сторінка» - «Кошик.
<script src="/templates/scripts/hotengine-scripts-additional/hotengine-script-additional-bought-with-popup.js"></script>
Вікно спливатиме лише у випадку, коли виявлено супутні товари.
.hotengine-bought_with-window-btn-close - вкажіть стиль для кнопки закриття вікна (відображається під списком товарів у вікні).
Приклад 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» або в розділі «Службові теги», та налаштуйте відображення на всіх сторінках або лише на тих сторінках, де є товар з кнопкою «Додати в кошик».
<script src="/templates/scripts/hotengine-scripts-additional/hotengine-script-additional-bought-with-after-callback-cart_plus_after_boughtwith.js"></script>
Приклад 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 в кошику.
<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 стилю:
.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
<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}¶m=${$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
<script>
(function() {
const decodeHtml = (str) => {
const map = {
"&": "&",
"<": "<",
">": ">",
""": "\"",
"'": "'"
};
return str.replace(/&|<|>|"|'/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
Положення Блока/Меню: вгорі
Показувати Блок/Меню на сторінках: всюди
Введіть символи, при виявленні яких відображати Блок/Меню: (Без пробілів)
Введіть символи, при виявленні яких не відображати Блок/Меню: (Без пробілів)
<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 стилі):
.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 відображення вмісту кошика:
<script src="/templates/scripts/hotengine-script-shop-cart-hover-block.js"></script>
CSS стиль:
/*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, з прокруткою всіх доступних у товарі зображень, додайте наступний скрипт у Блок/Меню:<script defer src="/templates/scripts/hotengine-script-shop-products-list-images-child-gallery.js"></script>
CSS стиль іконки:
/*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):
(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 стиль:
/*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):
(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» – випадне вікно з пунктами меню на всю ширину сторінки
Вимкнувши дані скрипти в параметрах Головного меню або видаливши наведені вище класи, ви можете встановити власний код подій або CSS стилі при наведенні.
Нижче наведені приклади скриптів, які активують дані випадні підпункти для головного меню, і вбудовані за замовчуванням.
Випадне меню за замовчуванням
<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>
Спливаюче вікно
<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>
Випадне вікно
<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».
<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
<script>
(function() {
function decodeHtml(str) {
let map = {
"&": "&",
"<": "<",
">": ">",
""": "\"",
"'": "'"
};
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>
Приховування/Відображення характеристик в описі товару
Приховування/Відображення характеристик в описі товару
У картці товару доступне відображення характеристик. Блок може містити довгий список, тому ви можете використовувати скрипт для приховування частини характеристик. Для цього створіть Блок/Меню та вставте наступний скрипт:<script defer src="/templates/scripts/hotengine-script-hide-properties.js"></script>
Скрипт можна змінити, вказав кількість полів для відображення за замовчуванням. Для цього скопіюйте скрипт з файлу та вставте в Блок/Меню.
CSS стиль кнопки:
/*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». Це можна зробити в розділі «Мої сторінки». Тепер розглянемо варіанти завантаження даної сторінки в картку товару.
Додавання інформації про доставку у Вкладку.
У картці товару доступне відображення вкладок. Для створення власної вкладки та відображення тексту про доставку при переході у вкладку, необхідно створити скрипт. Для цього створіть Блок/Меню та вставте наступний скрипт:<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». Даний скрипт створить вкладку, при натисканні на яку виконається завантаження даних з раніше створеної сторінки. Мова завантажуваної сторінки відповідає тій мові, якою переглядається картка товару.
Додавання інформації про доставку за допомогою кнопки, у спливаючому вікні.
Аналогічним чином, використовуючи скрипт, ви можете встановити подію для створення кнопки. При натисканні на яку буде завантажена раніше створена сторінка.(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);
});
})();
Динамічна зміна вартості при оформленні бронювання
Додавання чайових при оформленні бронювання
Розглянемо приклад додавання чайових при оформленні бронювання.
-
У форму (у конструкторі форм), що використовується для бронювання, необхідно додати два поля:
-form_tips— select-список для вибору чайових. У тексті опцій можна вказати 5%, 10%, 20%, а значеннями — числа 5, 10, 20.
-form_price_no_tip— приховане поле для зберігання базової ціни без чайових. -
Поле
form_price_no_tipмає бути типуhidden, щоб користувач його не бачив, але скрипт міг використовувати для розрахунків. -
Далі створюємо блок меню з вашим скриптом
callback_hotengine_booking_form, який буде обробляти зміни чайових і перераховувати підсумкову ціну. - Розміщуємо цей блок на всіх сторінках, де присутня форма бронювання, щоб динамічний розрахунок вартості працював коректно всюди.
Скрипт формування підсумкової вартості.
Створіть Блок/Меню та вставте наступний скрипт: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» та додаткової націнки
Створіть функціональну сторінку «Кошик» і в тексті додайте наступний код:<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 стиль:
.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; }
Аналогічно для показу лише першої ціни (максимальної):
.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; }