Tylko administratorzy mogą wejść do centrum administracyjnego. Zaloguj się

Widżety HTML

Widżety HTML«Widget HTML» - to zestaw niezależnych elementów HTML do wstawienia na strony serwisu.Dodatkowe bloki gotowych elementów i ikon są dostępne podczas edycji stron, po kliknięciu przycisku «Biblioteka bloków» lub na stronie Biblioteka bloków

Accordion

Accord 1

Akordeon to interfejs, który pozwala użytkownikowi wyświetlać i ukrywać zawartość, klikając nagłówki.
Accord 2

Akordeon to interfejs, który pozwala użytkownikowi wyświetlać i ukrywać zawartość, klikając nagłówki.
Accord 3

Akordeon to interfejs, który pozwala użytkownikowi wyświetlać i ukrywać zawartość, klikając nagłówki.

Aby wstawić ten blok, skopiuj kod z pola poniżej i wklej go na wymaganej stronie:

<div class="hotlist-html-widget-accordion">
    <ul>
      <li>
        <p>Accord 1</p>
        <div>
          Akordeon to interfejs, który pozwala użytkownikowi wyświetlać i ukrywać zawartość, klikając nagłówki.
        </div>
      </li>
      <li>
        <p>Accord 2</p>
        <div>
          Akordeon to interfejs, który pozwala użytkownikowi wyświetlać i ukrywać zawartość, klikając nagłówki.
        </div>
      </li>
      <li>
        <p>Accord 3</p>
        <div>
          Akordeon to interfejs, który pozwala użytkownikowi wyświetlać i ukrywać zawartość, klikając nagłówki.
        </div>
      </li>
      
    </ul>
  </div>
</div>

