eShop, czyli e-commerce z WordPressem

 

Więc chcesz uruchomić sklep internetowy, tak? Nie za duży, w sam raz na rozruch. OK – podążaj za mną ścieżką światłości i wielkiego zysku ;-) Po pierwsze musisz mieć postawionego bloga na WordPressie. Skoro czytasz te słowa, pewnie masz już ten krok za sobą. Jeżeli nie – przeczytaj czym jest WordPress i jak go zainstalować na serwerze.

Po drugie musisz zdecydować się na odpowiednią wtyczkę, która umożliwia sprzedaż, zarządzanie produktami, wysyłką, płatnościami itd. Jeżeli nie chcesz za nią płacić, masz generalnie wybór między E-commerce a eShopem.

eShop – wybieram cię!

Dlaczego eShop? Posiada olbrzymią ilość opcji konfiguracyjnych, a przy tym jest całkiem intuicyjny. Ponadto jest zintegrowany z tzw. Merchant Gateways, czyli bramami płatności takimi jak PayPal, webtopay, Payson… Do tego jest stale rozwijany i ulepszany. I dzięki mnie – jest po polsku!

Przykłady sklepów wykorzystujących eShop:

…i kilka innych także.

eShop – instalacja

Jeżeli wybrałeś wtyczkę E-commerce, przykro mi – tu się rozstajemy. Natomiast jeżeli wybrałeś eShop, koniecznie czytaj dalej. Pobierz wtyczkę ze strony repozytorium WordPressa. Z niewiadomych przyczyn najnowsza wersja eShopu tj. 5.2.4 nie jest kompatybilna z WordPressem w wersji 2.9.2, dlatego polecam od razu ściągnąć eShop w wersji 5.2.2. Zainstaluj wtyczkę, tak jak robili to nasi dziadkowie od zarania dziejów, używając wbudowanego instalatora WordPressa.

Uff, połowa pracy za Tobą!

eShop – polonizacja

O ile nie kierujesz swojej sprzedaży na rynek anglosaski, zapewne chcesz mieć wszystko elegancko przetłumaczone na język Mickiewicza i Słowackiego. Am I right, Sir? Niestety nie ma innego dostępnego tłumaczenia niż moje własne. Trudno, z bólem serca ryzykujesz i ściągasz polskie tłumaczenie eShop dla WordPress. Zanim je umieścisz na serwerze, ściągnij pliki, które umożliwią poprawne wyświetlanie cen w złotówkach.

Tłumaczenie musisz umieścić w katalogu głównym pluginu eShop, tj. wp-content/plugins/eshop/. W tym samym miejscu musisz podmienić wszystkie pliki z pobranego archiwum ZIP.

Posłowie

Teraz możesz cieszyć się swoim sklepem internetowym na WordPressie. Możesz dodawać produkty, ustalać ceny, koszty przesyłki, dodawać promocje, zniżki itd.

Powodzenia!

Uruchomiłeś swój sklep za pomocą eShop? Korzystasz z mojego tłumaczenia i zauważyłeś braki? Podziel się tym w komentarzu.

 
 

Przyciśnij CSS-a przyciskiem

 

Jak zrobić w prosty sposób własne przyciski na stronę? CSS w czystej postaci. Wystarczą nam cztery reguły CSS i dwa pliki graficzne:

Przycisk w cssPrzyciski css - obraz buttona

Dłuższy plik ma maksymalną szerokość przyszłego przycisku. Dlaczego obrazy są zduplikowane? Dla efektu naciśnięcia – powyżej jest wersja wklęsła, poniżej – wypukła.

Kod HTML przycisków

<a href="http://kissdesign.pl" class="button"><span>Kliknij na mnie :)</span></a>

Kod CSS przycisku

a.button{
	background: url(btn0.png) right -31px no-repeat;
	padding: 0 21px 0 0;
	height: 31px;
	display: block;
	float: left;
	text-decoration: none;
	line-height: 31px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bolder;
	outline: none;
} 
a.button:active{
	background-position: right 0;
} 
a.button span{
	background: url(btn1.png) 0 -31px no-repeat;
	padding-left: 21px;
	height: 31px;
	display: block;
	font-size: 12px;
	color: #fff;
} 
a.button:active span{
	background-position: 0 0;
}

Ściągnij gotowca

Pobierz gotowe reguły przycisków CSS wraz z grafikami.

Podoba Ci się ten wpis? Interesuje Cię tematyka związana z zastosowaniem CSS? Podziel się wrażeniami w komentarzu!

 
 

hCard – internetowa wizytówka

 

