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

Бұрын
[Показать все инструкции на странице]
Видеоинструкции Управление сайтом Основные модули Поиск по сайту JSON поиск / Стилизация подсказок при поиске Поисковый фильтр и Типы продукта (Характеристики товара). Пример callback функций после выполнения Java Script Готовые скрипты Выгрузки XML/RSS/YML Домены/Domain Почта/E-mail Уведомления Скрытые данные (Системная разметка / Микроразметка) ShortCode (автозамена данных) Конвертация Cookie в GET переменные. Языки Изменение блоков сайта и редактор дизайна Статистика и подключение Google Analytics / Tag Manager Интеграция с «1С», «ERP», CRM-системами и CommerceAPI Продвижение сайтов и SEO Доступ к сайту Кеш

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

Специальная разметка 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 - список статей *
News:
  • news_catalog_page - новость
  • news_catalog_page_incategory - список новостей *
  • news_catalog_page_incategory_menu - Блок/Меню, генерируемый список новостей *

* - у данных объектов списка атрибуты микроразметки добавлены без использования отдельного элемента hotengine-marking.

Пример использования разметки (Отображение даты создания записи + timeConverter)
Code: html
<!--HTML-start-->
<script>
  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).ready(function () {
  $("#hotengine-content-page .hotengine-blog-page-list-block, #hotengine-content-blog .hotengine-blog-page-list-block").each(function () {
  const timestamp = $(this).attr("data-hotengine-marking-timestamp");
  if (timestamp) {
  const t = timeConverter(timestamp);
  const dateHtml = `
  <div class="hotengine_add_date">
  <span class="day">${t.day}</span>
  <span class="month">${t.month}</span>
  <span class="year">${t.year}</span>
  </div>`;
  $(this).find(".contenth_i").prepend(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 type="text/javascript"><!--
  $(function(){
let $search = $('.hotengine-marking[data-hotengine-marking-type="shop_catalog_page_incategory_search"]');
  if (typeof $search !== typeof undefined && $search !== false && $search !== "undefined" && $search.length > 0){
  let $search_query = $search.attr("data-hotengine-marking-search");
  $(`#hotengine-search-searchinput input[name="search"]`).val($search_query);
  }});
  //-->
  </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 type="text/javascript">
  <!-- 
  $(function(){

$(".hotengine-shop-product-list-block .hotengine-shop-product-rating-block").each(function(){
  let $urlr = $(this).parent().find(".hotengine-shop-product-read_more a").attr("href");
  $(this).wrap('<a class="hotengine-shop-product-rating-block-url" href="'+$urlr+'#tabs-review"></a>');
  });
});

function callback_hotengine_ajax_load_products(){
  $(".hotengine-shop-products-list-content-append .hotengine-shop-product-list-block :not([.hotengine-shop-product-rating-block-url]) .hotengine-shop-product-rating-block").each(function(){
  let $urlr = $(this).parent().find(".hotengine-shop-product-read_more a").attr("href");
  $(this).wrap('<a class="hotengine-shop-product-rating-block-url" href="'+$urlr+'#tabs-review"></a>');
  });
  }

function callback_hotengine_shop_products_list_div_button(){
$(".hotengine-shop-products-list-content .hotengine-shop-product-list-block .hotengine-shop-product-rating-block").each(function(){
  let $urlr = $(this).parent().find(".hotengine-shop-product-read_more a").attr("href");
  $(this).wrap('<a class="hotengine-shop-product-rating-block-url" href="'+$urlr+'#tabs-review"></a>');
  });
  }
 
-->
  </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 - старая цена товара (отобржается только если значение указано и не равно нулю)


Бұрын