Stwórz sklep internetowy / Dodaj firmę do katalogu

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

Moje artykuły Dodaj artykuł Eksport artykułów Importować artykuły

Generator widżetów

Widżet artykułów

«Widget» – to interaktywny blok z danymi do umieszczenia na stronie. Widget można generować za pomocą specjalnego krótkiego kodu («ShortCode»), który może zawierać dodatkowe parametry. Otrzymany kod można wkleić na strony lub do Bloków/Menu.

Jak wstawić wygenerowane menu?

Możesz użyć kodu automatycznej zamiany, wpisując [MENU:blog_page_slider:htmlonly:cat_id-0:site-0:start-0:on_page-10]
Listę wartości możesz wypełnić korzystając z generatora «Videzht with articles».
Możesz wstawiać wygenerowany kod menu do bloków/menu lub stron.
Uwaga! Jeśli używasz wielu menu na jednej stronie, nie musisz ponownie wklejać 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 kodzie można używać następujących parametrów:

:cat_id- - identyfikator kategorii (wyświetlą się tylko artykuły z tej kategorii)
:site- - identyfikator Twojej witryny, ale nie możesz go używać w swojej witrynie
:on_page- - Liczba artykułów wyświetlanych w suwaku
:start- - strona początkowa slidera, numer od którego należy rozpocząć przeglądanie produktów. Na przykład, jeśli strona wyświetla 6 artykułów, a numer początkowy to 2, zostaną wyświetlone artykuły od 6 do 12.
:description — Pokaż krótki opis
:repeat - powtórz slajdy po zakończeniu listy artykułów
:random — Pokaż bez porządkowania według identyfikatora
:one — Przewiń tylko jeden artykuł
:blog_id — identyfikatory artykułów (oddzielone przecinkami, bez spacji)
:lang- - język wyświetlanych artykułów (jeśli nie zostanie określony, użyty zostanie język otwieranej strony)
:order_by- - Sortowanie. 0 - według daty, 1 - według identyfikatora, 4 - według nazwy
:sort_by- - Sortuj. ASC — rosnąco, DESC — malejąco
:append - dodaj nowe dane na końcu
:swipe – Dodaj efekt przesunięcia palcem po dotknięciu (działa tylko wtedy, gdy nie określono opcji :append i :carousel)
Instrukcje (wymagane)
Uwaga! Aby ten skrypt działał, na stronie musi być zainstalowany następujący skrypt: <script src="/templates/scripts/hotengine-script-blog-list-base-slider-swipe.js"></script>
Ten parametr jest aktywowany, jeśli główny blok z listą artykułów (class="hotengine-blog-page-list-div") ma atrybut data-swipe="1" (w widżecie robi się to za pomocą kodu :swipe). Skrypt aktywuje przycisk przewijania do przodu lub do tyłu.
:add-javascript - jeśli nie dodasz tego parametru, to będzie tylko lista artykułó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ąż identyfikator z głównym DIV. Można go użyć do dostosowania obszaru suwaka

2)Możesz ręcznie wstawić wygenerowany kod menu. Aby to zrobić, utwórz Block/Menu, umieszczony na górze lub na dole i wklej kod w nim napisane poniżej. Kod można również umieścić wewnątrz strony. Wszystkie pola muszą być wypełnione.

Uwaga! Jeśli używasz wielu menu na tej samej stronie, nie musisz ponownie wstawiać stylu Java Script i CSS.
Domyślnie ten styl JavaScript i CSS jest już wbudowany w standardowy zestaw funkcji Twojego sklepu. Możesz ponownie wstawić kod tylko wtedy, gdy musisz zmienić jego projekt lub funkcjonalność. Tak po prostu, nie musisz ponownie wstawiać kodu JavaScript i stylu CSS.Ajax ładowanie listy artykułów:
Generator bloków artykułów można załadować za pomocą żądania GET/POST/AJAX. Aby to zrobić, musisz wysłać żądanie ze swojej witryny (swojej domeny) do strony «/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 powyżej. 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 takiej powłoki i przekazywania parametrów pokazano pod linkiem - Przykład ładowania listy artykułów i przekazywania parametrów przez AJAX/POST/GET.

Podgląd menu artykułu

Podgląd

Kod

Java Script

<span class="loading-spin"></span></div>`;
                const loader = contentDiv.querySelector(`.hotengine-blog-page-list-div-loading`);
                setTimeout(() => { if (loader) loader.style.opacity = "1"; }, 10);

const cacheParam = window.location.search.includes(`cacheclear`) ? `&cacheclear` : ``;
                const encodedParam = param.includes(`%3A`) ? param : encodeURIComponent(param);

fetch(`/ajax_get_list_blog.php?c=${c}&n=${n}${cacheParam}¶m=${encodedParam}`, {
                    method: `GET`,
                    credentials: `same-origin`,
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
                        "X-Requested-With": "XMLHttpRequest"
                    },
                    signal: (() => { const controller = new AbortController(); setTimeout(() => controller.abort(), 20000); return controller.signal; })()
                })
                .then(response => response.text())
                .then(data => {
                    if (loader) {
                        loader.style.opacity = "0";
                        setTimeout(() => {
                            loader.remove();
                            contentDiv.innerHTML = data;

contentDiv.querySelectorAll(`script`).forEach(oldScript => {
                                const newScript = document.createElement(`script`);
                                Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
                                newScript.appendChild(document.createTextNode(oldScript.innerHTML));
                                oldScript.parentNode.replaceChild(newScript, oldScript);
                            });

if (typeof window.callback_hotengine_blog_page_list_div_button === `function`) {
                                window.callback_hotengine_blog_page_list_div_button();
                            }
                        }, 300);
                    }
                })
                .catch(() => {
                    if (loader) loader.remove();
                });
            }
        }
    });
})();
</script>

Skrypt ładowania kolejnych i poprzednich artykułów w menu należy umieścić albo w jakimś menu, które otwiera się na wszystkich stronach serwisu (na przykład w nagłówku lub w menu, do którego wstawia się wygenerowany kod menu HTML).

CSS стиль

.hotengine-blog-page-list-content {
display:block;
position:relative;
}

.hotengine-blog-page-list-div { display:inline-block; max-width:90%;  }

.hotengine-blog-page-list-div-button {   position:absolute; z-index:2; 
  display:inline-block; width:32px; height:32px; top:0px;
 }
 
 .hotengine-blog-page-list-content { display:block;     margin: 0px 32px 0px 44px;}
 .hotengine-blog-page-list-content b { font-size:inherit; font-weight:inherit; text-align:left; display:block;}
 .hotengine-blog-page-list-content .hotengine-blog-content-read-more { text-align:right;}
 .hotengine-blog-page-list-content .footh { display:none; }

.hotengine-blog-page-list-div-button-right { right:0px;  margin:99px 5px 0px 0px;
  background:url(/img/icon/shop/hotengine-shop-products-list-next-prev.png) -32px -32px  no-repeat;
 }
 
 .hotengine-blog-page-list-div-button-left {  left:0px; width:32px; height:32px; margin:99px 0px 0px 5px;
  background:url(/img/icon/shop/hotengine-shop-products-list-next-prev.png) 0px -32px  no-repeat;
 }
 
 .hotengine-blog-page-list-div-button-right:hover {  cursor:pointer;
  background-position:-32px 0px;
 }

.hotengine-blog-page-list-div-button-left:hover { cursor:pointer; 
  background-position:0px 0px;
 }

</style>

CSS код вставляйте в edytor projektu, Przejdź do zakładki CSS, najpierw usuwając style "<style type="text/css">" na początku i </style> na końcu. Jeśli kod nie jest używany w edytorze stylów CSS, kod można pozostawić bez zmian. .hotengine-blog-categories-menu-active { - wybór aktywnej pozycji w menu. Zastępować "color:red;" do wybranego koloru lub stylu.

Pokaż osobny kod menu