Systemowe oznaczenia / Mikrodane

Temu

Ukryte dane (Systemowe oznaczenia / Mikrodane)

Specjalne oznaczenia hotengine-marking

Te oznaczenia znajdują się na wszystkich stronach (stronach, sklepie, katalogu artykułów itp.), a także w pozycjach menu, gdzie używana jest lista danych, np. ostatnie artykuły i aktualności.

Te oznaczenia zawierają następujące dane:
data-hotengine-marking-type= typ strony
data-hotengine-marking-timestamp= data utworzenia strony
data-hotengine-marking-view= liczba wyświetleń

Dane te są niezbędne w przypadku, gdy chcą Państwo ukryć lub wyświetlić dodatkowe informacje na określonej stronie o konkretnym typie, bądź gdy zachodzi potrzeba wyświetlenia liczby wyświetleń lub daty publikacji materiału (aktualności, artykułu, produktu). Ponadto, po przeprowadzeniu inspekcji danego elementu, można zidentyfikować ID wpisu (strony, artykułu lub produktu), a także inne dodatkowe dane.

Jeśli potrzebujesz jeszcze jakichś danych w oznaczeniach, poinformuj nas o tym.
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">


Ponadto, przy ustawianiu indywidualnych parametrów dostawy, dodawane są dodatkowe atrybuty:
data-hotengine-marking-delivery="xxx"
data-hotengine-marking-delivery_price="xxx"
data-hotengine-marking-delivery_note="xxx"


W przypadku podania wymiarów i wagi produktu dodawane są atrybuty: 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"



Przykład skryptu, który sprawdza stronę pod kątem obiektu oznaczeń i typu strony «shop_catalog_page» (strona karty produktu).
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);
}

Jeśli strona jest zdefiniowana jako karta produktu, wyodrębniamy ID produktu - data-hotengine-marking-shop_catalog_page_id.

Dostępne typy stron:

Shop:
  • shop_catalog_page - karta produktu
  • shop_catalog_page_incategory - karta produktu na stronie listy *
  • shop_catalog_page_incategory_search - karta produktu na stronie wyników wyszukiwania
  • shop_catalog_page_cart_products_list - karta produktu w koszyku
  • pers_shop_catalog_category - kategoria sklepu
  • shop_catalog_category_collection - kategoria-kolekcja sklepu
  • shop_catalog_category_producer - kategoria-producent sklepu
  • shop_statistic_sale - statystyka sprzedaży
  • shop_catalog_page_cart_bought_with - z produktem kupują (przy przeglądaniu koszyka)
Blog:
  • blog_catalog_page - artykuł
  • blog_catalog_page_incategory - lista artykułów *

* - dla tych obiektów listy atrybuty mikrodanych zostały dodane bez użycia oddzielnego elementu hotengine-marking.

Przykład użycia oznaczeń (Wyświetlanie daty utworzenia rekordu + 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>

Ten skrypt znajduje element oznaczeń #hotengine-content-blog .hotengine-blog-page-list-block (artykuł z listy) i wstawia Datę, wcześniej przekonwertowaną z TIMESTAMP przez funkcję timeConverter, na początek elementu .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;
  }
}




Ponadto do tagu <HTML> dla użytkowników dodawane jest oznaczenie data-hotengine-marking-userid z ID użytkownika.
Jeśli użytkownik został dodany jako "Klient" z własnym rabatem, dodawana jest również etykieta data-hotengine-marking-user-group-discount z wielkością jego rabatu.

Code: html
<html lang="ru" data-hotengine-marking-userid="USERID" data-hotengine-marking-user-group-discount="-10%">
Gdzie:
ru - język strony
USERID - ID użytkownika
10% - wielkość rabatu klienckiego.


Jeśli użytkownik został dodany do Grupy klientów, dodatkowo podawane jest ID grupy do której należy.
Code: html
<html lang="ru" data-hotengine-marking-userid="XXXXX" data-hotengine-marking-user-group-discount="-20%" data-hotengine-marking-user-group-id="XXXXX">



