Najprościej będzie Ci utworzyć moduł slider i dodać go do karty kateogorii --> Konfiguracja --> Wygląd --> Aktywny styl graficzny --> Moduły --> w poziomym pasku nawigacji wybierasz stonę kategorii, aktywujesz checkboxem a następnie tworzysz jej układ modułów w tym dodajesz nowe np. slider. Możesz też wstawić pusty moduł a w niego po wyłączeniu edytora, wstawić własny kod html itp.
Jasne tylko chciałbym mieć inny wygląd slidera/inne obrazki w każdej kategorii. Jest jakiś kod slidera clickshpowego który można wstawić do opisu kategorii w Asortyment > kategorie ?
odświeżę temat, ale osobiście nic nie spotkałem takiego. @gabiec.pl może macie jakieś gotowe, niedrogie rozwiązanie?
Przesyłam krótki poradnik jak dodać slider z własną treścią, nie jako moduł tylko jako kod html. Założenie: Stworzenie dodatkowego slajdera do takich miejsc jak opis kategorii czy opis produktu polecam użyć kodu html standardowego slajdera wbudowanego w system clickshop. Realizacja: Chcąc stworzyć kod slidera możecie wykorzystać kilka sposobów. Sposób nr 1 Początkującym polecam dodać swój slajder jako zwykły moduł typu slajder i na chwile umieścić go np na stronie głównej sklepu. Następnie podglądnijcie kod HTML jaki został wygenerowany przez system (zostało to już gdzieś na forum omówione więc nie powielam). W następnym kroku skopiujcie cały kod HTML tego waszego slajdera i wklejcie go do opisu kategorii. Oczywiście pamiętajcie by wyłączyć edytor HTML który jest standardowo w opisie. Sposób nr 2 Skorzystajcie z kodu który przygotowałem na potrzeby tego wpisu i umieściłem poniżej. Kod który stworzyłem dodaje slajder z dwoma slajdami, w jednym ze slajdów jest zdjęcie (na podglądzie w załączniku widać logo dotpay) a w drugim zwykły tekst. Code: <div id="box999" class="box box-slider"> <div class="pageslider row" data-max-img-width="736" data-slider-duration="600" data-slider-delay="5000" data-slider-animation-type="1" data-slider-auto="true" data-slider-nav-type="bullets"> <ul class="slides"> <li id="sh-slide-1" data-bg-size-s="" data-bg-size-e="" data-image="" data-color-start="transparent" data-color-end="transparent" data-href="/product/index/productId/14" data-orientation="0"> <img src="/public/assets/logo-dotpay.png" alt="" width="" height="" /> </li> <li id="sh-slide-2" data-bg-size-s="" data-bg-size-e="" data-image="" data-color-start="transparent" data-color-end="transparent" data-href="/product/index/productId/14" data-orientation="0"> <p>Jakaś przykładowa treść</p> </li> </ul> </div> </div> Wytłumaczenie do poszczególnych elementów: data-max-img-width - określa max szerokość obrazka w slajdzie (jak macie uruchomioną lewą kolumnę z modułami to ustawcie na 736, data-slider-duration - określa czas trwania animacji, data-slider-delay - czas opóźnienia animacji (czyli po jakim czasie zmieni się slajd), data-image - link do zdjęcia jeżeli chcecie by zdjęcie było tłem slajdu, data-href - link na który ma przenosić po kliknięciu na slajd (najlepiej używać jeżeli stosujecie zdjęcie w tle), slider-animation-type - typ animacji, data-slider-auto - czy slider ma sie sam przewijać czy tylko po kliknięciu, data-slider-nav-type - rodzaj paginacji, Bardzo istotne elementy kodu: class="box box-slider" - klasa box-slider jest tu najważniejsza bo informuje skrypt w oprogramowaniu że jak znajdzie tu listę elementów to z każdego <li> ma zrobić nowy slajd. I to koniec. Mam nadzieję, że wszystko opisałem na tyle zrozumiale, że uda Wam się skorzystać.
@flex bardzo dobre rozwiązanie jednak nadal używające silnika sklepowego chociaż jakby na to popatrzeć to bardzo wygodne bo pozwala na slider nawet w produkcie.
W mojej ocenie zawsze lepiej użyć funkcji która jest już wbudowana bo nie trzeba śmiecić kodu sklepu dodatkowymi skryptami. A w tym wątku @tr_ pytał o kod clickshopowego slidera
Jasne. Zgadzam się chociaż wiemy, że klipszopowy ma też swoje wady. tak jak napisałem wyżej niewątpliwą zaletą jego jest z Twoim kodem bezproblemowe wstawienie go do choćby produktu.
@tr_ pozwoliłem sobie zmienić status tematu na "Rozwiązane". Jeśli rozwiązanie zaproponowane przez użytkownika @flex Ci nie odpowiada, daj znać dodając odpowiedź w temacie.
ten pierwszy sposób byłby super , ale dlaczego po wklejeniu go w opis kategorii nie działa ? Wklejam taki kod : <div class="box box-slider" id="box_slider_69"> <div data-max-img-width="880" data-slider-duration="200" data-slider-delay="5000" data-slider-animation-type="1" data-slider-auto="false" data-slider-nav-type="none" class="pageslider row"> <ul class="slides" style="width: 2640px; height: 176px;"> <li id="sh-slide-3" data-bg-size-s="0" data-bg-size-e="0" data-image="1bc0ccde797db30a2d490d229dbbe39e.jpg" data-color-start="" data-color-end="" data-href="" data-orientation="0" style="background-image: url("/userdata/boxes/1bc0ccde797db30a2d490d229dbbe39e.jpg" background-size: 100% auto; background-repeat: no-repeat; background-position: center center; width: 880px; left: -880px;"> </li> <li id="sh-slide-4" data-bg-size-s="0" data-bg-size-e="0" data-image="eb74c4f3d5e7f35297da753a9af8f2ae.jpg" data-color-start="" data-color-end="" data-href="" data-orientation="0" style="background-image: url("/userdata/boxes/eb74c4f3d5e7f35297da753a9af8f2ae.jpg" background-size: 100% auto; background-repeat: no-repeat; background-position: center center; width: 880px; left: -880px;"> </li> <li id="sh-slide-5" data-bg-size-s="0" data-bg-size-e="0" data-image="a2259506667807f22c16f1d9641ab6eb.jpg" data-color-start="" data-color-end="" data-href="" data-orientation="0" style="background-image: url("/userdata/boxes/a2259506667807f22c16f1d9641ab6eb.jpg" background-size: 100% auto; background-repeat: no-repeat; background-position: center center; width: 880px; left: -880px;"> </li> </ul> <ul class="slider-nav rwd-hide-small rwd-hide-tablet rwd-hide-medium none"><li data-slide-index="0" class=""></li><li data-slide-index="1" class="active"></li><li data-slide-index="2" class=""></li></ul><span class="ps-arrow-left"></span><span class="ps-arrow-right"></span></div> </div> </div>
