Interfejs Magento 2

Magento 2 zawiera charakterystyczny zestaw ulepszonych podejść do frontendu w porównaniu do swojego poprzednika Magento 1.X, dziś zajrzymy pod maskę silnika frontendowego Magento 2.0. I szczegółowo opisz najciekawsze części.

GORĄCY!! Wydano wersję 2.0 Claue

Zobacz demo

Claue – czysty, minimalistyczny motyw Magento 2&1 to doskonały szablon dla nowoczesnego i przejrzystego sklepu eCommerce z ponad 40 układami strony głównej i mnóstwem opcji dla sklepu, bloga, portfolio, układów lokalizatora sklepów i innych przydatnych stron. Claue w wersji 2.0 zawiera szereg ekskluzywnych funkcji, w tym:

• Opierając się na motywie Luma.
• Poznaj wszystkie standardy Magento Theme
• Znacząca poprawa wydajności
• Kompatybilny z większością rozszerzeń innych firm.
• W pełni kompatybilny z Magento 2.4.x

Ta druga zaawansowana wersja całkowicie różni się od poprzedniej. Tak więc, jeśli używasz Claue w wersji 1 i chcesz zaktualizować Claue w wersji 2, możesz tylko odbudować nową stronę internetową, a nie aktualizować ze starej wersji. Wróćmy teraz do głównego tematu

Duża różnica polega na tym, że frontend jest teraz aktualizowany o nowsze technologie, takie jak HTML5, CSS3 i jQuery. Wprowadzono również znaczące zmiany/ulepszenia w ogólnej manipulacji układem, strukturze plików i zupełnie nowe wprowadzenie do biblioteki Magento UI, w dużej mierze opartej na preprocesorze LESS z wbudowanym kompilatorem.

Jednym z głównych celów, poza wydajnością i skalowalnością, była obsługa RWD po wyjęciu z pudełka. W tym artykule postaram się omówić niektóre z głównych różnic, zagłębić się w rozwój i zademonstrować kilka praktycznych przykładów.

Biblioteka Magento UI

Biblioteka Magento UI to elastyczna biblioteka frontendowa oparta na LESS, zaprojektowana z myślą o wspieraniu twórców motywów Magento. Wykorzystuje zestaw domieszek dla elementów podstawowych, aby ułatwić tworzenie i dostosowywanie motywów frontendowych.

Komponenty dostarczane przez bibliotekę UI

Biblioteka Magento UI zapewnia możliwość dostosowania i ponownego wykorzystania następujących elementów i właściwości interfejsu użytkownika:

• działania-pasek narzędzi
• bułka tarta
• guziki
• listy rozwijane
• formularze
• ikony
• układ
• ładowarki
• wiadomości
• paginacja
• wyskakujące okienka
• oceny
• Sekcje
• tabulatory i akordeony
• stoły
• podpowiedzi
• typografia
• lista zmiennych tematycznych

Poniższa ilustracja przedstawia stronę produktu w witrynie sklepowej zawierającą niektóre z powyższych elementów:

Lokalizacja mixin

Bibliotekę Magento UI znajdziesz w lib/web/css . Pliki źródłowe biblioteki .less są przechowywane w katalogu source , każdy plik zawiera domieszki do konfiguracji określonego elementu, a w większości przypadków element pokrywa się z nazwą pliku:

 biblioteka/internet
    css/
    │ ├── docs/ (dokumentacja biblioteczna)
    │ ├── źródło/
    │ │ ├── lib/ (pliki źródłowe biblioteki)
    | | | ├── zmienne/ (wstępnie zdefiniowane zmienne dla każdego domieszki)
    │ │ │ ├── _actions-toolbar.less
    │ │ │ ├── _bułka tarta.bez
    │ │ │ ├── _buttons.less
    │ │ │ ├── _dropdowns.less
    │ │ │ ├── _forms.less
    | | | ├── _grids.less
    │ │ │ ├── _icons.less
    │ │ │ ├── _layout.less
    │ │ │ ├── _lib.less
    │ │ │ ├── _loaders.less
    │ │ │ ├── _messages.less
    │ │ │ ├── _navigation.less
    │ │ │ ├── _pages.less
    │ │ │ ├── _popups.less
    │ │ │ ├── _rating.less
    │ │ │ ├── _reset.less
    │ │ │ ├── _responsive.less
    │ │ │ ├── _sections.less
    │ │ │ ├── _tables.less
    │ │ │ ├── _tooltips.less
    │ │ │ ├── _typography.less
    │ │ │ ├── _utilities.less
    │ │ │ └── _variables.less
    │ │ └── _extend.less
    │ │ └── _theme.less
    │ │ └── _zmienne.less
    │ └── style.less
    ├── czcionki/
    │ └── Blank-Theme-Icons/ (czcionka ikon niestandardowych biblioteki)
    ├── obrazy/
    │ └── blank-theme-icons.png (Ikony w bibliotece)
    └── jquery/ (biblioteczne pliki javascript)

Predefiniowane zmienne

Jeśli Twój motyw dziedziczy z dowolnego gotowego motywu Magento, na przykład Pusty, możesz łatwo dostosować dowolny element strony sklepu bez zmiany kodu CSS lub szablonów. Dostosowanie można wykonać, po prostu zmieniając w motywie wartości predefiniowanych zmiennych używanych w bibliotece interfejsu użytkownika lub mixinach motywu nadrzędnego.

Pełna lista tych zmiennych i ich wartości domyślne są przechowywane w lib/web/css/source/lib/variables . Ten katalog zawiera zestaw plików odpowiadający zestawowi elementów biblioteki interfejsu użytkownika, a każdy z plików zawiera listę zmiennych specyficznych dla elementu. Na przykład lib/web/css/source/lib/variables/_breadcrumbs.less zawiera zmienne używane w domieszce breadcrumbs() .

Aby zmienić domyślne wartości zmiennych bibliotecznych, określ nowe wartości wymaganych zmiennych w pliku <theme_dir>/web/css/source/_theme.less .

Poniższy rysunek przedstawia stronę produktu pokazaną wcześniej w tym temacie po zastosowaniu motywu niestandardowego. Motyw dostosował Pusty tylko przez ponowne zdefiniowanie zmiennych.

Korzystanie z mixinów

Możesz użyć mixina z domyślnymi wartościami zmiennych lub możesz je przedefiniować podczas wywoływania mixina. Poniższe akapity opisują oba sposoby wywołania mixina.

Aby użyć mixina z wartościami domyślnymi, wywołaj mixin bez określania żadnych parametrów. Na przykład:

 .bułka tarta {
    .bułka tarta();
}

Aby wywołać mixin z wartościami parametrów innymi niż domyślne, ustaw te wartości podczas wywoływania mixina, jak w poniższym przykładzie:

 .przykład-przycisk {
    .przycisk(
        @_button-padding: @button-padding,
        @_kolor-przycisku: #fff,
        @_button-color-hover: #ccc
    );
}

Zmienne zaczynające się od @_ są prywatnymi zmiennymi mixin używanymi tylko w tym mixinie. Zmienne zaczynające się od @ (bez podkreślenia) są globalne i są wymienione w lib/web/css/source/lib/variables/ .

Dokumentacja biblioteki UI

Szczegółowe informacje o bibliotece Magento UI znajdziesz w dokumentacji dostarczonej wraz z kodem:

• lib/web/css/docs/source/README.md : opisuje strukturę biblioteki Magento UI, konwencje nazewnictwa i styl kodu.
• lib/web/css/docs : zawiera zestaw plików .html ze szczegółowymi informacjami o domieszkach biblioteki. Każdy plik jest nazwany po domieszce, którą opisuje, i zawiera szczegółowy opis domieszki oraz elementy sterujące nawigacją, aby uzyskać dostęp do dokumentacji innych wstawek. Dokumentacja jest dostępna w wygodnym widoku HTML w następującej lokalizacji w instalacji Magento: pub/static/frontend/Magento/blank/en_US/css/docs/index.html

W kontynuacji artykułu chciałbym opisać nową strukturę tematyczną platformy Magento 2.

Struktura motywu Magento 2

Struktura motywu Magento 2 uległa znaczącym zmianom:

