Системна розмітка / Мікророзмітка

Назад

Приховані дані (Системна розмітка / Мікророзмітка)

Спеціальна розмітка hotengine-marking

Дана розмітка міститься на всіх сторінках (сторінках, магазині, каталозі статей та ін.), а також у пунктах меню, де використовується список даних, наприклад останні статті та новини.

Дана розмітка містить наступні дані:
data-hotengine-marking-type= тип сторінки
data-hotengine-marking-timestamp= дата створення сторінки
data-hotengine-marking-view= кількість переглядів

Дані необхідні у випадку, якщо ви хочете заборонити або відобразити додаткові дані, на певній сторінці, з певним типом сторінки, або якщо вам необхідно відобразити кількість переглядів, або дату матеріалу (новини, статті, товару). Крім того, проінспектувавши даний елемент, ви можете виявити ID запису (сторінки, статті або товару), а також інші додаткові дані.

Якщо вам потрібні ще якісь дані в розмітці, то повідомте нам про це.
Code: html
<span class="hotengine-marking" data-hotengine-marking-type="shop_catalog_page" data-hotengine-marking-timestamp="1422368197" data-hotengine-marking-view="6" data-hotengine-marking-name="slug_url_name" data-hotengine-marking-shop_catalog_page_price="1" data-hotengine-marking-shop_catalog_page_price_currency="USD" data-hotengine-marking-shop_catalog_page_complectation="22323" data-hotengine-marking-video="https://youtu.be/tAyVrZ1jzC4">


Крім того, при встановленні індивідуальних параметрів доставки, додаються ще атрибути:
data-hotengine-marking-delivery="xxx"
data-hotengine-marking-delivery_price="xxx"
data-hotengine-marking-delivery_note="xxx"


При наявності габаритів та ваги товару додаються атрибути: data-hotengine-marking-shop_cat_page_deliv_width="XX"
data-hotengine-marking-shop_cat_page_deliv_height="XX"
data-hotengine-marking-shop_cat_page_deliv_length="XX"
data-hotengine-marking-shop_cat_page_deliv_units="XX"
data-hotengine-marking-shop_cat_page_deliv_weight="XX"
data-hotengine-marking-shop_cat_page_deliv_weight_units="XX"
data-hotengine-marking-shop_cat_page_deliv_capacity="XX"



Приклад скрипта, який перевіряє сторінку на наявність об'єкта розмітки та типу сторінки «shop_catalog_page» (сторінка картки товару).
Code: html
let product_marking = $(".hotengine-marking[data-hotengine-marking-type='shop_catalog_page']");
  if(typeof product_marking !== typeof undefined && product_marking !== false && product_marking !='undefined' && product_marking !=''){
 let product_id = product_marking.attr("data-hotengine-marking-shop_catalog_page_id");
  console.log("ID PRODUCT IS "+product_id);
}

Якщо сторінка визначена як картка товару, то витягуємо ID товару - data-hotengine-marking-shop_catalog_page_id.

Доступні типи сторінок:

Shop:
  • shop_catalog_page - картка товару
  • shop_catalog_page_incategory - картка товару на сторінці зі списком *
  • shop_catalog_page_incategory_search - картка товару на сторінці результату пошуку
  • shop_catalog_page_cart_products_list - картка товару в кошику
  • pers_shop_catalog_category - категорія магазину
  • shop_catalog_category_collection - категорія-колекція, магазину
  • shop_catalog_category_producer - категорія-виробник, магазину
  • shop_statistic_sale - статистика продажів
  • shop_catalog_page_cart_bought_with - з товаром купують (при перегляді кошика)
Blog:
  • blog_catalog_page - стаття
  • blog_catalog_page_incategory - список статей *

* - у даних об'єктів списку атрибути мікророзмітки додані без використання окремого елемента hotengine-marking.

Приклад використання розмітки (Відображення дати створення запису + timeConverter)
Code: html

