Magento 2: Konfiguracja kontenera oraz kolejność elementów

0:00Wiemy już co możemy dodać nowy blok do strony.

0:03Wiemy też jak wykorzystywać modele oraz w

0:07jaki sposób przekazywać argumenty do bloków.

0:10Teraz pokaże w jaki sposób możemy stworzyć swój własny kontener.

0:14Przejdźmy więc do edytora kodu na potrzeby lekcji przygotowałem już

0:19wcześniej plik Custom HTML który zawiera pobieranie argumentu KOD.

0:24Wykorzystamy ten argument w pliku

0:27aby rozróżnić kilka bloków które będą przypisane do kontenera.

0:32Zacznijmy od zdefiniowana naszego

0:35kontenera używamy słowa kontener następnie pokazuje się atrybuty które następnie

0:40możemy wykorzystać do opisania naszego kontenera.

0:44Pierwszym z nich będzie

0:45atrybut który identyfikuje tak samo jak blok identyfikuje ten kontener.

0:51Nazwijmy go więc się na blok i następnie mamy do wyboru takie atrybuty

0:58jak HTML klasy HTML ID czy HTML i możemy za pomocą nich

1:03powiedzieć to jaka klasa ma zostać dodana do danego elementu HTML podczas żerowania.

1:11Możemy tutaj dodać np.

1:12wartość Brand class.

1:14Następnie mamy możliwość dodania HTML ID.

1:18I tutaj nazwijmy to brand ID i za pomocą HTML możemy określić czy dany

1:25kontener będzie to po prostu zwykły Dev czy to będzie tabelka czy np.

1:28filtr ustaw.

1:30Niech to będzie filtr.

1:33Następnie do tego kontenera damy bloki.

1:36Jednak warto wspomnieć o tym że ten

1:39kontener w tym momencie jest pusty i Wspominałem wcześniej że jeśli kontener

1:44jest pusty to ma to w ogóle go nie wędruje.

1:47Przejdźmy więc do przeglądarki i sprawdźmy czy rzeczywiście tak jest.

1:51Otwieramy stronę.

1:53Do tego celu będzie potrzebny inspektor.

1:55Dlatego też weźmie prawym przyciskiem myszki do opcji z badań.

1:59Następnie spróbujemy znaleźć ostatni element czyli tutaj będzie Panasonic.

2:05Z badań.

2:07I rzeczywiście jedyne co tutaj widzimy to są

2:11dwa p oraz P które zostały zdefiniowane w innym szablon.

2:15Natomiast nasz kontener się nie wyświetlał dlatego też dodajemy chociaż jeden blok

2:20aby zobaczyć czy rzeczywiście wszystko poprawnie działa.

2:24Dodajmy więc blok.

2:26Nie musimy określać klasy tak jak już wiemy z poprzednich lekcji

2:30jest ona domyślnie zamontowana przez i wskazuje na klasę tempo i

2:34my wykorzystamy tylko atrybuty oraz tempo do określenia jaka

2:39szablon ma zostać wybrany przez agenta w kontenerze Andersona Box.

2:44Nasze Bloki będą wyświetlane informacje o

2:46modelach które są dostępne w danej marce w przypadku marki Tesla.

2:51Będą to modele samochodów.

2:53Dlatego też jako nazwę podajemy TUTAJ Model X i następnie wskazujemy Temple

3:01Temple i wykorzystamy ten który stworzyłem przed lekcją czyli taśmy tylko

3:05do niego referencje czyli łeb brat dwóch kropek kropek Wu.

3:11Oraz Custom plagi.

3:15To historia podpowiada nam że takie picie

3:18znajduje więc od razu po kliknięciu Enter został dołączony.

3:23Następnie nie zamykamy jeszcze bloku ponieważ to damy sobie argument

3:29za pomocą argumentu tak jak robi się w poprzednich lekcjach.

3:32I tutaj właśnie tak jak jest to w

3:34szablon Custom HTML wyświetlana jest wartość argumentu KOD.

3:39Dlatego też atrybut nazwiemy kod a jako wartość będzie to po prostu Model X.

3:47Konieczne będzie jeszcze dodanie

3:49oczywiście typu tak jak nauczyliśmy się to wcześniej czyli X string.

3:56Teraz możemy przejść do przeglądarki.

3:59Otwórz stronę i zobaczmy czy ten kontener z tym jednym blokiem się wyświetlał.

4:09Kontener oraz blok wyświetlał się poprawnie.

4:12Teraz przejdziemy z powrotem do edytora kodu i dodamy jeszcze dwa inne bloki.

4:21Skopje to dla ułatwienia pracy nazwijmy to model y model y i Model S model S.

4:31Przejdźmy z powrotem do przeglądarki.

4:33Sprawdźmy czy jest wszystko OK

4:35udało się wyświetlić pozostałe bloki i teraz demonstruje w jaki sposób możemy

4:39manipulować kolejnością wyświetlania tych bloków w obrębie kontenera.

4:45Przejdźmy więc do pierwszego bloku i

4:47zobaczmy na opcje jakie mamy dostępna jest taka opcja jak bufor.

4:54Oraz.

4:56After.

4:57Dzięki nim możemy określać przed jakim blokiem dany blok ma się

5:01znaleźć lub po jakim bloku dany blok ma się znaleźć.

5:05Dlatego też możemy określić np.

5:07dla Modelu S który znajduje się na końcu aby był on przed modelem X.

5:13Wykorzystamy do tego nazwę danego bloku

5:16czyli identyfikator w obrębie danej strony i teraz wystarczy że otworzymy stronę.

5:22Model S pojawi się przed modelem X.

5:26Dodatkowo istnieje możliwość przekazania

5:30tylko w atrybut bufor silnika i ten myśli oznacza że ten blok będzie pierwszy.

5:38Dlatego też jeśli otworzymy stronę to

5:40dalej w dalszym ciągu Model S będzie na samym początku.

5:45Wróćmy teraz jeszcze do kodu i przejdźmy

5:48do Modelu X w którym dodamy teraz atrybut After.

5:54Jeśli ustalimy tak samo jak w bufor myśli to pojawi się ten blog na samym końcu.

6:02Dokładnie tak się stało.

6:04Jeśli teraz np.

6:05zostawimy tym razem że ten blok ma się znaleźć po bloku y po modelu y przepraszam

6:11to w takim razie trzeba będzie tutaj ustawić model Y.

6:15Otwieramy stronę.

6:17I wszystko pojawiło się tak jak to zdefiniowane.

6:22W tej lekcji dostaliśmy nowy kontener zdefiniować bloki które należą do jednego

6:27kontenera oraz zdefiniowania w jakiej kolejności dane bloki mają się wyświetlać

6:32w obrębie naszego nowego kontenera następnej lekcji opowiem w jaki sposób

6:38możemy wygenerować bloki dzieci danych bloków.