Samodzielna instalacja Magento

25 lipca 2017 31min.

Samodzielna instalacja sklepu opartego na Magento

Zawartość artykułu:

  1. Wybór odpowiedniego hostingu
  2. Przygotowanie serwera
  3. Instalacja Magento2
  4. Instalacja szablonu graficznego
  5. Ustawienie odpowiedniej domeny dla sklepu
  6. Instalacja SSL
  7. Instalacja modułów, czyli dostosowanie Magento 2 do realiów rynku (szczególnie polskiego)
  8. Moduł PayU
  9. Moduł SMTPro
  10. Moduł tłumaczeń PL
  11. Moduł Tag Manager + ustawienie Analitycs
  12. Konfiguracja podstawowych parametrów sklepu
  13. Konfiguracja podatków
  14. Konfiguracja dostaw
  15. Konfiguracja promocji

Każdy kto chce otworzyć sklep internetowy musi podjąć decyzję na jakim hostingu chce utrzymywać swoją platformę sprzedażową. Decydując się na Magento2 musimy mieć świadomość, że najsłabsze (często też najtańsze) oferty na rynku będziemy musieli pominąć w rozważaniach. Oczywiście wymagania jakie stawiamy naszemu sprzętowi muszą zależeć od ruchu jaki pojawi się na naszej stronie. Dla naszych potrzeb rozważymy podstawowe konfiguracje jakie są potrzebne do odpalenia Magento2 na zbadanie pomysłu czy w ogóle taki sklep internetowy wypali.

Wybór odpowiedniego hostingu

Jednym z rozwiązań może być wybór gotowych instalacji Magento2. Przykładowo na portalu https://www.properhost.com/magento2 możemy przez 30 dni testować darmową instalację Magento. W dłuższej perspektywie jednak takie rozwiązania będą droższe od serwerów VPS lub serwerów dedykowanych. Ponieważ nasz sklep może odpalić rewelacyjnie spróbujmy postawić go na jakimś serwerze w chmurze – będziemy mogli dynamicznie dodać więcej zasobów jeżeli ruch będzie większy, ale nie zapłacimy za dużo gdy będzie go mało i moc obliczeniowa będzie mało ważna. Ja pokaże konfigurację takiego środowiska na przykładzie oktawave.com

Przygotowanie serwera

Zacznijmy zatem od założenia konta. Prowadzi do tego prosty formularz:

Zakładanie konta octawave

W czasie pisania tego artykułu mamy promocję 25 zł na start (trzeba tylko zweryfikować swoje konto przy pomocy karty kredytowej albo po kontakcie z konsultantem – wybieram kartę, bo będzie szybciej). Po rejestracji przychodzi do nas mail z adresem do logowania: https://admin.oktawave.com/Pages/Login.aspx. Po pierwszym logowaniu musimy wybrać kilka opcji podstawowych:

Octawave konfiguracja

Zwróćcie uwagę na wszystkie pola – nie każde możemy potem zmienić.

Po wybraniu podstawowych kilku opcji możemy przystąpić do tworzenia instancji naszego serwera. Klikamy + Dodaj instancję OCI i przechodzimy dalej. Do wyboru będziemy mieli kilka gotowych szablonów instalacji – ja wybieram Debian 8.

Debian 8

Z dostępnych konfiguracji sprzętowych wybieram jedną z najprostszych – zawsze będziemy mogli to potem dostosować.

Typ instancji

W szczegółach instancji wpisujemy nazwę naszego serwera oraz wybieramy dysk. Jeżeli wiemy, że będziemy mieli dużo produktów to możemy od razu wybrać nieco większy dysk (powiedzmy 50GB), ale na początek ja zostanę przy najniższych parametrach.

Szczególy instancji

Następnie wybieramy metodę autoryzacji. Lepszym wyborem są oczywiście klucze SSH, ale jeżeli nie robiliśmy tego wcześniej to w tym miejscu nie będę się na tym skupiał – efekt końcowy będzie dokładnie taki sam.

Metoda autoryzacji

Na następnym ekranie już tylko potwierdzamy nasze zamówienie. Powinniśmy otrzymać komunikat:

Instancja jest w trakcie tworzenia. Po ukończeniu operacji otrzymasz e-mail potwierdzający utworzenie instancji oraz zawierający dane dostępowe do niej. Możesz również obserwować pasek postępu u góry ekranu, na bieżąco pokazuje on postęp realizacji zadania.

Teraz czekamy na wiadomość email z potwierdzeniem utworzenia dla nas nowej instancji serwera w chmurze. Jak nasza usługa jest już dostępna na liście naszych wszystkich OCI, możemy zacząć dalsze prace.

Lista serwerów

Uwaga – nie chcesz korzystać z chmury – nie ma problemu, powinieneś zdecydować się na serwer dedykowany lub VPS z dostępem do roota – unikniesz w ten sposób potencjalnych problemów.

Teraz musimy dostać się do naszej konsoli SSH. W oktawave wchodzimy w nasza instację i klikamy na “Pokaż” przy danych dostępowych.

Dane dostępowe

Zalogować się do SSH możemy np. przez program Putty. Wystarczy podać IP naszego serwera (IP zostało przesłane w mailu po utworzeniu instancji OCI).

Putty

W okienku, które wyskoczy wpisujemy usera root i hasło z danych dostępowych z panelu Oktawave.

Logowanie Putty

Następne kroki to zainstalowanie podstawowych elementów potrzebnych do pracy naszego serwera. Szczegółowa instrukcja nie jest przedmiotem tego wpisu dlatego ją pominę (jak np. kwestie bezpieczeństwa czy wydajności).