<script>
(function(){
  function timeConverter(UNIX_timestamp) {
  const metaLang = document.querySelector(`html`);
  let lang = metaLang ? metaLang.getAttribute(`lang`).toLowerCase() : `en`;
  const a = new Date(UNIX_timestamp * 1000);
  const year = a.getFullYear();
  const monthIndex = a.getMonth();
  const date = a.getDate();
 const months = {
  "ru": ["января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря"],
  "uk": ["січня","лютого","березня","квітня","травня","червня","липня","серпня","вересня","жовтня","листопада","грудня"],
  "pl": ["stycznia","lutego","marca","kwietnia","maja","czerwca","lipca","sierpnia","września","października","listopada","grudnia"],
  "en": ["January","February","March","April","May","June","July","August","September","October","November","December"]
  };
 if (!months[lang]) lang = "en";
  return { day: date, month: months[lang][monthIndex], year: year };
  }


document.querySelectorAll(`#hotengine-content-page .hotengine-blog-page-list-block, #hotengine-content-blog .hotengine-blog-page-list-block`).forEach(block => {
    const timestamp = block.getAttribute(`data-hotengine-marking-timestamp`);
    if(timestamp){
        const t = timeConverter(timestamp);
        const dateHtml = `
            
${t.day} ${t.month} ${t.year}
`; const contentElem = block.querySelector(`.contenth_i`); if(contentElem){ contentElem.insertAdjacentHTML(`afterbegin`, dateHtml); } } }); })(); </script>

Даний скрипт знаходить елемент розмітки, #hotengine-content-blog .hotengine-blog-page-list-block (статтю зі списку) та вставляє Дату, попередньо перетворену з TIMESTAMP, функцією timeConverter на початок елемента .contenth_i.
CSS style
Code: CSS
.hotengine_add_date { font-size:10px; float:right; color:#555;
  display: inline-block;
  width: 60px;
  padding: 8px 5px;
  background-color: #f4f4f4;
  border-radius: 8px;
  text-align: center;

  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  margin: 8px 10px 12px 8px;
  color: #333;
}

.hotengine_add_date span {
  display: block;
  line-height: 1.2;
}

.hotengine_add_date span.day {
  font-size: 20px;
  font-weight: bold;
}

.hotengine_add_date span.month {
  font-size: 13px;
  font-weight: 500;
}

.hotengine_add_date span.year {
  font-size: 11px;
  color: #777;
}

@media screen and (max-width: 600px) {
  .hotengine_add_date {
    width: 48px;
    padding: 6px 4px;
    margin: 6px 8px 10px 0;
  }

  .hotengine_add_date span.day {
    font-size: 16px;
  }

  .hotengine_add_date span.month {
    font-size: 11px;
  }

  .hotengine_add_date span.year {
    font-size: 10px;
  }
}




Крім того, до тегу <HTML> для користувачів додається розмітка data-hotengine-marking-userid, з ID користувача.
Якщо користувач доданий як "Клієнт" зі своєю знижкою, то також додається мітка data-hotengine-marking-user-group-discount, з розміром його знижки.

Code: html
<html lang="ru" data-hotengine-marking-userid="USERID" data-hotengine-marking-user-group-discount="-10%">
Де:
ru - мова сайту
USERID - ID користувача
10% - розмір клієнтської знижки.


Якщо користувач доданий в Групу клієнтів, то додатково вказується ID групи до якої він належить.
Code: html
<html lang="ru" data-hotengine-marking-userid="XXXXX" data-hotengine-marking-user-group-discount="-20%" data-hotengine-marking-user-group-id="XXXXX">



Приклад додаткової розмітки в різновиді товару
Code: html
<ul class="hotengine-shop-product-variety_select" size="1" data-vpid="XXXXX" >
<li value="0" title="Різновид" >Різновид</li>
<li value="XXXXXX" data-hotengine-variety-disable-add="1" data-hotengine-variety-pricechange="+10" data-hotengine-variety-stockcount="10" class="">Різновид 1</li>
<li value="XXXXX" data-hotengine-variety-disable-add="0" data-hotengine-variety-pricechange="=500" data-hotengine-variety-stockcount="10" class="hotengine-shop-product-variety_hilight">Різновид 2</li>
<li value="XXXXX" data-hotengine-variety-disable-add="0" data-hotengine-variety-pricechange="-110" data-hotengine-variety-stockcount="10" class="hotengine-shop-product-variety_hilight-selected">Різновид 3</li>
</ul>

data-hotengine-variety-disable-add - вкл/вимк можливість додати різновид в кошик (1-заборонити, 0-дозволити). При натисканні на різновид, вимкнений для додавання - нічого не відбувається і ціна товару та артикул не змінюються.

