Opublikowane w przez Grzegorz Rusin

Shoper 5 ? wysuwany boks ? poradnik

Witam ponownie w kolejnym poradniku edycji sklepów internetowych opartych na systemie Shoper 5.

Dzisiaj podejmuje temat poruszany coraz częściej w waszych mailach, temat stworzenia modułu wysuwanego boksu np Facebook`a. Pokaże wam jak w dość prosty sposób możecie dodawać do waszego sklepu ciekawy efekt wysuwania.

Na potrzeby poradnika treść mojego boksu będzie jedynie zwykłym tekstem ale nie ma problemu by rozbudować moduł tak by wyświetlał np Likebox Facebook`a, formularz kontaktowy czy newsletter.

Na początek mały zrzut ekranu co tak naprawdę chcemy osiągnąć:

Jak widzicie nasz mały slajder to niebieski boks umieszczony z prawej strony ekranu, po kliknięciu na mniejszy boks następuje jego wysunięcie a po kolejnym kliknięciu wsunięcie na pozycję wyjściową.

 

Jak dodać taki boks do sklepu Shoper?

Oto kilka prostych kroków które musicie przejść (przypominam o wymogu pracy na kopii skórki). Zmiany które tu proponuję nie wymagają edycji plików HTML także NIE wpływają negatywnie na późniejsze aktualizacje.

 

Krok 1 – Utwórz kopię skórki aktywnej oraz przejdź do jej edycji;

Krok 2 – przejdź na zakładkę „Własny skrypt JS”, dodaj następujący kod i zapisz ustawienia:

window.addEvent(’domready’, function(){
var fx = new Fx.Tween(’slide_box_sz’, {
duration: 500,
transition: 'quint:in’
});
fx.set(’width’, ’50px’);
fx.addEvent(’complete’, function(){
});

var to = 50;
$(’slide_box_sz’).addEvent(’click’, function(){
//fx.start(’width’, 50, 300);
fx.start(’width’, (to == 50 ? (to = 300) : (to = 50)));
//fx.cancel.delay(100, fx);
});
})

Kod ten odpowiada za efekt wysuwania naszego boksu. Ważne części kodu to:

  • slide_box_sz – jest to identyfikator  wysuwanego boksu,
  • duration – czas trwania efektu w milisekundach (w tym przypadku 500),
  • transition – rodzaj przejścia (w tym wypadku  'quint:in’ )
  • fx.set(’width’, ’50px’) – ustala szerokość boksu na wyjściowe 50px,
  • (to = 300)  – ustala szerokość końcową,

 

Jak widzicie kod zarządzający efektem nie jest skomplikowany, przejdźmy zatem do kodu CSS:

Krok 3 – przejdź na zakładkę „Własny kod CSS”, dodaj kod i zapisz zmiany:

/*—sliderbox—*/
#slide_box_sz {
position:absolute;
top:200px;
right:0;
font-family: Verdana, Arial;
color: #fff;
background: #45719B;
border: solid 1px #26445F;
text-shadow: 0 1px 0 #0C131C;
height: 100px;
padding: 10px;
cursor: pointer;
overflow: hidden;
}
#slide_box_sz .sz_link{
float:left;
width:50px;
height:120px;
}
#slide_box_sz .sz_box{
float:right;
width:250px;
height:120px;
}

Kod #slide_box_sz określa jego podstawowe style. Ustalamy odpowiednio, pozycję boksu w 200px od góry i 0 od prawej, rodzaj czcionki, wysokość itp.

#slide_box_sz .sz_link określa wygląd części wysuniętej na stałe możecie wstawić tam np logo Facebook`a .

#slide_box_sz .sz_box określa wygląd części która pojawi się po wysunięciu. Kod możecie dostosować do własnych potrzeb ważne by szerokości zgadzały się z tymi co wstawiacie w kodzie javaSript.

Krok 4 – przejdź do działu Konfiguracja/Integracje/Integracje własne i dodaj kod HTML:

<div id=”slide_box_sz”>
<div class=”sz_link”>tekst…</div>
<div class=”sz_box”>tekst który pojawi się po rozsunięciu boksu…</div>
</div>

Na potrzeby poradnika mój kod HTML jest bardzo prosty. W pierwszym bloku div wyświetlanej jest tylko słowo „tekst…” a po rozwinięciu pojawia się tekst z drugiego bloku div.

Nie ma przeszkód w tym by dodać do tych bloków dodatkowy kod np formularz newslettera.

Pozostawiam to waszej wyobraźni i zapraszam do dzielenia się waszymi przeróbkami.

Efekt możecie zobaczyć na sklep.szablonsklep.pl

Pozdrawiam

 

 

