Jak wstawić wygenerowane menu?

1. Możesz użyć kodu automatycznej wymiany, wprowadzając [MENU:shop_products_slider:htmlonly:pers_cat_id-0:cat_id-0:site-0:start-0:on_page-3:description:button-cart:lazy-0:bestseller:sale]
   Listę wartości możesz wypełnić za pomocą generatora «Widżet z produktami».
2. Możesz wstawić wygenerowany kod do bloku/menu lub strony.
3. Uwaga! Jeśli używasz wielu menu na jednej stronie, nie musisz ponownie wstawiać kodu Java Script i stylów CSS.
   Domyślnie standardowy zestaw funkcji Twojego sklepu zawiera już ten styl JavaScript i CSS. Kod możesz ponownie wstawić tylko wtedy, gdy konieczna jest zmiana jego wyglądu lub funkcjonalności.

W swoim kodzie możesz użyć następujących opcji:

• :pers_cat_id- - ID kategorii (wyświetlą się tylko produkty z tej kategorii w Twoim katalogu). Możliwych jest kilka wartości oddzielonych przecinkami.
• :subcategoriesproduct - Pokaż produkty z podkategorii.
• :site- - ID Twojej witryny, ale wewnątrz Twojej witryny nie możesz go używać
• :producer- - ID producenta (wyświetlą się tylko produkty z tej kategorii producentów, Twój katalog. Możliwych jest kilka wartości oddzielonych przecinkami.
• :producer_country- - kraj produkcji (wyświetlone zostaną tylko produkty z tego kraju produkcji. Wartość tekstowa).
• :collection- - ID kolekcji (wyświetlą się tylko produkty z tej kategorii - kolekcja, Twój katalog). Możliwych jest kilka wartości oddzielonych przecinkami.
• :product_type- - ID typu produktu (wyświetlą się tylko produkty określonego typu. Możliwych jest kilka wartości oddzielonych przecinkami.
• :on_page — Liczba wyświetlanych produktów w sliderze, na przykład 4. Przy użyciu «Auto-szerokość» wartość zostanie zmieniona w zależności od rozmiaru ekranu.
• :start- - początkowa strona slidera, numer od którego ma się zacząć przeglądanie produktów. Przykładowo, jeżeli na stronie wyświetlanych jest 6 produktów, a numerem startowym jest 2, to zostaną wyświetlone produkty od 6 do 12.
• :button-cart - Pokaż przycisk Dodaj do koszyka
• :button-compare - Pokaż przycisk porównania
• :description - Pokaż krótki opis produktu
• :rating-stars - Pokaż ocenę w gwiazdkach
• :favorite-icon - Pokaż ikonę Dodaj do ulubionych
• :variety - Pokaż różnorodność (tylko dla płatnego hostingu)
• :random - Pokaż bez zamawiania według identyfikatora
• :one - Przewiń tylko jeden produkt
• :bestseller - Pokaż tylko Bestsellery
• :discount - Pokaż tylko produkty przecenione
• :sale - Pokaż tylko artykuły promocyjne
• :stock- - Dostępność (wskazać tylko określony stan dostępności)
• :new-products - Pokaż tylko produkty oznaczone jako Nowe
• :reduced-price - Pokaż tylko produkty oznaczone jako Cena obniżona
• :recently-viewed-products - Ostatnio wyświetlane produkty
• :favorite-products - Polecane produkty
• :search- - zapytanie wyszukiwania (wyszukiwanie tekstowe produktów) [można doprecyzować poprzez oddzielenie symbolu «~» - jest równoznaczne z wyjaśnieniem «И»] lub [prawdopodobnie udoskonalenie rozdzielone znakami «||» - jest równoznaczne z wyjaśnieniem «LUB»]
• :products_id- - id produktu (oddzielone przecinkami, bez spacji)
• :lang- - język wyświetlanych artykułów (jeśli nie zostanie określony, użyty zostanie język otwieranej strony)
• :products_synonyms- - towary Synonimy (słowo jest synonimem )
• :mosaic-sides - dzieli blok na dwie części. 0 - Wyłączone, 1 - Włączone, 2 - Włączone + Tytuł nad obrazem, 3 - Włączone + Tytuł nad obrazem + Ikony nad obrazem, 4 - Włączone + Ikony nad obrazem.
  
  Styl CSS dla efektu mozaiki

  Aby produkty zmieniały swój układ lustrzanie co drugi element, dodaj poniższy styl CSS w Edytorze wyglądu:

  Code: CSS

  .hotengine-shop-products-mosaic-sides .hotengine-shop-product-list-block:nth-child(even) { flex-direction: row-reverse; }

  
  Podstawowy styl CSS mozaiki hotengine-template-products-mosaic-style.css
• :lazy - szybsze ładowanie obrazu. 0 — wł., 1 — wył. Domyślnie używana jest wartość z ogólnych ustawień sklepu, jeśli parametr lazy nie jest określony
• :order_by- - Sortowanie. 0 — Według identyfikatora produktu, 4 — Według nazwy, 5 — Według priorytetu, 1 — Według daty, 2 — Według ceny
• :sort_by- - Sortowanie. ASC — rosnąco, DESC — malejąco
• :price_from- - Cena od
• :price_to- - Cena do
• :repeat - powtórz slajdy po zakończeniu listy produktów
• :auto_width - Automatyczna szerokość (liczba wyświetlanych kart jest różna)
• :append - dodawać nowe elementy na końcu listy.
  
  Sposób dodania parametru zależnego od rozmiaru ekranu

  Blok produktów zostanie przełączony w tryb append przy określonych w parametrach wartościach, np. «:append-900x9999», gdzie:

  • 900 — minimalna szerokość ekranu (w pikselach), od której funkcja jest aktywna;
  • 9999 — maksymalna szerokość ekranu (w pikselach), do której funkcja działa (opcjonalnie).

  
  Tryb :append działa tylko w zakresie szerokości ekranu od minimalnej do maksymalnej wartości. W innych przypadkach :append jest wyłączany, a działają inne sposoby wizualnego działania widżetu (scroll, swipe, automatyczne dopasowanie szerokości itp.).
  Jeśli podano tylko pierwszy parametr, np. «:append-900», funkcja jest aktywna dla ekranów o szerokości od 900px wzwyż — zalecany sposób określania parametru.
  
  
  Styl CSS przy użyciu parametru append

  Aby przycisk «dodaj pozostałe produkty» pod listą wyświetlał się na dole, należy dodać następujący styl CSS. #product_list - id bloku z produktami.

  Code: CSS

  #product_list #product_list .hotengine-shop-products-list-div-append .hotengine-shop-products-list-div-button-right:after{ content:'\2026'; color:#b5b5b5; font-family:Arial, Helvetica, sans-serif;}
  #product_list .hotengine-shop-products-list-div-button-left { display: none!important;}

• :carousel - eksperymentalna funkcja karuzeli sów, przewijanie z obsługą przesuwania dotykowego *
  Zmień ustawienia

  
  

  ---

  
  Domyślny rozmiar okna jest określany przez Javascript.
  Możesz określić wiele dodatkowych parametrów, których lista jest dostępna pod tym linkiem: Docs Options.
  Aby ustawić parametr, użyj szablonu:
  :carousel-autoplayTimeout-1000
  :carousel-autoplaySpeed-5000
  :carousel-autoplay-true
  i tak dalej (:karuzela-PARAMETR-WARTOŚĆ).
  
  Alternatywnie opcję można określić za pomocą JavaScript атрибута carousel-...
  data-carousel-autoplayTimeout="1000"
  data-carousel-autoplaySpeed="5000"
  data-carousel-autoplay="true"
  i tak dalej (data-carouserl-PARAMETER="wartość")
  
  
  Możesz także rozszerzyć suwak na górze standardowego suwaka platformy za pomocą JavaScript.
  Utwórz standardowy slider z kodem [MENU...] i dodaj go do bloku .hotengine-shop-products-list-div-append class hotengine-shop-products-list-carousel.
  Пример:

   Code: JavaScript

   <script>
  (function() {
      const initResponsiveLayout = () => {
          const productList = document.querySelector(`#MAIN_ID_PRODUCT_LIST`);
          const appendDiv = document.querySelector(`.hotengine-shop-products-list-div-append`);
  
          const updateLayout = () => {
              if (window.innerWidth < 900) {
                  if (appendDiv) {
                      appendDiv.classList.add(`hotengine-shop-products-list-carousel`); //добавить carousel
                  }
                  if (productList) {
                      const nw = window.innerWidth - 60;
                      productList.style.width = `${nw}px`;
                  }
              } else {
                  if (appendDiv) {
                      appendDiv.classList.remove(`hotengine-shop-products-list-carousel`);
                  }
                  if (productList) {
                      productList.style.removeProperty(`width`);
                  }
              }
          };
  
          updateLayout();
          window.addEventListener(`resize`, updateLayout);
          window.addEventListener(`load`, updateLayout);
      };
  
      if (document.readyState === `loading`) {
          document.addEventListener(`DOMContentLoaded`, initResponsiveLayout);
      } else {
          initResponsiveLayout();
      }
  })();</script>

  ---

• :add-javascript - jeśli nie dodasz tego parametru, to będzie tylko lista produktów (bez stylów javscript i css, które musisz wcześniej wstawić).
  Ta opcja jest przydatna, jeśli chcesz nadać styl własnemu suwakowi. W takim przypadku musisz wstawić JavaScript, kod CSS i krótki kod [MENU...]
• :id- - powiąż ID z głównym DIV. Może służyć do dostosowywania obszaru suwaka. #start_product_list .hotengine-shop-products-list-div-button-right:after{ content:'\2026'; color:#b5b5b5; font-family:Arial, Helvetica, sans-serif;}