Skrypty do korzystania z platformy

Skrypty dla platformy SaaS Hotlist.biz CMS

Instrukcje korzystania ze skryptów

Możesz skopiować ścieżkę do pliku skryptu lub jego kod i wkleić go do bloku/menu na swojej stronie. Zaleca się umieszczanie wszystkich skryptów w jednym bloku/menu. Taki blok/menu można umieścić w: «Tagi serwisowe przed tagiem Body (Header Meta)», «Nagłówek strony» lub «Stopka strony».

Przy dodawaniu skryptów bezpośrednio poprzez kod (nie przez ścieżkę do pliku), optymalnym sposobem jest użycie narzędzia «Bloki / Menu». Zaznacz «JavaScript / CSS style» i wybierz tryb «JavaScript». Możesz wybrać tryb «JavaScript – defer/async» dla odroczonego ładowania, co dodatkowo poprawia optymalizację strony.

Ta metoda gwarantuje, że w przypadku aktualizacji funkcji platformy lub zmiany nazw parametrów czy klas elementów na stronie, elementy zostaną automatycznie zaktualizowane. Twój kod zostanie również poprawnie przekształcony w plik JS. Ponieważ blok/menu od razu tworzy plik JS, pamiętaj, aby usunąć obudowę «<script type="text/javascript"> </script>».
Do dodawania CSS zaleca się używać «Edytora projektu» — zakładki «Style CSS». Automatycznie optymalizuje kod, usuwając zbędne spacje i puste linie.


Przykład używanych skryptów i funkcji
Ta lista jest przydatna dla programistów. Możesz zmienić wbudowane skrypty i określić wbudowane funkcje callback.

🛍️ SHOP & PRODUCT SCRIPTS

💬 POPUPS & DIALOGS

  • hotengine-script-mircomodal.js - systemowy skrypt okienek wyskakujÄ…cych
  • hotengine-script-popup.js - skrypt okienek wyskakujÄ…cych po klikniÄ™ciu na .hotengine-script-popup
  • hotengine-script-forms-popup.js - Skrypt okienka wyskakujÄ…cego z formularzem do przesyÅ‚ania różnych danych. Formularz jest Å‚adowany i wysyÅ‚any po klikniÄ™ciu na element z klasÄ… «.hotengine-form-constructor». Używany do formularzy utworzonych w sekcji "Moje formularze" (Opinie, Oddzwonienie, Szybkie zamówienie i inne).
  • hotengine-script-dialog-email.js - Okienko wyskakujÄ…ce do wysyÅ‚ania e-maila (wbudowany formularz kontaktowy). Formularz jest Å‚adowany i wysyÅ‚any po klikniÄ™ciu na element z klasÄ… «.hotengine-dialog-email». Podobny formularz znajduje siÄ™ na stronie /ru/feedback.html
  • hotengine-script-dialog-rating.js - okienko wyskakujÄ…ce z recenzjami witryny
  • hotengine-script-dialog-stock-inform.js - okienko wyskakujÄ…ce "Powiadom o dostÄ™pnoÅ›ci"
  • hotengine-script-callback_hotengine_authorize_result.js - wynik autoryzacji

🛒 CART & ORDER

📂 MENUS & NAVIGATION

⚙️ SYSTEM & INTERFACE

📰 BLOG

📅 BOOKING


🎨 Zestaw standardowych stylów CSS.


Style ładowane domyślnie. Te style są używane w podstawowej wersji strony, a na ich bazie stosowane są szablony. Pliki CSS zawierają standardowe style dla przycisków, stron, elementów menu i innych elementów.
Komunikaty tekstowe dotyczące autoryzacji: udane logowanie, aktywacja, błędy.


Wyskakujące okno

Instrukcje, przykład, a także automatyczne generowanie wyskakujących okienek są dostępne pod tym linkiem: Generator wyskakujących okienek

[Przykład przycisku — wyskakujące okienko wideo]

Wyskakujące okienko z formularzem

Instrukcje, przykład, a także automatyczne generowanie wyskakujących okienek z formularzem dostępne są pod tym linkiem: Generator wyskakujących okienek

Zastąpienie tekstu o wyborze odmiany

Komunikat o konieczności wyboru typu produktu realizowany jest w oknie dialogowym za pomocą elementu CSS. Możesz zastąpić napisy w stylach 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."; }


Aby zamienić komunikat o niewybranej odmianie na karcie produktu należy dodać kod funkcji callback_hotengine_variety_require (jeżeli odmiana nie jest zaznaczona, to przed wywołaniem okna dialogowego komunikatu). Funkcja jest uruchamiana, gdy nie wybrano żadnej odmiany.

W karcie produktu wpisz tekst «Nagłówek odmiany». W zależności od tekstu zmienia się wartość dla klasy «.hotengine-shop-product-variety-title». Na przykład, jeśli tekst to «Wybierz wagę:», wówczas klasą tytułu będzie «.hotengine-sklep-produkt-odmiana-tytuł_24». Możesz sprawdzić klasę podczas zmiany wartości, przeglądając kod źródłowy strony, po określeniu nagłówka odmiany.

Kod zastępujący tekst:
Code: html
<script type="text/javascript"> 
  <!-- 
  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 align="center" style="display:block;">${$text}</b><a class="hotengine-shop_cart_add_error_wrong_variety-btn-close" data-micromodal-close onclick="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>

Popup będzie zawierał określony tekst w zmiennej $text.

Podobna funkcja podczas przeglądania listy produktów, callback_hotengine_variety_require_list($href), jest uzupełniona o link do karty produktu, dzięki czemu może być używana w wyświetlonym oknie dialogowym.

Komunikaty po autoryzacji lub aktywacji konta

Aby utworzyć wyskakujące okienko z komunikatem o statusie autoryzacji lub aktywacji, należy utworzyć funkcję callback_hotengine_authorize_result


callback_hotengine_authorize_result($result) - funkcja po autoryzacji użytkownika ($result - wynik wykonania: 1-udane, 2-błąd logowania lub hasła, 3-konto zablokowane, 4-wymagana aktywacja, 5-aktywacja powiodła się, 6-błędny kod Captcha)



Przykład standardowej funkcji, która zostanie wywołana w przypadku braku własnej funkcji:
/templates/scripts/hotengine-script-callback_hotengine_authorize_result.js

Wiadomości tekstowe załadowane stylami CSS:
/templates/styles/css_hotengine_script_callback_hotengine_authorize_result.css

Ładowanie listy produktów z funkcjami «Widżetu produktów» przy użyciu JavaScript

Ładowanie listy produktów przez Ajax:
Generator bloków produktów można załadować za pomocą żądań GET/POST/AJAX. Aby to zrobić, należy wykonać żądanie ze swojej strony (swojej domeny) do strony «/ajax_get_list_shop.php». W żądaniu można określić dodatkowe właściwości wyświetlania produktów. Listę wszystkich możliwych wartości można znaleźć na stronie «Widżet produktów sklepu». Aby poprawnie wyświetlić styl listy produktów, należy dodać opakowanie HTML i elementy nadrzędne, a także przyciski do przewijania listy produktów (do przodu/do tyłu). Przykład takiego opakowania i użycia skryptu pokazano poniżej.


Przykład tworzenia podstawowego środowiska do wyświetlania listy produktów

Korzystając z tego środowiska do wyświetlania listy produktów, można używać skryptów umożliwiających przewijanie listy produktów do przodu i do tyłu, zmianę stylu prezentacji oraz dodawanie dodatkowych efektów — takich jak Scroll, Swipe i inne.

Code: JavaScript

<!-- Kontener listy produktów -->
<div id="someID">
  <div class="hotengine-shop-products-list-div" 
       data-hotengine-shop-products-list-param=":shop_products_slider:htmlonly:start-0:on_page-20:description:button-cart:auto_width:swipe:scroll-9999x8x0:id-someID" 
       data-product_limits="20" data-swipe="1" data-scroll-width="9999" 
       data-scroll-product-add="8" data-scroll-max-products="0">
    <span class="hotengine-shop-products-list-div-button-left hotengine-shop-products-list-div-button" data-product_limits_start_n="0"></span>
    <div class="hotengine-shop-products-list-content"></div>
    <span class="hotengine-shop-products-list-div-button-right hotengine-shop-products-list-div-button" data-product_limits_start_n="0"></span>
  </div>
</div>

