Konfiguracja OSC
OsCommerce to sklep internetowy oparty na oprogramowaniu ogólnie dostępnym. Jeśłi pobierzemy i zainstalujemy sklep będzie on posiadał wygląd jak wiele innych. Dlatego przedstawię tu kilka pomysłów i tricków dzięki który trochę go urozmaicimy. Niestety budowa tego sklepu jest przestarzała i nie wystarczy tylko modyfikacja pliku .css ale trzba też zmienić zawartość kilku innych. Układ sklepu opiera się o wiele zagnieżdzonych tabel więc sporo przed nami pracy.
Zacznijmy od zmiany szerokości naszego sklepu w katalogu includes/languages znajduje się plik polish.php któ®y zawiera ustawienia takie jak: wyśrodkowanie sklepu, szerokość, tło wokuł sklepu, kolor tła na zewnątrz sklepu, i kolor tła dla zawartości sklepu. Znajdziemy w tym pliku także możliwość określenia dodatkowego marginesu, i możliwość zmianynagłóka sklepu. Zmieniamy szerokość modyfikując parametr CENTER_SHOP_WIDTH = 1002 i CENTER_SHOP_BACK-GROUND_COLOR_OUT #fefefe jest to kolor tła na zewnątrz sklepu. Można też wyłączyć wyświetlanie loga w banerze sklepu a za to odpowiada funkcja HEADER_IMG_LINK_ON ustawiamy ją na 0. Teraz nadszedł czas by zając się plikiem header.php. W nim znajdują się definicje tabel sklepu ale nie wszystkich tylko tych głównych. Pierwsza tabela to otoczka wokół sklepu a druga to sklep sam w sobie. Warto w celu likwidacji odstępów ustawić paramtry:
CELLPADING, CELLSPACINNG i BORDER na 0, chodzi oczywiście o dwie pierwsze tabele. Plik ten też odpowiada za wyświetlanie nagłówka, górne ikony i pasek pod nimi. Teraz sprawdźmy jak wygląda sprawa formatowania css. Do dyspozycji mamy arkusz stylów który znajduje się w pliku stylesheet.css. Plik ten znajduje się w katalogu głównym. Nas przede wszystkim interesuje możliwość zamiany górnego banera strony oraz ikon. Ikony umieszczone na górze są mało atrakcyjne więc warto je zamienić. Za te elementy w naszym pliku odpowiada trzecia tabela. Określa ona obszar top i ikon. Wygląd jej możemy ustawić w pliku css modyfikując klasę headrer a wygląda ona tak:
TR.header {
background: url(‘folder/plik.gif’) no-repeat;
height:140px;
}
Mamy mozliwość podania ścieżki do naszego nowego nagłówka oraz dostosowanie wyskości. Teraz kolej na ikony są to odpowiednio Moje konto, zawartość koszyka, Zamówienie. Najlepiej jak zamienimy je własnymi obrazkami ale można też je usunąć. Jełśi podmieiamy to odpowiednie pliki które musimy nadpisać to: header_account.gif, header_checkout.gif, header_carr.gif znajdują się one w katalogu images. Po najechaniu na ikony zmieniają się napisy mamy moążliwość ich edycji w pliku polish.php
Kolejny krok to zmiana kolorystyki sklepu, zacznijmy od paska na którym napisana jest aktualna ścieżka a z drugiej strony znajdują się linki do wspomnianych wcześniej ikon. Wracamy więc do naszego pliku header.php i zajmujemy się kolejną tabelą, jej wygląd modyfikujemy w pliku css zmieniając właściwości klasy css – headerNavigation, tło – TD.headerNavigation, A.headerNavigation – kolor linków. Kolor jaki wybierzemy będzie też wyświetlał się w niektórych belkach ramek po lew i prawo tam gdzie nazwy są odnośnikami. Możemy tez od razu kolorystycznie dobrać wygląd stopki dla siebie, za to odpowiada plik footer.php a za wygląd odpowiada kalsa footer. Mamy tam też możliwość modyfikacji wyświetlanego napisu pod stopką, jest on pobierany z pliku polosh.php za ten tekst odpowiada zmienna FOOTER_TEXT_BODY. Sklep OsCommerce wyświetla informacje o swoich produktach w ramkach nazywanych boxami. Każda z nich na górze ma belkę a na niej odpowiedni napis: Kategorie, Producencji itd. Tekst ten formatujemy w pliku css modyfikując klasę boxText, możemy zmienić rozmiar, czcionkę, kolor. Kolor linków natomiast zmieniamy modyfikując klasę A, dokonując zmian zmienimy kolor wszystkich linków w naszym sklepie. W celu formatowania napisów na belkach dokonujemy modyfikacji klasy TD.infoBoxHeading. Każda belka złożona jest z trzech plków graficznych oraz małej strzałi ale nie we wszystkich. Pliki te znajdują się w katalogu images/infobox/.
Ważnym elementem naszego sklepu są przyciski, standardowe nie są za piękne. Są to zaokraglone prostokąty z białum tłem. Najlepiej podmienić pliki w katalogu /imes/languages/polish/images/buttons. Warto też usunąć nie z specjalne małe obrazki które się wyświetlają w części środkowej, wystarczy usunąć wszystkie pliki gif z katalogu images których nazwa zaczyna się od table_background. No i najważniejsze napis standardowy Co nowego? Zmieniamy w pliku iondex.php w katalogu includes/languages/polish. Musimy też sformatować napis a za to odpowiada klasa TD.pageHeading, DIV.pageHeading. Witaj nieznajomy zmieniamy w pliku polish.php . W pliku tym znajduje się także tytuł strony i tekst powitalny. Stronę główną modyfikujemy za pomocą menu administracyjengo Administracja -> Sklep: Zawartość -> Boczne menu -> Sklep -> Edycja strony głównej. Lub ręcznie edytujemy plik mainpage.php w katalogu polish. Możemy też zmienić wielkość wyświetlanych obrazków Administracja -> Sklep: Zawartość -> Boczne menu-> Konfiguracja -> Obrazki.
Do dyspozycji mamy generator przycisków http://generator.oscpremium.com