Po kolei wykonujemy następujące komendy z poziomu konsoli:

apt-get update
apt-get upgrade
apt-get install apache2
a2enmod rewrite
service apache2 restart
apt-get install mysql-server

(tutaj zostaniemy poproszeni o podanie hasła do administratora bazy danych)

Edytujemy plik /etc/apt/sources.list i dodajemy na jego końcu 2 linie:

deb http://packages.dotdeb.org jessie all
deb-src http://packages.dotdeb.org jessie all

następnie wykonujemy polecenia:

wget https://www.dotdeb.org/dotdeb.gpg
apt-key add dotdeb.gpg
apt-get update
apt-get install php7.0 php7.0-gd php7.0-xml php7.0-mysql php7.0-mbstring php7.0-mcrypt php7.0-curl php7.0-soap php7.0-intl php7.0-zip

Przechodzimy do katalogu /etc/apache2/sites-available/ i tworzymy tam plik konfiguracji vHosta o nazwie [IP_servera].conf (u mnie będzie to 176.119.58.148.conf) i wklejamy tam:

<VirtualHost *:80>

       ServerAdmin informacja@x-coding.pl
       ServerName  176.119.58.148

       # Indexes + Directory Root.
       DirectoryIndex index.html
       DocumentRoot /home/www/176.119.58.148/
       <Directory /home/www/176.119.58.148/>

               Options -Indexes +FollowSymLinks +MultiViews
               AllowOverride all
               Require all granted

       </Directory>

</VirtualHost>

Zapisujemy plik i odpalamy polecenia:

a2ensite 176.119.58.148.conf
service apache2 reload

Tworzymy teraz katalog /home/www/176.119.58.148/ oraz w środku plik index.html o dowolnej treści. Dodatkowo odpalamy polecenie

chown www-data:www-data . -R

w nowo utworzonym folderze. Teraz wchodząc na adres 176.119.58.148 (oczywiście tutaj wstawcie własne IP) w przeglądarce powinniśmy widzieć napis z pliku index.html. Ta część konfiguracji za nami, mogą ją przeprowadzić osoby, które nie boją się pracy na serwerze. Jeżeli nie jesteś taką osobą – nic nie szkodzi – wybierz gotowe rozwiązanie lub zgłoś się do odpowiedniej firmy, która to zrobi za Ciebie.

Instalacja Magento2

Przechodzimy na stronę https://magento.com/tech-resources/download i wybieramy do ściągnięcia najnowsza wersję Magento2 z danymi przykładowymi, ja wybrałem wersję .zip.

Wybór paczki Magento

Żeby móc pobierać elementy ze strony Mageto trzeba się zarejestrować dlatego najpierw wyskoczy nam propozycja logowania lub założenia konta.

Logowanie Magento

Założenie konta to tylko prosty formularz. Rejestracja nie powinna stanowić dla nikogo większego wyzwania dlatego tutaj już pominę szczegóły. Po wypełnieniu formularza dostaniemy wiadomość email z linkiem do potwierdzenia rejestracji:

Mail Magento

Po ujrzeniu

Walidacja email

