osCommerce na sterydach

osCommerce to skrypt, który przez lata królował wśród aplikacji do prowadzenia sklepu internetowego. Jednak przez ten czas internet poszedł do przodu, a osCommerce wciąż stał w miejscu. Efektem tego są tysiące małych e-sklepów, które co prawda działają, ale daleko im do nowoczesnych serwisów. Sytuację ratują jednak darmowe dodatki publikowane przez niezależnych programistów. Wybraliśmy najlepsze z nich. Pokażemy również, jak poradzić sobie z ich instalacją.

Wbrew pozorom, niewielu właścicieli stron
opartych na osCommerce z własnej woli
decyduje się na dłubanie w jego kodzie
źródłowym. Zwykle taka konieczność pojawia się,
gdy trzeba zmienić wygląd sklepu.

Po tzw. kontrybucje, czyli dodatki zwiększające
możliwości sklepu, sięgają już tylko wprawni
programiści. Prezentują one bowiem często
różny poziom i nie są pozbawione błędów. Wiele
kontrybucji jest po jakimś czasie porzucanych przez
ich autorów, co przekreśla nadzieje na wsparcie
techniczne. Przez to ich instalacja nie zawsze
kończy się sukcesem, a to zniechęca do dalszych
eksperymentów.

Oczywiście można w zamian sięgnąć po gotową
przeróbkę całego sklepu, przygotowaną przez
specjalistyczną firmę. To jednak kosztuje, a przecież
podstawową zaletą osCommerce jest brak opłat.
To dlatego wiele sklepów wykorzystujących
osCommerce wygląda tak podobnie do siebie.
W tę pułapkę wpadają nawet nowo uruchomione
sklepy – szczególnie w Polsce, gdzie osCommerce
nie miał do niedawna żadnej realnej konkurencji
(obecnie zmienia się to za sprawą aplikacji
Magento).

Na potrzeby tego artykułu zainstalowaliśmy na
testowej wersji osCommerce każdy z omawianych
dodatków. Dlatego nasze instrukcje są pozbawione
błędów i zawierają wskazówki, których nie znajdziesz
w oficjalnej dokumentacji.

Instalacja osCommerce

Zacznijmy jednak od instalacji nowego sklepu,
która w przypadku osCommerce jest bardzo szybka
i banalnie łatwa. Będziesz do tego celu potrzebował
konta WWW z obsługą PHP oraz dostępu
do bazy danych MySQL. Wystarczy, że pobierzesz
polską wersję skryptu ze strony http://www.oscommerce.pl, rozpakujesz archiwum i wgrasz całą jego
zawartość na serwer.

Następnie należy zmienić prawa dostępu do
pliku catalog/includes/configure.php oraz catalog/
admin/includes/configure.php na 777 (użyj
polecenia chmod 777). Dzięki temu instalator
będzie mógł automatycznie wgrać do tego pliku
parametry bazy danych. Po zakończonej instalacji
pamiętaj, aby zmienić prawa dostępu do tych
plików na 404.

Teraz pozostało już tylko otworzyć stronę www.
twojastrona.pl/catalog w przeglądarce internetowej
i podążać zgodnie z instrukcjami instalatora.
Po kilku minutach twój sklep zostanie zainstalowany
i będziesz mógł się zalogować do panelu
administracyjnego, aby zacząć wprowadzać nowe
produkty… stop!

Zanim przystąpisz do wprowadzania oferty,
przemyśl jak powinna wyglądać prezentacja
towaru oraz jakie opcje pomogą w klientom w zakupach.
Najlepiej zrobić to na samym początku,
ponieważ dzięki temu unikniesz wprowadzania
zmian do dodanych już pozycji. Pomocne w tym
mogą się okazać dodatki opisane w kolejnej części
artykułu.

Więcej zdjęć w opisie produktu