Cały temat jest teraz uporządkowany według „aplikacji/projektu”. Folder „skóry” już nie istnieje. Ponadto pojawiło się nowe podejście do dostosowywania modułów: teraz w folderze z motywem każda jednostka modułu będzie miała swój własny katalog _ z jego reprezentacją, będzie zawierał szablony, JS i CSS/LESS. Jest to bardzo przyjazne i pragmatyczne podejście. Otrzymaliśmy wygodną strukturę, w której wszystko jest posortowane w bardzo wygodny sposób.

i18n

Ten folder zawiera pliki tłumaczeń .csv.

motyw.xml

Służy do inicjowania motywu. Należy tam zdefiniować nazwę motywu, wersję motywu, szablon nadrzędny motywu, obraz podglądu motywu. Nawiasem mówiąc, teraz Magento 2 obsługuje dziedziczenie wielu motywów.

kompozytor.json

Motywy Magento 2 są zorganizowane jako pakiety kompozytorskie.

Aby przekształcić własny motyw w pakiet composer, będziesz musiał dodać plik konfiguracyjny composer.json w folderze tematu, a także zarejestrować swój pakiet na https://packagist.org

Aktualizacje/ulepszenia układu

Jeśli chodzi o manipulację układem, jest kilka naprawdę fajnych i interesujących nowych ulepszeń.

Zanim zagłębimy się w praktyczne przykłady, należy wspomnieć, że pliki układu są teraz podzielone na mniejsze części. Praktycznie wyjaśnione — to, co kiedyś było uchwytem układu, teraz jest osobnym plikiem.
Prawdopodobnie chodziło o uproszczenie konserwacji.

Magento 2 wprowadza zupełnie nową koncepcję działań związanych ze zmianą rozmiaru obrazu produktu/mediów bezpośrednio z układu. Odpowiedzialny jest plik layoutu view.xml, który należy umieścić w katalogu app/design/frontend/vendorName/newTheme/etc/ . Oto przykład zmiany rozmiaru obrazów katalogu produktów w akcji.

 <view xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation = "../../../../../../lib/internal/Magento/Framework/Config/etc/view.xsd" > <vars module = "Magento_Catalog" > <var name = "product_small_image_sidebar_size" > 100 </var > <var name = "product_base_image_size" > 275 </var > <var name = "product_base_image_icon_size" > 48 </var > <var name = "product_list_image_size" > 166 </var > <var name = "product_zoom_image_size" > 370 </var > <var name = "product_image_white_borders" > 0 </var > </vars > </view >

Chociaż zakładam, że głównym celem było uproszczenie rzeczywistego procesu zmiany rozmiaru dla programistów, z pewnością zawiedzie w większości responsywnych sytuacji projektowych. Na przykład nie chcemy wyświetlać dużych obrazów użytkownikom smartfonów na połączeniu brzegowym. Zmiana rozmiaru z plików szablonów zapewniała lepszy sposób obsługi wielu źródeł dla różnych profili użytkowników końcowych. W tej chwili sprawdzając pusty motyw, widzę tylko sytuację ze skalowaniem obrazów w html.

Jedną z wielkich i mile widzianych zmian jest wprowadzenie wrappera kontenera , następcy bloku typu core/text_list , który w poprzednich wersjach systemu pełnił rolę bloku strukturalnego. Bardzo ciekawa jest możliwość przekazywania atrybutów takich jak htmlTag , htmlClass , htmlId bezpośrednio z plików układu.

Moim osobistym faworytem jest wprowadzenie metody ruchu. Jest to rodzaj udoskonalonej metody działania set/unsetChild, ale teraz proces jest znacznie bardziej intuicyjny. Na przykład, jeśli musimy wstawić źródłowy blok 1 do docelowego bloku 2, to jest to sposób, w jaki możemy to zrobić:

Automatycznie czyni blok źródłowy 1 dzieckiem bloku docelowego 2 .

Należy wspomnieć, że Magento 2 oferuje walidację systemu dla plików XML przy użyciu schematów xml dla pojedynczych i scalonych plików układu.

System frontendowy Magento 2 został znacznie ulepszony, teraz jest bardziej zaawansowany technologicznie i znacznie łatwiejszy w obsłudze. Niestety nie da się opisać wszystkich zmian i innowacji Magento 2 w jednym artykule. W kolejnych artykułach Magesolution z pewnością zajmie się tą sprawą, a my zajmiemy się bardziej szczegółowo światem technologii Magento 2.

Źródło: magento.com