<script>
let $param = `:shop_products_slider:htmlonly:start-0:on_page-20:description:button-cart:auto_width:swipe:scroll-9999x8x0:id-someID`;
let $onpage = 20;

$("#someID .hotengine-shop-products-list-content").load(
  `/ajax_get_list_shop.php?n=0&onpage=${$onpage}${(window.location.search.includes("cacheclear")) ? "&cacheclear" : ""}&param=${encodeURIComponent($param)}`,
  function () {
    // Po załadowaniu wywołaj funkcje callback
    if(typeof(callback_hotengine_shop_products_list_div_button) === "function"){ callback_hotengine_shop_products_list_div_button(); }
    if(typeof(callback_hotengine_ajax_load_products_list) === "function"){ callback_hotengine_ajax_load_products_list(); }

if ($(`.hotengine-shop-products-list-div[data-append-replace]`).length) {
    if (typeof $hotengine_shop_product_base_append_replace == "undefined") {
        $.getScript("/templates/scripts/hotengine-script-shop-products-list-append-replace.js?v32")
            .fail(function(jqxhr, settings, exception) {
                console.error("Failed to load script: ", exception);
            });
    } else if (typeof ProductWidgetAppendReplace === "function") {
        ProductWidgetAppendReplace();
    }
};

    if ($(".hotengine-shop-products-list-div .hotengine-shop-products-list-auto_width").length) {
      if(typeof $hotengine_shop_product_base_slider_auto_width === "undefined") {
        $.getScript("/templates/scripts/hotengine-script-shop-products-list-base-slider-autowidth.js?v32")
          .fail(function(){ console.error("Failed to reload auto-width script."); });
      } else if(typeof ProductWidgetAutoWidth === "function") {
        ProductWidgetAutoWidth();
      }
    }
    
    if ($(".hotengine-shop-products-add-count-spinner").length) {
      if (typeof $hotengine_shop_product_count_spinner === "undefined") {
        $.getScript("/templates/scripts/hotengine-script-shop-product-count-spinner.js?v32")
          .fail(function(jqxhr, settings, exception){ console.error("Failed to load script: ", exception); });
      } else if (typeof(callback_hotengine_add_count_spinner) === "function") {
        callback_hotengine_add_count_spinner();
      }
    }

    if($(`.hotengine-shop-products-list-div[data-swipe="1"]`).length) {
      if(typeof $hotengine_shop_product_base_slider_touch === "undefined") {
        $.getScript("/templates/scripts/hotengine-script-shop-products-list-base-slider-swipe.js?v32")
          .fail(function(jqxhr, settings, exception){ console.error("Failed to load script: ", exception); });
      } else if(typeof ProductWidgetSwipe === "function") {
        ProductWidgetSwipe();
      }
    }

    if($(".hotengine-shop-products-list-div[data-scroll-width]").length) {
      if(typeof $hotengine_shop_product_base_slider_scroll === "undefined") {
        $.getScript("/templates/scripts/hotengine-script-shop-products-list-base-slider-scroll.js?v32")
          .fail(function(jqxhr, settings, exception){ console.error("Failed to load script: ", exception); });
      } else if(typeof ProductWidgetScrollProcessBlocks === "function") {
        ProductWidgetScrollProcessBlocks();
      }
    }
  }
);
</script>
    


Funkcje przewijania i efekty wizualne są realizowane za pomocą skryptu JavaScript — hotengine-script-shop-products-list-base-slider.js.






Kod ładowania listy produktów + zastosowanie parametrów Widżetu (stylizacja i dodatkowe funkcje):


/templates/scripts/hotengine-scripts-additional/hotengine-shop-products-list-generated.js


Skrypt tworzy przestrzeń do wyświetlania listy produktów z możliwością włączenia funkcji widżetu produktów: przewijanie produktów, efekty i stylizacja. W tym skrypcie przewidziano wiele konfigurowalnych parametrów — możesz zmienić listę produktów, kategorię, sposób wyświetlania i inne ustawienia. Wszystkie parametry są ustawiane podobnie jak parametry dla «Widżetu z produktami», więc w razie potrzeby można samodzielnie rozszerzyć ich zakres.

Jak zainstalować skrypt?


Możesz albo całkowicie skopiować skrypt i zmienić w nim parametry (są podane w komentarzach z instrukcjami oraz na stronie «Widżet z produktami»). Lub (zalecane) podać parametry oddzielnie i załadować plik przez $.getScript:
Code: JavaScript
<script type="text/javascript">

// ============================
// CONFIGURATION (edit values)
// ============================
// This file defines all the parameters that will be
// used when generating the product block.
// This file is loaded BEFORE the main script
// hotengine-shop-products-list-generated.js
// via $.getScript() to pass variables.
// =============================

// targetInsertSelector: jQuery selector (id/class/tag) AFTER which the product block will be inserted.
// Example: "#product-details" or ".product-page .right-col" or "body" (appends at end).
var targetInsertSelector = "#hotengine-header";

// insertMode: "after" = insert after element (default), "replace" = replace element
var insertMode = "after";

// targetBlockId: ID or Class for the generated product block container.
// Example: "hotengine-shop-products-list-generated"
var targetBlockId = "hotengine-shop-products-list-generated";

// shop_cat_page_id: ID of the current product to SKIP (exclude from results).
var shop_cat_page_id = "";

// products_id: Optional. Comma-separated product IDs or SKUs to SHOW.
// Example: "482626,482624" or "" to omit.
var products_id = "";

// site: Optional numeric site ID. Use if the script is used outside your main site.
// Leave 0 or "" to omit.
var site = 0;

// favorite: 1 => add ":favorite-icon", 0 => do not add.
var favorite = 0;

// variety: 1 => add ":variety", 0 => no.
var variety = 0;

// variety_crop: integer >0 — only sent if >0 (trim variety names length).
var variety_crop = 0;

// lazy_load: 0 = enabled (adds ":lazy-0"), 1 = disabled (no lazy param).
var lazy_load = 0;

// cart_add_count: 0 none, 1 counter block, 2/4 spinner behavior.
var cart_add_count = 2;

// compare_pos: position for "Add to compare" (real values from design).
// 1=icon block; 0=after cart; 4=before cart; 2=after title; 3=bottom
var compare_pos = 1;

// favorite_pos: position for "Add to favorites" (same code meanings).
var favorite_pos = 1;

// onpage: default number of products to request / display.
// Note: if auto_width === 1 it is recommended to set onpage = 1.
var onpage = 3;

// stock: availability filter
// ""=all; 0=in stock; 1=in stock+preorder+check; 2=in stock; 3=preorder; 4=check avail
var stock = 1;

// scroll: whole scroll parameter or empty string.
// Example: "scroll-9999x8x64x3,3" or "" to disable.
var scroll_param = "scroll-9999x8x64x3,3";

// widget_style: 0 = append (default), 1 = list, 2 = swipe
var widget_style = 2;

// auto_width: 1 = enable auto width (recommended onpage=1), 0 = disable
var auto_width = 1;

// lang: optional language code (e.g. "ru","ua","en","pl"). If empty, :lang not added.
var lang = "ru";

// pers_cat_id: optional personal category id (keeps original logic)
var pers_cat_id = 0;


$(document).ready(function(){
  $.getScript("/templates/scripts/hotengine-scripts-additional/hotengine-shop-products-list-generated.js")
    .fail(function(){ console.error("Failed to load main generator script"); });
});

</script>


Zaleca się dodanie tego skryptu za pomocą narzędzia «Bloki / Menu», zaznaczając opcję «JavaScript / CSS style» i wybierając tryb «JavaScript – defer». Taki sposób gwarantuje, że przy zmianie nazw parametrów lub klas elementy zostaną automatycznie zaktualizowane, a Twój kod zostanie poprawnie przekształcony w plik JS. Taki blok menu od razu tworzy plik JS, dlatego koniecznie usuń otoczkę <script type="text/javascript"> </script>

Pokaż produkty powiązane w koszyku (Kupowane razem)

Na podstawie skryptu Ładowanie listy produktów z funkcjami «Widżetu produktów» przy użyciu JavaScript, można załadować listę produktów, która będzie zawierała listę «Kupowane razem».
Uwaga: Przed podłączeniem skryptów można ustawić następujące parametry:
  • window.auto_width = 1; — włącza automatyczną szerokość.
  • window.onpage = 8; — liczba produktów ładowanych przy pierwszym uruchomieniu.
  • window.widget_style = 2; — styl ładowania widżetu.
  • window.lang = "en"; — język wyświetlanych produktów (pozostałe zostaną pominięte; można zostawić puste, aby wyłączyć filtrowanie języka).
