1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

ROZWIĄZANE Slider na stronie kategorii

Dyskusja w 'Zmiana wyglądu sklepu i edycja zaawansowana' rozpoczęta przez użytkownika tr_, 27 Luty 2016.

  1. tr_

    tr_ Stały bywalec

    Wiadomości:
    41
    Docenione treści:
    7
    Jest jakiś prosty sposób dodania slidera do opisu kategorii?
     
  2. Grzesiek

    Grzesiek Centrum Pomocy/BOK home.pl Administrator forum

    Wiadomości:
    3 357
    Docenione treści:
    316
    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.
     
  3. tr_

    tr_ Stały bywalec

    Wiadomości:
    41
    Docenione treści:
    7
    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 ?
     
  4. Grzesiek

    Grzesiek Centrum Pomocy/BOK home.pl Administrator forum

    Wiadomości:
    3 357
    Docenione treści:
    316
    odświeżę temat, ale osobiście nic nie spotkałem takiego. @gabiec.pl może macie jakieś gotowe, niedrogie rozwiązanie?
     
  5. tr_

    tr_ Stały bywalec

    Wiadomości:
    41
    Docenione treści:
    7
    Dzięki sam coś wykombinuje
     
  6. flex

    flex Użytkownik

    Wiadomości:
    54
    Docenione treści:
    59
    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.

    Kod:
    <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ć.
     
    Mariusz i tr_ lubią to.
  7. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    @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.
     
  8. flex

    flex Użytkownik

    Wiadomości:
    54
    Docenione treści:
    59
    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 :)
     
    tr_ lubi to.
  9. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    512
    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.
     
  10. Mariusz

    Mariusz BOK home.pl home.pl Administrator forum

    Wiadomości:
    3 051
    Docenione treści:
    300
    @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.
     
  11. tr_

    tr_ Stały bywalec

    Wiadomości:
    41
    Docenione treści:
    7
    Dokładnie o to chodziło można zamknąć :)
     
  12. Bagazniki.pl

    Bagazniki.pl Stały bywalec

    Wiadomości:
    36
    Docenione treści:
    1
    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(&quot;/userdata/boxes/1bc0ccde797db30a2d490d229dbbe39e.jpg&quot;); 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(&quot;/userdata/boxes/eb74c4f3d5e7f35297da753a9af8f2ae.jpg&quot;); 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(&quot;/userdata/boxes/a2259506667807f22c16f1d9641ab6eb.jpg&quot;); 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>
     

Poleć forum znajomym