27 / 09 / 2017 Developers

Samodzielna instalacja sklepu opartego na Magento – część III

W poprzedniej części zakończyliśmy naszą pracę na wdrożeniu strony głównej na nowym wyglądzie sklepu. Przejmy do jeszcze jednego niezbędnego elementu, a następnie zajmiemy się instalacją dodatkowych modułów.

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).

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

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

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 URLs oraz 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.

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.

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: https://github.com/ORBA/magento2_payupl
W celu zainstalowania tego modułu wchodzimy na powyższy link i klikamy “Download ZIP”

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ć.

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

Dodajemy nowy sklep i podajemy jego dane.

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

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.

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.

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 https://www.mageplaza.com/magento-2-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ł. Po zakupie przechodzimy do strony produktów do pobrania: https://store.mageplaza.com/downloadable/customer/products/ i ściągamy moduł.

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 Configuratio Options. Wybieramy z listy dostępnych dostawców obsługi poczty i klikamy Autofill.

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:

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).

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

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).

Podsumowanie

Przytłoczony informacjami? Uważasz, że konfiguracja przerośnie Twoje możliwości? Zapraszam do świetnego wpisu Michała Szafrańskiego, który realizuje zamówienia na książkę “Finansowy Ninja” przez sklep internetowy, który sam skonfigurował na bazie Shoplo tutaj: http://jakoszczedzacpieniadze.pl/jak-zrobic-sklep-internetowy-case-study-finninja-czesc-3
Jeżeli jednak zdecydujesz się podjąć wyzwanie będziesz oszczędzał co miesiąc ponad 150 zł (w stosunku do rozsądnej wersji Shoplo) i nie będziesz ograniczony możliwościami standardowego sklepu. To już wszystko od strony przygotowania sklepu od strony technicznej. W kolejnym wpisie zabierzemy się za podstawową konfigurację.

FacebookTwitterGoogle+LinkedIn