Jeśli parametry nie zostaną określone, skrypt automatycznie zastosuje wartości domyślne.
Pełna lista parametrów jest dostępna w instrukcji hotengine-shop-products-list-generated.js powyżej.

Podczas przeglądania koszyka:

Podczas przeglądania koszyka tworzony jest element mikroznaczeń, który zawiera listę «Kupowane razem». Listę takich produktów można wyświetlić w oknie popup lub jako blok produktów.
Umieść kod wyświetlania listy produktów na stronie «cart_send» - «Strona funkcjonalna» - «Koszyk».

Kod dodawania listy podczas przeglądania koszyka (pod przyciskiem «Kontynuuj zakupy»):




Lista będzie wyświetlana tylko wtedy, gdy istnieją produkty powiązane. Dla stylizacji blok otoczony jest jako standardowy blok/menu.

Przykład stylu CSS:
Code: CSS
.menu_bought_with_generated #menu_c .headm:before{ content:"Kupowane razem z wybranymi produktami:"; display:block; text-align:center; line-height:30px;}
.menu_bought_with_generated {margin-top:50px;} .menu_bought_with_generated #menu_c .headm b{display:none;}



Kod okna popup z listą «Kupowane razem» podczas przeglądania koszyka:


Listę takich produktów można wyświetlić w oknie popup.
Umieść kod wyświetlania listy produktów na stronie «cart_send» - «Strona funkcjonalna» - «Koszyk».
Code: JavaScript
<script type="text/javascript" src="/templates/scripts/hotengine-scripts-additional/hotengine-script-additional-bought-with-popup.js"></script>



Okno popup pojawi się tylko, gdy zostaną znalezione produkty powiązane.

.hotengine-bought_with-window-btn-close - ustaw styl przycisku zamykania okna (wyświetlany pod listą produktów w popupie).

