Baner reklamowy dla Shoper

Witam,

 

UWAGA!! wpis nieaktualny, aktualnie system Shoper 5 posiada własny baner rotacyjny. Uruchom moduł „Suwak” w swoim sklepie.

 

trochę już czasu  minęło od mojego ostatniego posta,  pewnie kilka osób zwątpiło, że jeszcze coś napiszę a tu proszę.

Ponieważ wiele w świecie posiadaczy oprogramowania Shoper się nie zmienia (ostatnio nie zauważyłem nowych aktualizacji) przygotowałem mały projekcik dla wszystkich, którzy chcą wprowadzić trochę ruchu do swojego Shopera.

Dokładniej mówiąc chodzi mi o możliwość wprowadzenia do sklepu kilku zdjęć w nagłówku wyświetlanych w formie slideshow ( czyli rotujących się jeden po drugim).

Do wykonania takie zadania wystarczy poszukać odpowiedniego kodu JavaScript (w sieci jest dość dużo darmowych programików do obsługi tego typu zadań) a następnie wdrożyć go w naszym sklepie.

Ja na potrzeby tego projektu wykorzystam programik o znaczącej nazwie ” Slideshow 2 „, który można pobrać ze strony http://www.electricprism.com/aeron/slideshow/

Cały pakiet składa się z kilku katalogów i plików, najważniejsze by nie zapomnieć skopiować plików:

• slideshow.css (odpowiada za style wyświetlanych elementów)
• slideshow.js
• mootools.js

Warto jednak skopiować wszystkie pliki z rozszerzeniem .js ponieważ odpowiadają one za różne dodatkowe efekty.

UWAGA! Aby skrypt działał poprawnie niestety trzeba usunąć część kodu który odpowiada za wyświetlanie dynamicznych galerii na karcie produktu, jeżeli więc chcecie korzystać z galerii dynamicznej nie wprowadzajcie zmian w kodzie który będę pisał poniżej.

Jeżeli macie już przygotowane pliki graficzne które chcecie aby się rotowały oraz macie pliki skryptu przegrajcie wszystko do następujących katalogów:

• pliki graficzne do katalogu _var/images
• plik slideshow.css do katalogu _var/css
• pliki z rozszerzeniem .js do katalogu _var/js

Następnie otwórzcie główny plik Waszej skórki czyli index.tpl i znajdźcie fragment kodu {if $smarty.const.CONF_USE_LIGHBOX} i usuńcie wszystko łącznie z {/if} ten fragment kodu odpowiada właśnie za obsługę dynamicznych galerii.

Na miejsce usuniętych elementów wpiszcie:

<script type=”text/javascript” src=”_var/js/mootools.js”></script>
<script type=”text/javascript” src=”_var/js/slideshow.js”></script>

<link rel=”stylesheet” type=”text/css” href=”_var/css/slideshow.css” media=”screen” />

następnie należy wkleić kod odpowiedzialny za wywołanie odpowiednich funkcji. Zwróćcie uwagę na to by wpisać tam odpowiednie nazwy zdjęć jakie mają być rotowane oraz tekst jaki ma się wyświetlać przy każdym zdjęciu (jeżeli nie chcecie wyświetlać tekstów do zdjęć to usuńcie „captions: true,„).

Pamiętajcie również o ustaleniu szerokości i wysokości zdjęć.

{literal}
<script type=”text/javascript”>
//<![CDATA[
window.addEvent(’domready’, function(){
var data = {
'z1.jpg’: { caption: 'tekst do zdjecia 1.’ },
'z2.jpg’: { caption: 'tekst do zdjecia 1.’ },
'z3.jpg’: { caption: 'tekst do zdjecia 1.’ },
'z4.jpg’: { caption: 'tekst do zdjecia 1.’ }
};
var myShow = new Slideshow(’show’, data, {captions: true, height: 257, hu: '_var/images/’, thumbnails: true, width: 1000});
});
//]]>
</script>{/literal}

Teraz pozostaje jedynie umieścić zdjęcie początkowe w miejscu wyświetlania nagłówka czyli tam gdzie macie normalnie

<h1><a href=”{$mainUrl}” title=”logo” id=”logo”><img id=”logo” src=”{$skinyDir}/{$smarty.const.CONF_SKIN_DEFAULT}/logo.jpg” alt=”{$page_title|default:$smarty.const.ADM_TITLE}” /></a></h1>

Zastępujecie ten fragment kodu wpisem:

<div id=”show”>
<img src=”_var/images/z1.jpg” alt=”tekst do zdjecia 1.” />
</div>

Przykład ponownie musiałem usunąć na kilka dni 🙂

Pozdrawiam