Wersja instalacyjna OsCommerce pozwala
na dodanie tylko jednej fotografii prezentującej
sprzedawany przedmiot. Zdjęcia mają kluczowe
znaczenie w sklepach internetowych, dlatego najlepiej
rozpocząć ulepszanie skryptu od modyfikacji
tego elementu.

Po zainstalowaniu kontrybucji More Pics (http://addons.oscommerce.com/info/1611) będziesz mógł
wgrywać do 6 dodatkowych zdjęć dla każdego
towaru.

Instalację More Pics rozpocznij od pobrania,
a następnie rozpakowania archiwum z modułem. Na
początek wgraj plik database_additions.txt do swojej
bazy danych. Zawarte w nim polecenia sprawią,
że w tabeli \”products\” pojawią się pola, w których
będą zapisywane informacje o ścieżce dodatkowego
zdjęcia. Plik zmodyfikuje też tebele \”configuration\”,
co pozwoli na kontrolę ustawień modułu More Pics
z poziomu panelu administracyjnego.
Następnie do pliku catalog/includes/languages/polish.php dodaj przed końcowym tagiem:

define(\'CLOSE_POPUP\', \'zamknij okno\');
define(\'MORE_PIC\', \'Więcej zdjęć\');

Teraz należy dodać w panelu administracyjnym
pola umożliwiające wgrywanie zdjęć.

Najłatwiejszym rozwiązaniem jest podmiana
pliku catalog/admin/categories.php na taki sam
plik z z kontrubucji. Jeśli jednak już dokonywałeś
wcześniej zmian w pliku categories.php, skorzystaj
z jednego z programów do porównywania zawartości
plików (np. WinMerge) i nanieś odpowiednie
zmiany. To samo zrób z plikiem catalog/admin/includes/functions/general.php.

Kolejnym krokiem jest zdefiniowanie nazw
w pliku językowym. Przed ostatnim tagiem, w pliku
admin/includes/languages/polish/categories.php dodaj:

define(\'TEXT_PRODUCTS_SUBIMAGE1\', \'Zdjęcie1:\');
define(\'TEXT_PRODUCTS_SUBIMAGE2\', \'Zdjęcie2:\');
...

odpowiednio dla wszystkich 6 zdjęć.

Jeśli dokonałeś już w panelu administracyjnym,
to kolej na stronę sklepu. Najważniejszy plik, który
nas interesuje, to product_info.php. Jeśli jeszcze
nic w nim nie zmieniałeś, podmień go na ten
z kontrybucji.

W pliku tym są zdefiniowane trzy różne
sposoby wyświetlania plików: \”sides\”, \”above\”
i \”below\”. Możesz wybierać pomiędzy nimi w panelu
administracyjnym, w zakładce \”Konfiguracja\”
> \”More Pics\” > \”Table Location\”. \”Below\” odpowiada
za umieszczenie zdjęć pod opisem, \”above\”
– nad opisem, a \”sides\” – sąsiadująco z opisem.

Oczywiście możesz modyfikować ich kod.
Wystarczy, że zmodyfikujesz jeden ze sposobów
wyświetlania, oto przykład:

if (MOPICS_TABLE_LOCATION==\'above\' && !empty($mopics_output))
{
echo \'


\'.$mopics_output.\'


 
\'.\"\n\";
}

Na koniec podmień plik catalog/popup_image.
php, a do katalogu catalog/iamges wgraj dwa
pliki graficzne: right.gif i left.gif. Pozwoli to na
przechodzenie pomiędzy dodatkowymi zdjęciami
po otwarciu okienka pop-up.

Załóżmy, że właściciel sklepu z kosmetykami
chciałby dodać na swojej stronie dział z praktycznymi
poradami. Nic nie stoi na przeszkodzie, aby
dodać takie podstrony w osCommerce na bazie
kodu podstrony z regulaminem. Istnieją jednak
lepsze rozwiązania.

Można w tym celu zainstalować moduł artykułów,
który umożliwi dodawanie publikacji z poziomu
panelu administracyjnego. Da także czytelnikom
możliwość ich komentowania. Co ważne, taki artykuł
można powiązać z konkretnymi produktami z oferty
sklepu. Wszystko to potrafi dodatek Article Manager
v1.0 (http://addons.oscommerce.com/info/1709).

Po jego pobraniu i rozpakowaniu zawartości
archiwum, wgraj plik article_manager_sql.txt do
bazy danych. Następnie skopiuj wszystkie nowe
pliki na swój serwer, zarówno do katalogu sklepu
jak i te odpowiadające za obsługę artykułów
z panelu administracyjnego.

Następnie należy zadbać o zdefiniowanie
nowych plików w plikach filnames.php i database_
tables.php w katalogu includes. W tym celu do
pliku filnames.php dodaj kod:

define(\'FILENAME_ARTICLE_INFO\', \'article_info.php\');
define(\'FILENAME_ARTICLE_LISTING\',\'article_listing.php\');
define(\'FILENAME_ARTICLE_REVIEWS\', \'article_reviews.php\');
define(\'FILENAME_ARTICLE_REVIEWS_INFO\', \'article_reviews_info.php\');
define(\'FILENAME_ARTICLE_REVIEWS_WRITE\',\'article_reviews_write.php\');
define(\'FILENAME_ARTICLE_RSS\', \'article_rss.php\');
define(\'FILENAME_ARTICLES\', \'articles.php\');
define(\'FILENAME_ARTICLES_NEW\',\'articles_new.php\');
define(\'FILENAME_ARTICLES_UPCOMING\',\'articles_upcoming.php\');
define(\'FILENAME_ARTICLES_XSELL\',\'articles_xsell.php\');
define(\'FILENAME_ARTICLES_PXSELL\',\'articles_pxsell.php\'); // New since v1.5
define(\'FILENAME_NEW_ARTICLES\', \'new_articles.php\');

Z kolei do databese_tables.php, dodaj przed
ostatnim tagiem kod:

define(\'TABLE_ARTICLE_REVIEWS\', \'article_reviews\');
define(\'TABLE_ARTICLE_REVIEWS_DESCRIPTION\', \'article_reviews_description\');
define(\'TABLE_ARTICLES\', \'articles\');
define(\'TABLE_ARTICLES_DESCRIPTION\',\'articles_description\');
define(\'TABLE_ARTICLES_TO_TOPICS\', \'articles_to_topics\');
define(\'TABLE_ARTICLES_XSELL\', \'articles_xsell\');
define(\'TABLE_AUTHORS\', \'authors\');
define(\'TABLE_AUTHORS_INFO\', \'authors_info\');
define(\'TABLE_TOPICS\', \'topics\');
define(\'TABLE_TOPICS_DESCRIPTION\',\'topics_description\');

Analogicznie wpisy musisz dodać w tożsamych
plikach w katalogu admin/includes/. Teraz powinieneś
zadbać o definicję tytułów i nazw w nowym module.

Sprowadza się to do stworzenia odpowiednich
wpisów w plikach językowych. Dla przykładu, w pliku
catalog/includes/languages/polish.php dodaj:

define(\'BOX_HEADING_ARTICLES\', \'Artykuły\');
define(\'BOX_ALL_ARTICLES\', \'Wszystkie artykuły\');
define(\'BOX_NEW_ARTICLES\', \'Najnowsze artykuły\');
define(\'TABLE_HEADING_AUTHOR\', \'Autor\');
define(\'BOX_HEADING_AUTHORS\', \'Artykuły tego autora\');
define(\'NAVBAR_TITLE_DEFAULT\', \'Artykuły\');

Podobne wpisy należy zdefiniować w panelu administracyjnym, zatem należy dodać także kod:

define(\'BOX_ARTICLES_REVIEWS\', \'Recenzje\');
define(\'BOX_ARTICLES_XSELL\', \'Powiązania\');

czyli definicje odpowiedzialne za tytuł dla recenzji
artykułów i powiązanych produktów.

Warto w tym miejscu zatrzymać się na chwilę i przypomnieć, że
w panelu administracyjnym będziesz mógł tymi
recenzjami zarządzać, a także tworzyć wspomniane
już powiązania artykułów z artykułami lub artykułów
z produktami. Do pełnego działania modułu
musisz jeszcze wprowadzić modyfikacje w pliku
includes/application_top.php, zarówno w katalogu
catalog/includes jak i catalog/admin/includes.
Teraz przyszła pora na wstawienie modułu
w odpowiednie miejsce. Zacznij od panelu administracyjnego
i w pliku admin/includes/column_left.
php znajdź kod:

require(DIR_WS_BOXES . \'catalog.php\');

a następnie dodaj poniżej taki fragment:

require(DIR_WS_BOXES . \'articles.php\');

Zanim zaczniesz dodawać nowe artykuły,
zaloguj się do bazy danych i dodaj do tabeli
admin_files wpisy: articles.php, articles_config.php, authors.php, articles_reviews.php, articles_xsell.php. Pozwali to na korzystanie w panelu
administracyjnym z tych zakładek. W innym razie
otrzymasz komunikat o braku dostępu.

Wybierz teraz, w którym miejscu na stronie
chciałbyś umieścić swój boks z artykułami?
Załóżmy, że wybierasz lewa kolumnę. W takim
wypadku otwórz plik catalog/includes/column_left.
php i dodaj:

require(DIR_WS_BOXES . \'articles.php\');

Od tego momentu artykuły będą dostępne na
stronie dla każdego odwiedzającego.

Dzięki funkcji powiązania produktów, będziesz
mógł zatrzymać klienta na stronie dłużej, wskazując
mu inne ciekawe pozycje z oferty. Rozwiązanie,
które sprawi że będą one wyświetlane na podstronie
produktu, to kontrybucja X-Sell v2-MS2 – Cross
Sell (http://addons.oscommerce.com/info/1415).

Po pobraniu i rozpakowaniu plików kontrybucji,
zacznij od zmian w bazie danych.
Stwórz tabelę, w której będą zapisywane
powiązania:

DROP TABLE IF EXISTS products_xsell;
CREATE TABLE products_xsell (
ID int(10) NOT NULL auto_increment,products_id int(10) unsigned NOT NULL default \'1\',xsell_id int(10) unsigned NOT NULL default \'1\',sort_order int(10) unsigned NOT NULL default \'1\', PRIMARY KEY (ID)
) TYPE=MyISAM;

Teraz wystarczy, że skopiujesz następujące pliki
na swój serwer: admin/xsell.php i admin/includes/
languages/polish/xsell.php, a także nadpiszesz lub
zmodyfikujesz plik /catalog/admin/includes/functions/general.php.
W kolejnym kroku dodaj przed ostatnim tagiem
w pliku admin/includes/filenames.php kod:

define(\'FILENAME_XSELL_PRODUCTS\', \'xsell.php\');

Podobnie w pliku admin/includes/application_top.php:

define(\'TABLE_PRODUCTS_XSELL\', \'products_xsell\');

To już prawie wszystkie zmiany w panelu administracyjnym.

Teraz dodaj w katalogu językowym
admin/includes/languages/polish.php poniższy

wiersz:

define(\'BOX_CATALOG_XSELL_PRODUCTS\', \'Powiązania produktów\');

Abyś mógł dodawać powiązania, musisz
jeszcze w boksie admin/includes/boxes/catalog.php
dodać jedną linijkę kodu:

\'\' . BOX_CATALOG_XSELL_PRODUCTS . \'
\' .Aby mieć dostęp do powiązań, nie zapomnij

dodać odpowiedniego wpisu w bazie danych.
W tabeli admin files, dodaj wpis xsell.php.

Część odpowiedzialną za panel administracyjny
możesz uznać za skończoną. Teraz czas na zmiany
od strony sklepu.

Skopiuj plik xsell_products.php do catalog/includes/modules. Do pliku catalog/includes/database_
tables.php dodaj przed ostatnim tagiem wiersz:

define(\'TABLE_PRODUCTS_XSELL\', \'products_xsell\');

A do pliku catalog/includes/filenames.php
definicję:

define(\'FILENAME_XSELL_PRODUCTS\', \'xsell_products.php\');

Teraz warto podstronę produktu. Otwórz plik
catalog/product_info.php i znajdź fragment odpowiadający
za wyświetlanie boksu \”Klienci kupili również:\”

i zmień ten fragment na:

Potem do pliku catalog/languages/english/product_info.php dodaj tytuł tego boksu:

define(\'TEXT_XSELL_PRODUCTS\', \'Zobacz także:\');

I to wszystko! Żeby móc zacząć korzystać
z kontrybucji, wybierz w panelu administracyjnym
zakładkę \”Sklep\” > \”Powiązania\” i połącz produkty
w taki sposób, jaki uznasz za najlepszy.

Masz w swoim asortymencie produkty z tej
samej serii, różniące się kolorem lub wielkością
opakowania? Zamiast dodawać je jako nowe
pozycje, skorzystaj z funkcji cech. Zanim jednak
przystąpisz do ich definiowania, zmodyfikuj je tak,
abyś niepotrzebnie nie dołożył sobie pracy.

Kontrybucja Product Attributes/Item Editor/
Price v. 1 (http://www.oscommerce.com/community/contributions,1668) pozwala dodawać cechy
z poziomu edytora produktu. Edycji wymaga tylko
plik admin/categories.php.

Ten dodatek pozwala również podwyższyć lub
obniżyć cenę produktu, gdy wybrana jest dana cecha
(rozwiązanie przydatne przy opcjach z różnymi
opakowaniami). Jedyne o czym należy pamiętać,
to fakt, że domyślnie należy podawać zmianę ceny
wedle wartości netto.

Domyślnie cechy wyświetlane są w postaci
listy rozwijalnej. To rozwiązanie może przypadku
niektórych produktów okazać się mało intuicyjne,
a poza tym zmusza klienta do klikania w listę, aby
móc zobaczyć dostępne opcje. Wyjściem z sytuacji
może być wyświetlanie opcji wyboru za pomocą
przycisku radio.

Aby zmienić sposób wyświetlania cech, otwórz
plik catalog/product_info.php i znajdź fragment:

a następnie zamień go na:

Teraz musisz zdefiniować menu. Otwórz plik
includes/functions/html_output.php i dodaj:

//radio_menu
function tep_draw_radio_menu($name,$values, $default = \'\', $parameters = \'\', $required = false) {
$field =\'
\';

if (empty($default) && isset($GLOBALS[$name])) $default = stripslashes($GLOBALS[$name]);
for ($i=0, $n=sizeof($values); $i<$n; $i++) { $value=\"tep_output_string($values[$i][\'id\']);\" $field .=\"\'\' . tep_output_string($values[$i][\'text\'], array(\'\"\' =>\'"\', \'\\'\' => \''\', \'<\'> \'<\',\'>\' => \'>\')) . \'
\';
}
$field .= \'
\';
if ($required == true) $field .= TEXT_FIELD_REQUIRED;
return $field;
}

Teraz dostępne opcje będą łatwiej zauważalne
i nie zostaną przegapione przez klientów. Łatwiejsze
jest też ich zaznaczanie.

Bardzo ważnym elementem w każdym sklepie
są recenzje pisane przez internautów. To one
niejednokrotnie mogą zachęcić klientów do zakupu
danego produktu. Domyślnie osCommerce ma
wbudowaną obsługę recenzji. Na stronie widnieje
boks z recenzjami, a na podstronie produktu
znajduje się odnośnik do recenzji… no właśnie,
odnośnik! Pomyśl, o ile bardziej skuteczne byłoby
wyświetlanie treści recenzji bezpośrednio na
stronie produktu.

Aby to zmienić, pobierz kontrybucję Reviews
in Product Display (http://addons.oscommerce.com/info/734). Następnie dodaj do bazy danych
polecenie:

INSERT INTO configuration (configuration_title, configuration_key, configuration_value, configuration_description,configuration_group_id, sort_order,date_added) VALUES (\'Number of Reviews in Product Description\', \'MAX_REVIEWS_IN_PRODUCT_INFO\', \'3\', \'Number of reviews to display
on product information page?

(set to 0 to disable)\', \'3\', \'25\', now());

Teraz wystarczy, że wyedytujesz plik catalog/
prduct_info.php (najłatwiej dokonać tego przy pomocy
programu WinMerge). Tak naprawdę jedyne
zmiany następują po fragmencie kodu:

\' . tep_image_button(\'button_reviews.gif\', IMAGE_BUTTON_REVIEWS) . \'\'; ?>

Po nim należy dodać fragment odpowiedzialny
za wyświetlanie recenzji bezpośrednio na stronie
produktu. To niewielka zmiana, ale prawdopodobnie
jedna z bardziej efektywnych ze wszystkich
omawianych.

Chciałbyś poinformować klientów o zmianach
lub o nowej świetnej promocji, ale boisz się, że ta
informacja umieszczona na stronie głównej zgubi
się w gąszczu produktów? Skorzystaj z prostego
modułu Ajax Newsticker (http://addons.oscommerce.com/info/5590), który sprawia że na stronie
pojawia się mały pasek zawierający rotujące
informacje. Jego instalacja zajmuje nie więcej niż 5
minut, a efekt jest bardzo ciekawy.

Na początku dodaj do bazy wpis:

INSERT INTO \'configuration\' (\'configuration_title\', \'configuration_key\', \'configuration_value\', \'configuration_description\',\'configuration_group_id\', \'sort_order\',\'last_modified\', \'date_added\', \'use_function\', \'set_function\') VALUES (\'Use Ajax marquee?\', \'AJAX_MARQUEE\',\'true\', \'Use Ajax marquee?\', 1, 50,now(), now(), \'\', \'tep_cfg_select_option(array(\\'false\\', \\'true\\'),\');

Treść wyświetlaną na pasku będziesz dodawać
w panelu administracyjnym, zatem w następnym
kroku wgraj plik define_ticker.php do katalogu admin/includes/languages/polish. Następnie zdefiniuj
nazwę paska, czyli w pliku catalog/includes/languages/polish.php dodaj wiersz:

define(\'BOX_CATALOG_DEFINE_TICKER\', \' Ticker\');

W pliku admin/includes/filenames.php dodaj wiersz:

define(\'FILENAME_DEFINE_TICKER\', \'define_ticker.php\');

A na koniec w boksie admin/includes/boxes/tools.php dodaj kod:

\'\' . BOX_CATALOG_DEFINE_TICKER . \'
\' .

Nie zapomnij także dodać w bazie danych,
w tabeli admin_files, odpowiedniego wpisu z nazwą
pliku, czyli define_ticker.php.

Teraz czas na zmiany poza panelem administracyjnym.
Skopiuj pliki tickercontent.ticker do katalogu
/catalog/includes/languages/polish, ajaxticker.js
do katalogu catalog/javascript/ oraz ajax_ticker.php
do katalogu catalog/includes/. Teraz otwórz plik
catalog/includes/header.php i znajdź fragment:

i następnie zamień go na:

Na koniec została rzecz najprzyjemniejsza, czyli
edycja stylów CSS. Otwórz plik catalog/stylesheet.
css i dodaj kod:

#ajaxticker{
width: 550px;
height: 17px;
padding: 2px;
background-color: #a0ff72;
text-align: center;
font: bold 13px Tahoma;
}
#ajaxticker div{ /*IE6 bug fix when text
is bold and fade effect (alpha filter) is
enabled. Style inner DIV with same color
as outer DIV*/
background-color: #a0ff72;
}

Oczywiście powyższy kod możesz dowolnie
modyfikować. Ten z przykładu sprawi, że pasek
będzie wyglądał tak, jak na ilustracji 8.

Czytelne menu

Jeśli masz sklep, gdzie w każdej kategorii jest
wiele podkategorii, warto rozważyć wyświetlenie
w menu od razu ich pełnej listy. Aby stworzyć takie
menu, skorzystaj z kontrybucji Show Sub-categories
(http://addons.oscommerce.com/info/885).

Instalacja dodatku jest bardzo prosta. Należy
zacząć od podmiany pliku catalog/includes/boxes/
categories.php, odpowiedzialnego za wyświetlanie
boksu z menu kategorii. Następnie należy dodać
do pliku ze stylami CSS (catalog/stylesheet.css)
fragment kodu odpowiedzialny za wyświetlanie
menu:

a.menucateg:link, a.menucateg:visited,
a.menucateg:active {
display: block;
vertical-align: middle;
font-size: 10px;
font-family: Verdana, Arial, Helvetica,
sans-serif;
font-weight: bold;
text-align: left;
height: 12px;
text-decoration: none;
border: solid 1px #f8f8f9;
}
a.menucateg:hover {
border: solid 1px #6633CC;
background-color:#006699;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}
a.menusubcateg:link,
a.menusubcateg:visited,
a.menusubcateg:active {
display: block;
vertical-align: middle;
font-size: 9px;
font-family: Verdana, Arial, Helvetica,
sans-serif;
text-align: left;
height: 12px;
text-decoration: none;
border: solid 1px #f8f8f9;
}
a.menusubcateg:hover {
border: solid 1px #6633CC;
background-color:#006699;
text-decoration: none;
color: #FFFFFF;
}

Wygląd menu możesz dowolnie modyfikować.

Pamiętaj, że powinno ono wyróżniać się na stronie
i być intuicyjne w obsłudze.

Alternatywa dla pop-up

Jeśli masz dosyć wyskakujących pop-upów ze
zdjęciami produktów albo chciałbyś w ich miejsce
coś bardziej nowoczesnego, wstaw na podstronę
produktu efektowny, javascriptowy lightbox. Jest to
w efekt, który sprawia że zdjęcie jest wyświetlane
w pełnym rozmiarze na całym ekranie komputera,
na czarnym półprzezroczystym tle, przysłaniającym
stronę WWW. Całości towarzyszy animacja rozwijania
i zwijania ramki ze zdjęciem.

Dla osCommerce powstało kilka kontrybucji
pozwalających na dodanie tego typu efektu.
Najprostsza z nich Fancy Lightbox Popup (http://addons.oscommerce.com/info/5532).

Instalacja tego dodatku ogranicza się do
wgrania nowych plików na serwer. Jedyne konieczne
modyfikacje należy przeprowadzić w pliku
product_info.php, znajdującym się w głównym
katalogu sklepu.

Przed znacznikiem {html}{/html} dodaj poniższy fragment:

Zmodyfikuj także fragment odpowiedzialny za wyświetlanie okienka pop-up:

na fragment:

To wystarczy, aby lightbox zadziałał. Teraz
nawet zwykłe zdjęcie będzie prezentować się
w efektowny sposób.

Na pewno nie jeden raz, odwiedzając różne
sklepy, miałeś wrażenie, że lista kategorii jest mało
czytelna. Dużo problemów mogą sprawiać mało
czytelne miniaturki produktów. Niewiele na nich
widać, dlatego aby przyjrzeć się produktowi z bliska,
trzeba tracić czas na przejście do podstrony

z jego opisem.

Jeśli nie chcesz wprowadzać radykalnych zmian
i całkowicie przebudowywać strony z listą produktów
w kategorii, warto sięgnąć po alternatywne
rozwiązanie, jakim jest funkcja powiększania
miniaturki produkty po najechaniu kursorem.
Służy do tego funkcja ToolTip, oparta na
JavaScript. Aby zastosować ją w sklepie, najłatwiej
jest skorzystać z kontrybucji Image tooltip (http://addons.oscommerce.com/info/5332).

Na początek proponujemy dodać taką opcję
to listy kategorii. Wystarczy, że w tym celu
poddasz edycji plik catalog/includes/modules/product_
listing.php. Na samym początku pliku, przed
otwarciem tagu, dodaj kod odpowiedzialny za
wyświetlanie tooltipa.

W kodzie szczególną uwagę zwróć na fragment:

/////////////////////// CUSTOMIZE HERE
////////////////////
// settings for tooltip
// Do you want tip to move when mouse
moves over link?
var tipFollowMouse= true;
// Be sure to set tipWidth wide enough for
widest image
var tipWidth= 220;
var offX= 20; // how far from mouse
to show tip
var offY= 12;
var tipFontFamily= \"Verdana, arial,
helvetica, sans-serif\";
var tipFontSize= \"8pt\";
var tipFontColor= \"#000000\";
var tipBgColor= \"#ffffff\";
var tipBorderColor= \"#000080\";
var tipBorderWidth= 3;
var tipBorderStyle= \"ridge\";
var tipPadding= 4;

To tutaj ustalasz parametry podglądu zdjęcia.
W powyższym przykładzie nasze okno ma 220 pikseli
szerokości, jest przesunięte względem kursora
o 20 pikseli w prawo i 12 pikseli w dół, a także
ma białe tło. Możesz tu również zdefiniować kolor
obramowania, kolor i krój czcionki.

Następnie znajdź fragment odpowiadający za
wyświetlanie produktów:

$lc_text = \'\' . tep_image(DIR_WS_IMAGES . $listing[\'products_image\'], $listing[\'products_name\'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . \'\';
} else
{$lc_text = \' \' . tep_image(DIR_WS_IMAGES . $listing[\'products_image\'],$listing[\'products_name\'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . \' \';
}

i dodaj do niego definicję Tooltipa. Zmieniony zapis
powinien wyglądać następująco:

$lc_text = \'\' . tep_image(DIR_WS_IMAGES . $listing[\'products_image\'], $listing[\'products_name\'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . \'\';
} else {
$lc_text = \' \' . tep_image(DIR_WS_IMAGES . $listing[\'products_image\'],$listing[\'products_name\'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . \' \';}

Te zmiany wystarczają do tego, aby na liście
produktów po najechaniu kursorem na produkt
wyświetlało się powiększenie zdjęcia. Jeśli chcesz
podobną funkcję dodać na innych podstronach,
wówczas należy odpowiednio zmodyfikować ten
zapis.

Nowe życie osCommerce

Wprowadzenie opisanych w artykule zmian
nie wymaga wiele pracy. Zyskujemy za to bardziej
funkcjonalny sklep, po którym łatwiej jest się
poruszać, lista produktów jest bardziej intuicyjna,
a podstrona produktu skuteczniej zachęca do dokonania
zakupu. Powinno się to przełożyć na większą
sprzedaż i zainteresowanie ze strony klientów.

Tak zmodyfikowany osCommerce może więc
z powodzeniem służyć jeszcze długi okres czasu,
do momentu zastąpienia go długo oczekiwaną
nową wersją lub inną aplikacją. Taka zmiana jest
bowiem zawsze czasochłonna i z reguły odkładana
na bliżej nieokreśloną przyszłość. Dobrze
zatem mieć świadomość, że ten zainstalowany już
osCommerce nie jest wcale taki zły.