Przykład stylu CSS:
Code: CSS
.hotengine-bought_with-window-btn-close:before{ content:"Zamknij";}
.hotengine-bought_with-window-btn-close {
  display:block;
  background:none;
  width:110px;
  line-height:38px;
  height: auto;
  padding: 0px 0px;
  white-space:nowrap;
  background: #4f86b1;
  cursor: pointer;
  transition-delay: 0;
  transition-duration: 0.2s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0, 0, 1, 1);
  border:none; box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
  text-shadow:1px 1px 1px rgba(1, 39, 106, 1);
  color: #fff!important;
  text-decoration: none;
  margin:-10px auto 0px auto;
  text-align: center;
}
.hotengine-bought_with-window-btn-close:hover { background:#24689E; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100);  }


Lista «Kupowane razem» jest również wyświetlana na stronie produktu. Jeśli potrzebujesz popupu lub listy produktów wyświetlanej tylko w koszyku, użyj «Lista produktów do wysyłki mailowej». W takim przypadku zamień «data-hotengine-marking-boughtwith» na «data-hotengine-marking-boughtwith-email»


Kupowane razem - Popup po dodaniu produktu do koszyka


Na podstawie skryptu Ładowanie listy produktów z funkcjami «Widżetu produktów» przy użyciu JavaScript, można załadować listę produktów, która będzie zawierała listę «Kupowane razem».
Po dodaniu produktów do koszyka wykonywana jest funkcja callback «callback_hotengine_cart_plus_after_boughtwith», która zawiera listę «Kupowane razem». Listę takich produktów można wyświetlić w oknie popup lub jako blok produktów.
Funkcję callback_hotengine_cart_plus_after_boughtwith można zastąpić callback_hotengine_cart_plus_after_boughtwith_email, aby wyświetlić tę samą listę w wysyłce mailowej (newsletter produktów).

Okno popup pojawi się tylko, gdy zostaną znalezione produkty powiązane.

.hotengine-bought_with-window-btn-close - ustaw styl przycisku zamykania okna (wyświetlany pod listą produktów w popupie).
Utwórz «Blok/Menu», umieść go w «Stopce» lub w sekcji «Tagi serwisowe» i ustaw wyświetlanie na wszystkich stronach lub tylko na stronach, gdzie istnieje produkt z przyciskiem «Dodaj do koszyka».

Przykład stylu CSS:
Code: CSS
.hotengine-bought_with-window-btn-close:before{ content:"Zamknij";}
.hotengine-bought_with-window-btn-close {
  display:block;
  background:none;
  width:110px;
  line-height:38px;
  height: auto;
  padding: 0px 0px;
  white-space:nowrap;
  background: #4f86b1;
  cursor: pointer;
  transition-delay: 0;
  transition-duration: 0.2s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0, 0, 1, 1);
  border:none; box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
  text-shadow:1px 1px 1px rgba(1, 39, 106, 1);
  color: #fff!important;
  text-decoration: none;
  margin:-10px auto 0px auto;
  text-align: center;
}
.hotengine-bought_with-window-btn-close:hover { background:#24689E; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100);  }


Funkcja po dodaniu produktu do koszyka. Powiadomienie o wysokości rabatu dla kupującego


Funkcja callback_hotengine_cart_plus_after jest wywoływana po dodaniu produktu do koszyka. W tym przykładzie zaimplementowano powiadomienie o wysokości rabatu dla kupującego, jeśli istnieje. Dane pochodzą z mikroznaczenia data-hotengine-cart-discount w koszyku.

Code: html
<script type="text/javascript">
  <!--
  function callback_hotengine_cart_plus_after() {
  const $stick_cart = $(".hotengine-shop-cart-sticker-cart-cart");
  if ($stick_cart.length > 0) {
  const $your_discount = $stick_cart.attr("data-hotengine-cart-discount");
  if ($your_discount !== "" && $your_discount !== undefined) {
  $("#cart").after(`<span class="hotengine-your_discount">${$your_discount}</span>`);
  }
  }
  }
$(function() {
  callback_hotengine_cart_plus_after();
  });
  -->
  </script>

Aby powiadomienie było wywoływane nie tylko po dodaniu produktu do koszyka, należy zduplikować skrypt sprawdzający obecność mikroznaczenia rabatu. W przykładzie wykonano to poprzez dodatkowe wywołanie funkcji callback_hotengine_cart_plus_after(); bez dodawania produktu do koszyka.

Przykład stylu CSS:
Code: CSS
.hotengine-your_discount  { 
    white-space: nowrap;
    position: absolute;
    margin-top: -32px;
    right: 47px;
    background: #f00;
    color: #fff;
    border-radius: 50px 50px 0px 50px;
    line-height: 30px;
    width: 50px;
    opacity: 0.9;
    text-align: center;
  }


Ładowanie listy artykułów za pomocą Javascript


Ajax ładuje listę artykułów:
Generator bloków z artykułami można załadować za pomocą żądania GET/POST/AJAX. Aby to zrobić, musisz wysłać żądanie ze swojej witryny (twoja domena) na stronę «/ajax_get_list_blog.php». Możesz określić dodatkowe właściwości w zapytaniu, aby wyświetlić artykuły. Listę wszystkich możliwych wartości znajdziesz na stronie "Widżet z artykułami". Do poprawnego wyświetlania artykułów należy dodać wrapper HTML oraz elementy nadrzędne, a także przyciski przewijania/kontynuacji listy artykułów (przewijanie do przodu/do tyłu). Przykład takiego opakowania pokazano w skrypcie poniżej.


Code: html
<div class="blog-page-list-AJAXLOAD">
</div>
<script type="text/javascript">
  <!--
  $(function() {
  const $blog_marking = $(`.hotengine-marking[data-hotengine-marking-type="blog_catalog_page"]`);
  if ($blog_marking.length > 0) {
 const $site_id = "XXXX";
  const $blog_cat_id = $blog_marking.attr("data-hotengine-marking-blog_cat_page_catid");
 const $onpage = "4";
  const $param = `:blog_page_slider:htmlonly:cat_id-${$blog_cat_id}:site-${$site_id}:start-0:on_page-${$onpage}:description:append:id-hotengine-blog-page-list-AJAXLOAD`;
 $(".blog-page-list-AJAXLOAD").html(`
  <div id="hotengine-blog-page-list-AJAXLOAD" style="display:none;">
  <div class="hotengine-blog-page-list-div hotengine-blog-page-list-div-append" data-hotengine-blog-page-list-param="${$param}" data-blog_limits="${$onpage}">
  <span class="hotengine-blog-page-list-div-button-left hotengine-blog-page-list-div-button hotengine-blog-page-list-append" data-site-id="${$site_id}" data-blog_limits_start_n="0"></span>
  <span class="hotengine-blog-page-list-content"></span>
  <span class="hotengine-blog-page-list-div-button-right hotengine-blog-page-list-div-button hotengine-blog-page-list-append" data-site-id="${$site_id}" data-blog_limits_start_n="0"></span>
      </div>
  </div>
  `);
 $("#hotengine-blog-page-list-AJAXLOAD .hotengine-blog-page-list-content").load(`/ajax_get_list_blog.php?c=${$site_id}&n=0&onpage=${$onpage}&param=${$param}`, function() {
  $(".hotengine-blog-page-list-content-loading").hide("fast", function() {
  $(".hotengine-blog-page-list-content-loading").remove();
  });
 if ($("#hotengine-blog-page-list-AJAXLOAD .hotengine-blog-page-list-content").not(":empty").length > 0 &&
  $("#hotengine-blog-page-list-AJAXLOAD .hotengine-blog-product-list-block-empty").length === 0) {
  $("#hotengine-blog-page-list-AJAXLOAD").show();
  }
  });
  }
  });
  -->
  </script>

Ten kod ładuje artykuły, na przykład za pomocą «Generatora bloków/menu, suwaka z artykułami». W tym skrypcie ładowanie następuje z zastąpieniem kategorii nadrzędnej listy artykułów, która jest określana za pomocą mikrodanych.
XXXX — ID witryny.
$onpage - ilość artykułów na jednej stronie (slajd)
$blog_cat_id - kategoria katalogu, która w przykładzie jest określona za pomocą mikrodanych z tego otwartego artykułu.
.blog-page-list-AJAXLOAD — blok, w którym ładowane są artykuły.


Ładowanie artykułu przy użyciu JavaScript w formacie JSON

Skrypt do ładowania artykułu w formacie JSON

Artykuły te są dostępne na żądanie /ajax.php?json&blog_cat_p=XX

  • XX - Identyfikator artykułu

Żądanie działa tylko wtedy, gdy na przykład określisz swoją domenę http://example.com/ajax.php?json&blog_cat_p=0


Code: JavaScript
<script type="text/javascript">
function decodeHtml(str)
  {
  let map =
  {
  '&amp;': '&',
  '&lt;': '<',
  '&gt;': '>',
  '&quot;': '"',
  '&amp;#039;': "'"
  };
  return str.replace(/&amp;|&lt;|&gt;|&quot;|&#039;/g, function(m) {return map[m];});
  }
$(function(){
  $.getJSON("/ajax.php?json&blog_cat_p=14675", function(blog){
   if(Object.keys(blog).length > 0){ 
    // full parameters console.log(blog);
    console.log(decodeHtml(blog.blog_cat_page_title_inpage));
    console.log(decodeHtml(blog.blog_cat_page_description));
    console.log(decodeHtml(blog.blog_cat_page_text));
    console.log(decodeHtml(blog.blog_cat_page_datestamp));
   } 
  });
});
</script>


Stylizacja filtra wyszukiwania (ukrywanie listy wartości po kliknięciu)

Jeśli chcesz ukryć/ujawnić wartości filtrów wyszukiwania, możesz użyć skryptu z poniższego przykładu. Skrypt zapisuje ID bloku z listą wartości do Cookies i wyświetla/ukrywa go zgodnie z opcją wybraną przez użytkownika.
Uwaga! Aby skorzystać z filtra wyszukiwania, najpierw utwórz «Typ produktu» i wprowadź wartości dla typu charakterystycznego. Ten skrypt jest zalecany dla «wiele wartości».



Code: html
<script><!--
  /*FILTER STYLE*/
  $(function(){
$("#shop_catalog_product_types_id_ajax .shop_catalog_product_types_block").each(function(){
 if ($.cookie("scptbt"+$(this).attr("data-id"))){ 
  $(this).find(".shop_catalog_product_types_block_title").addClass("scptbt_ishidden");
  $(this).find(".shop_catalog_product_types_block_value").css({"max-height":"0px"});
  }
  })

$(document).on("click","#shop_catalog_product_types_id_ajax .shop_catalog_product_types_block_title",function(){
  let thise = $(this);
  let sptelem = $(this).next(".shop_catalog_product_types_block_value");
  if(sptelem.outerHeight() < 1){
  sptelem.css({"max-height":"unset"});
  thise.removeClass("scptbt_ishidden");
  if ($.cookie("scptbt"+thise.parent().attr("data-id"))){ $.cookie('scptbt' + thise.parent().attr("data-id"), null, {expires: null, path: '/'});	}
  } else {
  sptelem.css({"max-height":"0px"}); 
  thise.addClass("scptbt_ishidden");
  $.cookie('scptbt' + thise.parent().attr("data-id"), true, {expires: null, path: '/'}); 
  }
  
  
  })

})
  /*FILTER STYLE*/
  --></script>


Css styl nagłówka (ikona):

Code: Css

#search_smart_hotengine-search_form_block .shop_catalog_product_types_block_title:after{

position: relative;
    content: "";
    display: inline-block;
    top: -2px;
    left: 10px;
    width: 8px;
    height: 5px;

background:url('/templates/styles/menu_arrow/arrow_shop_filter_en.png') no-repeat;
}
.scptbt_ishidden:after{
 transform: rotate(270deg);
}



Tworzenie własnego sortowania listy produktów


Jeśli chcesz utworzyć własny formularz sortowania produktów, możesz to zrobić, przekazując zmienne GET. Poniżej znajdziesz instrukcję zapisywania wybranego sortowania w COOKIES, a także przykład implementacji sortowania. Aby szybko utworzyć sortowanie, możesz skorzystać z «Menu funkcjonalnego» - «Sortowanie produktów ". Do menu zostanie wstawiony formularz wyszukiwania, a także podstawowe pola do sortowania.


Do sortowania niestandardowego dostępne są następujące parametry GET:
«order_by»:
  • 0 - według identyfikatora produktu
  • 1 - według daty dodania produktu
  • 2 - cena przedmiotu
  • 4 - według nazwy produktu
  • 5 - według priorytetu produktu

«sort_by»:
  • 0 — Malejąco (DESC)
  • 1 — Rosnąco (ASC)

«sort_instock_priority»: (posortowane według priorytetu, pozycje w magazynie są wyższe niż pozycje niedostępne)

  • 0 - ignoruj ​​parametr
  • 1 - najpierw towary w magazynie i na zamówienie, potem te, których nie ma w magazynie. Następnie brane są pod uwagę opcje sortowania określone powyżej.
  • 2 - produkty, które są niedostępne jako pierwsze.

"cena_od" - cena od
"cena_do" - cena do
"producent" - producent (id lub nazwa producenta)
"kolekcja" - kolekcja (ID lub nazwa kolekcji)
"szukaj" - zapytanie wyszukiwania
"smart_search" - dane zapytania wyszukiwania z filtra wyszukiwania

Ponadto wartości, które są brane pod uwagę, jeśli określono wartość niepustą (na przykład «1»):
"shop_sale" - promocyjny,
"shop_new_goods" - nowe pozycje,
"shop_bestsellers" - bestsellery,
"shop_discount" - rabat,
"shop_reduced_price" - Obniżona cena,
"order_by_param" - dodatkowy parametr o dowolnej wartości do stworzenia własnej listy sortującej według nazwy lub wartości.

Gdy GET znajdzie zmienną «sort_by» w adresie otwartej strony, dane sortowania zostaną odpowiednio ustawione. Jeśli strona z listą produktów jest otwarta, wówczas wartości zostaną uzupełnione z linku elementu «.hotengine-pagination-current». Ponadto po otwarciu posortowanej strony zostaną utworzone pliki cookie zapamiętujące opcje wybrane przez użytkownika. Skrypt realizujący tę funkcję, który jest również instalowany podczas tworzenia funkcjonalnego menu sortowania, znajduje się w /templates/scripts/hotengine -script-sort-shop-products.js.


Połączone sortowanie produktów (menu funkcjonalne).


Połączona wersja sortowania pozwala na łączenie kilku kryteriów, takich jak sortowanie według ceny, nowości lub promocji. Jest to wygodne, jeśli chcesz jednocześnie uwzględniać kilka parametrów przy wyświetlaniu produktów.
Przykład połączonego menu sortowania:

  • Sortowanie według ceny: można wybrać rosnąco lub malejąco.
  • Dodatkowe parametry: nowości, promocje, produkty ze zniżką, obniżone ceny, bestsellery.
  • Flaga "Dostępne najpierw": po aktywacji najpierw wyświetlane są produkty dostępne w magazynie.

Aby korzystać z tego sortowania, utwórz funkcjonalne menu «Sortowanie produktów Combo» w sekcji «Moje Bloki/Menu».


Spójrz na przykład tworzenia sortowania z własnymi wartościami.

Można to zrobić za pomocą dodatkowego parametru «order_by_param», którego wybranie spowoduje zmianę wartości pól «order_by», «sort_by» i innych.
Ustawmy jedno pole (#order_by_param) z wyborem opcji i pozostaw liczbę wyświetlanych produktów.


Utwórz «Blok/Menu», lokalizacja «na górze».
Nazwa bloku/menu: hotengine_sort_products
Nagłówek/menu bloku: hotengine_sort_products
Pozycja bloku/menu: Góra
Pokaż blok/menu na stronach: wszędzie
Wprowadź znaki, po wykryciu których wyświetli się blok/menu: (bez spacji)
/pers_shop/ /producer/ /collection/ /shop/

Wprowadź znaki, które, jeśli zostaną znalezione, nie wyświetlają bloku/menu: (bez spacji)
.htm
Tekst menu:
Code: JavaScript
<form id="hotengine-sort-products-generated" name="hotengine-sort-products-generated" method="get" action="">
 <span>

<label>
<select name="order_by_param" id="order_by_param">
<option value="none">Sortować</option>
<option value="lowtohight">Od tanich do drogich</option>
<option value="highttolow">Od drogiego do taniego</option>
<option value="new">Nowy</option>
<option value="sales">Promocyjny</option>
<option value="date">Według daty</option>
</select>
</label>

<div class="hidden">
<select name="shop_new_goods" id="shop_new_goods"><option value=""><option value="1"></select>
<select name="shop_sale" id="shop_sale"><option value=""><option value="1"></select>

 <label>
 <select name="sort_by" id="sort_by"> 
 <option value="ASC">Sortować:</option>
 <option value="ASC">Rosnąco</option>
 <option value="DESC">Malejąco</option>
 </select>
 </label>
<label>
 <select name="order_by" id="order_by"> 
 <option value="5">Sortować:</option>
 <option value="0">Według ID produktu</option>
 <option value="4">Nazwa</option>
 <option value="1">Według daty</option>
 <option value="2">Według ceny</option>
 </select>
 </label>
</div>
<label>
 <select name="NUM_ONPAGE" id="NUM_ONPAGE" onchange="this.form.submit()"> 
 <option value="10">10</option>
 <option value="20">20</option>
 <option value="30">30</option>
 <option value="50">50</option> 
 </select>
 </label>
 <input class="smart_search" name="smart_search" type="hidden" value="">
 <input class="search" name="search" type="hidden" value="">
 </span>
 </form> 
 
 
<script>
  $(function() {
  $(document).on("change", "#order_by_param", function() {
  const $sortForm = $("#hotengine-sort-products-generated");
  const $orderBySelect = $sortForm.find(`select[name="order_by"]`);
  const $sortBySelect = $sortForm.find(`select[name="sort_by"]`);
  const $shopNewGoodsSelect = $sortForm.find(`select[name="shop_new_goods"]`);
  const $shopSaleSelect = $sortForm.find(`select[name="shop_sale"]`);
  
  const selectedValue = $(this).val();
  
  let orderByValue = "5";
  let sortByValue = "ASC";
  let shopNewGoodsValue = "";
  let shopSaleValue = "";
 switch (selectedValue) {
  case "lowtohight":
  orderByValue = "2";
  sortByValue = "ASC";
  break;
  case "highttolow":
  orderByValue = "2";
  sortByValue = "DESC";
  break;
  case "date":
  orderByValue = "1";
  sortByValue = "DESC";
  break;
  case "sales":
  orderByValue = "1";
  sortByValue = "DESC";
  shopSaleValue = "1";
  break;
  case "new":
  orderByValue = "1";
  sortByValue = "DESC";
  shopNewGoodsValue = "1";
  break;
  case "none":
  orderByValue = "5";
  sortByValue = "ASC";
  break;
  }
  
  $orderBySelect.val(orderByValue).prop("selected", true);
  $sortBySelect.val(sortByValue).prop("selected", true);
  $shopNewGoodsSelect.val(shopNewGoodsValue).prop("selected", true);
  $shopSaleSelect.val(shopSaleValue).prop("selected", true);
  $(this).closest("form").submit();
  });
  });
  </script>

 <script type="text/javascript" src="/templates/scripts/hotengine-script-sort-shop-products.js"></script>


CSS styl do sortowania (dodaj w edytorze projektów do stylów css):
Code: CSS
.menu_position_top_000000 #menu_c .headm{ display:none; }
.menu_position_top_000000 #menu_c { border: none; background: none; text-align: right;}
.menu_position_top_000000 #menu_c select { 
 background: transparent; 
 padding: 5px 8px 5px 5px; 
 font-size: 12px;
 line-height: 1;
 border-radius: 2px;
 height: 24px;
 -webkit-appearance: none;
 overflow: hidden;
 background: url(/templates/styles/menu_arrow/arrow-down.svg) no-repeat 95%; background-size: 16px;

 }
 .menu_position_top_000000 #menu_c select[name="NUM_ONPAGE"] { background:none;}
 .menu_position_top_000000 #menu_c span:before{ content:"Sortować:"; display:inline-block; padding: 5px; font-size: 12px; }
 
 @-moz-document url-prefix(){ 
 .menu_position_top_000000 #menu_c select {
  padding:0px!important;
  background:none!important;

 }

}