Przykład dodatkowych oznaczeń w wariancie produktu
Code: html
<ul class="hotengine-shop-product-variety_select" size="1" data-vpid="XXXXX" >
<li value="0" title="Rodzaj" >Rodzaj</li>
<li value="XXXXXX" data-hotengine-variety-disable-add="1" data-hotengine-variety-pricechange="+10" data-hotengine-variety-stockcount="10" class="">Rodzaj 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">Rodzaj 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">Rodzaj 3</li>
</ul>

data-hotengine-variety-disable-add - włącz/wyłącz możliwość dodania wariantu do koszyka (1-zabroń, 0-zezwól). Po kliknięciu na wariant wyłączony z dodawania - nic się nie dzieje, a cena produktu i kod nie ulegają zmianie.

data-hotengine-variety-pricechange - dane o zmianie ceny, możesz ich użyć do stworzenia podświetlenia danych o zmieniającej się cenie (za pomocą javascript).
data-hotengine-variety-stockcount - ilość w magazynie

Klasy CSS dla elementów:
.hotengine-shop-product-variety_hilight - podświetlony obiekt (przy najechaniu myszką).

.hotengine-shop-product-variety_hilight-selected - podświetlony obiekt na który kliknięto (aktywny wariant).

Ponadto, dla wszystkich elementów podrzędnych bloku z wyłączoną funkcją dodawania do koszyka [data-hotengine-variety-disable-add="1"] dodano stylizację odbarwienia i zwykły kursor przy najechaniu.

Przykład etykiety przy zapytaniu wyszukiwania w sklepie
Code: html
<span class="hotengine-marking" 
data-hotengine-marking-type="shop_catalog_page_incategory_search"
data-hotengine-marking-search="oddzielne zapytanie wyszukiwania"
data-hotengine-marking-searchparam="?&search=zapytanie wyszukiwania pełny ciąg (+sortowanie i inne dane)"
data-hotengine-marking-sortparam="dodatkowe dane sortowania"
data-hotengine-marking-smart_search_price_from="cena od"
data-hotengine-marking-smart_search_price_to="cena do"
data-hotengine-marking-smart_search="zapytanie wyszukiwania przy użyciu filtra wyszukiwania"
data-hotengine-marking-searchresult-num="55">

data-hotengine-marking-searchparam - zapytanie wyszukiwania, można użyć do utworzenia linku do strony z zapytaniem.
data-hotengine-marking-searchresult-num - liczba znalezionych produktów według wprowadzonego zapytania.

Przykład etykiety w kategoriach sklepu
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 kategorii nadrzędnej
data-hotengine-marking-pers_shop_catalog_category_child_count - liczba podkategorii (tylko dla tego rodzica)
data-hotengine-marking-pers_shop_catalog_page_count - liczba produktów w tej kategorii
data-hotengine-marking-pers_shop_catalog_page_child_count - liczba produktów w tej i podrzędnych podkategoriach
data-hotengine-marking-pers_shop_catalog_category_name - nazwa kategorii.
data-hotengine-marking-pers_shop_catalog_category_id - ID kategorii.
Podobne oznaczenia są używane dla Producentów.

Przykład wyszukiwania etykiety z zapytaniem w sklepie
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 - zapytanie wyszukiwania Uwaga! To tylko przykład. Przy umieszczaniu bloku wyszukiwania w nagłówku strony wartość pola ustawiana jest automatycznie w momencie renderowania strony.


Ponadto do niektórych bloków strony dodano oznaczenia "data-hotengine-..." z dodatkowymi danymi.
Na przykład data-hotengine-product-images-count - liczba zdjęć produktu.

W koszyku oznaczenia wskazują liczbę produktów, całkowitą wartość i walutę (data-hotengine-cart-count, data-hotengine-cart-total-price, data-hotengine-cart-currency)

