INSTRUKCJA INSTALACJI SZABLONU AUKCJI ALLEGRO "Wooden" Ostatnia modyfikacja: 26 sierpnia 2013
Podstawowe informacje... 3 Edycja szablonu... 4 2.1. Wgranie plików graficznych na zewnętrzny hosting... 4 2.2. Podmiana linków do grafiki w szablonie... 8 2.3. Edytowanie treści szablonu... 11 2.4. Podmiana linków związanych z profilem allegro... 13 2.5. Dodawanie zdjęć przedmiotu... 15 2.6. Tworzenie tabeli... 18 2.7. Tworzenie listy wypunktowanej... 19 Instalacja szablonu... 20 3.1. Wgrywanie szablonu do serwisu allegro... 20 3.2. Wystawianie przedmiotu z wykorzystaniem zapisanego szablonu allegro 22 Informacje techniczne... 24
1. Rozdział Podstawowe informacje Powyższa instrukcja została przygotowana dla serii szablonów "Wooden" pobranych ze strony allegroholik.pl. Mamy nadzieję, że razem z nią obsługa szablonów allegro pobranych z naszej strony będzie dużo łatwiejsza. Do posługiwania się szablonami allegro niezbędna jest podstawowa wiedza z zakresu znaczników HTML oraz styli CSS, którą postaramy się Państwu przybliżyć. Wszystkie problemy związane z obsługą naszych szablonów staramy się wyjaśnić w naszym poradniku allegroholika, który znajduje się pod adresem: http://allegroholik.pl/poradnik-allegroholika/ Jeśli nie znajdą tam Państwo odpowiedzi na swoje pytania, prosimy kontaktować się z nami poprzez formularz zamieszczony na naszej stronie: http://allegroholik.pl/kontakt/ Proszę również pamiętać o przestrzeganiu naszego regulaminu dostępnego pod adresem: http://allegroholik.pl/regulamin/ Niniejsza instrukcja jest własnością serwisu allegroholik.pl i ma na celu ułatwienie pracy z szablonami pobranymi z serwisu. Zabrania się jej kopiowania zarówno w całości jak i jej poszczególnych elementów. Nie zezwalamy również na umieszczanie bezpośrednich odnośników do pliku z instrukcją.
2. Rozdział Edycja szablonu 2.1. Wgranie plików graficznych na zewnętrzny hosting Sprzedawane przez nas szablony aukcji allegro wymagają wgrania przez Państwa plików graficznych na zewnętrzny serwer. Poniżej wyjaśnimy jak to zrobić. Wkrótce na naszej stronie pojawi się również możliwość zakupienia szablonu wraz z hostingiem, co znacznie ułatwi obsługę naszych szablonów. Pliki graficzne można wgrać na własny serwer, ale można również skorzystać z darmowych hostingów zdjęć. Przy wyborze darmowego hostingu zdjęć ważne jest uwzględnienie faktu, że nie może on zmieniać domyślnych nazw plików. Należy zwrócić również uwagę na limity nakładane na darmowe konta. Według nas aktualnie najlepszym darmowym hostingiem jest photobucket.com i na jego podstawie wyjaśnimy Państwu proces wgrywania plików graficznych szablonu na zewnętrzny serwer. Pierwszym krokiem jaki należy wykonać jest oczywiście darmowa rejestracja w serwisie photobucket.com.. Jest to standardowy etap, którego nie będziemy szerzej opisywać. Drugim ważnym krokiem, którego nie można pominąć, jest zmiana ustawień konta. W tym celu najeżdżamy myszką na nasz login w górnej części okna i wybieramy z menu opcję User Settings. W nowym oknie klikamy a zakładkę Privacy i odznaczamy tam element For Future Uploads - (Recommended) During upload, scramble file names to make links hard to
guess. Dzięki tej zmianie nazwy wgrywanych przez nas zdjęć nie będą zmieniane, co pozwoli nam na automatyczną podmianę linków do grafiki w szablonie. Teraz należy utworzyć album, w którym przechowywać będziemy nasze pliki graficzne. W tym celu klikamy kolejno na Library / Create Album w górnym menu strony. Następnie naszym oczom ukaże się okno pokazane poniżej. Należy wpisać w nim nazwę albumu w polu Album Name (na poniższym przykładzie brzmi ona "nazwa-
szablonu"). Pozostałe elementy pozostawiamy bez zmian i klikamy na przycisk Create. Jeśli wyświetli nam się okno zatytułowane Welcome to your library zamykamy je przyciskiem Skip.. Teraz znajdujemy się w naszym pierwszym albumie. Na razie jest on pusty. Do naszego albumu musimy wgrać pliki graficzne szablonu allegro. W tym celu klikamy na przycisk Upload Now. W nowym oknie klikamy na link Choose folders,, który znajduje się bezpośrednio pod przyciskiem Choose photos & videos.
W oknie, które się wyświetli, przechodzimy do folderu z naszym szablonem i zaznaczamy folder o nazwie gfx, a następnie klikamy na przycisk ok i czekamy aż wszystkie pliki zostaną przesłane na serwer. Teraz musimy jeszcze skopiować link do jednego z naszych plików. Aby to zrobić klikamy na jedno z wgranych zdjęć. Następnie klikamy w pole Direct znajdujące się w kolumnie po prawej stronie okna.
Teraz w pamięci podręcznej mamy skopiowany link do jednej z grafik, który należy wkleić i edytować w odpowiednim polu w darmowym edytorze szablonów allegro dostępnym pod adresem http://edytor.allegroholik.pl - o tym procesie napisaliśmy w następnym dziale. 2.2. Podmiana linków do grafiki w szablonie Jeśli wgraliśmy już pliki graficzne na zewnętrzny serwer zgodnie z opisem z poprzedniego rozdziału i skopiowaliśmy link do jednej z grafik, możemy przejść do kolejnego etapu edycji szablonu. Na stronie http://edytor.allegroholik.pl umieściliśmy darmowy edytor naszych szablonów allegro, dzięki któremu w łatwy i przejrzysty sposób mogą Państwo edytować treść i wygląd szablonu. Aby podmienić linki do grafiki wgranej na zewnętrzny serwer, wystarczy do odpowiednich pól edytora wkleić link do albumu z grafiką oraz kod szablonu, który znajduje się w paczce z pobranym szablonem. Link do albumu z grafiką skopiowaliśmy w poprzednim dziale i teraz wystarczy go wkleić w pokazane poniżej pole. A następnie trzeba usunąć z niego nazwę konkretnego pliku graficznego. W naszym przypadku zmieniliśmy link:
http://i1288.photobucket.com/albums/b498/allegroholik/nazwa-szablonu/iconhttp://i1288.photobucket.com/albums/b498/allegroholik/nazwa-szablonuszablonu/ Po tej zmianie nasze pole powinno wyglądać podobnie do tego pokazanego top.png na link: poniżej: Tym sposobem otrzymaliśmy ścieżkę do wszystkich plików graficznych, która automatycznie zostanie podmieniona w naszym szablonie allegro. Aby zmiana ta zaszła, w drugim polu edytora należy wkleić kod szablonu allegro, który pobraliśmy ze strony http://allegroholik.pl W tym celu należy uruchomić program Notatnik (lub inny edytor tekstowy) i otworzyć w nim pobrany plik tekstowy z szablonem allegro wybierając kolejno z menu Plik / Otwórz... A następnie zaznaczyć plik tekstowy (.txt) szablonu allegro, który znajduje się w pobranej paczce z szablonem.
Po otworzeniu pliku zaznaczamy całą zawartą w nim treść klikając kolejno w menu Edycja / Zaznacz wszystko lub korzystając ze skrótu CTRL+A. Teraz kopiujemy nasze zaznaczenie klikając w menu kolejno Edycja / Kopiuj lub korzystając ze skrótu CTRL+C. Następnie powracamy na otwartą w przeglądarce stronę http://edytor.allegroholik.pl i w drugie pole edytora wklejamy skopiowany kod szablonu.
Jeśli wszystko wykonaliśmy prawidłowo, linki do grafiki w szablonie zostaną automatycznie podmienione i w podglądzie po prawej stronie zobaczymy nasz szablon allegro. Jeśli szablon wygląda prawidłowo, możemy przejść do kolejnego etapu jakim jest edycja treści. 2.3. Edytowanie treści szablonu Do edytowania treści szablonu polecamy korzystać z naszego darmowego skryptu dostępnego pod adresem http://edytor.allegroholik.pl.. W poprzednich działach opisaliśmy jak prawidłowo podmienić linki do grafiki w szablonie. Teraz zajmiemy się edycją jego treści. Jeśli wkleiliśmy do odpowiedniego okna kod szablonu allegro i wyświetla się on prawidłowo, możemy rozpocząć edycję jego treści. W naszych szablonach można edytować wszystkie treści, które są w edytorze kolorowane na czarno - są to główne treści szablonu które należy dostosować do swoich potrzeb (wyjątkiem jest znak "=" występujący wewnątrz znaczników HTML). Uwaga! Edytowanie składni kolorowanej na szaro bądź zielono może spowodować błędy w szablonie i jego nieprawidłowe wyświetlanie. Podczas edytowania treści można skorzystać z kilku znaczników, które urozmaicają opisy aukcji. Znaczniki te zostały wymienione poniżej: Pogrubienie - aby pogrubić tekst, należy go otoczyć dwoma znacznikami. Znacznik otwierający to <strong> a zamykający </strong>. Oto przykład ich użycia:
Tutaj znajduje się opis aukcji bez pogrubienia. <strong>ta treść jest już pogrubiona</strong>. Tutaj znowu zobaczymy niepogrubiony tekst. Kursywa - aby dodać do tekstu kursywę (pochylenie), należy otoczyć tekst dwoma znacznikami. Znacznik otwierający to <em> a zamykający </em>. Oto przykład ich użycia: Tutaj znajduje się opis aukcji bez pochylenia. <em>ta treść jest już pochylona</em>. Tutaj znowu zobaczymy niepochylony tekst. Tytuł aukcji - aby dodać do opisu tytuł aukcji, należy otoczyć tekst dwoma znacznikami. Znacznik otwierający to <h1> a zamykający </h1>. Tekst ma kolor niebieski. Oto przykład jego użycia: <h1>tutaj wpisujemy tytuł aukcji</h1> Cena przedmiotu - aby dodać do opisu cenę przedmiotu, należy otoczyć tekst dwoma znacznikami. Znacznik otwierający to <h2> a zamykający </h2>. Tekst ma kolor czarny. Dodatkowo wewnątrz znaczników <h2> </h2> możemy otoczyć tekst znacznikami <span> </span>, co zmieni kolor tekstu na różowy. Oto przykład jego użycia tych znaczników: <h2>teraz tylko <span>499,00 zł</span></h2> Nagłówek - aby dodać nagłówek do opisu przedmiotu, należy otoczyć tekst dwoma znacznikami. Znacznik otwierający to <h3> a zamykający </h3>. Oto przykład ich użycia: <h3>nagłówek w opisie aukcji</h3> Zwykły tekst - zwykły tekst w opisie należy otoczyć dwoma znacznikami. Znacznik otwierający to <p> a zamykający </p>. Oto przykład ich użycia: <p>zwykła treść opisująca przedmiot.</p> Wyróżniony tekst - jest to tekst wyróżniający się w opisie przedmiotu większym rozmiarem oraz pogrubieniem. Aby wyróżnić tekst należy otoczyć go dwoma znacznikami. Znacznik otwierający to <h5> a zamykający </h5>. Dodatkowo
wewnątrz tych znaczników możemy otoczyć tekst znacznikami <span> </span>, co zmieni kolor tekstu na różowy. Oto przykład jego użycia tych znaczników: <h5> <span>tekst różowy.</span> Tekst czarny. </h5> 2.4. Podmiana linków związanych z profilem allegro W szablonie istnieje miejsce na menu z linkami prowadzącymi do profilu użytkownika allegro. Zanim wykorzystamy nasz szablon na aukcjach, należy podmienić linki w szablonie na prawidłowe linki do naszego profilu allegro. Pierwszym krokiem jaki należy wykonać jest skopiowanie swojego identyfikatora allegro. W tym celu logujemy się na nasz profil allegro i klikamy na nazwę swojego profilu w prawym górnym rogu strony. W przeglądarce powinniśmy zobaczyć link analogiczny do poniższego: http://allegro.pl/show_user.php?uid=####### Jednak zamiast znaków ####### zobaczymy tam swój numer identyfikacyjny użytkownika allegro,, który musimy skopiować. Dodawanie linku do aukcji użytkownika W kodzie szablonu allegro szukamy poniższego fragmentu <a href="http://allegroholik.pl/poradnik/dodawanie-linkow-zwiazanych-z- profilem-allegro/">moje pozostałe aukcje</a> W miejsce poniższego linku: http://allegroholik.pl/poradnik/dodawanie-linkow-zwiazanych-z-profilem- allegro/ wklejamy link do naszych aukcji allegro:
http://allegro.pl/listing/user/listing.php?us_id=####### pamiętając przy tym o zmianie znaków ####### na nasz numer identyfikacyjny użytkownika allegro, o którym pisaliśmy wcześniej. Nasz fragment kodu powinien teraz wyglądać tak jak kod przedstawiony poniżej <a href="http://allegro.pl/listing/user/listing.php?us_id=#######">moje pozostałe aukcje</a> gdzie zamiast znaków ####### powinien znajdować się numer identyfikacyjny użytkownika allegro. Dodawanie linku do komentarzy użytkownika W kodzie szablonu allegro szukamy poniższego fragmentu W miejsce poniższego linku <a href="http://allegroholik.pl/poradnik/dodawanie-linkow-zwiazanych-zprofilem-allegro/">komentarze</a> http://allegroholik.pl/poradnik/dodawanie-linkow-zwiazanych-z-profilemallegro/ wklejamy link do naszych komentarzy na allegro http://allegro.pl/show_user.php?uid=#######&type=fb_all pamiętając przy tym o zmianie znaków ####### na nasz numer identyfikacyjny użytkownika allegro, o którym pisaliśmy wcześniej. Nasz fragment kodu powinien teraz wyglądać tak jak kod przedstawiony poniżej <a href="http://allegro.pl/show_user.php?uid=#######&type=fb_all"> Komentarze</a> gdzie zamiast znaków ####### powinien znajdować się numer identyfikacyjny użytkownika allegro. Dodawanie linku do formularza kontaktowego W kodzie szablonu allegro szukamy poniższego fragmentu <a href="http://allegroholik.pl/poradnik/dodawanie-linkow-zwiazanych-zprofilem-allegro/">zapytaj o przedmiot</a>
W miejsce poniższego linku http://allegroholik.pl/poradnik/dodawanie-linkow-zwiazanych-z-profilemallegro/ wklejamy link do naszego formularza kontaktowego na allegro http://allegro.pl/sendmailtouser.php?userid=####### pamiętając przy tym o zmianie znaków ####### na nasz numer identyfikacyjny użytkownika allegro, o którym pisaliśmy wcześniej. Nasz fragment kodu powinien teraz wyglądać tak jak kod przedstawiony poniżej <a href="http://allegro.pl/sendmailtouser.php?userid=#######">zapytaj o przedmiot</a> gdzie zamiast znaków ####### powinien znajdować się numer identyfikacyjny użytkownika allegro. 2.5. Dodawanie zdjęć przedmiotu W szablonie aukcji allegro można umieścić dwa rodzaje zdjęć przedmiotów: duże i małe. Duże zdjęcia są wyświetlane z maksymalną szerokością równą 545px, natomiast małe mają szerokość równą 240px i po kliknięciu na nich można zobaczyć je w oryginalnym rozmiarze. Poniżej znajdą Państwo informacje jak do opisu aukcji dodać duże i małe zdjęcia. Aby do szablonu dodać duże bądź małe zdjęcia należy je oczywiście najpierw wgrać na zewnętrzny hosting. Podobnie jak poprzednio proces ten opiszemy na przykładzie serwisu photobucket.com. Po pierwsze musimy zalogować się do utworzonego wcześniej w serwisie konta. Następnie tworzymy nowy album wybierając w górnym menu: Library / Create Album.
Nadajemy mu dowolną nazwę w polu Album Name (w naszym przypadku brzmi ona "zdjecia-przedmiotu") i klikamy na przycisk Create. Klikamy na nowo utworzony album. Dodajemy do niego wszystkie zdjęcia przedmiotu, jakie chcemy umieścić w opisie aukcji, klikając kolejno: Upload Now, Choose photos & videos (w oknie przechodzimy do folderu ze zdjęciami przedmiotu i je zaznaczamy) y). Klikamy na przycisk Otwórz.. Zdjęcia zostaną dodane do naszego albumu. Teraz musimy je umieścić w szablonie.
Jeśli chcemy dodać duże zdjęcie do szablonu należy w edytorze umieszczonym na stronie http://edytor.allegroholik.pl we wklejonym wcześniej kodzie szablonu allegro odnaleźć poniższy element: <img src="./gfx/photo-big.jpg" class="allegroholik-img-large"/> large"/> Następnie należy zmienić w nim link do zdjęcia na ten wygenerowany przez serwis photobucket.com. Jeśli nie wiemy jaki link wygenerował do danego zdjęcia photobucket.com należy w serwisie kliknąć na wybrane zdjęcie, a następnie kliknąć w pole Direct znajdujące się po prawej stronie okna. Teraz w pamięci podręcznej mamy skopiowany link do zdjęcia, który należy podmienić w opisanym wcześniej elemencie. Dla przykładu element <img src="./gfx/photo-big.jpg" class="allegroholik-img-large"/> large"/> po zmianie będzie wyglądał podobnie do tego: <img src="http://i1288.photobucket.com/albums/b498/allegroholik/zdjeciaproduktu/photo-big.jpg" class="allegroholik-img-large"/> W przypadku, gdy chcemy do opisu szablonu dodać małe zdjęcie, należy postąpić analogicznie jak w przypadku zdjęcia dużego, jednak zamiast edycji elementu <img src="./gfx/photo-big.jpg" class="allegroholik-img-large"/> large"/> należy edytować element <a href="#"><img src="./gfx/photo-big.jpg" class="allegroholik-img- small"/></a>
Tutaj oprócz zmiany adresu http://twojhosting/gfx/photo-big.jpg na prawidłowy należy również wkleić link do zdjęcia zamiast znaku #. Dla przykładu pierwotny element <a href="#"><img src="./gfx/photo-big.jpg" class="allegroholik-imgsmall"/></a> po wprowadzonych zmianach będzie wyglądał następująco: <a href="http://i1288.photobucket.com/albums/b498/allegroholik/zdjeciaproduktu/photo-big.jpg"><img src="http://i1288.photobucket.com/albums/b498/allegroholik/zdjeciaproduktu/photo-big.jpg" class="allegroholik-img-small"/></a> Oczywiście do opisu aukcji można dodawać więcej niż jedno zdjęcie duże i małe. 2.6. Tworzenie tabeli W naszych szablonach możliwe jest umieszczenie tabel w opisie przedmiotu. Niezbędna jest do tego podstawowa wiedza z zakresu znaczników HTML. Tym z Państwa, którzy ich nie znają, postaramy się je przybliżyć na podstawie poniższego przykładu. Przykładowa tabela w opisie aukcji wygląda następująco: <h3>parametry techniczne</h3> <table> <tr> <th colspan="2">wydajność</th> </tr> <tr> <td class="allegroholik-blue">typ: </td> <td>statyw fotograficzny</td> </tr> <tr> <td class="allegroholik-blue">materiał: </td> <td>aluminium</td> </tr> <tr> <td class="allegroholik-blue">udźwig: </td> <td>1,5kg</td> </tr> </table> Pomiędzy znacznikami <h3></h3> umieszczamy nagłówek wyświetlany powyżej
tabeli. Cała tabela musi rozpocząć się znacznikiem <table> i zakończyć znacznikiem </table>. Wewnątrz tabeli znajdują się znaczniki <tr> </tr> odpowiadające kolejno za początek i koniec wiersza oraz znaczniki <td> </td> odpowiadające kolejno za początek i koniec komórki w danym wierszu. Uwaga! Znaczniki <td></td> muszą znajdować się wewnątrz znaczników <tr></tr>. Dodatkowo wewnątrz znaczników <tr></tr> można umieścić znaczniki <th></th> odpowiadające za nagłówki kolumn w tabeli. Zapis colspan="2" oznacza, że nagłówek będzie dotyczył dwóch kolejnych kolumn. Więcej informacji o tabelach możecie Państwo znaleźć w Internecie. Istnieją również darmowe generatory tabel, które znacznie ułatwią ich tworzenie. Na początek polecamy Państwu edycję tabeli podanej w naszym przykładzie. 2.7. Tworzenie listy wypunktowanej W opisie przedmiotu można również umieścić listę wypunktowaną. Podobnie jak w przypadku tabel niezbędna jest tu podstawowa wiedza z zakresu znaczników HTML. Przykładowa lista wypunktowana w opisie aukcji wygląda następująco: <h3>nagłówek listy</h3> <ul> <li>pierwszy element listy</li> <li>drugi element listy </li> <li>trzeci element listy </li> </ul> Pomiędzy znacznikami <h3></h3> umieszczamy nagłówek wyświetlany powyżej listy wypunktowanej. Cała lista musi rozpocząć się znacznikiem <ul> i zakończyć znacznikiem </ul>. Wewnątrz listy znajdują się znaczniki <li> </li> odpowiadające kolejno za początek i koniec elementu listy. Uwaga! Znaczniki <li></li> muszą znajdować się wewnątrz znaczników <ul></ul>. Więcej informacji o listach wypunktowanych możecie Państwo znaleźć w Internecie. Istnieją również darmowe generatory list, które znacznie ułatwią ich tworzenie. Na początek polecamy Państwu edycję tabeli podanej w naszym przykładzie.
3. Rozdział Instalacja szablonu Jeśli za pomocą darmowego edytora szablonów allegro dostępnego pod adresem http://edytor.allegroholik.pl zmieniliśmy już wszystkie treści w naszym szablonie i dodaliśmy do niego zdjęcia naszego przedmiotu, możemy pobrać gotowy kod naszego szablonu klikając w przycisk pobierz zmodyfikowany szablon. W przeglądarce w nowej karcie otworzy się plik ze zmodyfikowanym m kodem szablonu, który należy zaznaczyć (CTRL+A) i skopiować (CTRL+C). Teraz możemy rozpocząć etap wgrywania naszego szablonu do serwisu allegro. 3.1. Wgrywanie szablonu do serwisu allegro Pierwszym krokiem jaki należy wykonać jest oczywiście zalogowanie się do serwisu allegro.pl.. Następnie klikamy w link moje allegro. Otwieramy zakładkę Moja sprzedaż / Ustawienia sprzedaży / Szablony.
Klikamy na przycisk Nowy szablon. Uzupełniamy odpowiednie owiednie pola opisujące naszą aukcję. Następnie w polu Dodatkowe informacje o przedmiocie klikamy na zakładkę Edytor tekstowy i w puste pole wklejamy wcześniej skopiowany kod naszego szablonu wygenerowanego przez skrypt na stronie http://edytor.allegroholik.pl i klikamy na przycisk Podsumowanie.
Jeśli opis aukcji i nasz szablon są prawidłowe, możemy go zapisać klikając w przycisk Zapisz szablon. Szablon jest teraz zapisany w naszych ustawieniach allegro i możemy wykorzystać go podczas wystawiania przedmiotu, o czym napisaliśmy w następnym dziale. 3.2. Wystawianie przedmiotu z wykorzystaniem zapisanego szablonu allegro Jeśli dodaliśmy już do swoich ustawień nowy szablon, możemy go teraz wykorzystać podczas wystawiania aukcji. W tym celu przechodzimy do Moje allegro / Moja sprzedaż / Wystaw.
Klikamy na link Wybierz znajdujący się obok napisu Szablon oferty. I zaznaczamy odpowiedni szablon. Dalszy etap wystawiania aukcji jest chyba znany wszystkim użytkownikom serwisu allegro. Uwaga! Zanim wystawisz przedmiot upewnij się, że wszystkie opisy, zdjęcia i linki są prawidłowe i nie zawierają błędów.
4. Rozdział Informacje techniczne Testowane przeglądarki: Google Chrome (wersja 29.0.1547.57 m) Opera (wersja 15.0.1147.153) Firefox (wersja 23.0.1) Safari (wersja 5.1.7) Internet Explorer (wersja 10)