Gdzie 000000 należy zastąpić identyfikatorem utworzonego menu z kodem rozliczeniowym.



Zmiana pola «order_by_param» spowoduje zmianę wartości sortowania i przesłanie formularza. Do Formularza dodano pola sortowania, w tym «Nowość» i «Promocja». Pola są ukryte, ponieważ wizualnie używana będzie tylko osobna lista «order_by_param» oraz liczba wyświetlanych produktów. Po przesłaniu formularza Wartości zostaną zapisane w PLIKU COOKIE.

Ładowanie wózka po najechaniu


Jeśli chcesz wyświetlić zawartość koszyka po najechaniu kursorem na ikonę koszyka, możesz włączyć tę opcję «Krótkie + Treść po najechaniu myszką» w «Ustawienia», patka «Sklep» - «Projekt wózka». Lub wykonaj połączenie GET pod wskazany adres «/ajax.php?cart&load_cart_ajax»
JavaScript wyświetlić zawartość koszyka:

Code: JavaScript
<script type="text/javascript" src="/templates/scripts/hotengine-script-cart-hover-block.js"></script>


CSS styl:
Code: JavaScript
/*CART HOVER BLOCK*/
#hotengine-cart_menu-hover-block{position:absolute; z-index:99; background:#fff; color:#444; border:1px solid #C7C7C7; padding:20px; display:block; width:50%; display:none; text-align:left;}
#hotengine-cart_menu-hover-block:before{ content:""; height:15px; width:100%; display:block; position:absolute; top:-10px; left:0px; z-index:99999;  }
#hotengine-cart_menu:hover + #hotengine-cart_menu-hover-block{ display:block; }
#hotengine-cart_menu-hover-block:hover{display:block; }
#hotengine-cart_menu-hover-block .hotengine-cart_menu-hover-block-close:after {
    content: "x";
    background: rgb(255,255,255);
    background: radial-gradient(circle,rgba(255,255,255,0) 0%,rgba(182,182,182,1) 100%);
    oveflow: hidden;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    width: 15px;
    height: 15px;
    position: absolute;
    right: 5px;
    top: 5px;
    line-height: 14px;
    text-align: center;
    color: #656565;
    cursor: pointer;
    opacity: 0.8;
    font-size: 9px;
}
/*CART HOVER BLOCK*/

Skrypt wyświetla dodatkowy blok w przypadku znalezienia pozycji w koszyku i najechania na nie kursorem myszy «#hotengine-cart_menu» (koszyk w bloku/menu strony).




Obrazy podrzędne karty produktu

Ładowanie listy zdjęć produktów