Dodatkowe oznaczenia «data-» są zaimplementowane bezpośrednio w elementach znaczników, na przykład element class="hotengine-categories-list-block" (blok ikony kategorii) może zawierać oznaczenia: data-image="1" - wskazano obrazek do kategorii, data-child-cat="7" - liczba podkategorii, data-child-items="5114" - liczba produktów we wszystkich kategoriach wewnętrznych, a także liczba podkategorii, data-cid="44" - ID kategorii. (data-cid - kategorie sklepu, data-pcid - kategorie producentów, data-ccid - kategorie kolekcji, data-bcid - kategorie katalogu artykułów)

W statystyce sprzedaży, przy oddzielnym przeglądaniu zamówienia również występują mikrodane.

Przykład sprawdzania obecności elementu oznaczeń
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);
}

Instrukcja tworzenia Sortowania produktów w sklepie z przykładem

Skorzystaj z linku do automatycznego utworzenia menu funkcjonalnego «Sortowanie» lub wypełnij Blok/Menu według instrukcji Skrypt menu funkcjonalnego «Sortowanie».

Instrukcja zmiany komunikatu o nie wybranej odmianie

Tekst błędu wyboru odmiany:
Komunikat o konieczności wyboru odmiany produktu jest zaimplementowany w oknie dialogowym za pomocą elementu CSS. Napisy możesz zmienić w stylach 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."; }

Ponadto, przed wyświetleniem komunikatu, wywoływana jest funkcja callback callback_hotengine_variety_require.
Podczas przeglądania listy produktów, przed wyświetleniem komunikatu, wywoływana jest funkcja callback callback_hotengine_variety_require_list($href), gdzie jako $href przekazywany jest link do karty produktu.

Przykład funkcji z oknem dialogowym, która jest używana domyślnie i może być zmieniona:
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>



W parametrach produktu można określić tytuł nad listą odmian. Długość tytułu jest dodawana w postaci klasy CSS. Na przykład, jeśli tytuł "Wybierz wagę", to jego długość wynosi 24 znaki. Odpowiednio podawana jest klasa hotengine-shop-product-variety-title_24. Możesz użyć tekstu lub długości tytułu nad odmianą. Na przykład:
Code: JavaScript
<script>												 
	function callback_hotengine_variety_require(){

if($(".hotengine-shop-product-variety-title_24").length > 0){
  $text = "Nie wybrałeś wagi!";
  } else if($(".hotengine-shop-product-variety-title_38").length > 0){
  $text = "Nie wybrałeś ilości!";
  } else if($(".hotengine-shop-product-variety-title_26").length > 0){
  $text = "Nie wybrałeś koloru!";
  } else {
  $text = "Nie wybrałeś odmiany!";
  }
 
 
 $("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>
Analogiczna funkcja przy przeglądaniu listy produktów, callback_hotengine_variety_require_list($href), jest uzupełniona linkiem do karty produktu i odpowiednio może być wykorzystana w wyświetlanym oknie dialogowym.

Instrukcja dodawania linku do opinii / rating w produktach


Aby utworzyć link do ikon Oceny na liście produktów, należy znaleźć wszystkie elementy listy i dodać link wokół elementów oceny.
Ponadto, po załadowaniu listy produktów w sliderze lub przyciskiem "Pokaż więcej", należy ponownie dodać link (callback_hotengine_ajax_load_products i 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>



Dla obiektu linku należy ustawić pozycję, na przykład 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;}
	


Dodatkowe bloki w koszyku: Jeśli produkt ma ustawioną cenę hurtową, tworzony jest element 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 - blok z tekstem «Cena hurtowa» (można zmienić przez style CSS, content).
.hotengine-shop-product-price_bulk_inform_block - blok z informacją o rabacie
.hotengine-shop-product-price_bulk_inform_original_price - cena
.hotengine-shop-product-price_bulk_inform_original_price_bulk - cena hurtowa


Jeśli produkt ma promocję, tworzony jest element 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 - blok z tekstem «Cena promocyjna» (można zmienić poprzez style CSS, content).
.hotengine-shop-product-price_sale_inform_block - blok z informacją o rabacie
.hotengine-shop-product-price_sale_inform_original_price - cena
.hotengine-shop-product-price_sale_inform_original_price_old - stara cena produktu (wyświetlana tylko jeśli wartość jest podana i nie jest równa zero)


Temu