hCard - opis mikroformatu do danych kontaktowychInternet rozwija się w kierunku semantycznej sieci. Chociaż większą część tego trendu biorą na swe barki programiści wyszukiwarek (synonim dla Google), to nie znaczy, że możesz pozostać bierny.

Nie chodzi jedynie o pisanie poprawnego, semantycznego kodu XHTML. To już było. Teraz nadchodzi czas mikroformatów!

hCard – ale o co chodzi?

hCard to format opisujący dane kontaktowe osób, instytucji, adresy miejsc itd. Idea powstania takiego formatu jest jasna – jeden uniwersalny format pozwala na łatwą wymianę, obróbkę i wreszcie wyszukiwanie danych. Dokładnie tak, jak w kontaktach biznesowych – wymieniasz wizytówki na spotkaniu zamiast spisywać adresy i telefony.

hCard – hOwto

Jak użyć mikroformatu hCard? Wystarczy zastosować odpowiednie klasy do opisu danych w ściśle określonym formacie. Jeżeli śmierdzi Ci to czytaniem dłuugiej specyfikacji, to się mylisz. Spójrz na ten przykład:

<div id="hcard-Artur-Polkowski" class="vcard">
   <a class="url fn n" href="http://kissdesign.pl">  <span class="given-name">Artur Polkowski</span></a>
   <div class="org">KISS design</div> //nazwa organizacji
   <a class="email" href="mailto:art.polkowski@gmail.com"> art.polkowski@gmail.com</a>
   <div class="adr">
      <div class="street-address">Łąkowa 15</div>
      <span class="locality">Poznań</span>, <span class="postal-code">60-900</span>
   </div>
   <div class="tel">605 444 555</div>
</div>

Voila!
W głównym obiekcie z klasą (koniecznie!) vcard, umieszczasz poszczególne informacje teleadresowe. Pełna specyfikacja hCard jest oczywiście szersza i obejmuje więcej opcjonalnych pól, ale dla większości przypadków, znajomość powyższych nazw klas jest wystarczająca. Nie musisz jednak ich wszystkich pamiętać. Skorzystaj z generatora hCard on-line. Dzięki niemu masz pewność, że Twój kod jest poprawny i gotowy do wklejenia wprost na stronę.

hCard – a jak to wygląda?

Tak jak zechcesz! Dzięki temu, że dane są opisane ściśle określonymi nazwami klas, nawet nie musisz samodzielnie pisać reguł css. Możesz skorzystać z gotowych! Ściągnij poniższą stylizację hCard w CSS mojego autorstwa!

Artur Polkowski

KISS design

Łąkowa 15

Poznań, 60-900

605 444 555

Szukasz inspiracji? Zobacz projekty pierwszych wizytówek!

 
 

Wielojęzyczna strona w Joomli z Joom!Fish

 

JoomFish logoLokalizowanie strony na Joomli, najlepiej zacząć od instalacji rozszerzenia Joom!Fish.

Następnie instalujemy wszystkie paczki z językowymi rozszerzeniami języków, które chcemy obsługiwać na naszej stronie. W tym celu wybieramy się na stronę z pluginami językowymi dla Joomli.

Następnie ustawiamy w menu Rozszerzenia -> Języki domyślny język dla strony (jak poniżej).

Joomla JoomFish - domyślny język

Ustawienie domyślnego języka JoomFish

Teraz możemy rozwiązać problem domyślnego języka strony. JoomFish! ma swoje własne ustawienia, nadpisujące to, co właśnie wykonaliśmy. Aby uczynić je transparentnymi, otwieramy menu Rozszerzenia -> Dodatki i wyszukujemy na liście plugin o nazwie System – Jfrouter. Dla niego konfigurujemy opcje:

  • Enable Language determination: Nie
  • Language selection for new visitors? Site default language

Zapisujemy zmiany.

Możesz także wyłączyć plugin o nazwie Joomfish – Missing_translation jeżeli nie chcesz, by przy każdym nieprzetłumaczonym artykule w obcym języku, pojawiał się irytujący tekst „No translations available”.

Pozostaje jeszcze konfiguracja języków dostępnych dla JoomFish. Otwieramy menu: Komponenty -> Joom!Fish -> LanguageManager. Aktywujemy wybrane języki.

Teraz bez większych problemów można cieszyć się dobrodziejstwem JoomFish. Tłumaczeń dokonujemy w menu Translations. Wystarczy wybrać odpowiedni element zawartości (elementy menu, artykuły itd.) i język na jaki ma zostać przetłumaczony.

Voila! Zaoszczędziłeś trochę czasu na konfiguracji JoomFish? Napotkałeś inne problemy? Podziel się z innymi w komentarzu!

 
 
« poprzednie wpisynastępne wpisy »