Скрипти платформи
Показать сопутствующие товары в корзине (С товаром покупают)
- 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»
Сопутствующие товары - всплывающее окно после добавления товара в корзину
На основе скрипта Загрузка списка товаров с функциями «Виджета с товарами» при помощи JavaSript можно выполнить загрузку списка товаров, которые будут содержать список «Сопутствующие товары».
После добавления товаров в корзину, выполняется 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?v59`;
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?v59`;
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?v59`;
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; }