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

Скрытые данные (Системная разметка / Микроразметка)

Специальная разметка 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-shop_catalog_page_id="71111" 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("meta[http-equiv='content-language']");
  let lang = metaLang ? metaLang.getAttribute("content").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
html:lang(ru) .hotengine-shop_cart_add_error_wrong_variety:after{ content:"Вы не выбрали разновидность товара."; }
html:lang(en) .hotengine-shop_cart_add_error_wrong_variety:after{ content:"You did not select a complete set of goods."; }
html:lang(uk) .hotengine-shop_cart_add_error_wrong_variety:after{ content:"Вы не обрали різновид товару."; }
html: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: function(){ $("#hotengine-shop-cart-add-error-wrong-variety,#hotengine-shop_cart_add_error_wrong_variety-data").remove(); }
});
  
  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: function(){ $("#hotengine-shop-cart-add-error-wrong-variety,#hotengine-shop_cart_add_error_wrong_variety-data").remove(); }
});
  
  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 - старая цена товара (отобржается только если значение указано и не равно нулю)


Таму