15 / 09 / 2017 Developers

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

W poprzedniej części zakończyliśmy naszą pracę na działającym sklepie z domyślnymi ustawieniami i produktami. Zacznijmy dodawać nieco konfiguracji i personalizacji do naszego sklepu.

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

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

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:

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

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”

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

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:

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

Podsumowanie

Zapraszam do dzielenia się ciekawymi szablonami magento, które wykorzystujecie we własnych projektach (tymi zakupionymi jak i tymi autorskimi). W następnej części zajmiemy się skonfigurowaniem sklepu pod docelową domenę oraz instalacją pierwszych modułów.

FacebookTwitterGoogle+LinkedIn