Dla każdej karty produktu możesz otrzymać listę osadzonych obrazów w formacie JSON. Aby to zrobić, musisz wysłać zapytanie do strony «/ajax.php?get_shop_images=PATH», gdzie PATH to ścieżka do dowolnego obrazu produktu lub identyfikatora produktu.

Ładowanie listy zdjęć produktów w wyskakującej galerii Colorbox:

Aby dodać ikonę, po kliknięciu pojawi się galeria colorbox, przewijając wszystkie obrazy dostępne w produkcie. Dodaj następujący skrypt do Bloku/Menu:
Code: JavaScript
<script type="text/javascript" defer src="/templates/scripts/hotengine-script-shop-load-images-product.js"></script>


CSS styl ikony:
Code: JavaScript
/*CHILD IMAGES SHOW POPUP IN SHOP LIST*/
.hotengine-shop-product-img-load-list {
    background: url(/templates/styles/mobile/search.png) no-repeat center center;
    width: 18px;
    height: 18px;
    position: relative;
    z-index: 5;
    background-size: contain;
}
/*CHILD IMAGES SHOW POPUP IN SHOP LIST END*/

Wyświetlaj obrazy potomne na liście produktów za pomocą przycisków przewijania listy obrazów:

Jeśli chcesz wyświetlić obrazy potomne na liście produktów, włącz opcję «Zainstalowane obrazy na liście produktów». w ustawieniach sklepu, w zakładce «Widok produktu / Zakładki / Odmiany». Dodaj następujący skrypt do bloku/menu:
Code: JavaScript
<script type="text/javascript" defer src="/templates/scripts/hotengine-script-shop-images-child-in-list.js"></script>


CSS styl:
Code: JavaScript
/*CHILD IMAGES SHOW IN SHOP LIST*/
.hotengine-imgchenge { position:absolute; z-index:2; padding:15px; font-size:20px; display:inline-block;  background: #858585;
    color: #fff;
    border-radius: 50%;
    height: auto;
    width: auto; line-height:20px; top: 50%; cursor:pointer; margin:-30px 5px 5px 5px; opacity:0;}
