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

3 odpowiedzi do “Baner reklamowy dla Shoper”

  1. Witam, gdy wklejam kod ze sliderem (nie moduł) ukazuje się błąd z treścią „{if $smarty.const.CONF_USE_LIGHBOX}” ale gdy chcę usunąć ten fragment kodu aby slider działał, nie mogę go znaleść w żadnym z głównych plików w edycji zaawansowanej nawet w index.tpl… Czy można jeszcze to usunąć? aby slider działał i w którym miejscu trzeba wkleić fragment kodu slidera aby był widoczny zamiast głównego logo banera.
    Proszę o pomoc i pozdrawiam.

    1. wykorzystanie kodu slajdera to temat, niestety na dłuższą wypowiedź także jeszcze nie będę Ci mógł pomóc. jestem w trakcie przygotowania poradnika jak wykorzystać skrypt slajdera do rotowania innych elementów co pewnie by pomogło ale niestety okazało się, że w kodzie jest drobny błąd który uniemożliwia używania tego skryptu w innych miejscach sklepu. Rozmawiałem już w tej sprawie u producenta i wiem, że w następnej aktualizacji (druga połowa stycznia) zostanie to poprawione. Jak tylko wprowadzą zmiany opublikuje post o tym jak korzystać z kod ze slajdera.

      Jeżeli chcesz się pobawić to możesz spróbować umieścić Suwak w standardowym miejscu a następnie wymusić jego pozycje poprzez „position:absolute”.

Dodaj komentarz

Twój adres email nie zostanie opublikowany.