header.addEventListener(`click`, function(){
        const content = this.nextElementSibling;
        if(!content) return;

if(content.style.display === "block"){
          content.style.display = "none";
          this.dataset.active = "0";
        } else {
          content.style.display = "block";
          this.dataset.active = "1";
        }

initAccordion(document);

</script>

Tabs

Tab 1 Tab 2 Tab 3 Tab 4

Karty to interfejs, który pozwala użytkownikowi przełączać się między różnymi treściami i wyświetlać je, klikając nagłówki.

Karty to interfejs, który pozwala użytkownikowi przełączać się między różnymi treściami i wyświetlać je, klikając nagłówki. #2

Karty to interfejs, który pozwala użytkownikowi przełączać się między różnymi treściami i wyświetlać je, klikając nagłówki. #3

Karty to interfejs, który pozwala użytkownikowi przełączać się między różnymi treściami i wyświetlać je, klikając nagłówki. #4

Aby wstawić ten blok, skopiuj kod z pola poniżej i wklej go na wymaganej stronie:

<div class="hotlist-html-widget-tabs" data-tabs="1">
  <input type="radio" id="button_tabs-1" name="button_tab" checked="checked">
  <label for="button_tabs-1">Tab 1</label>

<div class="hotlist-html-widget-tabs-block">
    <div id="tabs-1">Karty to interfejs, który pozwala użytkownikowi przełączać się między różnymi treściami i wyświetlać je, klikając nagłówki.</div>
    <div id="tabs-2">Karty to interfejs, który pozwala użytkownikowi przełączać się między różnymi treściami i wyświetlać je, klikając nagłówki. #2 </div>
    <div id="tabs-3">Karty to interfejs, który pozwala użytkownikowi przełączać się między różnymi treściami i wyświetlać je, klikając nagłówki. #3</div>
    <div id="tabs-4">Karty to interfejs, który pozwala użytkownikowi przełączać się między różnymi treściami i wyświetlać je, klikając nagłówki. #4</div>
  </div>
</div>

.hotlist-html-widget-tabs::before {
  content: "";
  float: left;
  height: 40px;
  display: block;
  width: 100%;
  clear: both;
}

.hotlist-html-widget-tabs {
  clear: both;
  overflow: hidden;
  -webkit-transition: 0.3s box-shadow ease;
  transition: 0.3s box-shadow ease;
  max-width: 100%;
  width: 100%;
  display: block;
  position: relative;
  background-color: #fff;
  margin: 0 0 20px;
}

.hotlist-html-widget-tabs #button_tabs-1:checked ~ .hotlist-html-widget-tabs-block #tabs-1,
.hotlist-html-widget-tabs #button_tabs-2:checked ~ .hotlist-html-widget-tabs-block #tabs-2,
.hotlist-html-widget-tabs #button_tabs-3:checked ~ .hotlist-html-widget-tabs-block #tabs-3,
.hotlist-html-widget-tabs #button_tabs-4:checked ~ .hotlist-html-widget-tabs-block #tabs-4,
.hotlist-html-widget-tabs #button_tabs-5:checked ~ .hotlist-html-widget-tabs-block #tabs-5,
.hotlist-html-widget-tabs #button_tabs-6:checked ~ .hotlist-html-widget-tabs-block #tabs-6,
.hotlist-html-widget-tabs #button_tabs-7:checked ~ .hotlist-html-widget-tabs-block #tabs-7,
.hotlist-html-widget-tabs #button_tabs-8:checked ~ .hotlist-html-widget-tabs-block #tabs-8 {
  display: block;
  opacity: 1;
  -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.hotlist-html-widget-tabs input[name="button_tab"] {
  display: none;
}

.hotlist-html-widget-tabs input[name="button_tab"] + label {
  cursor: pointer;
  text-decoration: none;
  color: #333;
  flex-grow: 3;
  text-align: center;
  background-color: #f2f2f2;
  user-select: none;
  text-align: center;
  -webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
  transition: 0.3s background-color ease, 0.3s box-shadow ease;
  line-height: 45px;
  box-sizing: border-box;
  display: inline-block;
  padding: 0 25px;
  position: relative;
  border: 1px solid transparent;
  margin: 2px 1px 0 0;
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid #e3e3e3;
}

.hotlist-html-widget-tabs input[name="button_tab"]:checked + label:hover {
  border-bottom: 1px solid transparent;
  background-color: #fff;
}

.hotlist-html-widget-tabs input[name="button_tab"] + label:hover {
  background-color: #f9f9f9;
}

.hotlist-html-widget-tabs input[name="button_tab"]:checked + label {
  background-color: #fff;
  border: 1px solid #e3e3e3;
  border-bottom: 1px solid transparent;
  cursor: default;
  border-radius: 6px 6px 0 0;
}

.hotlist-html-widget-tabs input[name="button_tab"]:checked + label::after,
.hotlist-html-widget-tabs input[name="button_tab"] + label:hover::after,
.hotlist-html-widget-tabs input[name="button_tab"]:checked + label:hover::after {
  content: "";
  display: block;
  width: 100%;
  border-bottom: 1px solid #fff;
  position: absolute;
  bottom: -2px;
  z-index: 1;
  left: 0;
}

.hotlist-html-widget-tabs .hotlist-html-widget-tabs-block {
  border-top: 1px solid #e3e3e3;
  margin: -1px auto 20px auto;
  display: block;
}

.hotlist-html-widget-tabs .hotlist-html-widget-tabs-block > div {
  display: none;
  padding: 15px 25px;
  background-color: transparent;
  position: absolute;
  width: calc(100% - 50px);
  opacity: 0;
  left: 0;
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
}

@media (max-width: 600px) {
  .hotlist-html-widget-tabs .hotlist-html-widget-tabs-block > div {
    padding: 15px 10px;
    width: calc(100% - 20px);
  }
}

</style>

Titles

Title 1

Title 2

Title 3

Title 4

Title 5

Title 6

Title 7

Aby użyć tego stylu, dodaj kod z poniższego pola do edytora projektu w zakładce Style CSS:

Callback block

Oddzwoń do nas

+38(099)555-44-22
+38(099)555-44-33

i uzyskaj bezpłatną konsultację

lub
wyślij zapytanie

Wyślij zapytanie

Phone 1:
Phone 2:
From ID: (Form ID)

Aby wstawić ten blok, skopiuj kod z pola poniżej i wklej go na wymaganej stronie:

<div class="callblock_block_wrap"><div class="callblock_block_inside">
<span class="callblock_block_text_title">Oddzwoń do nas</span> 
<div align="center"><a class="callblock_block_phone" href="tel:+380995554422" onclick="gtag('event', 'Phone_Call_Click');">+38(099)555-44-22</a><br/>
<a class="callblock_block_phone2" href="tel:+380995554433" onclick="gtag('event', 'Phone_Call_Click');">+38(099)555-44-33</a><br/>
</div>

<span class="callblock_block_text">i uzyskaj bezpłatną konsultację</span>
<div class="callblock_block_text_send_request">lub<br/> wyślij zapytanie</div>

<div class="callblock_block_button hotengine-form-constructor" data-dialog-form_id="XXX" data-dialog-width="370" data-dialog-height="490" data-mobile-width="300"  data-dialog-form_title="Wyślij zapytanie" data-dialog-modify-text="" data-dialog-title="Wyślij zapytanie" data-dialog-whatform="Wyślij zapytanie przez formularz u dołu strony" data-dialog-buttontext="Wyślij" data-mobile-width="300">Wyślij zapytanie</div>
	
</div></div>
<style>

@media (min-width: 961px){ 
 .callblock_block_wrap {
 background:url(/templates/html_widgets/call_back_block/call_back_block.jpg) no-repeat;
 }
}

@media (max-width: 960px){ 
 .callblock_block_wrap {
 background:url(/templates/html_widgets/call_back_block/call_back_block_960.jpg) no-repeat; 
 background-position: 70%!important;
 }
}

@media (max-width: 450px){ 
 .callblock_block_wrap {
 background:url(/templates/html_widgets/call_back_block/call_back_block_410.jpg) no-repeat; 
 background-position: 70%!important;
 }
}

.callblock_block_wrap{ clear:both;
width:100%; 
height:auto; 
background-size: cover;
background-position:center;
border-bottom: 0px solid #dddbd6;
-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.18);
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.18);
margin:5px auto;
}

.callblock_block_inside{ 
display:block;
width:100%; 
margin:0 auto; 
padding:0px; 
overflow:hidden; 
height:auto; 
min-height:400px;
text-align:center;
color: #ffffff;
}

.callblock_block_wrap .callblock_block_text_title{
font-size: 25px;
margin:35px auto 10px;
line-height: 35px;
text-shadow: 1px 1px 1px rgb(27, 27, 27), 1px 1px 12px rgba(0, 0, 0, 1);
display:block; 
}

.callblock_block_wrap .callblock_block_phone{
font-size: 29px;
margin: 75px auto 10px;
line-height: 35px;
text-shadow: 1px 2px 1px rgba(0,0,0,1), 1px 1px 10px rgba(0,0,0,1);
color: #ffffff!important;
text-align:center;
text-decoration:none;
}

.callblock_block_wrap .callblock_block_phone2{
font-size: 29px;
margin: 10px auto 10px;
line-height: 35px;
text-shadow: 1px 2px 1px rgba(0,0,0,1), 1px 1px 10px rgba(0,0,0,1);
color: #ffffff!important;
text-align:center;
text-decoration:none;
}

.callblock_block_wrap .callblock_block_text{  
padding: 9px 0px;
line-height: 30px;  
display:block; 
position: relative; 
margin:0px auto; 
color: #fff;
text-shadow: 1px 2px 1px rgba(0,0,0,1), 1px 1px 10px rgba(0,0,0,1);
font-size:16px;
width:90%;
}

.callblock_block_wrap .callblock_block_text_send_request{ 
line-height: 20px;
display:block;
text-shadow: 1px 2px 1px rgba(0,0,0,1), 1px 1px 10px rgba(0,0,0,1);
font-size:16px;
text-align:center;
width:90%; margin:auto;
color:#fff;
}

.callblock_block_wrap .callblock_block_button{ 
background:#3d627c; 
padding:12px 30px; 
moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
border-radius: 4px; 
cursor:pointer; 
margin:30px auto 40px; 
text-align: center; 
font-size: 16px;
color:#fff; 
display:inline-block; 
}

.callblock_block_button:hover{ 
background:#ffd800; color:#000;
}

.callblock_block_button:active{ 
top:2px; position:relative; 
}

</style>

<span class="callblock_block_text">i uzyskaj bezpłatną konsultację</span>
<div class="callblock_block_text_send_request">lub<br/> wyślij zapytanie</div>

@media (min-width: 961px){ 
 .callblock_block_wrap {
 background:url(/templates/html_widgets/call_back_block/call_back_block.jpg) no-repeat;
 }
}

@media (max-width: 960px){ 
 .callblock_block_wrap {
 background:url(/templates/html_widgets/call_back_block/call_back_block_960.jpg) no-repeat; 
 background-position: 70%!important;
 }
}

@media (max-width: 450px){ 
 .callblock_block_wrap {
 background:url(/templates/html_widgets/call_back_block/call_back_block_410.jpg) no-repeat; 
 background-position: 70%!important;
 }
}

.callblock_block_inside{ 
display:block;
width:100%; 
margin:0 auto; 
padding:0px; 
overflow:hidden; 
height:auto; 
min-height:400px;
text-align:center;
color: #ffffff;
}

.callblock_block_button:hover{ 
background:#ffd800; color:#000;
}

.callblock_block_button:active{ 
top:2px; position:relative; 
}

</style>

Na przykład możesz utworzyć blok/menu i umieścić je w stopce witryny.
Zastąp numery telefonów. Jeśli używasz tylko jednego numeru, usuń linię callblock_block_phone2.
Zamień XXX na identyfikator formularza w tekście przycisku: data-dialog-form_id="XXX".

Komentarze / Slajd opinii

Strona i daneTyp strony:

ID strony:

- Szukaj

Zakres ocen:
Opinii w bloku: Przewijanie na raz: Wstępne ładowanie:

ResponsywnośćResponsywne breakpoints (JSON):

Autoodtwarzanie i nawigacja Autoodtwarzanie:
Opóźnienie autoodtwarzania (ms): W pętli:
Pokaż strzałki nawigacji:
Pozycja strzałek:
Pokaż paginację:

Pozycja gwiazdek, autora i datyПоказывать картинку: Картинка - ссылка: Позиция: Название товара: Звёзды-ссылка:

Gwiazdki: strefa wyrówn. priorytet

Autor: strefa wyrówn. priorytet

Data: strefa wyrówn. priorytet

Aby wstawić ten blok, skopiuj kod z pola poniżej i wklej go na wymaganej stronie:

<link rel="stylesheet" type="text/css" href="/templates/html_widgets/html_widget_reviews/html_widget_reviews.css" />
<script src="/templates/html_widgets/html_widget_reviews/html_widget_reviews.js"></script>

<span class="html_widget_reviews_ajax_load_comments" data-nc="0" data-page-id="26724" data-scpt="page" data-rating="4,5" data-loop="false" data-items="1" data-responsive='{}' data-autoplay="false" data-autoplay-timeout="7000" data-step="1" data-preload="false" data-nav="true" data-nav-position="sides" data-dots="true" data-rating-zone="after" data-author-zone="after" data-date-zone="after" data-rating-align="right" data-author-align="left" data-date-align="left" data-rating-order="3" data-author-order="1" data-date-order="2" data-show-image="false" data-image-link="true" data-image-position="left" data-show-title="false" data-stars-link="false" data-lang="" data-error-msg="Brak opinii dla tej strony"></span>
<div id="html_widget_reviews" class="html_widget_reviews_container" data-rating-zone="after" data-author-zone="after" data-date-zone="after" data-rating-align="right" data-author-align="left" data-date-align="left" data-rating-order="3" data-author-order="1" data-date-order="2">
<div class="html_widget_reviews-track"></div>
<div class="html_widget_reviews-nav-bar">
  <button class="html_widget_reviews-nav-prev" type="button">&lsaquo;</button>
  <button class="html_widget_reviews-nav-next" type="button">&rsaquo;</button>
  <div class="html_widget_reviews-dots"></div>
</div>
</div>

Ten widżet umożliwia pobieranie komentarzy/recenzji w formacie JSON. Typ i identyfikator strony ustawia się w elemencie z klasą «html_widget_reviews_ajax_load_comments». Dodatkowo możesz określić: data-items (opinii w bloku), data-responsive (JSON z breakpoints, np. {"1000":{"items":2,"navPosition":"sides"},"600":{"items":1}}), data-autoplay, data-autoplay-timeout. Styl i skrypt Widżetu można zmienić, pobierając pliki, których ścieżka zawiera ścieżkę «/templates/html_widgets/html_widget_reviews/».

Przycisk «Dodaj recenzję»

Wstawienie formularza w celu dodania recenzji można zrealizować za pomocą skryptu reagującego na kliknięcie elementu z klasą «html_widget_reviews_ajax_load_comments_form». W ten sposób możesz skorzystać z widżetu opinii na dowolnej stronie, a także wyświetlić formularz dodawania komentarza po kliknięciu elementu. Aby aktywować formularz przy ładowaniu strony, bez klikania na html_widget_reviews_ajax_load_comments_form, możesz dodać <script>document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll(`.html_widget_reviews_ajax_load_comments_form`).forEach(el => el.click()); });</script>

Offers mosaicLista identyfikatorów produktów:

- Szukaj

Nazwa produktu 1

Opis produktu 1. Opis właściwości produktu lub oferty. Blok tekstowy musi zostać zmieniony.