.hotengine-imgchenge::after{ 
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    font-size: 30px;
    line-height: 23px;
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.hotengine-imgchenge-left {left:0px;} 
.hotengine-imgchenge-left::after {
    content: "\2039";
}
.hotengine-imgchenge-right {right:0px;} 
.hotengine-imgchenge-right:after{content:"\203A";}
.hotengine-shop-product-list-block:hover .hotengine-imgchenge{ opacity:1; -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;}
/*CHILD IMAGES SHOW IN SHOP LIST END*/

Jeśli produkt zawiera obrazy potomne, skrypt wyświetla przyciski do ich przewijania, do przodu i do tyłu.

Wyświetl obrazy podrzędne na liście produktów: Wymiana obrazu po najechaniu kursorem:

Jeśli chcesz wyświetlić obraz dziecka po najechaniu kursorem na listę produktów, włącz opcję «Zainstalowane obrazy na liście produktów». w ustawieniach sklepu, w zakładce «Widok produktu / Zakładki / Odmiany». Dodaj następujący skrypt do Bloku/Menu:
Code: JavaScript
<script type="text/javascript" defer src="/templates/scripts/hotengine-script-shop-images-child-in-list-hover.js"></script>


Skrypt menu rozwijanego

Skrypt menu rozwijanego (domyślnie)

Domyślnie można dostosować sposób wyświetlania elementów podrzędnych w menu głównym. Można to zrobić w «Edytorze projektu», w zakładce «Menu główne» lub podczas zmiany elementów menu głównego w sekcji «Moje bloki/menu».

Podczas zmiany parametrów do elementu «id="hotengine-mainmenu"» zostaną dodane odpowiednie klasy.

  • «.hotengine-mainmenu-dropdown-default» - listy rozwijane domyślnie
  • «.hotengine-mainmenu-categories-popup» - wyskakujące okienko z pozycjami menu na całą szerokość strony
  • «.hotengine-mainmenu-categories-column» – rozwijane okno z pozycjami menu na całej szerokości strony
W celu poprawnego użycia skryptów elementom listy zawierającym podpozycje przypisywana jest klasa «.hotengine-mainmenu-dropdown».
Wyłączając te skrypty w opcjach menu głównego lub usuwając powyższe klasy, możesz ustawić własny kod zdarzenia lub style CSS po najechaniu myszką.

Poniżej przedstawiono przykłady skryptów, które aktywują te elementy podrzędne listy rozwijanej dla menu głównego i są domyślnie wbudowane.
Domyślne menu rozwijane
Code: JavaScript
<script type="text/javascript">
$(function(){
if(!$(".hotengine-mainmenu-categories-popup").length && !$(".hotengine-mainmenu-categories-column").length && $(".hotengine-mainmenu-dropdown-default").length && $("#hotengine-mainmenu .hotengine-mainmenu-dropdown").length){ 
if(typeof $hotengine_mainmenu_categories_dropdown == "undefined"){
$.getScript("/templates/scripts/hotengine-script-mainmenu-categories-dropdown.js"); 
}
}
});
</script>

Wyskakujące okno
Code: JavaScript
<script type="text/javascript">
$(function(){
if($(".hotengine-mainmenu-categories-popup").length && $("#hotengine-mainmenu .hotengine-mainmenu-dropdown").length){
if(typeof $hotengine_mainmenu_categories_popup == "undefined"){
$.getScript("/templates/scripts/hotengine-script-mainmenu-categories-popup.js");
}
}
});
</script>

Zrzucanie okna
Code: JavaScript
<script type="text/javascript">
$(function(){
if($(".hotengine-mainmenu-categories-column").length && $("#hotengine-mainmenu .hotengine-mainmenu-dropdown").length){ 
if(typeof $hotengine_mainmenu_categories_popup_column == "undefined"){
$.getScript("/templates/scripts/hotengine-script-mainmenu-categories-popup-column.js"); 
}
}
});
</script>

Skrypt po załadowaniu Automatyczne opisy

Skrypt dodawania przycisku «Kup» po załadowaniu Automatyczne opisy na karcie produktu

Jeśli korzystasz z autoopisów w krótkiej formie, po kliknięciu «Czytaj więcej» możesz dodać przycisk «Kup» oraz cenę.
Po załadowaniu tekstu zostanie wykonana funkcja wywołania zwrotnego «callback_hotengine_shop_autodescription_readmore».

Code: JavaScript
<script type="text/javascript">
function callback_hotengine_shop_autodescription_readmore($id, $job) { 
if ($job === "load") {
let clone = $(".hotengine-shop-product-offerdetails .hotengine-shop-product-cart_icon").clone();
let priceblock = $(".hotengine-shop-product-offerdetails .hotengine-shop-product-price_box").clone();
$(`.hotengine-store-autodescription-block .hotengine-store-autodescription-list-block[data-hotengine-marking-id="${$id}"] .hotengine-store-autodescription-fulltext`).append([priceblock, clone]);
}
}
</script>

JSON ładowanie towarów

Skrypt do ładowania karty produktu w formacie JSON

Dane karty produktu dostępne na życzenie /ajax.php?json&shop_products

Podczas rozładunku towaru możesz określić opcje sortowania i filtrowania według następujących parametrów:
  • id - identyfikator karty produktu (jedna lub więcej wartości oddzielonych przecinkami).
  • pers_shop_cat_page_catid - identyfikator kategorii sklepu (jedna lub więcej wartości oddzielonych przecinkami)
  • producer - producent (jedna lub więcej wartości oddzielonych przecinkami)
  • collection - kolekcja (jedna lub więcej wartości oddzielonych przecinkami)
  • sort_by - sortowanie
  • order_by - sortowanie
  • sort_instock_priority - priorytet sortowania
  • price_from - cena od
  • price_to — cena do
  • stock - dostępność

Żądanie działa tylko na przykład z Twoją domeną http://example.com/ajax.php?json&shop_products&id=0


Code: JavaScript
<script type="text/javascript">
function decodeHtml(str)
  {
  let map =
  {
  '&amp;': '&',
  '&lt;': '<',
  '&gt;': '>',
  '&quot;': '"',
  '&amp;#039;': "'"
  };
  return str.replace(/&amp;|&lt;|&gt;|&quot;|&#039;/g, function(m) {return map[m];});
  }
$(function(){
  $.getJSON("/ajax.php?json&shop_products&id=12345,12346", function(offers){
   if(Object.keys(offers).length > 0){ 
    // full parameters console.log(offers);
    $.each( offers.offers, function(z, items){ 
      $.each(items, function(i, item){ 
        console.log(decodeHtml(item.description)); //show description with htmldecode
        console.log(decodeHtml(item.text)); //show text with htmldecode
      });
    });
   } 
  });
});
</script>

Ukrywanie/pokazywanie cech w opisie produktu

Ukryj/pokaż funkcje w opisie produktu

W karcie produktu dostępne jest wyświetlanie Charakterystyki. Blok może zawierać długą listę, więc możesz użyć skryptu, aby ukryć niektóre cechy. Aby to zrobić, utwórz blok/menu i wklej następujący skrypt:
Code: JavaScript
<script type="text/javascript" defer src="/templates/scripts/hotengine-script-hide-properties.js"></script>

Skrypt można zmienić, określając liczbę domyślnie wyświetlanych pól. Aby to zrobić, skopiuj Skrypt z pliku i wklej go do Bloku/Menu.

Styl css przycisku:
Code: JavaScript
/*SHOW/HIDE PROPERTIES*/
.shop_catalog_product_properties_block_showblock{text-align:left; margin-bottom:40px;}
.shop_catalog_product_properties_block_showblock:before{
    content: "Pokaż wszystkie cechy"!important;
    white-space: nowrap;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    height: auto;
    border-radius:0px;
    margin: 5px auto 5px auto;
    font-size: 15px;
    padding: 4px 4px;
    border-bottom: 1px dashed #666666;
    margin-left:19px;
    display: inline-block;
}
html:lang(en) .shop_catalog_product_properties_block_showblock:before{
    content: "Show all characteristics"!important;
}
html:lang(ru) .shop_catalog_product_properties_block_showblock:before{
    content: "Показать все характеристики"!important;
}
html:lang(uk) .shop_catalog_product_properties_block_showblock:before{
    content: "Показати всі характеристики"!important;
}
html:lang(pl) .shop_catalog_product_properties_block_showblock:before{
    content: "Pokaż wszystkie cechy"!important;
}

html:lang(en) .shop_catalog_product_properties_block_showblock.visible:before{
    content: "Hide"!important;
}
html:lang(ru) .shop_catalog_product_properties_block_showblock.visible:before{
    content: "Скрыть"!important;
}
html:lang(uk) .shop_catalog_product_properties_block_showblock.visible:before{
    content: "Приховати"!important;
}
html:lang(pl) .shop_catalog_product_properties_block_showblock.visible:before{
    content: "Ukrywać"!important;
}


.shop_catalog_product_properties_block_showblock:hover:before{
    color:#008fc3;
    border-color: #008fc3;
}
/*SHOW/HIDE PROPERTIES END*/


Dodawanie informacji o dostawie do karty produktu za pomocą Ajax


Zalecana metoda dodawania informacji o dostawie - ładowanie informacji za pomocą Ajax z wcześniej utworzonej strony. Mechanizm ten pozwoli uniknąć indeksowania powtarzającego się tekstu na wszystkich stronach kart produktów. Na początek należy utworzyć stronę. Na przykład o nazwie «delivery_info». Można to zrobić w sekcji „Moje strony”. Teraz rozważymy opcje ładowania tej strony do karty produktu.

Dodawanie informacji o dostawie do zakładki.

W karcie produktu dostępne jest wyświetlanie zakładek. Aby utworzyć własną zakładkę i wyświetlić tekst o dostawie po przejściu do zakładki, należy stworzyć skrypt. W tym celu utwórz Blok/Menu i wstaw następujący skrypt:
Code: JavaScript
$(document).ready(function () {
$('.hotengine-shop-content-tabs-block').before(`<input type="radio" id="button_tabs-8" name="button_tab"><label for="button_tabs-8">Dostawa</label>`);

 let $l = $("meta[http-equiv='content-language']").attr("content");
  const languageMap = {
  "uk": "ua",
  };
  $l = languageMap[$l] || $l;

 $('.hotengine-shop-content-tabs-block').append('<div id="tabs-8"></div>');
  $('#button_tabs-8, label[for="button_tabs-8"]').on('click change', function () {
  if ($('#button_tabs-8').is(':checked')) {
  let $href = "/"+$l+"/delivery_info.htm";
  let $content_block = '#tabs-8';
  if($($content_block).html()==""){
  $($content_block).html('<div class="loading" align="center"><span class="loading-spin"></span></div>');
 $.ajax({ 
  type: "GET",
  dataType: "html",
  url: "/ajax.php",
  data: { p: $href },
  timeout: 20000,
  beforeSend: function() {
  $(".loading").show(400);
  },
  success: function(data) {
  $(".loading").fadeOut(300, function() {
  $(".loading").remove();
  $($content_block).html(data);
  });
  }
 });
  }
  }
  });
  });

Przed zapisaniem Bloku/Menu, upewnij się, że zaznaczone jest pole - JavaScript. Pokaż Blok/Menu na stronach: «Tylko na stronach Sklepu». Wprowadź symbole, których wykrycie spowoduje wyświetlenie Bloku/Menu: «.htm». Ten skrypt stworzy zakładkę, a po kliknięciu załaduje dane z wcześniej utworzonej strony. Język załadowanej strony odpowiada językowi, w którym przeglądana jest karta produktu.


Dodawanie informacji o dostawie za pomocą przycisku w oknie popup.

Podobnie, używając skryptu, możesz ustawić zdarzenie do utworzenia przycisku. Po kliknięciu załadowana zostanie wcześniej stworzona strona.
Code: JavaScript
$(document).ready(function () {
  let $l = $("meta[http-equiv='content-language']").attr("content");
 const languageMap = {
  "uk": "ua",
  };
 $l = languageMap[$l] || $l;
 
 const deliveryTextMap = {
  ru: "Доставка",
  pl: "Dostawa",
  en: "Delivery",
  ua: "Доставка",
  fr: "Livraison",
  de: "Lieferung",
  es: "Entrega"
  };
 const deliveryText = deliveryTextMap[$l] || "Delivery";
 
 let $href = "/" + $l + "/delivery_info.htm";
 
 $(".hotengine-shop-product-offerdetails").after(
  `<a class="delivery_button hotengine-script-popup" 
  target="_blank" 
  data-remove-on-close="1" 
  data-iframe="14" 
  href="${$href}" 
  data-title="${deliveryText}" 
  data-header-fix="1" 
  data-auto-width="320" 
  data-auto-height="320" 
  data-max-width="800" 
  data-max-height="800" 
  data-mobile-width="320" 
  data-unset-height="1">${deliveryText}</a>`
  );
  });



Dynamiczna zmiana ceny podczas rezerwacji


Dodawanie napiwków podczas rezerwacji

Oto przykład dodawania napiwków przy dokonywaniu rezerwacji.

  1. W formularzu rezerwacyjnym (kreator formularzy) należy dodać dwa pola:
      - form_tips — lista select do wyboru napiwku. Tekst opcji może być 5%, 10%, 20%, a wartości 5, 10, 20.
      - form_price_no_tip — ukryte pole do przechowywania ceny bazowej bez napiwków.
  2. Pole form_price_no_tip powinno być typu hidden, aby użytkownik go nie widział, ale skrypt mógł go używać do obliczeń.
  3. Następnie utwórz blok/menu z Twoim skryptem callback_hotengine_booking_form, który będzie obsługiwał zmiany napiwków i przeliczał całkowitą cenę.
  4. Umieść ten blok na wszystkich stronach, gdzie znajduje się formularz rezerwacji, aby dynamiczne obliczanie ceny działało poprawnie wszędzie.

Skrypt do obliczania całkowitej ceny.

Utwórz blok/menu i wstaw poniższy skrypt:
Code: JavaScript
function callback_hotengine_booking_form(value) {
  if (value === 9) {
  var $form = $("#dialog-booking-modal-content form");
 if ($form.length === 0) {
  console.log("no form found");
  return;
  }
 // Get current booking_data
  const bookingDataText = $(`textarea[name="booking_data"]`).val();
  let bookingData = {};
 if (bookingDataText) {
  try {
  bookingData = JSON.parse(bookingDataText);
  } catch (e) {
  console.error("JSON parse error: ", e);
  return;
  }
  }
 // --- 1. Save initial prices if not already stored ---
  if (!bookingData.bookingData?.selectedFormPrice_BEFORE) {
  bookingData.bookingData.selectedFormPrice_BEFORE = bookingData.bookingData?.selectedFormPrice || "-";
  }
  if (!bookingData.bookingData?.form_price_BEFORE) {
  bookingData.bookingData.form_price_BEFORE = bookingData.bookingData?.form_price || "-";
  }
 // --- 2. Use reserved values as the base ---
  let baseTotalPrice = bookingData.bookingData.form_price_BEFORE;
 // --- 3. Set the initial price in #form_price_no_tip ---
  $("#form_price_no_tip").val(baseTotalPrice);
 // --- 4. Handle tip changes ---
  $(`#form_tips`).change(function () {
  const tipValue = $(this).val();
 // If tip is "-", 0, or negative → revert to base values
  if (tipValue === "-" || tipValue === "0" || parseInt(tipValue, 10) <= 0) {
  const baseFormPrice = bookingData.bookingData.selectedFormPrice_BEFORE;
  const baseTotalPrice = bookingData.bookingData.form_price_BEFORE;
 const updatedBookingDataArray = {
  ...bookingData.bookingData,
  selectedFormPrice: baseFormPrice,
  form_price: baseTotalPrice
  };
 const updatedBookingData = { bookingData: updatedBookingDataArray };
  const updatedBookingDataJSON = JSON.stringify(updatedBookingData);
 // Update hidden field and displayed price
  $(`textarea[name="booking_data"]`).remove();
  $form.append(`<textarea name="booking_data" class="hidden">${updatedBookingDataJSON}</textarea>`);
  $(".booking-text-form-price span").text(baseTotalPrice);
  return;
  }
 const tipPercentage = parseInt(tipValue, 10);
 // Get reserved prices
  let baseFormPrice = bookingData.bookingData.selectedFormPrice_BEFORE;
  let baseTotalPrice = bookingData.bookingData.form_price_BEFORE;
 // --- 5. Extract numeric value and currency ---
  let priceMatch = baseFormPrice.match(/^([\d.]+)\s?(\D+)?$/);
  let totalMatch = baseTotalPrice.match(/^([\d.]+)\s?(\D+)?$/);
 if (!priceMatch || !totalMatch) {
  console.error("Failed to extract price values");
  return;
  }
 let baseFormPriceValue = parseFloat(priceMatch[1]);
  let baseTotalPriceValue = parseFloat(totalMatch[1]);
  let currency = priceMatch[2] || "$";
 // --- 6. Calculate new prices with tip percentage ---
  let newFormPrice = (baseFormPriceValue * (1 + tipPercentage / 100)).toFixed(2) + "" + currency;
  let newTotalPrice = (baseTotalPriceValue * (1 + tipPercentage / 100)).toFixed(2) + "" + currency;
 // --- 7. Update JSON data ---
  const updatedBookingDataArray = {
  ...bookingData.bookingData,
  selectedFormPrice: newFormPrice,
  form_price: newTotalPrice
  };
 const updatedBookingData = { bookingData: updatedBookingDataArray };
  const updatedBookingDataJSON = JSON.stringify(updatedBookingData);
 // --- 8. Update hidden field and displayed price ---
  $(`textarea[name="booking_data"]`).remove();
  $form.append(`<textarea name="booking_data" class="hidden">${updatedBookingDataJSON}</textarea>`);
  $(".booking-text-form-price span").text(newTotalPrice);
  });
  }
  }


Skrypt modyfikuje dane JSON zawierające całkowitą cenę wybranego slotu rezerwacyjnego.

Dynamiczna zmiana ceny podczas składania zamówienia


Dodawanie kwoty do całkowitej ceny zamówienia w koszyku

Możesz użyć ukrytego pola «form_price_append», aby dodać określoną kwotę do całkowitej ceny w koszyku. Na przykład, jeśli 5 produktów kosztuje 100$, a chcesz dodać jeszcze 50$, wpisz tę wartość w «form_price_append».

Pole można utworzyć na dwa sposoby:
  • przez edytor formularzy w ustawieniach sklepu, na zakładce „Checkout” w sekcji „Dodaj pola do formularza zamówienia”;
  • lub programowo za pomocą skryptów, które dynamicznie zmieniają jego wartość.
Pozwala to uwzględnić napiwki, dodatkowe usługi, produkty ekskluzywne lub inne dopłaty, przy jednoczesnym poprawnym wyświetlaniu całkowitej ceny w koszyku.

Skrypt dodający pole «form_price_append» i dodatkową dopłatę

Utwórz funkcjonalną stronę «Koszyk» i dodaj w treści następujący kod:
Code: JavaScript
<script>
$(document).ready(function() {
  const $form = $("#hotengine-shop-cart-form");
  if (!$form.length) return;
 // --- Add hidden append field if missing ---
  if ($form.find(`input[name="form_price_append"]`).length === 0) {
  $form.append(`<input type="hidden" name="form_price_append" value="0">`);
  }
  const $appendField = $form.find(`input[name="form_price_append"]`);
 // --- Add temporary element for calculations ---
  if ($form.find(`.hotengine-shop-product-price_before_append`).length === 0) {
  $form.append(`<span class="hotengine-shop-product-price_before_append" style="display:none;"></span>`);
  }
  const $tempPrice = $form.find(`.hotengine-shop-product-price_before_append`);
 // --- Add block for storing data via attributes ---
  if ($form.find(`.hotengine-shop-cart-cart_order_price_append`).length === 0) {
  $(`.hotengine-shop-cart-cart_order_price`)
  .after(`<div class="hotengine-shop-cart-cart_order_price_append"></div>`);
  }
  const $infoAppend = $(`.hotengine-shop-cart-cart_order_price_append`);
 // --- Save base price if not already ---
  const $priceNumber = $(`.hotengine-shop-cart-cart_order_price .hotengine-shop-product-price_number`);
  if (!$priceNumber.data(`base-price`)) {
  $priceNumber.data(`base-price`, parseFloat($priceNumber.text()) || 0);
  }
 // --- Price formatting function ---
  const formatPrice = (price) => Number.isInteger(price) ? price : price.toFixed(2);
 // --- Main update function ---
  const updateCartPriceAppend = () => {
  const appendVal = $appendField.val().trim();
  const basePrice = $priceNumber.data(`base-price`);
  let newPrice = basePrice;
 if (appendVal && appendVal !== "0") {
  // Handle percentage
  if (appendVal.indexOf("%") > -1) {
  const percent = parseFloat(appendVal.replace("%",""));
  if (!isNaN(percent)) newPrice = basePrice * (1 + percent / 100);
  } else {
  const fixed = parseFloat(appendVal);
  if (!isNaN(fixed)) newPrice = basePrice + fixed;
  }
  }
 // Update temporary element
  $tempPrice.text(formatPrice(newPrice));
 // Update price in cart
  $priceNumber.text(formatPrice(newPrice));
 // Update data attributes only
  $infoAppend.attr({
  "data-base": formatPrice(basePrice),
  "data-append": appendVal || 0,
  "data-new": formatPrice(newPrice)
  });
  };
 // --- Event: recalc on change and page load ---
  $appendField.on("input change", updateCartPriceAppend);
 // --- Example: set additional +1000 on page load ---
  $appendField.val("1000").trigger("change"); // additional price for example
  });
</script>

Na przykład dodano kwotę 1000.

Wyświetlanie najnowszej ceny hurtowej na liście produktów


Jeśli chcesz wyświetlić aktualną cenę hurtową (czyli minimalną) podczas wyświetlania listy produktów, możesz użyć następującego stylu CSS:
Code: CSS
.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block .hotengine-shop-product-price_bulk, .hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block .hotengine-shop-product-price_bulk_moq { display: none; }
.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block .hotengine-shop-product-price_bulk:nth-last-of-type(2) { display: inline-block; }

.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block:hover{border-color:#f96013;}
.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block:hover .hotengine-shop-product-price_bulk { color:#f96013;}
.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block:hover {color:#f96013; }

Podobnie, aby wyświetlić tylko pierwszą cenę (maksymalną):
Code: CSS
.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block .hotengine-shop-product-price_bulk, .hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block .hotengine-shop-product-price_bulk_moq { display: none; }
.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block .hotengine-shop-product-price_bulk:first-child, .hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block .hotengine-shop-product-price_bulk_moq:first-child {display:inline-block;}

.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block:hover{border-color:#f96013;}
.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block:hover .hotengine-shop-product-price_bulk { color:#f96013;}
.hotengine-shop-product-list-block .hotengine-shop-product-price_bulk_block:hover {color:#f96013; }