39 odpowiedzi do “Shoper 5 ? wysuwany boks ? poradnik”

    1. edycje pozostawiam wam, życie nie może być aż tak łatwe 🙂 podpowiem jedynie, że efekt wywoływany jest przez „click” czyli kliknięcie na box o id=”slide_box_sz” więc wystarczy zmienić tak by funkcje wywoływało kliknięcie na element o innym id. Powodzenia

  4. Mam za to inny problem.. probuje odpalic sklep na facebooku (apps) i do tego sluzy osobna skorka, niestety na niej tez wyswietla sie ten wysuwany box, w dodatku od razu jest wysuniety, rozwala caly uklad.. Jak to zgasic w tym szablonie? W szablonie mobilnym sie nie pojawia.

    1. Musisz dodać kod który wyłączy boks w sklepie na facebooku. Sprawdź sobie jakie klasy dodaje facebook do body i później dodaj do tego klasę swojego boksu wymuszając jego wyłączenie przez „display:none !important”. Powinno zadziałać choć nie mam teraz czasu by sprawdzić.

  7. Twoja porada zadzialala, w zakladce Wlasny styl CSS dla szablonu Facebooka dodalem kod:

    #slide_box_sz {
    display:none !important;}

    #sz_link {
    display:none !important;}

    #sz_box {
    display:none !important;}

    I dziala juz poprawnie. Nie wiem czy to nie za duzo ale w kazdym razie box znikl w wersji facebookowej.

  8. Zwroce sie jeszcze raz o pomoc, chociaz teraz problem jest jak dla mnie duzo bardziej skomplikowany. Aktywowalem w sklepie SSL. W boxie dodalem widget do polaczen gadu gadu -> http://www.gadudodatki.pl/webAplikacje/show/id/39077 . Niestety generuje on kod nieszyfrowany (http, nie https) Efekt jest taki, ze mimo ze moja strona jest szyfrowana to tresc widgetu nie jest i pojawia sie informacja, ze strona jest niebezpieczna. Wystarczy usunac kawalek kodu z wlasnych integracji gdzie jest link do widgetu gg i strona informuje, ze jest bezpieczna.

    Pytanie brzmi wiec jak wylaczyc we wlasnych integracjach (lub fragment zawierajacy link) ale tylko w trakcie pobytu w koszyku lub podczas logowania na swoje konto uzytkownika?

    Bardzo trudne?

    1. zerknę na to po świętach, może coś uda się zrobić… na początek proponuje wyłączyć moduł gg na stronie koszyka (nie będzie odstraszał). Możesz użyć do tego klas odpowiednich dla danej strony, np strona koszyka ma klasę główną .shop_basket więc możesz dać .shop_basket #nazwa_boksu {display:none;}

  12. Spac nie moglem, wiec zrobilem, dziala, czyli jak polaczenie nie jest szyfrowane wczytuje kod javascript z serwera gadu gadu, jezeli jest szyfrowane to wyswietla komunikat.

    Niestety nie moge tu wkleic kodu z jakiegos powodu, w kazdym razie ograniczylo sie to do modyfikacji kodu w Integracjach o dodatkowy kod javascript.

  13. Mam problem z wysuwającym się like box-em, za nic nie mogę zmusić go do otwierania się..
    ustawiam go w dowolnym miejscu, facebook działa, ale wymusić na ramce przesunięcia po najechaniu czy kliknięciu.. proszę o pomoc

    Pozdrawiam i Wesołych Świąt Wielkanocnych

  14. strona tu nie wiele pomoże, bo próby zamieszczenia wysuwanego boxa są usuwane..
    pracuje na shoperze 5.1.4, i nawet bez umieszczania like boxa facebooka w ramce nie chce działać przesunięcie..
    Kombinuje teraz z ikonką, po kliknięciu której pojawi się like box w określomym miejscu, i tu prosiłbym o pomoc przy kodzie JS, bo również są opory..

    1. „próby zamieszczenia wysuwanego boxa są usuwane” – nie wiem czy dobrze zrozumiałem ale czy nie masz czasem włączonego czyszczenia kodu HTML w dziale Konfiguracja/Bezpieczeństwo?

  15. Chodziło mi o to, ze testuje efekty na kopii stylu graficznego, i nie pozostawiam kawałków nie dokończonej pracy na stronie..
    Wracając: box_facebooklike jest stworzony.. umieścić go w dowolnym miejscu to nie problem.. nadać mu tło oraz przycisk również.. Ale wprawić go w ruch, to już zbyt trudne, kopiując powyższy kod z tootoriala, i nadając mu właściwe wartości kompletnie nic się nie dzieje.. próbowałem przerobić skrypt ze strony html, również nic. Dlatego proszę o pomoc z skryptem JS dla naszego Shopera…
    Czyszczenie kodu html – wyłączone

    1. pytałem o link ponieważ nie jestem w stanie w ciemno sprawdzić co wpływa na błędne działanie skryptu w Twoim sklepie… Sam skrypt działa (co możesz zobaczyć na demo i paru innych sklepach które go używają). Problemy mogą być spowodowane np innym skryptem który masz na stronie…

  16. Własny skrypt JS: jest pusty..
    main.js przywróciłem do najstarszej wersji..
    nie wiem co jest nie tak..
    postępując według poradnika, nic nie zmieniając, absolutnie nic się nie dzieje.
    skórka włączona, odświeżona itp.
    Brak jakiej kolwiek reakcji.

  17. Witam,
    Panie Grzegorzu prosze o pomoc. Wklejając kod HTML w integracje własne są trzy miejsca do wyboru Nagłówek, Stopka i Potwierdzenie złożenia zamówienia. Wklejam w nagłówku to slajder pojawia się w nagłówku, wklejam w stopce analogicznie. Gdzie wkleić ten kod w integracjach własnych? Z góry bardzo dziękuję za pomoc.

    1. hmm, pewnie coś robisz nie tak 🙂 ciężko mi ocenić co może być nie tak, może masz inny skrypt i się gryzą albo kopiowałeś kod bezpośrednio z bloga (przy takim kopiowaniu często zmieniają się znaczniki)

  19. Witam, dziękuję za porady. Chciałabym użyć kilku „własnych kodów JS” – pytanie jak je oddzielić od siebie, aby zadziałały na jednej kopii? A także w którym miejscu wrzucić wysuwany box we „Własnym kodzie CSS” – jak wrzucam na samym końcu nie działa 🙁 Będę wdzięczna za pomoc!

    1. kody js możesz dodać w jednym miejscu, a wysuwany box albo jako moduł albo w integracjach własnych. Jak nie działa to sprawdź czy czasem nie występuje wcześniej jakiś błąd js (np przez wtyczke Firebug)

Dodaj komentarz