System markup / Micro-markup

Fa

Hidden data (System markup / Micro-markup)

Special hotengine-marking markup

This markup is present on all pages (pages, shop, article catalog, etc.), as well as in menu items where a data list is used, for example latest articles and news.

This markup contains the following data:
data-hotengine-marking-type= page type
data-hotengine-marking-timestamp= page creation date
data-hotengine-marking-view= number of views

This data is necessary if you want to hide or display additional data on a specific page with a specific page type, or if you need to display the number of views or the date of the material (news, article, product). Additionally, by inspecting this element you can find the record ID (page, article or product) as well as other additional data.

If you need any other data in the markup, let us know.
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">


Additionally, when setting individual delivery parameters, more attributes are added:
data-hotengine-marking-delivery="xxx"
data-hotengine-marking-delivery_price="xxx"
data-hotengine-marking-delivery_note="xxx"


When product dimensions and weight are present, the following attributes are added: 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"



Example script that checks the page for the presence of a markup object and page type «shop_catalog_page» (product card 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);
}

If the page is defined as a product card, then extract the product ID - data-hotengine-marking-shop_catalog_page_id.

Available page types:

Shop:
  • shop_catalog_page - product card
  • shop_catalog_page_incategory - product card on a list page *
  • shop_catalog_page_incategory_search - product card on the search result page
  • shop_catalog_page_cart_products_list - product card in cart
  • pers_shop_catalog_category - shop category
  • shop_catalog_category_collection - collection-category, shop
  • shop_catalog_category_producer - manufacturer-category, shop
  • shop_statistic_sale - sales statistics
  • shop_catalog_page_cart_bought_with - bought with the product (when viewing the cart)
Blog:
  • blog_catalog_page - article
  • blog_catalog_page_incategory - article list *

* - these list objects have micro-markup attributes added without using a separate hotengine-marking element.

Example of using markup (Displaying record creation date + 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": ["January","February","March","April","May","June","July","August","September","October","November","December"],
  "uk": ["January","February","March","April","May","June","July","August","September","October","November","December"],
  "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>

This script finds the markup element, #hotengine-content-blog .hotengine-blog-page-list-block (article from the list) and inserts the date, pre-converted from TIMESTAMP by the timeConverter function, at the beginning of the .contenth_i element.
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;
  }
}




Additionally, the data-hotengine-marking-userid markup with the user ID is added to the <HTML> tag.
If the user is added as a "Client" with their own discount, the data-hotengine-marking-user-group-discount attribute is also added with their discount amount.

Code: html
<html lang="ru" data-hotengine-marking-userid="USERID" data-hotengine-marking-user-group-discount="-10%">
Where:
ru - site language
USERID - user ID
10% - client discount amount.


If the user is added to a Client Group, the ID of the group they belong to is additionally specified.
Code: html
<html lang="ru" data-hotengine-marking-userid="XXXXX" data-hotengine-marking-user-group-discount="-20%" data-hotengine-marking-user-group-id="XXXXX">



Example of additional markup in product variant
Code: html
<ul class="hotengine-shop-product-variety_select" size="1" data-vpid="XXXXX" >
<li value="0" title="Variant" >Variant</li>
<li value="XXXXXX" data-hotengine-variety-disable-add="1" data-hotengine-variety-pricechange="+10" data-hotengine-variety-stockcount="10" class="">Variant 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">Variant 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">Variant 3</li>
</ul>

data-hotengine-variety-disable-add - enable/disable the ability to add variant to cart (1-prohibit, 0-allow). When clicking on a variant that is disabled for adding, nothing happens and the product price and SKU do not change.

data-hotengine-variety-pricechange - data about price change, you can use it to create highlighting of the changed price data (using javascript).
data-hotengine-variety-stockcount - stock quantity

CSS classes for elements:
.hotengine-shop-product-variety_hilight - highlighted object (on mouse hover).

.hotengine-shop-product-variety_hilight-selected - highlighted object that was clicked (active variant).

Additionally, for all child elements of the block with the disabled add-to-cart function [data-hotengine-variety-disable-add="1"], a desaturation style and normal cursor on hover are applied.

Example of markup with a search query in the shop
Code: html
<span class="hotengine-marking" 
data-hotengine-marking-type="shop_catalog_page_incategory_search"
data-hotengine-marking-search="search query"
data-hotengine-marking-searchparam="?&search=search query full string (+sorting and other data)"
data-hotengine-marking-sortparam="additional sorting data"
data-hotengine-marking-smart_search_price_from="price from"
data-hotengine-marking-smart_search_price_to="price to"
data-hotengine-marking-smart_search="search query when using search filter"
data-hotengine-marking-searchresult-num="55">

data-hotengine-marking-searchparam - search query, can be used to create a link to the search results page.
data-hotengine-marking-searchresult-num - number of found products matching the entered query.

Example of markup in shop categories
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 - parent category ID
data-hotengine-marking-pers_shop_catalog_category_child_count - number of subcategories (only for this parent)
data-hotengine-marking-pers_shop_catalog_page_count - number of products in this category
data-hotengine-marking-pers_shop_catalog_page_child_count - number of products in this and child subcategories
data-hotengine-marking-pers_shop_catalog_category_name - category name.
data-hotengine-marking-pers_shop_catalog_category_id - category ID.
Similar markup is used for Manufacturers.

Example of finding markup with a search query in the shop
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 - search query Attention! This is just an example. When placing the search block in the site header, the field value is set automatically at the moment of page rendering.


Additionally, some site blocks have "data-hotengine-..." markup with additional data added.
For example data-hotengine-product-images-count - number of product images.

In the cart, the markup specifies the number of items, total cost and currency (data-hotengine-cart-count, data-hotengine-cart-total-price, data-hotengine-cart-currency)

Additional markup, «data-» is implemented directly in the markup elements, for example, the class="hotengine-categories-list-block" element (category icon block) may contain markup: data-image="1" - image assigned to category, data-child-cat="7" - number of subcategories, data-child-items="5114" - number of products in all subcategories, as well as number of subcategories, data-cid="44" - category ID. (data-cid - shop categories, data-pcid - manufacturer categories, data-ccid - collection categories, data-bcid - article catalog categories)

In sales statistics, when viewing an individual order, micro-markup is also present.

Example of checking for the presence of a markup element
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);
}

Instructions for creating product Sorting in the shop with example

Use the link to automatically create a functional menu "Sorting" or fill in the Block/Menu according to the instructions Script for the functional menu "Sorting".

Instructions for changing the unselected variant message

Variant selection error text:
The message about needing to select a product variant is implemented in a dialog window using a CSS element. You can replace the text in CSS styles:
Code: CSS
:lang(ru) .hotengine-shop_cart_add_error_wrong_variety:after{ content:"You did not select a product variant."; }
: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:"You did not select a product variant."; }
:lang(pl) .hotengine-shop_cart_add_error_wrong_variety:after{ content:"Nie wybrałeś typu produktu."; }

Additionally, before displaying the message, the callback function callback_hotengine_variety_require is called.
When viewing the product list, before displaying the message, the callback function callback_hotengine_variety_require_list($href) is called, where $href is passed the link to the product page.

Example function with a dialog window that is used by default and can be modified:
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>



In the product parameters, you can specify a title above the variant list. The title length is added as a CSS class. For example, if the title is "Select weight", its length is 24 characters. The class hotengine-shop-product-variety-title_24 is specified accordingly. You can use either the text or the length of the title above the variant. For example:
Code: JavaScript
<script>												 
	function callback_hotengine_variety_require(){

if($(".hotengine-shop-product-variety-title_24").length > 0){
  $text = "You did not select weight!";
  } else if($(".hotengine-shop-product-variety-title_38").length > 0){
  $text = "You did not select quantity!";
  } else if($(".hotengine-shop-product-variety-title_26").length > 0){
  $text = "You did not select color!";
  } else {
  $text = "You did not select a variant!";
  }
 
 
 $("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>
A similar function when viewing the product list, callback_hotengine_variety_require_list($href), is supplemented with a link to the product page, and can accordingly be used in the displayed dialog.

Instructions for adding a link to reviews / rating in products


To create a link for Rating icons in the product list, you need to find all list elements and add a link around the rating elements.
Additionally, after loading the product list in a slider or with the "Show more" button, the link addition must be performed again (callback_hotengine_ajax_load_products and 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>



For the link object, you need to set the position, for example 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;}
	


Additional blocks in the cart: If a product has a wholesale price set, a SPAN element .hotengine-shop-product-price_bulk_inform_block is created.
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 - block with the text «Wholesale price» (can be changed via CSS styles, content).
.hotengine-shop-product-price_bulk_inform_block - block with discount information
.hotengine-shop-product-price_bulk_inform_original_price - price
.hotengine-shop-product-price_bulk_inform_original_price_bulk - wholesale price


If a product has a Sale, a SPAN element .hotengine-shop-product-price_sale_inform_block is created.
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 - block with the text «Sale price» (can be changed via CSS styles, content).
.hotengine-shop-product-price_sale_inform_block - block with discount information
.hotengine-shop-product-price_sale_inform_original_price - price
.hotengine-shop-product-price_sale_inform_original_price_old - old product price (displayed only if the value is specified and not zero)


Fa