Shoper 5 – Rozwijany narożnik reklamowy

Dzisiejsza odsłona  poradnika edycji standardowego oprogramowania Shoper 5 to odrobina kodu i kilkanaście minut pracy by osiągnąć  efekt rozwijania narożnika sklepu.

Oczywiście istnieje takie prawdopodobieństwo, że kiedyś podobne „fajerwerki” znajdą się w standardowej odsłonie programu ale póki co jeszcze ich nie ma więc jeżeli kiedyś chcieliście dodać taki element do swojego sklepu, zapraszam do zapoznania się z  krótkim poradnikiem.

WAŻNE! – po aktualizacji 5.3 zmianie uległy style menu sklepu przez co narożnik „wjeżdża” pod menu. Aby rozwiązać ten problem należy dodać styl z-index:1000; do elementu corner-wrap.

Ostatnio zauważyłem, że pojawiają się problemy przy kopiowaniu kodu JavaScriptu bezpośrednio z treści poradnika także na końcu znajdziecie pliki tekstowe do pobrania z pełnym kodem. Podobnie jak przy ostatnich dwóch wpisach z tej serii zaprezentowany efekt dostępny jest na stronie sklep.szablonsklep.pl.

 

Zabierając się do pracy nad wprowadzeniem przypominam o tworzeniu kopii aktywnej skórki.

Do wykonania efektu będziemy pracować w trzech miejscach:

• dział zarządzania wyglądem skórki – zakładka własny styl CSS,
• dział zarządzania wyglądem skórki – zakładka własny kod JavaSript,
• dział Konfiguracja/Integracje/Integracje własne sekcja head.

 

Krok 1 – przygotujcie sobie 2 pliki graficzne, pierwszy to plik narożnika, który ma być niejako uchylony a drugi to plik reklamy lub np. facbooka, który ma się pokazać po rozwinięciu narożnika.

Krok 2 – przygotowujemy kod HTML i wklejamy go do Konfiguracja/Integracja/Integracje własne w sekcji pierwszej czyli head.

Kod HTML składa się z 4 pojemników div:

 <div id=”corner-wrap”>
<div id=”corner”>
<a href=”http://www.facebook.com/pages/SzablonSklep/119729681375619″><img src=”http://sklep.szablonsklep.pl/skins/user/shoper_red_7//images/user/corner.png” alt=”Sprawdź” id=”corner-flip” /></a>
<div id=”corner-box”></div>
</div>
</div>

corner-wrap – został stworzony tylko po to by ułatwić umieszczeniu narożnika w odpowiednie miejsce na stronie.

corner – pojemnik, który używany jest przez kod JavaSript do wywołania efektu.

corner-flip – to nie tyle pojemnik co zdjęcie narożnika które pozwala na osiągnięcie efektu rozwijania rogu strony.

corner-box – pojemnik główny, którego tłem jest nasza reklama.

W kodzie mamy również link którym możemy przekierować klienta w dowolne miejsce na stronie lub do naszego konta na facebook`u.

Krok 3 – w dziale Konfiguracja/Wygląd(wybierzcie odpowiednia skórę)/zakładka Własny kod JavaScript.

Dodajemy tu kod:

window.addEvent(’domready’,function() {

var flip = $(’corner’);
var flipImage = $(’corner-flip’);
var flipMessage = $(’corner-box’);

flip.addEvents({
mouseenter:function() {
$$(flipImage,flipMessage).set(’morph’,{ duration: 500 }).morph({
width: 307,
height: 319
});
},
mouseleave:function() {
flipImage.set(’morph’,{ duration: 220 }).morph({
width: 50,
height: 52
});
flipMessage.set(’morph’,{ duration:200 }).morph({
width: 50,
height:50
});
}
});
})

Ważne są tu rozmiary oraz czas trwania efektu rozwijania (czyli 307 – szerokość reklamy, 319 – wysokość reklamy po rozwinięciu). Kod możecie oczywiście dostosować do własnych potrzeb.

Ostatnim krokiem jest nadanie naszym pojemnikom odpowiedniego stylu CSS

Krok 4 – wstawienie kodu CSS:

#corner-wrap{
position:absolute;
right:0;
top:0;
z-index:1000;
}
#corner {
position:releative;
right:0;
top:0;
float:right;
}
#corner-flip {
position:absolute;
right:0;
top:0;
width:50px;
height:52px;
z-index:99;
-ms-interpolation-mode:bicubic;
}
#corner-box {
position:absolute;
right:0;
top:0;
width:50px;
height:50px;
overflow:hidden;
background: url(’../images/user/reklama.jpg’) no-repeat right top white;
}

 

Po zapisaniu sprawdźcie sami efekt końcowy. W prawym górnym rogu waszego sklepu powinien pojawić się nowy (całkiem efektowny) boks.

Tak jak wspominałem na początku, możecie również pobrać pliki tekstowe z każdym kodem z osobna:

HTML

JavaScript

CSS