Platforma SaaS dla sklepów internetowych
Tylko administratorzy mogą wejść do centrum administracyjnego. Zaloguj się

Widżety?...

Generator widżetów

Kup widżet przedmiotó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?

  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 (Tylko dla listy standardowej) *
    Zmień ustawienia


    Domyślny rozmiar okna jest określany przez Javascript.
    Dodatkowe parametry: użyj wzorca :carousel-NAZWA-WARTOŚĆ (np. :carousel-margin-6:carousel-autoplay-true)
    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 атрибуta carousel-...
    data-carousel-autoplayTimeout="1000"
    data-carousel-autoplaySpeed="5000"
    data-carousel-autoplay="true"
    i tak dalej (data-carouserl-PARAMETER="wartość")
  • :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;}


Podczas wyświetlania produktów zaleca się:
  • włączyć «:auto_width» — Auto-szerokość (liczba widocznych kart produktów zmienia się automatycznie, aby wypełnić całą dostępną przestrzeń bloku);
  • włączyć «:swipe» — Efekt przesuwania (przewijanie palcem lub kursorem) dla poprawy wygody użytkowania;
  • włączyć «:scroll-9999x8x0» — zastąpić sposób wyświetlania blokiem z przewijaniem produktów na urządzeniach mobilnych (gdy szerokość ekranu jest mniejsza niż 9999px), aby zaoszczędzić miejsce i usunąć przyciski przewijania;
  • włączyć «:lazy-0» — przyspieszone ładowanie obrazów kart produktów.
  • dodatkowo możesz połączyć «:append» i «:scroll» — blok będzie dodawał nowe produkty na końcu listy na ekranach szerszych niż określona granica, a na mniejszych automatycznie przełączy się w tryb scroll. Na przykład «:append-900:scroll-9999x8x0» — append aktywny tylko na ekranach szerszych niż 900px;
Styl CSS do adaptacyjnej zmiany szerokości kart produktów w zależności od rozmiaru bloku z produktami:

Jeśli używasz standardowych szablonów, styl jest już automatycznie dołączony.
Code: CSS
/*MODAL WINDOW PRODUCT LIST STYLE */
.modal__content {
    container-type: inline-size;
}

.modal__content .hotengine-shop-product-list-block {
    width: 24%;
    display: inline-block;
}

@container (max-width: 1900px) {
    .modal__content .hotengine-shop-product-list-block {
        width: 15%;
    }
}

@container (max-width: 1500px) {
    .modal__content .hotengine-shop-product-list-block {
        width: 20%;
    }
}

@container (max-width: 980px) {
    .modal__content .hotengine-shop-product-list-block {
        width: 32%;
    }
}

@container (max-width: 600px) {
    .modal__content .hotengine-shop-product-list-block {
        width: 49%;
    }
}
/*MODAL WINDOW PRODUCT LIST STYLE */


/* PRODUCT LIST ADAPTIVE INSIDE WIDGET CONTENT */
.hotengine-shop-products-list-div {
    container-type: inline-size;
}

@container (min-width: 1900px) {
    .hotengine-shop-products-list-div .hotengine-shop-product-list-block {
        width: 14%;
    }
}

@container (max-width: 1900px) {
    .hotengine-shop-products-list-div .hotengine-shop-product-list-block {
        width: 15%;
    }
}


@container (max-width: 1500px) {
    .hotengine-shop-products-list-div .hotengine-shop-product-list-block {
        width: 20%;
    }
}

@container (max-width: 980px) {
    .hotengine-shop-products-list-div .hotengine-shop-product-list-block {
        width: 32%;
    }
}

@container (max-width: 600px) {
    .hotengine-shop-products-list-div .hotengine-shop-product-list-block {
        width: 49%;
    }
}
/* PRODUCT LIST ADAPTIVE INSIDE WIDGET CONTENT */


Ajax ładowanie listy towarów:
Generator bloków z towarami można załadować za pomocą żądania GET/POST/AJAX. Aby to zrobić, musisz wysłać żądanie ze swojej witryny (twojej domeny) do strony "/ajax_get_list_shop.php". W zapytaniu możesz określić dodatkowe właściwości do wyświetlania produktów. Listę wszystkich możliwych wartości znajdziesz powyżej. Aby poprawnie wyświetlić styl listy produktów, należy dodać wrapper HTML i elementy nadrzędne, a także przyciski przewijania/kontynuowania listy produktów (przewijanie do przodu/do tyłu). Przykład takiego wrappera i przekazywania parametrów znajduje się pod linkiem - Przykład wczytywania listy produktów i przekazywania parametrów przez AJAX/POST/GET.

Podgląd menu produktów



Podgląd


Salomon Quest 4D 3 GTX

 Q4D3-BLK_ruSalomon Quest 4D 3 GTX 280$ 220$ ( ≈ 190.3€)

Salomon X Ultra 4 Mid GTX

 XU4M-NVY_ruSalomon X Ultra 4 Mid GTX 195$ 165$ ( ≈ 142.73€)

Salomon Outpulse Mid GTX

 OPM-GRN_ruSalomon Outpulse Mid GTX 165$ 135$ ( ≈ 116.78€)


Kod




Styl CSS

Wstaw kod CSS do edytor projektu, Style CSS w zakładce, po usunięciu "<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-shop-categories-menu-active { - wybór aktywnej pozycji w menu. Zastąp «kolor:czerwony;» do pożądanego koloru lub stylu.





Pokaż oddzielny kod menu