data-hotengine-variety-pricechange - дані про зміну ціни, ви можете їх використовувати для створення підсвітки даних про змінювану ціну (за допомогою javascript).
data-hotengine-variety-stockcount - кількість в наявності

CSS класи для елементів:
.hotengine-shop-product-variety_hilight - виділений об'єкт (при наведенні мишки).

.hotengine-shop-product-variety_hilight-selected - виділений об'єкт на який натиснули (активний різновид).

Крім того, для всіх дочірніх елементів блока з вимкненою функцією додавання в кошик [data-hotengine-variety-disable-add="1"] додана стилізація знебарвлення та звичайний курсор при наведенні.

Приклад мітки при пошуковому запиті в магазині
Code: html
<span class="hotengine-marking" 
data-hotengine-marking-type="shop_catalog_page_incategory_search"
data-hotengine-marking-search="отдельно поисковый запрос"
data-hotengine-marking-searchparam="?&search=поисковый запрос полная строка (+сортировка и прочие данные)"
data-hotengine-marking-sortparam="дополнительные данные сортировки"
data-hotengine-marking-smart_search_price_from="цена от"
data-hotengine-marking-smart_search_price_to="цена до"
data-hotengine-marking-smart_search="поисковый запрос при использовании поискового фильтра"
data-hotengine-marking-searchresult-num="55">

data-hotengine-marking-searchparam - пошуковий запит, можна використовувати для створення посилання на сторінку із запитом.
data-hotengine-marking-searchresult-num - кількість знайдених продуктів за введеним запитом.

Приклад мітки в категоріях магазину
Code: html
<span class="hotengine-marking" 
data-hotengine-marking-type="pers_shop_catalog_category"
data-hotengine-marking-view="9999"
data-hotengine-marking-pers_shop_catalog_category_parent_id="222"
data-hotengine-marking-pers_shop_catalog_category_child_count="2"
data-hotengine-marking-pers_shop_catalog_page_count="999"
data-hotengine-marking-pers_shop_catalog_page_child_count="1299"
data-hotengine-marking-pers_shop_catalog_category_name="nameofcategory"
data-hotengine-marking-pers_shop_catalog_category_id="8342">

data-hotengine-marking-pers_shop_catalog_category_parent_id - ID батьківської категорії
data-hotengine-marking-pers_shop_catalog_category_child_count - кількість підкатегорій (тільки до цього батька)
data-hotengine-marking-pers_shop_catalog_page_count - кількість товарів в цій категорії
data-hotengine-marking-pers_shop_catalog_page_child_count - кількість товарів в цій та дочірніх підкатегоріях
data-hotengine-marking-pers_shop_catalog_category_name - ім'я категорії.
data-hotengine-marking-pers_shop_catalog_category_id - ID категорії.
Аналогічна розмітка використовується для Виробників.

Приклад пошуку мітки з пошуковим запитом в магазині
Code: JavaScript
<script><!--
document.addEventListener("DOMContentLoaded", () => {
    const searchMark = document.querySelector(`.hotengine-marking[data-hotengine-marking-type="shop_catalog_page_incategory_search"]`);
    if (searchMark) {
        const searchQuery = searchMark.getAttribute("data-hotengine-marking-search");
        const input = document.querySelector(`#hotengine-search-searchinput input[name="search"]`);
        if (input && searchQuery) {
            input.value = searchQuery;
        }
    }
});
  //-->
  </script>

data-hotengine-marking-search - пошуковий запит Увага! Це лише приклад. При розміщенні блока пошуку в шапці сайту значення поля встановлюється автоматично в момент рендерингу сторінки.


Крім того до деяких блоків сайту додана розмітка "data-hotengine-..." з додатковими даними.
Наприклад data-hotengine-product-images-count - кількість картинок у товару.

В кошику розміткою вказано кількість товарів, загальна вартість та валюта (data-hotengine-cart-count, data-hotengine-cart-total-price, data-hotengine-cart-currency)

Додаткова розмітка, «data-» реалізована прямо в елементах розмітки, наприклад, елемент class="hotengine-categories-list-block" (блок іконки категорії) може містити розмітку: data-image="1" - вказана картинка до категорії, data-child-cat="7" - кількість підкатегорій, data-child-items="5114" - Кількість товарів у всіх внутрішніх рубриках, а також кількість підкатегорій, data-cid="44" - ID категорії. (data-cid - категорії магазину, data-pcid - категорії виробників, data-ccid - категорії колекцій, data-bcid - категорії каталогу статей)

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

