od Podstaw
5 godz. 56 min · PHP · Full-stack i Programowanie
Patryk WaluśBackend DeveloperZanim przejdziemy do omawiania możliwości Magento, przedstawię Ci w jaki sposób skonfigurować środowisko developerskie oraz jak zainstalować nowy projekt. Omówimy też polecenia i narzędzia, które są przydatne podczas pracy developerów.
Rozpoczniemy od przedstawienia oraz omówienia funkcji poszczególnych katalogów, które znajdują się w projekcie. Po wstępie stworzymy swój pierwszy moduł oraz przedstawię podstawowe techniki wykorzystywane przez Magento do zarządzania konfiguracjami czy modułami.
Magento wykorzystuje bardzo popularny wzorzec MVC, który składa się z trzech elementów. Aby z łatwością rozumieć jak system obsługuje żądania HTTP najpierw przestawię ogólne działanie MVC, a następnie jak to działa w Magento.
Szczegółowe omówienie wzorca MVC rozpoczniemy od literki C czyli Controller'a. W tym rozdziale dowiesz się jak zarejestrować w systemie nową ścieżkę, jak pobierać parametry oraz w jaki sposób zwrócić rezultat odpowiedni dla danego przypadku.
Gdy już zarejestrujemy nową stronę, konieczne będzie zdefiniowanie jej wyglądu. Dlatego też, przedstawię Ci jak to zrobić oraz jakie możliwości Magento udostępnia do manipulacji układem stron. Omówię różnice między kontenerem, a blokiem oraz pokaże jak modyfikować tagi w sekcji.
Aby wcześniej dodana strona była funkcjonalna, konieczna jest jej integracja z bazą danych. Do tego celu stworzymy m.in. Model, za pomocą którego będziemy komunikować się z MySQL. Przedstawię Ci też dobre praktyki, które pozwalają na tworzenie kodu wysokiej jakości.
W ostatnim rozdziale omówimy konfigurację nowego motywu w Magento. Pozwoli Ci to zrozumieć jak tworzyć różne wersje wyglądu dla sklepów internetowych.
Ten kurs w szczególności przyda się osobom, które chcą poznać podstawy framework'a Magento 2. Przedstawione w nim fundamentalne informacje pomogą zrozumieć sposób działania systemu, a także w jaki sposób można dodawać czy rozszerzać swój projekt o nowe funkcjonalności.
Wiemy już w jaki sposób dodać taki mecz a
teraz zajmiemy się dodaniem Styrii do naszej strony.
Zrobimy to najpierw tworząc plik CEZ następnie dodamy nowy plik o rozszerzeniu
less natomiast wspomnę tutaj że wytłumaczenie w jaki sposób działa
kompilacja kompilacja less zostanie omówiona w innym kursie.
Przechodzimy do znanego już wcześniej
pliku Brand Index XML w którym zawarta jest konfiguracja naszej strony
i teraz do tego dodamy nowe zagęszczenie w którym znajdzie się kolejny tak CSS i
następnie za pomocą atrybutów serce wskaże w jakim miejscu znajduje się plik CSS.
Najpierw musimy wskazać w jakim katalogu jest to robione w przypadku szablonów
następnie za pomocą dwóch kroków pokażemy ścieżkę do naszego pliku CSS.
Aby to zrobić konieczne będzie użycie
najpierw słowa CSS a następnie nazwy pliku jaki nas interesuje może to być Brand CSS.
Przejdziemy teraz do systemu plików do
naszego modułu i stworzymy odpowiedni folder w katalogu ww.
frontem.
Konieczne będzie stworzenie folderu o nazwie Web.
A następnie folderu cs.
Dlatego też w Jałcie nazwaliśmy najpierw folder CSS a dopiero później plik CSS.
Dokładnie tak samo musi zostać nazwany
katalog czyli Web CSS i dopiero teraz możemy tworzyć swój plik Brand.
Cs.
Dla przykładu dodajmy dla kontenera Brand Class.
Dodamy Pat link.
20 pikseli i kolor niech będzie.
Red.
Otwieramy stronę.
Nic się nie stało dlatego konieczne będzie otworzenia inspektora.
I dopiero teraz otworzymy
wcześniej na początku kursu zdecydowaliśmy że mają zostać wyłączone.
Dlatego też po otworzeniu inspektorom i
odświeżania strony proces został poprawnie załączony do naszej strony
i dlatego dla kontenera Brand Class został poprawnie zmieniony styl
możemy teraz przejść jeszcze do tego aby zobaczyć nasz plik CSS.
Pojawił się on w trzeciej linii link starszy brat cesarz Brand CSS
i teraz jeśli modyfikuje ten plik CSS to z racji że plik CSS znajduje się w
postaci przejdźmy teraz do edytora kodu zobaczmy jeszcze po statek.
Statek następnie front mocy aktualnie mamy ustawiony domyślnie motyw Kolumba.
Dlatego też przechodzimy dalej do folderu
brand i możemy zauważyć że znajduje się TUTAJ plik o dokładnie takiej samej nazwie
jak w module z strzałka która wskazuje na to że jest to silnik z racji że nie jest
to konkretny plik tylko link do naszego pliku w module Brandt to każda zmiana
w tym pliku spowoduje odświeżenie od razu na naszej stronie internetowej.
Dlatego też ustalimy sobie kolor i
zostawmy troszkę mniej rzucający się w oczy.
Załóżmy.
Niech to będzie szary kolor.
Wróćmy do przeglądarki.
Otwieramy stronę musi być włączone inspektor aby te zmiany
zostały załączone bo inaczej przeglądarka odczyta z swojego kosza.
Po zmianie w pliku CSS i odświeżenie
strony rzeczywiście kontener zmienił kolor na szary.
Wrócimy teraz do edytora kodu i zmienimy aby to nie pobrało pliku CSS które
przygotowaliśmy wcześniej tylko pobrało plik less.
Następnie dokonało kompilacji i dopiero wtedy zwróciło już poprawny plik CSS.
Dlatego też zmienimy nazwę naszego pliku na firmę CSS.
Rozszerzenie CSS zostanie tak jak było
wcześniej natomiast usunięty plik CSS i w jego miejsce stworzymy plik o nazwie File.
Les.
To damy sobie tak jak poprzednio klasę Brand Class naszego kontenera i
zmienimy jej styl zmienimy kolor tym razem na coś niebieskiego.
Wrócimy teraz do przeglądarki.
Otworzymy stronę i kontener powinien zmienić swój kolor niebieski.
Możemy zauważyć że inspektorzy z poprawnie
został załączony plik CSS Files otworzymy go w nowej zakładce.
Mamy jego zawartość.
Akurat nie robiliśmy nic specjalnego.
Dlatego też ta zawartość jest taka sama.
Natomiast dlaczego ten plik znajduje się pod rozszerzeniem css.
Jak to przetwarza i wyszukuje pliki CSS.
Przejdźmy teraz do edytora kodu.
Wrócimy do pliku z autem i teraz tak.
Zdefiniowanie sobie że to ma wyszukać plik CSS CSS.
Wyszukuje taki plik w naszym Module.
Natomiast widzi że go nie ma.
Jeśli był tak jak przedtem był proces to go załadować.
Wszystko jest w porządku.
Natomiast tego pliku teraz nie ma.
Widzi on natomiast że plik Files
dlatego też uruchomiony została uruchomiona uruchomiona została
kompilacja LS która spowodowała wygenerowanie pliku fail.
Kropka CSS.
Ten plik możemy znaleźć w folderze powstał.
Dlatego też przejdźmy z powrotem do powstania link do modułu Print.
I tutaj możemy zauważyć że został wygenerowany Files i
akurat w tym momencie połączył te dwa pliki ale znajduje się TUTAJ plik File CSS
który został właśnie załadowany przez przeglądarkę.
Dokonamy teraz zmiany w pliku fail kropka less zmienimy z powrotem aby kolor naszego
kontenera był szary po zmodyfikowaną pliku Les przechodzimy z
powrotem do przeglądarki aby sprawdzić czy kontener zmienił swój kolor na szary.
Nic się nie zmieniło a to dlatego że po pierwsze w katalogu PAP statek
wygenerowany jest plik Files który musimy usunąć oraz często wykorzystuje folder War
view proces w którym przechowywane są też wyniki kompilacji lew.
Dlatego też konieczne będzie wejście do katalogu var.
.
Przepraszam powiedziała wcześniej że chodziło mi o protest.
I tutaj znajdują się też pliki które służą kompilator las do generowania plików CSS.
Możemy usunąć całkowicie tę zawartość i teraz odświeżenie strony
spowoduje poprawne za ładowanie koloru szarego Dla kontenera.