możemy wrócić na stronę od której ten rozdział się zaczął (https://magento.com/tech-resources/download), zalogować się i rozpocząć pobieranie Magento2. Po pobraniu pliku musimy go przenieść na nasz serwer. Zależnie od tego jaki mamy serwer może to odbyć się inaczej, ale jeżeli mamy dostęp do SSH jak na naszym Oktawave to możemy użyć programu FileZilla i skorzystać z protokołu SFTP.

Ustawienia SFTP

Plik przerzucamy do naszego utworzonego wcześniej folderu (u mnie /home/www/176.119.58.148/). Następnie przechodzimy w SSH do naszego folderu. Usuwamy wcześniejszy plik index.html. Instalujemy program do rozpakowania archiwum

apt-get install unzip

Rozpakowujemy archiwum poleceniem

unzip Magento-CE-2.1.7_sample_data-2017-05-30-03-17-57.zip

(plik może się oczywiście nazywać nieco inaczej) i usuwamy od razu niepotrzebny plik .zip

rm Magento-CE-2.1.7_sample_data-2017-05-30-03-17-57.zip

i ustawiamy odpowiednie uprawnienia

chown www-data:www-data . -R

Teraz możemy już przejść do konfiguracji. Ta część jest już zdecydowanie prostsza od poprzednich (chociaż jeszcze nie koniec z SSH ?) Wchodzimy na nasze IP przez przeglądarkę i widzimy

Setup Magento

klikamy Agree and Setup Magento, nastąpi sprawdzanie wymagań pod kątem serwera

Weryfikacja serwera

Jeżeli wszystko jest ok klikamy Next. Teraz musimy podać dane do bazy danych (ale oczywiście najpierw ją stworzymy). Logujemy się w SSH do MySQL poleceniem

mysql -u root -p(podajemy hasło takie jak ustawiliśmy przy instalacji)

odpalamy kolejno komendy (nazywam bazę danych xcoding_magento2, tak samo będzie nazywał się użytkownik do bazy danych i będzie miał hasło gOna75Xi).

CREATE DATABASE `xcoding_magento2` /*!40100 COLLATE 'utf8_general_ci' */;
CREATE USER 'xcoding_magento2'@'localhost' IDENTIFIED BY 'gOna75Xi';
GRANT USAGE ON *.* TO 'xcoding_magento2'@'localhost';
GRANT SELECT, EXECUTE, SHOW VIEW, ALTER, ALTER ROUTINE, CREATE, CREATE ROUTINE, CREATE TEMPORARY TABLES, CREATE VIEW, DELETE, DROP, EVENT, INDEX, INSERT, REFERENCES, TRIGGER, UPDATE, LOCK TABLES  ON `xcoding\_magento2`.* TO 'xcoding_magento2'@'localhost' WITH GRANT OPTION;
FLUSH PRIVILEGES;

Wracamy do przeglądarki i uzupełniamy dane.

Ustawienia bazy danych

Na kolejnym kroku widzimy nasz adres do panelu administracyjnego: http://176.119.58.148/admin_xwsntl możemy go zmienić na jakiś bardziej przyjazny (ale nie /admin). Na kolejnym kroku wybieramy strefę czasową, walutę i język

Ustawienia strefy czasowej

Kolejny krok to tworzenie konta dla admina

Tworzenie konta admina

i na końcu klikamy w “Install Now” i podziwiamy postęp instalacji

Postęp instalacji Magento

Jeżeli wszystko pójdzie dobrze to zobaczymy ekran z podsumowaniem instalacji

Podsumowanie instalacji

a wchodząc na adres http://176.119.58.148/ zobaczymy zainstalowane Magento2.

Zainstalowane Magento

Instalacja szablonu graficznego

Standardowy wygląd Magento2 (template Luma) nie jest brzydki, jest responsywny – ogólnie moglibyśmy go używać. Standardowy szablon Magento wg mnie to kiepski pomysł i musimy wybrać jakiś szablon, który będzie nam się podobał i będzie “na czasie”. Ja wybrałem akurat darmowy szablon FreeGo.

Każdy szablon ma dołączoną instrukcję instalacji, zazwyczaj wystarczy wrzucić odpowiednie pliki na serwer. Tak jest w moim przypadku, do katalogu /home/www/176.119.58.148< wystarczy skopiować katalog app z szablonu. Tak jak poprzednio do tego celu użyjemy programu FileZilla (jeżeli jesteś biegły w używaniu konsoli to polecam wrzucić spakowany plik i rozpakować odpowiednie rzeczy bezpośrednio na serwerze – powinno być znacznie szybciej).

Następnie przechodzimy do panelu administracyjnego (dla przypomnienia, u mnie jest to: http://176.119.58.148/admin_xwsntl do konfiguracji zawartości Content -> Design ->0 Configuration).

Ustawienia designu

Widzimy listę witryn, sklepów i widoków sklepu na naszej instancji (w naszym przykładzie jest 1 witryna, 1 sklep z 1 widokiem sklepu).

Teraz wystarczy, że wyedytujemy witrynę i nadamy jej nasz nowy szablon – Solwin FreeGo. Sklep i widok sklepu automatycznie otrzymają nowy szablon (możemy oczywiście przypisywać różne szablony do różnych widoków sklepu).

Wygląd sklepu

Po tej operacji wyskoczy nam powiadomienie, że powinniśmy wyczyścić cache – oczywiście należy to zrobić i już możemy się cieszyć naszym nowym wyglądem sklepu. I tutaj pojawia się jedno utrudnienie w naszym przypadku – sklep przestał działać ?.

Nie jest to powód do zdenerwowania, na pewno da się to poprawić. Sięgamy do dokumentacji szablonu i zauważamy, że wymaga on wykonania jednego polecenia z linii komend. Puszczamy z poziomu ssh polecenie:

php bin/magento setup:upgrade

i po wyczyszczeniu cache możemy cieszyć się w pełni naszym nowym wyglądem sklepu.

Czasami możemy natrafić na szablon, który będzie wymagał nieco więcej konfiguracji – wtedy należy pracować bezpośrednio z dokumentacją danego szablonu. Tak jest w tym przypadku, twórcy szablonu pozostawili dla nas miejsca na wstawienie odpowiednich obrazków i treści. Natomiast dzięki przygotowaniu tych miejscu od razu mamy pogląd na to jak to będzie finalnie wyglądało oraz co potrzebujemy przygotować. Dobrą praktyką jest domyślne wyłączenie edytora WYSIWYG na sklepie (można go zawsze włączyć, ale będzie często przeszkadzał bardziej niż może pomóc – chyba, że jesteś osobą, która nie ma żadnej wiedzy odnośnie HTMLa). W tym celu wchodzimy w PA w Stores -> Configuration -> Content Management i zaznaczamy opcję Enable WYSIWYG Editor: Disabled By Default. Jeżeli jesteśmy bardziej pewni siebie możemy wybrać opcję: Disabled Completely.

W naszym zainstalowanym szablonie autorzy przygotowali własny panel zarządzania wyglądem:

Zarządzanie wyglądem

Zazwyczaj takie rozwiązanie pozwala na bardziej intuicyjne zarządzanie przez osoby, które nie miały wcześniej dużo doświadczenia z e-Commerce. Może niestety być mało komfortowe dla osób, które biegle posługują się danym silnikiem (u nas – Magento 2) lub doświadczonych programistów. Domyślnie w naszym świeżo zainstalowanym szablonie mamy dodaną już stronę główną, która składa się z kilku bloków, które możemy znaleźć w panelu administracyjnym w zakładce Content -> Blocks

Bloki statyczne

Każdy z nich należy wyedytować tak żeby nabrał treści ważnej dla naszego sklepu. Wykonujemy to poprzez wybór Select -> Edit (po prawej stronie każdego bloku). Treść edytujemy standardowo. Możemy także skorzystać z wbudowanego narzędzia Magento do dodania obrazków do treści. W edycji bloku wybieramy Insert Image

Dodawanie obrazka

i możemy załączyć wiele plików ze zdjęciami do dedykowanego folderu (dobrze jest pogrupować obrazki w jakieś logicznie spójne foldery).

Zarządzanie mediami

Po dodaniu obrazków i wybraniu jednego z nich klikamy Insert file i od razu edytor wstawi nam odpowiedni tag html do treści (możemy go oczywiście edytować, zachowajmy tylko poprawną ścieżkę do pliku w formie

{{media url="wysiwyg/xcoding_homepage/post_400x250.png"}}

Taki wpis w dowolnym bloku lub stronie spowoduje wstawienie linku do obrazka z odpowiedniej lokalizacji. Zobaczmy jaki efekt uzyskaliśmy po przygotowaniu odpowiednich obrazków oraz treści:

Obrazki Magento

Widzimy, że nasz sklep nabiera już ciekawszego kształtu i w końcu mamy coś co można zobaczyć i co jest bliskie wersji ostatecznej naszej strony głównej (oczywiście to jest tylko przykład wyglądu).

Ustawienie odpowiedniej domeny dla sklepu

Do tej pory posługiwaliśmy się adresem: http://176.119.58.148, co oczywiście nie sprzyja zapamiętaniu adresu naszego sklepu przez użytkowników. Po to właśnie w internecie używane są domeny. Ja wybrałem dla mojego sklepu subdomenę mage2.sellbetter.pl. Moja domena jest wykupiona w serwisie nazwa.pl. Zobaczmy jak odpowiednio skonfigurować u tego dostawcy naszą domenę. Przechodzimy do strony: https://konto.nazwa.pl/zaloguj-sie.html i logujemy się w formularzu po prawej stronie (dygresja – nie jest to najlepiej zaprojektowana strona pod kątem UX – na pierwszy rzut oka logowanie nie jest zbyt istotne, a przecież jesteśmy na stronie logowania).

Rejestracja domeny

Na stronie głównej naszego konta klikamy “Domeny”.

Zakładanie domeny

i wybieramy domenę z listy naszych domen. Klikamy “konfiguruj”.

Konfigurowanie domeny

Wybieramy z listy dostępnych opcji “Przekierowanie na zewnętrzny adres IP” i wpisujemy tam adres IP naszego serwera (czyli 176.119.58.148). Teraz musimy przygotować nasz serwer do obsługi nowej domeny. Logujemy się do SSH do naszego sklepu. W linii poleceń wpisujemy:

nano /etc/apache2/sites-available/176.119.58.148.conf

i dodajemy jedną linię do naszej konfiguracji:

ServerAlias mage2.sellbetter.pl

zaraz po wpisie ServerName Nasz plik konfiguracyjny wygląda teraz następująco:

<VirtualHost *:80> ServerAdmin informacja@x-coding.pl ServerName 176.119.58.148 ServerAlias mage2.sellbetter.pl

        # Indexes + Directory Root.
        DirectoryIndex index.html
        DocumentRoot /home/www/176.119.58.148/
        <Directory /home/www/176.119.58.148/>
                Options -Indexes +FollowSymLinks +MultiViews
                AllowOverride all
                Require all granted
        </Directory>
</VirtualHost>

Zapisujemy plik (ctrl + o) i wychodzimy z edytora (ctrl + x). Teraz musimy zrestartować serwer żeby nowe ustawienia zaczęły działać. W tym celu wykonujemy polecenie:

service apache2 restart

Musimy też wprowadzić odpowiednie ustawienia w panelu administracyjnym naszego sklepu. Przechodzimy do ustawień Stores -> Configuration -> General -> Web. Musimy zmienić ustawienia w sekcjach Base URLsoraz Base URLs (Secure) (to przyda się jeszcze później jak będziemy konfigurować certyfikat SSL dla naszego sklepu).

Po zapisaniu ustawień zostaniemy wylogowani z panelu administracyjnego i powinniśmy zostać automatycznie przeniesieni na nowy adres (u mnie mage2.sellbetter.pl).

Dobrze jest zalogować się do panelu administracyjnego i wyczyścić jeszcze dodatkowo cache.

Instalacja SSL

W parze z przypisaniem domeny powinno być też przypisanie certyfikatu SSL do sklepu. Można oczywiście taki certyfikat wykupić u jakiegoś usługodawcy (możliwe, że dostaniemy go w gratisie razem z domeną). Ja jednak pokażę jak to zrobić bez dodatkowych kosztów.

Zanim jednak przystąpimy do konfiguracji certyfikatu dla domeny musimy zmienić 2 elementy konfiguracji w Magento. Przechodzimy do wspomnianej wcześniej sekcji: Stores -> Configuration -> General -> Web -> Base URLs (Secure) i zaznaczamy opcje “Yes” dla Use Secure URLs on Storefront oraz Use Secure URLs in Admin.

Ustalane adresów

Zapisujemy konfigurację. Sklep może przestać działać, ale nie przejmujemy się tym w tym momencie i kontynuujemy ustawianie certyfikatu.

Z linii poleceń naszego serwera wykonujemy komendy:

echo 'deb http://ftp.debian.org/debian jessie-backports main' | tee /etc/apt/sources.list.d/backports.list
apt-get update
apt-get install python-certbot-apache -t jessie-backports

(zostaniemy zapytani czy kontynuować instalację, potwierdzamy przez Y + Enter).

certbot --apache

zobaczymy teraz komunikat z wyborem domeny, dla której będziemy wystawiali certyfikat. U mnie wygląda to tak:

Saving debug log to /var/log/letsencrypt/letsencrypt.log

Which names would you like to activate HTTPS for?
-------------------------------------------------------------------------------
1: mage2.sellbetter.pl
-------------------------------------------------------------------------------
Select the appropriate numbers separated by commas and/or spaces, or leave input
blank to select all options shown (Enter 'c' to cancel):

Wybieramy 1 i wciskamy Enter. Teraz będziemy poproszeni o podanie adresu email.

Enter email address (used for urgent renewal and security notices) (Enter 'c' to cancel):

Wpisujemy adres e-mail na który będą przychodziły powiadomienia o wygasaniu certyfikatu lub informacje dotyczące bezpieczeństwa (nie bójmy się spamu) i Enter. Następnie czytamy regulamin usługi letsencrypt.com

Please read the Terms of Service at
https://letsencrypt.org/documents/LE-SA-v1.1.1-August-1-2016.pdf. You must agree
in order to register with the ACME server at
https://acme-v01.api.letsencrypt.org/directory
-------------------------------------------------------------------------------
(A)gree/(C)ancel:

i potwierdzamy poprzez A + Enter. Na koniec wybieramy czy przekierowywać cały ruch na szyfrowane połączenie czy nie.

Please choose whether HTTPS access is required or optional.
-------------------------------------------------------------------------------
1: Easy - Allow both HTTP and HTTPS access to these sites
2: Secure - Make all requests redirect to secure HTTPS access
-------------------------------------------------------------------------------
Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

Ja wybieram opcję 2 bo chcę żeby cała komunikacja w obrębie sklepu była wykonywana przy pomocy bezpiecznego połączenia z użyciem SSL.

Wracamy teraz do przeglądarki. Zarówno nasz panel administracyjny jak i sklep powinny działać bez problemu i powinniśmy widzieć, że połączenie jest bezpieczne.

Bezpieczne połączenie

Instalacja modułów, czyli dostosowanie Magento 2 do realiów rynku (szczególnie polskiego)

Skoro nasz sklep jest już zabezpieczony certyfikatem SSL to jest to dobry moment na skonfigurowanie płatności internetowych. Pokażę jak to zrobić na przykładzie PayU.

Moduł PayU

Dla najbardziej popularnego systemu płatności w Polsce jest dostępny darmowy (jednak całkiem rozbudowany) moduł do Magento 2. Można go znaleźć na stronie [Github ORBA] (https://github.com/ORBA/magento2_payupl „Github ORBA”). W celu zainstalowania tego modułu wchodzimy na powyższy link i klikamy “Download ZIP”

Moduł PayU

Pobrany plik rozpakowujemy i zawartość rozpakowanego katalogu “magento2_payupl-master” wrzucamy przez FTP do naszego sklepu w ścieżkę: app/code/Orba/Payupl. Folderów Orba oraz Payupl nie będzie od razu – musimy je najpierw utworzyć.

Pobieranie modułu PayU

Następnie z linii komend wykonujemy polecenia:

php bin/magento module:enable orba_payupl 
php bin/magento setup:upgrade

Jeżeli wszystko poszło gładko to powinniśmy widzieć nowy sposób płatności w naszym systemie. Możemy go odnaleźć wchodząc w panelu administratora w zakładkę Stores -> Configuration -> Sales -> Payment Methods -> Other Payment Methods -> ORBA | Payu.pl.

Zanim jednak skonfigurujemy metodę płatności po stronie Magento musimy dodać nasz nowy sklep do PayU.pl. Zakładam, że konto w systemie PayU.pl jest już założone i wystarczy tylko dodać sklep. Jeżeli nie masz jeszcze konta w systemie Payu.pl to na pewno poradzisz sobie z jego dodaniem na stronie payu.pl (“Załóż konto Sprzedawcy”). Cały proces potrafi być zmieniany przez PayU.pl dlatego nie dołączam screenów i nie podpowiadam jak to zrobić. PayU.pl ma bardzo sprawnie reagującą obsługę, która pomoże w założeniu konta w przypadku problemów. Do pełnej aktywacji potrzebne będą skany dokumentów – wszystko wyjaśnione jest przystępnie w samym procesie rejestracji w PayU.pl. Jeżeli konto już jest utworzone przechodzimy do tworzenia nowego punktu płatności. Przechodzimy do zakładki Płatności elektroniczne -> Moje sklepy

Lista sklepów PayU

Dodajemy nowy sklep i podajemy jego dane.

Dodawanie sklepu PayU

Następnie konfigurujemy sposób działania integracji sklepu z PayU.pl – ja polecam wybór “Classic API”. Musimy podać domenę naszego sklepu, adres na który ma przejść użytkownik w przypadku błędu w procesie płatności (np. zrezygnuje z płatności), adres na który ma przejść użytkownik w przypadku pozytywnej płatności oraz adres do przesyłania raportów (niewidoczne dla użytkownika – na tej podstawie zmieniają się statusy zamówienia w Magento). Dla naszej wtyczki są to odpowiednio adresy:

Adres powrotu – błąd`mage2.sellbetter.pl/orba_payupl/payment/end/error/%error%/session_id/%sessionId%`
Adres powrotu – poprawnie`mage2.sellbetter.pl/orba_payupl/payment/end`
Adres raportów`mage2.sellbetter.pl/orba_payupl/payment/notify`
Krok drugi

Krok 3

Po kliknięciu “Dodaj sklep” zostaną nam pokazane dane, które będziemy musieli uzupełnić we wspomnianej wcześniej konfiguracji płatności po stronie Magento2. Nie musimy tych danych zapisywać – będą one dostępne zawsze w panelu PayU.pl.

Klucze konfiguracji

Moduł SMTPro

Przed skonfigurowaniem płatności dodawaliśmy do naszego sklepu domenę. Prawdopodobnie razem z domeną mamy jakiegoś dostawcę, który zapewnia nam obsługę poczty i chcielibyśmy skorzystać w sklepie z maili z tej samej domeny. W tym celu musimy skonfigurować ustawienia SMTP w sklepie. Tutaj czeka nas niemiła niespodzianka.

Ustawienia poczty

Standardowe ustawienia Magento, nie pozwalają ustawić zewnętrznego serwera SMTP! Na szczęście niedługo po opublikowaniu Magento w wersji 2 zaczęły powstawać moduły SMTP. Jednym z takim modułów które możemy zainstalować jest Magento2 SMTP. Moduł jest darmowy i ma całkiem bogaty zestaw konfiguracji. Zakup (moduł jest darmowy, ale musimy przejść przez standardowy proces zakupu bez płatności) jest bardzo prosty więc nie będę go szczegółowo opisywał.

Pobieranie SMTP

W czasie tworzenia artykułu pobrany plik nazywa się smtp_v1.0.1_ce_mageplaza.zip. Rozpakowujemy go i podobnie jak wcześniej przy module PayU kopiujemy pliki do folderu głównego gdzie mamy zainstalowane magento na naszym serwerze. Odpalamy komendę ./update.sh i po chwili możemy wejść w panel administratora i zobaczymy nowe możliwości konfiguracji SMTP, które dodał dla nas moduł. Przechodzimy do konfiguracji Mageplaza -> Configuration -> SMTP Configuration Options. Wybieramy z listy dostępnych dostawców obsługi poczty i klikamy Autofill.

Konfiguracja SMTP

Jeżeli nie ma naszego dostawcy na liście to po prostu wpisujemy dane ręcznie. uzupełniamy resztę danych (w naszym przypadku to login i hasło do skrzynki gmail). Zapisujemy konifgurację. Możemy jeszcze sprawdzić czy nasze ustawienia działają poprzez wpisanie Test Email Recipient i kliknięcie Test Now. Powinniśmy na wpisanym odbiorcy zobaczyć mniej więcej taki email:

Testowy mail

Gotowe, mamy skonfigurowane SMTP a naszym sklepie. Teraz należy tylko odpowiednio skonfigurować emaile w zakładce ‚Stores -> Configuration -> Store Email Addresses’. Pamiętaj, że nie wszystkie skrzynki pozwalają wysyłać wiadomości email jako inny nadawca niż faktycznie jest skrzynka pocztowa (np. próba wysłania wiadomości email jako sellbetter@gmail.com ze skrzynki xcoding@gmail.com skończy się niepowodzeniem).

Moduł tłumaczeń PL

Zajmijmy się teraz przetłumaczeniem sklepu na język polski. Oczywiście wprowadzane treści możemy wprowadzać w odpowiednim języku, ale napisy typu “koszyk” w szablonie obecnie są w języku angielskim (czyli “cart”). Podobnie jak z SMTP wychodzą gotowe moduły z tłumaczeniami, my zainstalujemy moduł.

Przy okazji pokażę jak można instalować moduły przy pomocy narzędzia composer (wiele modułów można instalować w ten sposób, również te, które pokazywałem wcześniej). Najpierw musimy zainstalować samo narzędzie. Przechodzimy w konsoli poleceń na serwerze do folderu z magento i wykonujemy komendy:

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

OK. Composer zainstalowany, teraz w celu instalacji modułu do tłumaczeń musimy wywołać polecenie

php composer.phar require snowdog/language-pl_pl

ale uwaga, za pierwszym razem będzie trochę więcej konfiguracji. Musimy przejść do na stronę: https://account.magento.com/applications/customer/login/, zalogować się (lub utworzyć konto jeżeli jeszcze nie mamy). Następnie przechodzimy do strony: https://marketplace.magento.com/customer/accessKeys/ i tam musimy wygenerować sobie dostęp do repozytorium magento (co to jest i jak to rozumieć nie jest przedmiotem naszych rozważań w tym momencie :)). Klikamy “Create New Access Key” i podajemy nazwę nowego zestawu kluczy dostępowych. Nowy zestaw kluczy pojawi się nam na liście. Odpalamy komendę:

php composer.phar require snowdog/language-pl_pl
i podajemy Public Key jako username
Authentication required (repo.magento.com):
      Username: 24f***********************************17
oraz Private Key jak password.
      Password:
Do you want to store credentials for repo.magento.com in /root/.composer/auth.json ? [Yn] Y
Using version ^0.7.0 for snowdog/language-pl_pl
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing snowdog/language-pl_pl (0.7.0): Downloading (100%)
Writing lock file
Generating autoload files

Jak cały proces się zakończy to wykonujemy jeszcze 2 komendy:

php bin/magento setup:static-content:deploy pl_PL
php bin/magento cache:flush

i powinniśmy widzieć efekty spolszczenia naszego sklepu od strony klienta.

Elementy takie jak “Zaloguj się”, “Utwórz konto”“Mój koszyk” czy “Szukaj w sklepie…” są przetłumaczone. Nie przejmujmy się, że nie zostało przetłumaczone “Get free Shipping…”. To jest wiadomość edytowalna w panelu administracyjnym więc możemy ją zmienić sami.

Moduł Tag Manager + ustawienie Analitycs

Każdy sklep wymaga monitorowania skuteczności. Jednym z narzędzi jest Google Analytics. Zobaczymy jak dodać naszą witrynę do Analytics, wykorzystamy do tego Google Tag Manager. Umiemy już instalować moduły przez Composera dlatego wykonujemy polecenia:

php composer.phar require yireo/magento2-googletagmanager2
php bin/magento module:enable Yireo_GoogleTagManager2
php bin/magento setup:upgrade

i mamy zainstalowany moduł Tag Manager do Magento2. Przyjemniej z composera niż poprzez kopiowanie – na pewno ?

Teraz musimy założyć konto tag managera i dodać tam kod Google Analytics (zakładam, że jesteś już zarejestrowany i zalogowany na konto Google). Przechodzimy do strony https://tagmanager.google.com/ i klikamy “Utwórz konto”. Wypełniamy dane (tutaj dobrze podać nazwę firmy lub jakiś inny identyfikator danego konta).

ustawienia GTM

i podajemy dane dotyczące witryny, na którą umieścimy tag z Google Tag Manager.

Konfiguracja GTM

Następnie przechodzimy na “Obszar roboczy” (w nagłówku po lewej stronie) i klikamy “Dodaj nowy tag”. Uzupełniamy niezbędne dane do dodania Google Analytics (więcej na ten temat możesz znaleźć tutaj: https://support.google.com/analytics/answer/6163791?hl=en. Przechodzimy do panelu administracyjnego magento, do konfiguracji Stores -> Configuration -> Sales -> Yireo GoogleTagManager i wpisujemy kod naszego tagu w Google Tag Manager (zazwyczaj w formacie GTM- XXXXXX- widoczny jest na górnym pasku w konsoli Google Tag Manager).

Konfiguracja podstawowych parametrów sklepu

Zacznijmy od ustawienia parametrów takich jak nazwa sklepu czy dane kontaktowe. Na potrzeby tego opracowania przyjmiemy, że nazwa naszego sklepu to Mage2Sell (tak żeby trochę spinało się z domeną ?).

Przejdźmy do panelu administracyjnego, do Content-> Design -> Configuration i wybierzmy Global (będziemy zmieniać ustawienia domyślne dla wszystkich widoków sklepu – u nas jest na razie tylko jeden).

Zakładka global

Wcześniej już wybieraliśmy tutaj template, którego używamy. Teraz przejdźmy do sekcji HTML Head. Ustawiamy tam kolejno faviconę, domyślny tytuł sklepu, przedrostek oraz suffix tytułu (domyślny tytuł będzie zastąpiony przez np. informację o produkcie, ale przedrostek i suffix będą zawsze doklejane). W sekcji Header ustawiamy logo, wiadomość powitalną oraz alternatywny tekst dla obrazka z logiem sklepu. W sekcji Footer możemy wpisać tekst, jaki widzimy a samym dole naszego przykładowego szablonu. Zauważmy, że w tym miejscu nie jest definiowana stopka – zawiera się ona w osobnym bloku.

Ustawienia widoku

Uzupełniamy jeszcze dane w zakładce Transactional emails (dotyczą one wiadomości wychodzących ze sklepu).

Ustawienia maili

Zapisujemy konfigurację.

Przejdźmy teraz do Stores -> Configuration -> General -> General. Wybierzmy domyślny kraj: Poland (odznaczamy “Use system value” – oznacza to mniej więcej resetuj do ustawień początkowych). Zaznaczmy do których krajów chcemy móc wybierać dostawę (ja wybiorę Polskę i Niemcy). Zaznaczamy w “Top destinations” Poland żeby wyżej pokazywała nam się Polska jako główny kraj. W “State options” możemy zdecydować czy województwo (czy land w przypadku Niemiec) będzie wymagany oraz czy w ogóle się pokaże do wyboru, jeżeli nie jest wymagany. W sekcji Locale wybieramy język i strefę czasową, zaznaczamy domyślnie kilogramy jako jednostkę masy oraz wybieramy poniedziałek jako pierwszy dzień tygodnia. W sekcji Store information wstawiamy dane firmy (niektóre elementy powtarzają się z poprzedniej konfiguracji, ale w rzeczywistości są to dane wprowadzane w zupełnie innym kontekście.

Ustawienia sklepu

Przechodzimy teraz do zakładki Stores -> Configuration -> General -> Currency Setup i wybieramy domyślną oraz dostępne waluty (powiedzmy PLN i EUR).

Ustawienia waluty

Dalej w zakładce Store Email Addresses ustawiamy kilka adresów e-mail, jakie będziemy wykorzystywać w komunikacji pocztą elektroniczną. Pamiętaj, że wpisany tutaj adres musi być obsługiwany przez skrzynkę pocztową (np. Gmail będzie pozwalał na wysyłanie wiadomości tylko z takim nadawcą jaki jest email skonfigurowany w module SMTP).

Ustawienia adresów e-mail

Na pewno chcemy naszym klientom umożliwić kontakt z nami. W tym celu w zakładce Contacts ustawiamy informacje o e-mailach wysyłanych z formularza kontaktowego.

Ustawienia kontaktu

Konfiguracja podatków

Konfiguracja podatków (szczególnie na kilka krajów) może stwarzać kilka problemów. Przejdźmy przez cały proces. Załóżmy, że w naszym sklepie będą tylko produkty sprzedawane ze stawką 23% VAT, natomiast mogą one być także sprzedane bez podatku jeżeli mamy klienta z Niemiec, który będzie miał zwalidowany numer VAT ID w systemie VIES. Zacznijmy od klas podatku (czyli czegoś co przypiszemy do produktu, co będzie mówiło jaki podatek zastosować dla danego produktu). Przejdźmy do Stores -> Tax Rules -> Add New Tax Rule. Rozwińmy Additional Settings i tam widzimy 1 gotową klasę podatku dla produktu “Taxable Goods”. Zmieńmy ją dla większej czytelności na VAT 23%. Powyżej mamy klasy podatku klienta. Dodajmy nową klasę podatku klienta “bez VAT” oraz zmieńmy nazwę tej która już była dodana na “z VAT”.

Po naszych operacjach będziemy widzieli coś takiego:

Ustawienia klas podatków

Wróćmy do listy reguł podatku i usuńmy te, które istnieją (wchodzimy w regułę i “Delete Rule”). Przejdźmy teraz do stawek podatku – Stores -> Tax Zones and Rates. Usuwamy stare stawki (podobnie jak z regułami). Dodajemy teraz nowe stawki podatku. Potrzebujemy 3 stawki: 23% do Polski, 23% do Niemiec i 0% do Niemiec, zgodnie z poniższymi zrzutami:

Ustawienia stef podatku
Ustawienia stawek podatku

Mamy nasze 3 stawki podatku:

Stawki podatku Magento

Po dodaniu stawek podatku możemy skonfigurować reguły podatku. Przejdźmy do listy reguł i dodajmy 2 reguły, jedną dla standardowej stawki 23% oraz jedną dla podatku 0% w Unii Europejskiej. Szczegóły na zrzutach poniżej:

Ustawienia reguł podatku
Ustawienia reguł podatku 2

I nasze 2 reguły podatku:

Reguły podatku

Wspaniale, podatki mamy już skonfigurowane. Klienci, którzy będą należeć do klasy bez VAT i będą zamawiać do Niemiec będą mieli towary bez podatku. Pozostali będą mieli doliczone 23% podatku VAT.

Konfiguracja dostaw

Przechodzimy do ustawień dostawy Stores -> Configuration -> Sales -> Shipping Settings. Ustawiamy kraj wysyłki, czyli Poland i możemy podać także pozostałe informacje (ale nie ma to takiego znaczenia jak ustawienie kraju). Będziemy chcieli udostępnić klientom darmową dostawę po przekroczeniu 200 zł kwoty zamówienia. W tym celu należy skonfigurować opcję Free Shipping jak na screenie.

Ustawienia dostaw

Standardową dostawą będzie kurier, który będzie kosztował zawsze 15 zł. Wybieramy w tym celu Flat Rate. Gdybyśmy chcieli różnicować ceny dostawy za dostawę dla różnych krajów należałoby wybrać Table Rate zamiast Flat Rate. Poniżej parametry dostawy:

Parametry dostaw

Konfiguracja promocji

Tym co nakręca sprzedaż na sklepie są często promocje. Do wyboru mamy 2 rodzaje promocji: katalogową oraz koszykową. Promocje katalogowe to promocje na konkretny produkt lub grupę produktów. Wtedy w koszyku widzimy ten produkt jakby był po prostu tańszy. Promocje koszykowe pozwalają na ustalanie bardziej zaawansowanych reguł promocji. Np. możemy ustawić promocje 10% w przypadku gdy mamy powyżej 10 sztuk jakiegoś produktu w koszyku albo jeżeli mamy w koszyku na raz 2 wskazane produktu. Promocje koszyka mogą być aktywowane automatycznie lub kodem rabatowym (zarówno pojedynczym jak i grupowym). Skupmy się na dodaniu promocji koszyka, która obniży koszt koszyka o 20% w październiku klientom, którzy mają kod promocyjny i wartość koszyka przekroczyła 200 zł. Każdy kod będzie mógł być użyty tylko 1 raz.

Przechodzimy do Marketing -> Cart Price Rules i klikamy Add New Rule.

Podajemy nazwę reguły “20% w październiku” i opcjonalnie dodajemy opis (opis i nazwa reguły będzie widoczna tylko dla administratora, dla klientów będziemy ustawiać nazwę wyświetlaną nieco później). Zaznaczamy na których witrynach będzie dostępna (u nas jest po prostu jedna – “Main Website”). Zaznaczamy grupy klientów, które będą mogły skorzystać z promocji (u nas bez ograniczeń). Wybieramy opcję Specific Coupon i zaznaczamy żeby kody były generowane. Każdy kod będzie mógł zostać użyty tylko jeden raz. Bez ograniczeń na klienta (klient z 2 kuponami będzie mógł skorzystać z promocji 2 razy bez przeszkód). Zaznaczamy datę od i datę do okresu obowiązywania promocji. Dzięki temu nie musimy pamiętać o włączeniu 1 października i wyłączeniu promocji 1 listopada. W sekcji Conditions dodajemy 1 warunek i wybieramy “Subtotal” (czyli wartość produktów w koszyku) jest równe lub większe niż 200 zł. W sekcji Actions wybieramy “Percent of product price discount” i ustawiamy wartość na 20 (czyli 20% zniżki). Dodajemy także nazwę promocji widoczną dla klientów sklepu w sekcji Labels. Szczegóły na screenie:

Ustawienia promocji

Zapisujemy promocję przez Save and Continue Edit i przechodzimy do sekcji Manage Coupon Codes (na samym dole). Wypełniamy formularz zgodnie ze screenem (oczywiście parametry możemy dostosować) i klikamy Generate.

Kody rabatowe

Kody muszą być w miarę krótkie (szczególnie jeżeli będą drukowane i rozdawane), ale nie za krótkie żeby nie można było spróbować ich odgadnąć. Do każdego kodu możemy dokleić prefiks i sufiks. Po wygenerowaniu kodów widzimy ich listę w tabelce poniżej formularza ich generowania. Kody możemy wyeksportować w celu dalszej akcji marketingowej (żeby klienci mogli użyć ich na koszyku musimy je przecież im dostarczyć ?)

]]>