Приклад перевірки наявності елемента розмітки
Code: html
let $catergory = $('.hotengine-marking[data-hotengine-marking-type="pers_shop_catalog_category"]');
if (typeof $catergory !== typeof undefined && $catergory !== false && $catergory !== "undefined" && $catergory.length > 0){
let $nemecat = $catergory.attr("data-hotengine-marking-pers_shop_catalog_category_name");
alert("Category name is "+$nemecat);
}

Інструкція зі створення Сортування товарів в магазині з прикладом

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

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

Текст помилки вибору різновиду:
Повідомлення про необхідність вибрати різновид товару реалізовано в діалоговому вікні за допомогою 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 функція callback_hotengine_variety_require.
При перегляді списку товарів, перед відображенням повідомлення, викликається callback функція callback_hotengine_variety_require_list($href), де в якості $href передається посилання на картку товару.

Приклад функції з діалоговим вікном, яке використовується за замовчуванням, і може бути змінено:
Code: JavaScript
<script>
 function callback_hotengine_variety_require(){

 $("body").append('<div id="hotengine-shop_cart_add_error_wrong_variety"><a class="hotengine-shop_cart_add_error_wrong_variety-btn-close" data-micromodal-close onclick=\'(function() { $("#hotengine-shop_cart_add_error_wrong_variety,#hotengine-shop_cart_add_error_wrong_variety-data").remove(); return false; })();\'></a></div>');
  
  
  
hotengine_micromodal({
    id: "hotengine-shop-cart-add-error-wrong-variety",
    content: $("#hotengine-shop_cart_add_error_wrong_variety-data").html(),
    defaultWidth: $(window).width() > 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>



В параметрах товару можна вказати заголовок над списком різновидів. Довжина заголовка додається у вигляді CSS class'а. Наприклад, якщо заголовок "Вибрати вагу", то його довжина 24 символи. Відповідно вказується клас hotengine-shop-product-variety-title_24. Ви можете використовувати або текст або довжину заголовка над різновидом. Наприклад:
Code: JavaScript
<script>												 
	function callback_hotengine_variety_require(){

if($(".hotengine-shop-product-variety-title_24").length > 0){
  $text = "Ви не вибрали вагу!";
  } else if($(".hotengine-shop-product-variety-title_38").length > 0){
  $text = "Ви не вибрали кількість!";
  } else if($(".hotengine-shop-product-variety-title_26").length > 0){
  $text = "Ви не вибрали колір!";
  } else {
  $text = "Ви не вибрали різновид!";
  }
 
 
 $("body").append('<div id="hotengine-shop_cart_add_error_wrong_variety"><b>'+$text+'</b><a class="hotengine-shop_cart_add_error_wrong_variety-btn-close" data-micromodal-close onclick=\'(function() { $("#hotengine-shop_cart_add_error_wrong_variety,#hotengine-shop_cart_add_error_wrong_variety-data").remove(); return false; })();\'></a></div>');
  
  
  
hotengine_micromodal({
    id: "hotengine-shop-cart-add-error-wrong-variety",
    content: $("#hotengine-shop_cart_add_error_wrong_variety-data").html(),
    defaultWidth: $(window).width() > 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>
Аналогічна функція при перегляді списку товарів, callback_hotengine_variety_require_list($href), доповнена посиланням на картку товару, і відповідно може бути використана в діалозі, що відображається.

Інструкція з додавання посилання на відгуки / rating в товарах


Для створення посилання на іконки Рейтингу, в списку товарів, необхідно знайти всі елементи списку, та додати посилання навколо елементів рейтингу.
Крім того, після завантаження списку товарів у слайдері або кнопкою "Показати ще", необхідно виконати додавання посилання повторно (callback_hotengine_ajax_load_products та callback_hotengine_shop_products_list_div_button).
Code: JavaScript
<script>
  <!-- 


window.callback_hotengine_shop_products_list_div_button = function(){
    const blocks = document.querySelectorAll(`.hotengine-shop-product-list-block .hotengine-shop-product-rating-block`);
    blocks.forEach(block => {
        if(block.parentElement && block.parentElement.classList.contains(`hotengine-shop-product-rating-block-url`)) return;
        const parent = block.parentElement;
        if(!parent) return;
        const readMore = parent.querySelector(`.hotengine-shop-product-read_more a`);
        if(!readMore) return;
        const url = readMore.getAttribute(`href`);
        if(!url) return;
        const a = document.createElement(`a`);
        a.className = `hotengine-shop-product-rating-block-url`;
        a.href = `${url}#tabs-review`;
        parent.insertBefore(a, block);
        a.appendChild(block);
    });
};

window.callback_hotengine_ajax_load_products = function(){
    const blocks = document.querySelectorAll(`.hotengine-shop-products-list-content-append .hotengine-shop-product-list-block .hotengine-shop-product-rating-block`);
    blocks.forEach(block => {
        if(block.parentElement && block.parentElement.classList.contains(`hotengine-shop-product-rating-block-url`)) return;
        const parent = block.parentElement;
        if(!parent) return;
        const readMore = parent.querySelector(`.hotengine-shop-product-read_more a`);
        if(!readMore) return;
        const url = readMore.getAttribute(`href`);
        if(!url) return;
        const a = document.createElement(`a`);
        a.className = `hotengine-shop-product-rating-block-url`;
        a.href = `${url}#tabs-review`;
        parent.insertBefore(a, block);
        a.appendChild(block);
    });
};

window.callback_hotengine_shop_products_list_div_button = function(){
    const blocks = document.querySelectorAll(`.hotengine-shop-products-list-content .hotengine-shop-product-list-block .hotengine-shop-product-rating-block`);
    blocks.forEach(block => {
        if(block.parentElement && block.parentElement.classList.contains(`hotengine-shop-product-rating-block-url`)) return;
        const parent = block.parentElement;
        if(!parent) return;
        const readMore = parent.querySelector(`.hotengine-shop-product-read_more a`);
        if(!readMore) return;
        const url = readMore.getAttribute(`href`);
        if(!url) return;
        const a = document.createElement(`a`);
        a.className = `hotengine-shop-product-rating-block-url`;
        a.href = `${url}#tabs-review`;
        parent.insertBefore(a, block);
        a.appendChild(block);
    });
};
 
-->
  </script>



Для об'єкта посилання необхідно задати положення, наприклад CSS:
Code: JavaScript
.hotengine-shop-product-list-block .hotengine-shop-product-rating-block{ position:relative; display: block; bottom: 0px;}
	.hotengine-shop-product-list-block .hotengine-shop-product-rating-block-url{ position:relative; display: block; bottom: 1px;}
	


Додаткові блоки в кошику: Якщо у товару встановлена оптова ціна, то створюється SPAN елемент .hotengine-shop-product-price_bulk_inform_block.
Code: html
<span class="hotengine-shop-product-price_bulk_inform_block"><span class="hotengine-shop-product-price_bulk_inform_block_title"></span><span class="hotengine-shop-product-price_bulk_inform_original_price">100</span><span class="hotengine-shop-product-price_bulk_inform_original_price_bulk">100</span></span>



.hotengine-shop-product-price_bulk_inform_block_title - блок з текстом «Оптова ціна» (змінити можна через CSS стилі, content).
.hotengine-shop-product-price_bulk_inform_block - блок з інформацією про знижку
.hotengine-shop-product-price_bulk_inform_original_price - ціна
.hotengine-shop-product-price_bulk_inform_original_price_bulk - оптова ціна


Якщо у товару вказана Акція, то створюється SPAN елемент .hotengine-shop-product-price_sale_inform_block.
Code: html
<span class="hotengine-shop-product-price_sale_inform_block"><span class="hotengine-shop-product-price_sale_inform_block_title"></span><span class="hotengine-shop-product-price_sale_inform_original_price">100</span><span class="hotengine-shop-product-price_sale_inform_original_price_old">120</span></span>



.hotengine-shop-product-price_sale_inform_block_title - блок з текстом «Акційна ціна» (змінити можна через CSS стилі, content).
.hotengine-shop-product-price_sale_inform_block - блок з інформацією про знижку
.hotengine-shop-product-price_sale_inform_original_price - ціна
.hotengine-shop-product-price_sale_inform_original_price_old - стара ціна товару (відображається тільки якщо значення вказано і не дорівнює нулю)


Назад