Pokaż więcej

Nazwa produktu 2

Opis produktu 2. Opis właściwości produktu lub oferty. Blok tekstowy musi zostać zmieniony.

Pokaż więcej

Nazwa produktu 3

Opis produktu 3. Opis właściwości produktu lub oferty. Blok tekstowy musi zostać zmieniony.

Pokaż więcej

Aby wstawić ten blok, skopiuj kod z pola poniżej i wklej go na wymaganej stronie:

<style>
.offer-mosaic-flex-block {
  display: flex;
  flex-wrap: wrap;
}
.offer-mosaic-flex-block:nth-child(2n) {
  flex-direction: row-reverse;
}
.offer-mosaic-flex-block .offer-mosaic-flex-block-side {
  width: 50%;
  padding: 1.75rem;
  box-sizing: border-box;
}
.offer-mosaic-flex-block .offer-mosaic-flex-block-side img {
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.offer-mosaic-flex-block .offer-mosaic-flex-block-side-title {
  font-size: 24px;
  margin: 10px 10px 10px 0px;
  display:block;
}

.offer-mosaic-flex-block .offer-mosaic-flex-block-side p {
  font-size: 16px;
  margin: 10px 0px 10px 0px;
}

.offer-mosaic-flex-block .offer-mosaic-flex-button{
	text-decoration:none;
    line-height: 1.5;
    background-color: transparent;
    color:#000;
    cursor: pointer;
    border-radius: 1.5rem;
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    border: 2px solid #4f5050;
    transition: all .3s ease;
    text-align: center;
    margin: 0.5rem 1rem 0.5rem 0;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 400;
}
.offer-mosaic-flex-block .offer-mosaic-flex-button:hover{
 background-color:#4f5050;
 color:#fff;
}
.offer-mosaic-flex-block .offer-mosaic-flex-button:active{transform: translateY(1px);}
	
@media (max-width: 600px) {
  .offer-mosaic-flex-block .offer-mosaic-flex-block-side {
    width: 100%;
  }
  .offer-mosaic-flex-block .offer-mosaic-flex-block:nth-child(2n) {
  flex-direction:column;
  }
}
</style>

<div class="offer-mosaic-flex">
  
  <div class="offer-mosaic-flex-block">
  
  <div class="offer-mosaic-flex-block-side">
    <div class="offer-mosaic-flex-block-side-title">Nazwa produktu 1</div>
    <p>Opis produktu 1. Opis właściwości produktu lub oferty. Blok tekstowy musi zostać zmieniony. </p>
    <a class="offer-mosaic-flex-button" href="#">Pokaż więcej</a>
  </div>
    
  
  <div class="offer-mosaic-flex-block-side">
    <img src="/upload/shop_catalog/s15992/483286/483286_0.jpg">
  </div>
    
  </div>
  
	
    
  <div class="offer-mosaic-flex-block">
  
  <div class="offer-mosaic-flex-block-side">
    <div class="offer-mosaic-flex-block-side-title">Nazwa produktu 2</div>
    <p>Opis produktu 2. Opis właściwości produktu lub oferty. Blok tekstowy musi zostać zmieniony. </p>
    <a class="offer-mosaic-flex-button" href="#">Pokaż więcej</a>
  </div>
    
  
  <div class="offer-mosaic-flex-block-side">
    <img src="/upload/shop_catalog/s15992/483342/483342_0.webp">
  </div>
    
  </div>
  
	
  
  <div class="offer-mosaic-flex-block">
  
  <div class="offer-mosaic-flex-block-side">
    <div class="offer-mosaic-flex-block-side-title">Nazwa produktu 3</div>
    <p>Opis produktu 3. Opis właściwości produktu lub oferty. Blok tekstowy musi zostać zmieniony. </p>
    <a class="offer-mosaic-flex-button" href="#">Pokaż więcej</a>
  </div>
    
  
  <div class="offer-mosaic-flex-block-side">
    <img src="/upload/shop_catalog/s15992/483283/483283_0.webp">
  </div>
    
  </div>
  
</div>

Ta metoda wymaga ręcznego wyboru produktów do wyświetlenia. Jeśli chcesz automatycznie i szybko utworzyć podobną listę produktów, użyj «Widżetu z produktami» i ustaw parametr «Podziel blok na dwie części». Efekt mozaiki tworzony jest za pomocą stylu CSS „.hotengine-shop-products-mosaic-sides .hotengine-shop-product-list-block:nth-child(even) { flex-direction: row-reverse; }”.

Google Reviews
«Ten moduł pozwala dodać opinie o Twojej firmie na stronę internetową.

Aby korzystać z widżetu, należy skonfigurować Google «Api Key» i «PlaceID». Można to zrobić w sekcji «Ustawienia», w zakładce «Komentarze i wtyczki społecznościowe», w sekcji «Google Reviews».
»
Aby wstawić ten blok, skopiuj kod z pola poniżej i wklej go na wymaganej stronie:

<link rel="stylesheet" href="/templates/styles/api_google_place_reviews_widget/css_api_google_place_reviews_widget_flex.css">
<script src="/templates/scripts/hotengine-api-google-place-reviews-widget.js" type="text/javascript" charset="UTF-8"></script>

<div class="google-place-business-info">
    <h3 class="google-place-business-info-title"></h3>
    <div class="google-place-business-info-rating">
        <span class="google-place-business-info-rating-stars"></span>
        <span class="google-place-business-info-rating-number"></span>
        <div class="google-place-business-info-review-count"></div>
    </div>
    <div class="google-place-business-info-address"></div>
    <div class="google-place-business-info-powered-by">powered by Google</div>
    <div class="google-place-business-info-read-more"><a href="#" target="_blank">Read more</a>
    </div> 
</div>

<div id="google-place-reviews-pagination">
    <button id="google-place-reviews-prev-page">&lsaquo;</button>
    <button id="google-place-reviews-next-page">&rsaquo;</button>
</div>
</div>

Google Reviews demo

Google Reviews + Owl Carousel

Google Reviews + Owl Carousel demo

Google Reviews + Owl Carousel demo + Auto Responsive

Googe Places Manual

Dodatkowe atrybuty

Atrybuty są określone w kodzie HTML bloku «#google-place-reviews», na przykład: «data-reviews-per-page="5" data-min-rating="3" data-reviews_sort="newest" data-orderby="date_desc" data-orderby2="id_asc"».

data-reviews-per-page — liczba opinii wyświetlanych na jednej stronie.
Przykład: data-reviews-per-page="10" (pokaże 10 opinii na stronie).
data-min-rating — minimalna ocena (od 1 do 5), jaką musi mieć opinia, aby została wyświetlona.
Przykład: data-min-rating="4" (zostaną pokazane tylko opinie z oceną 4 i wyższą).
data-reviews_sort — sortowanie opinii pobieranych z Google.
Dostępne wartości:
- newest — pokazuje najnowsze opinie.
- most_relevant — pokazuje najbardziej trafne opinie (według Google).
Przykład: data-reviews_sort="newest" (ładuje najnowsze opinie).
data-orderby — sortowanie opinii pobranych z bazy danych.
Dostępne wartości:
- rating_asc — oceny rosnąco.
- rating_desc — oceny malejąco.
- date_asc — data rosnąco (najstarsze pierwsze).
- date_desc — data malejąco (najnowsze pierwsze).
- id_asc — ID rosnąco.
- id_desc — ID malejąco.
Przykład: data-orderby="date_desc" (sortowanie według daty, najnowsze opinie pierwsze).
data-orderby2 — drugorzędne sortowanie (wartości data-orderby i data-orderby2 są używane razem).
Używane analogicznie do data-orderby.
Przykład: data-orderby="date_desc" data-orderby2="id_asc" (sortowanie najpierw według daty, potem według ID).

SpoilerSpoiler to element strony lub tekstu, który początkowo ukrywa część informacji i rozwija się po kliknięciu. Zaimplementowaliśmy spoiler za pomocą samego CSS, bez użycia dodatkowych skryptów.

Pokaż / Ukryj

Ukryty tekst: BooStore.pro to platforma do tworzenia i zarządzania stronami internetowymi i sklepami online.

Domyślny wbudowany styl spoilera

Code: CSS

/*default spoiler css */
details.spoiler summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 1.2em;
  cursor: pointer;
}
details.spoiler summary::-webkit-details-marker {
  display: none; 
}
details.spoiler.spoiler-icon summary {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}
details.spoiler.spoiler-icon summary::after {
  content: "\25B6"; 
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.3s ease;
  opacity: 0.5;
}
details.spoiler.spoiler-icon[open] summary::after {
  content: "\25BC"; 
}
/*STYLE FORM END */

Aby wstawić ten blok, skopiuj kod z pola poniżej i wklej go na wymaganej stronie: