Shoper – slajder produktów na stronie głównej

Już od dłuższego czasu sklepy internetowe Shoper 5 dysponują funkcjonalnością slajdera/rotatora produktów w modułach promocji, nowości, bestsellerów oraz od niedawna ostatnio dodanych,

Moduły mają możliwość ustalenia sposobu wyświetlania oraz uruchomienia automatycznej rotacji.

Wszystko byłoby super gdyby nie mała niedogodność. Moduły te zaprogramowane są tak by z włączoną funkcją slajdera wyświetlać tylko jeden produkt. Gdy umieszczamy moduły w lewej lub prawej kolumnie wszystko wygląda super ale po wstawieniu ich do części centralnej osiągamy kiepsko wyglądający moduł z jednym produktem.

UWAGA! – Aktualizacja skryptu jest już dostępna, proszę pobrać plik z linku znajdującego się w treści wpisu.

Z problemem tym postaram się wam dzisiaj pomóc. Przebudowałem odrobinę skrypt slajdera by osiągnąć coś takiego:

Niby niewielka zmiana ale myślę, że wam się spodoba. Na potrzeby poradnika zmiany dokonam jedynie w module Bestsellerów, reszta pozostaje bez zmian.

Co będzie potrzebne:

– dodatkowy kod javasript do wklejenia w zakłądce „Włany kod JS”,

– niewielka zmiana w pliku zarządzającym modułem Bestsellerów (Bestsellers/box.tpl),

Co robimy:

Krok 1 – przygotowujemy kod JavaScript który zmieni nam standardowe ustawienia i podzieli moduł na daną ilość miejsc do wyświetlenia produktów oraz zmniejszy wielkość kroku przesunięcia. Na tym przykładzie ustaliłem by moduł wyświetlił mi 4 produkty i przesuwał się o szerokość jednego produktu. (kod odpowiadający za ilość wyświetlanych produktów zaznaczyłem kolorem poniżej)

Krok 2 – wklejamy kod JavaScript w dziale zarządzania skórką na zakładce Własny skrypt JS:

Shop.implement({
selectorFunctions : {
boxslider2 : {
selector : '.centercol box.slider2',
domready : function(slider2) {
var podlist = slider2.getElements('.product');
if(podlist.length > 1) {
slider2.getElements('hr').setStyle('display', 'none');
podlist.setStyle('display', 'none');
podlist[0].setStyles({
display : 'block',
vibility : 'hidden'
});
}
},
load : function(el) {
if(el.getElements('.product').length < 2) return;
el.getElements('hr').destroy();
var innerbox = el.getElement('.innerbox');
if(!$chk(innerbox)) return;
var outterdiv = new Element('div', {
styles : {
overflow : 'hidden',
position : 'relative'
}
}).inject(innerbox);
var innerdiv = new Element('div').inject(outterdiv);
var outter_size = outterdiv.getSize();
var width = 0;
var scroll_step = outter_size.x/4;
el.getElements('.product')
.setStyle('display', 'block')
.inject(innerdiv)
.setStyle('width', outter_size.x/4 + 'px')
.each(function(div) {
width += outter_size.x/4;
});
outterdiv.setStyle('width', outter_size.x + 'px');
innerdiv.setStyle('width', width + 'px');
innerdiv.getChildren('.product').setStyle('float', 'left');
outter_size = outterdiv.getSize();
outterdiv.setStyle('height', outter_size.y + 'px');
innerdiv.setStyles({
height : outter_size.y + 'px',
position : 'absolute',
left : '0px',
top : '0px'
});
var left = new Element('img', {
src : this.url('public/images/1px.gif'),
'class' : 'arrow_left'
}).inject(outterdiv);
var right = new Element('img', {
src : this.url('public/images/1px.gif'),
'class' : 'arrow_right'
}).inject(outterdiv);
left._outter = right._outter = outterdiv;
outterdiv._scroll_step = scroll_step;
outterdiv._left = left;
outterdiv._right = right;
outterdiv._n = 0;
outterdiv._max = innerdiv.getChildren('.product').length - 1;
outterdiv._inner = innerdiv;
outterdiv._fx = new Fx.Tween(innerdiv, {
duration: 200,
transition : 'linear'
});
left.fade('hide');
right.fade('hide');
outterdiv.addEvent('mouseenter', function(e) {
if(this._n > 0)
this._left.fade('in');
if(this._n < this._max)
this._right.fade('in');
});
outterdiv.fireEvent('mouseenter');
if($chk(Shop.useroptions.slider2) && true == Shop.useroptions.slider2.fadearrows) {
outterdiv.addEvent('mouseleave', function(e) {
this._left.fade('out');
this._right.fade('out');
});
}
if(el.hasClass('slider_automove') && $chk(Shop.useroptions.slider)
&& Shop.useroptions.slider.automove > 0 && outterdiv._max > 0) {
(function() {
if(false == this._mousein) {
this.scrollToNext();
}
}).periodical(Shop.useroptions.slider.automove, outterdiv);
outterdiv.addEvent('mouseenter', function(e) {
this._mousein = true;
})
outterdiv.addEvent('mouseleave', function(e) {
this._mousein = false;
})
outterdiv._mousein = false;
}
outterdiv.scrollToLeft = (function() {
if(this._n > 0) {
this._n--;
this._fx.start('left', -1 * this._n * this._scroll_step + 'px');
this._right.fade('in');
if(0 == this._n)
this._left.fade('out');
}
}).bind(outterdiv);
outterdiv.scrollToRight = (function() {
if(this._n < this._max) {
this._n++;
this._fx.start('left', -1 * this._n * this._scroll_step + 'px');
this._left.fade('in');
if(this._max == this._n)
this._right.fade('out');
}
}).bind(outterdiv);
outterdiv.scrollToNext = (function() {
if(this._n < this._max) {
this.scrollToRight();
} else {
this._n = 1;
this.scrollToLeft();
}
}).bind(outterdiv);
left.addEvent('click', function(e) {
new DOMEvent(e).stop();
this._outter.scrollToLeft();
});
right.addEvent('click', function(e) {
new DOMEvent(e).stop();
this._outter.scrollToRight();
});
lh = left.getSize().y;
if(lh < 1) lh = 10;
rh = right.getSize().y;
if(rh < 1) rh = 10;
left.setStyle('top', Math.ceil( ( outter_size.y - lh ) / 2 ) + 'px');
right.setStyle('top', Math.ceil( ( outter_size.y - rh ) / 2 ) + 'px');
}
}
}
});

Na czerwono zaznaczyłem linie gdzie liczba 4 oznacza podział szerokości modułu na 4 części. Czyli wyświetlą się 4 produkty.

Pobierz plik by wyświetlić kod skryptu:
slajder produktów – user js

Krok 3 – przechodzimy na zakładkę „Edycja zaawansowana”, odnajdujemy plik Bestsellers/box.tpl i klikamy na ikonę edycji. Następnie w drugiel lini odnajdujemy słowo „slider” i zamieniamy na „slider2”.

 

I na tym koniec. Efekty można oczywiście zobaczyć na stronie sklep.szablonsklep.pl

75 odpowiedzi do “Shoper – slajder produktów na stronie głównej”

  1. Co może być powodem tego, że robiąc tak jak opisałeś powyżej box wyświetla wszystkie produkty pionowo, jeden pod drugim zamiast w poziomie, w formie slidera?
    Przy powrocie do standardowego boxu wszystko działa ok (tylko wyświetla jeden produkt oczywiscie).

    1. a w ustawieniach modułu w panelu administracyjnym masz ustawione by był włączony slajder?

    1. to co włączyłeś to jest moduł slajder/suwak a Ty chcesz przecież edytować moduł Nowości. Ustaw w module Nowości Format: lista pozioma, przewijana

  2. tak zrobiłem
    próbuję już jak ta informacja się pojawiła -czytasz w myślach o takiej prezentacji
    pozdrawiam

  3. Witam
    Nadal nie wychodzi .
    Co mam zmienić ?
    Lista pozioma,przewijana zaznaczona.
    Automatyczne przewijanie zaznaczone.
    Ilość elementów 10.

    Pozdrawiam

  4. Witam,
    Wg kroku 3 trzeba znaleźć słowo „slider” ale w pliku css News/box nie ma czegoś takiego.
    Więc w jaki sposób można ustawić nowości?

  5. Bardzo fajna opcja, ale niestety mi nie działa – też wyświetla się pionowo, mimo ustawienia „lista pozioma, przewijana”. Pracuję na świeżej kopii standardowej skórki, więc nie ma mowy o jakiś moich grzebaniach w kodzie. Jeśli komuś udało się temu zaradzić to proszę się podzielić z resztą 🙂

    1. hmm… ok widzę że coraz więcej problemów… przeprowadzam właśnie testy na świeżej kopii systemu…jak tylko sprawdzę czy pojawiły się jakieś problemy dam znać. Dajcie mi chwilkę 🙂

  6. Witam
    Działa,wszystko działa.
    Myślałem ,że już nie potrafię skopiować i wkleić tekstu(skryptu).

    Podaj swój KRS prześlę 1 %.Nie dużo ale :).
    Marek

  7. Super zabawa jak wychodzi.
    Boks jeden z 3 fotkami a drugi 4 fotkami.
    Ale,ostatnie zdjęcie chowa się samo tzn.zaczyna z 3 fotkami ,potem zostaje z 2 fotkami ,potem z 1 fotką,a potem samo i 3 miejsca wolne .
    Ale naprawdę jest super.
    Jeszcze tylko promocja (zbiorowa(wydawca ,kategoria ,ilość ) )to co już pisałem i jest super.

    Pozdrawiam
    Czas Młodego położyć spać jutro rano basen i szkoła.

  8. Witam, Przepraszam, że piszę na temat inny niż poruszony w poście. Pytanie jest trochę z pogranicza funkcjonowania sklepu shoper a pozycjonowania. Mianowicie chodzi o możliwość umieszczenia lewego menu kategorii jako tagu h3. Zastanawiam mnie czy uda się to wprowadzić poprzez lekką modyfikację kodu w którymś z plików, czy wymagana jest większa praca. Proszę o pomoc w rozwikłaniu tej zagadki.

    pozdrawiam
    Marta

    1. teoretycznie możesz dodać dodać znaczniki nagłówkowe h3 do menu przez plik Menu/box.tpl. Tam budowane jest całe drzewo kategorii.
      Nie uważam jednak by miało to pozytywny wpływ na pozycjonowanie.

  9. Zapomniałem już, że walczyłem z tym skryptem i teraz wróciłem tu a tu niespodzianka i skrypt po poprawkach działa:) Dzięki za bardzo fajny dodatek. Pozdrawiam, Maciek

  10. Ja nie mam możliwości edytowania plików (opcji zaawansowanych) czy w jakiś sposób mogę ten skrypt wykonać czy raczej nie da rady?

    1. musisz wykonać kopie skórki standardowej, tylko przez kopie można dostać się do plików…

  11. Znalazłem, dzięki.

    Mam jeszcze pytanie, otóż chciałbym dodać jeden moduł a dokładnie Produkt dnia do nagłówka strony. Jaki plik odpowiada za nagłówek to znalazłem, ale jak dodać tam wyświetlenie tego modułu ? na pewno jakiś kod, tylko jaki ? byłbym bardzo wdzięczny za podpowiedź

  12. Edycja Modułu jak najbardziej trafna z tymże skrypt nie do końca dopracowany. Według mnie w momencie przewinięcia przedmiotów do ostatniej zdefiniowanej ilości np. lista po 4 produkty przewijanie powinno się zakończyć w momencie wyświetlania ostatnich 4 bądź powinno powracać w drugą stronę . Może da się to dopracować ?

    1. hmm… zależy co rozumiemy przez „nie do końca”, ja tylko zaproponowałem prostą przeróbkę rozwiązującą problem wyświetlania więcej niż jednego produktu w slajderze. Nie projektowałem tego skryptu ani jego funkcjonalności, nie twierdze także że rozwiązanie jest idealne. Może kiedyś znajdę czas by „dopracować” te propozycje ale prawdę mówiąc już parę innych tematów czeka w kolejce a wolnego czasu mam naprawdę niewiele więc wiele rzeczy musicie testować na własną rękę… Moje wpisy mają przede wszystkim zachęcić do eksperymentowania z systemem 🙂

  13. Witam

    Mam pytanie odnosnie głonego paska menu.
    Jak ustawić aby po najechaniu myszką zmieniało sie tło i kolor czcionki.
    W box menu mam to opanowane a tu sie zgubiłem.

    Pozdrawiam

    1. napisz jeszcze jaka wersja oprogramowania bo są spore różnice pomiędzy np shoper 4 i shoper 5

    1. Aby zmienić tło i kolor czcionki w menu poziomym (w nagłówku) dodaj np coś takiego:
      .menu li h3 a:hover{color:red;background:black;}

      gdzie color odpowiada za kolor czcionki a background za tło pod nią. Kolory najlepiej zapisywać w formacie heksadecymalnym czyli np czerwony wygląda tak #FF0000
      a czarny #000000. Przez co wcześniejszy zapis powinien wyglądać następująco:
      .menu li h3 a:hover{color:#FF0000;background:#000000;}

      Kod odpowiadający za dany kolor możesz sprawdzić np tu: http://www.colorpicker.com/

  14. Witam
    Zrobiłem to co trzeba, moduł ustawiony, skrypt wklejony, produktów jest wystarczająca ilość, bestsellers/box.tpl i newproducts/bos.tpl zmienione ze slider{…… na slider2{…… I nadal nic. Ciągle pionowa lista ze zdjęciami się pokazuje. http://www.wesela-modex.pl

    1. napisz jeszcze czy wklejałeś kod bezpośrednio z treści czy z pliku jaki przygotowałem do pobrania?

  15. Po kliknięciu na plik do pobrania otworzył mi się w nowym oknie, i to skopiowałem i wkleiłem. Nie zmieniałem nic w nim.

    1. hmm, jeżeli wszystko wykonałeś poprawnie to nie ma powodów by nie działał, jedyne co mogę zrobić to sprawdzić czy wszystkie elementy zrobiłeś poprawnie ale do tego musiałbym mieć dostęp do Twojego panelu administracji (do działu Konfiguracja). Jeżeli chcesz bym to sprawdził to stwórz mi dostęp do panelu administracji Twojego sklepu i podeślij dane mailem.

  16. super działa, bardzo dziękuję. Czy jest możliwość ustawienia aby po przejechaniu wszystkich produktów np. „produktów dnia”, nie zostawało 3-2-1 produkt, tylko żeby slider od razu przewijał do początku?

    1. zapewne jest i taka możliwość, postaram się przysiąść do tego i w tym miesiącu opisać jak to zrobić…szykujemy trochę zmian firmowo-blogowych więc jeszcze przez przynajmniej tydzień nie znajdę na to czasu. Sorki ale musisz poczekać

  17. Witam – przypominam się z tematem poruszonym wcześniej – aby rotacja była ciągła, bez znikania produktów. Czy jest to w ogóle możliwe do zrobienia?

  18. Witam – przyłanczma się równiez do proźby aby rotacja produktów była ciagla i nie było widać pustych miejsc.

    1. efekty parallax są bardzo fajne w sumie ten slajder używamy na naszej nowej stronie. Problem w tym że Shoper bazuje na bibliotece MooTools a ten slajder na bibliotece jQuery. Łączenie obu bibliotek nie jest zbyt dobrym pomysłem. Postaram się poszukać podobnego slajdera opartego na mootools

  19. Mam pytanie – czy jest jakas wtyczka/modyfikacja która by produktu ktorych nie ma na stanie wyświetlały się na koncu kategorii/listingu?

  20. Witam,
    Po aktualizacji Shopera do 5.4.3. niestety przedstawione przez Pana rozwiązanie przestało działać, przynajmniej w moim sklepie. Będę wdzięczny za pomoc, bardzo cenne i wartościowe są materiały, które Pan publikuje na blogu.
    Pozdrawiam.

    1. Witam,

      aktualnie nie mam jeszcze dostępu do szczegółów zmian w kodzie w tej wersji bo plik ze zmianami na serwerze shoper jest uszkodzony więc niestety nie mam jak sprawdzić gdzie leży przyczyna błędu. Mam nadzieję, że do końca tygodnia uda mi się uzyskać odpowiednie informacje by poprawić błąd…

  21. Oj sory dopiero teraz zobaczyłem post z aktualizacją i rozwiązanie. ;o Siedziałem z 1,5 godziny i rozwiązywałem ten problem gdy kod czekał tu gotowy ;( PRoszę u usunięcie tych komentarzy pozdr

  22. No niestety nie dziala 🙁 , nawet po poprawce, produkt pojawia się jeden *przed poprawką byla lista pionowa* i się nie przewija. Jest szansa na aktualizację ?

  23. Witam. Skopiowałem skrypt ze strony oraz wprowadziłem zmianę w pliku bestselers.
    Nie działa mi przewijanie. Mam najnowszą wersję sklepu 5.4.12. Wszystko w opcjach modułu jest również poprawnie.
    Jeśli ktoś może mi pomóc proszę o kontakt.

  24. Rozwiązanie bardzo fajne – ale czy jest możliwość, aby produkty przesuwału się odpowiednio co 4. Wówczas mając np. 12 produktów w promocji wystarczą 3 przesunięcia żeby zobaczyć wszystkie 12 produktów.

    1. Edycja zaawansowana jest dostępna tylko na kopii stylu standardowego… Zawsze pracujcie na kopiach jak coś robicie bo można testować przed publikacją i zawsze jest do czego wracać jak się popsuje 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany.