Знаете, сейчас, в эпоху хороших фреймворков принято презирать
всякие {название CMS, которую считаете ужасной} и прочие битриксы.
И не мудрено, ведь эти вещи изначально создавались как будто не для
программистов а для кодеров. Это можно оправдать наличием большого
количества легаси, т.к. они писались давным-давно в
далёкой-далёкой галактике. Они решают множество нужных и
полезных задач, имеют огромные коммьюнити и тысячи плагинов, но
когда ты смотришь под капот - медленно седеющие волосы на голове
начинают шевелиться в такт "архитектуре".
Дисклеймер
-
Все нижеуказанное не несет никакой ценности для опытных Magento
разработчиков, т.к. не содержит ничего для них нового. Эта статья
написана скорее с целью популяризации Magento 2, и немного -
хвастовства в виде "смотри как оно умеет". Также, возможно, статья
подойдет новичкам в качестве туториала.
-
Я не спорю, что помимо плюсов есть еще и минусы, и не говорю что
Magento идеальна во всех местах.
Я один раз заглянул в проект на ModX (и пусть меня закидают
ссаными тапками камнями), и мой мир никогда не будет
прежним. Возможно, поэтому, когда в разговоре меня спрашивают, с
чем я работаю, а в ответ слышат "magento", сразу кривятся носы, а
мнение, скорее всего, падает куда-то очень низко.
Мне обидно от этого, ведь Magento уже давно не (да и никогда до
конца не была) топ-примером того, как никогда делать не стоит.
Напротив, начиная со второй версии, разработчики двигаются по
правильному пути. Да, есть еще много легаси, а некоторые решения
заставляют округлить зенки и накрыть лицо пятерней, но в целом, на
данный момент, на magento 2 можно и легко (и во многом система сама
диктует) построить грамотную архитектуру проекта/модуля.
Итак, топ вещей, которые реализованы не (намного) хуже, а где-то
и лучше, чем в популярных фреймворках:
Мощная система DI
Мы не задумываемся над созданием объектов, система делает все за
нас. Мы просто указываем список нужных параметров в конструкторе с
типами, и используем их
<?phpnamespace Vendor\Module\Model;use Vendor\Module\Api\FooInterface;use Vendor\Module\Model\Bar;class SomeModel{ private $foo; private $bar; private $param public function __construct(FooInterface $foo, Bar $bar, string $param) { $this->foo = $foo; $this->bar = $bar; $this->param = $param; }}
Хочу отметить, что тонкие настройки аргументов, указание классов
для интерфейсов и многое другое - описывается в xml файле
di.xml:
<?xml version="1.0" encoding="UTF-8"?><config xmlns:xsi="http://personeltest.ru/away/www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <!-- body --></config>
1. Подмена классов и указание реализации для интерфейсов
указываем preference для интерфейса, и потом везде в коде
используем только интерфейс
<preference for="Vendor\Module\Api\FooInterface" type="Vendor\Module\Model\Foo" />
Также можно сделать наследника какого-то класса, и сказать, что
теперь везде должен использоваться наследник. Соответственно во
всех конструкторах и использованиях ObjectManager объект
родительского класса подменится на объект дочернего.
<preference for="Vendor\Module\Model\Bar" type="Vendor\Module\Model\BarChild" />
2. Указание аргументов
Мы можем указать для конкретного класса список его аргументов,
или подменить какой-либо параметр
<type name="Vendor\Module\Model\SomeModel"> <arguments> <argument name="bar" xsi:type="object">Vendor\Module\Model\BarChild</argument> <argument name="param" xsi:type="string">some string</argument> </arguments></type>
3. Виртуальные типы
Виртуальный тип - это обычный класс с набором своих личных
параметров. Такие виртуальные типы физически не существуют, и могут
быть использованы только как аргументы в других классах
<virtualType name="Vendor\Module\Model\SomeModelForSomethingElse" type="Vendor\Module\Model\SomeModel"> <arguments> <argument name="param" xsi:type="string">another string</argument> </arguments></virtualType><type name="Vendor\Module\Model\SomeService"> <arguments> <argument name="someModel" xsi:type="object">Vendor\Module\Model\SomeModelForSomethingElse</argument> </arguments></type>
4. Плагины
Практически на любой существующий публичный метод класса можно
повесить плагины. Можно выбрать, когда будет выполняться плагин -
до (префикс before), во время (префикс around) или после (префикс
after) выполнения метода. Давайте рассмотрим пример:
<?phpnamespace Vendor\Module\Model;class SomeService{ public function doSomething(Foo $foo, Bar $bar, string $param, int $number) { // something }}
Задаём плагин:
<type name="Vendor\Module\Model\SomeService"> <plugin name="Vendor_Module::MyCustomPlugin" type="Vendor\Module\Plugin\SomeServicePlugin" /></type>
Код плагина (методы плагина должны называться: префикс +
название основного метода с большой буквы):
<?phpnamespace Vendor\Module\Plugin;use Vendor\Module\Model\SomeService;class SomeServicePlugin{ // вызывается до вызова основного метода. Мы можем изменить входные параметры. public function beforeDoSomething(SomeService $subject, Foo $foo, Bar $bar, string $param, int $number) { $param = 'change param'; // если изменять параметры не нужно - то можно ничего не возвращать return [$foo, $bar, $param, $number]; } // метод вызывается "во время" вызова основного метода. В параметрах - Closure - это собственно основной метод public function aroundDoSomething(SomeService $subject, \Closure $proceed, Foo $foo, Bar $bar, string $param, int $number) { // do something $result = $proceed($foo, $bar, $param, $number); // вызываем основной метод // do something else return $result; } // метод вызывается после вызова основного метода. Мы можем менять результат public function afterDoSomething(SomeService $subject, $result, Foo $foo, Bar $bar, string $param, int $number) { $result += 1; // меняем результат return $result; }}
Также в каждый метод плагина передаётся сам покрываемый плагином
объект. Это удобно, если нам нужно вызвать какой-то другой его
метод в процессе выполнения плагина.
5. ObjectManager
Если нам нужно создавать объекты на лету в процессе выполнения
алгоритма - для этого есть ObjectManager. Он имеет два метода - get
и create. get - берет существующий экземпляр класса (или создает
его, если еще не создавал ранее), а create - создаёт.
Взгляните на это объявление пула процессоров:
<?phpnamespace Vendor\Module\Model;use Magento\Framework\ObjectManagerInterface;class ProcessorPool{ private $objectManager; private $processors; public function __construct(ObjectManagerInterface $objectManager, array $processors) { $this->objectManager = $objectManager; $this->processors = $processors; } public function getProcessor(string $code) { return $this->objectManager->get($this->processors[$code]); }}
И xml:
<type name="Vendor\Module\Model\ProcessorPool"> <arguments> <argument name="processors" xsi:type="array"> <item name="foo" xsi:type="string">Vendor\Module\Model\Processor\FooProcessor</item> <item name="bar" xsi:type="string">Vendor\Module\Model\Processor\BarProcessor</item> </argument> </arguments></type>
С учетом того, что все di.xml всех модулей мержатся в одну
большую инструкцию для ObjectManager - мы можем добиться довольно
высокой гибкости кода. Где-то в другом модуле мы можем описать еще
один процессор, и заменить один из существующих:
<type name="Vendor\Module\Model\ServicePool"> <arguments> <argument name="processors" xsi:type="array"> <item name="foo" xsi:type="string">Vendor\NewModule\Model\Processor\NewFooProcessor</item> <item name="something" xsi:type="string">Vendor\NewModule\Model\Processor\SomethingProcessor</item> </argument> </arguments></type>
6. Автогенерация фабрик и прокси
В некоторых случаях нам нужно всегда создавать новый объект,
например - entity-модель. Для этого лучше всего подходят фабрики.
Но нам не нужно писать код фабрики руками, для нас это сделает
встроенный автогенератор. Достаточно в конструкторе просто дописать
слово Factory к требуемому классу, и мы получим его фабрику. Это
работает также и с интерфейсами:
<?phpnamespace Vendor\Module\Model;use Vendor\Module\Api\Data\SomeModelInterfaceFactory;class SomeModelRepository{ private $someModelFactory; // класс \Vendor\Module\Api\Data\SomeModelInterfaceFactory будет сгенерирован автоматически public function __construct(SomeModelInterfaceFactory $someModelFactory) { $this->someModelFactory = $someModelFactory; } public function doSomething() { // создаст объект класса, имплементирующего \Vendor\Module\Api\Data\SomeModelInterface со всеми его зависимостями $someModel = $this->someModelFactory->create(); }}
Если у нас есть какой-то сервис, который при инициализации
тратит много ресурсов, и мы не уверены, будем ли мы точно его
использовать в другом классе - мы можем обернуть его в Proxy. Мы
можем дописать "\Proxy" точно также, как и "Factory" к типу
параметра в конструкторе, но это нарушит расширяемость кода,
поэтому лучше задавать Proxy через di.xml
<?phpnamespace Vendor\Module\Model;class SomeModelClass{ private $someBigService; public function __construct(SomeBigService $someBigService) { $this->someBigService = $someBigService; } public function doSomething(bool $condition) { // мы не уверены, что сервис нам понадобится, и т.к. его инициализация занимает много времени // лучше создавать его только тогда, когда он точно нужен if ($condition) { $this->someBigService->execute(); } }}
di.xml
<type name="Vendor\Module\Model\SomeModelClass"> <arguments> <argument name="someBigService" xsi:type="object">Vendor\Module\Model\SomeBigService\Proxy</argument> </arguments></type>
И, вуаля, объект SomeBigService создастся только в момент вызова
execute().
Layout
Layout, на мой взгляд, одно из самых гибких реализаций для
сборки страницы. Реализация xml layouts в Magento позволяет
расширить или изменить страницу из множества мест, будь то модуль,
тема, или другой участок кода. Layout файл в Magento обычно
называется примерно так:
catalog_product_view.xml
Название файла - это handle, где catalog - перекликается с
названием модуля (это название роута в конфигурации модуля),
product - название папки, в которой лежит контроллер, а view -
название контроллера. Это типовое наименование позволяет не
указывать в контроллере, какой именно Layout выбирать, и
подставляется автоматически. Однако ничто не мешает назвать layout
по своему, и указать его название в контроллере. Т.к. это xml - мы
можем подключить сколько угодно layout в контроллере, и они все
будут смержены в один.
Для добавления на страницу продукта какого-то расширяемого
блока, нам достаточно написать:
<?xml version="1.0"?><!-- Vendor/Module/view/frontend/layout/catalog_product_view.xml --><page xmlns:xsi="http://personeltest.ru/away/www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <!-- Мы имеем аттрибуты before и after, чтобы указать место, в котором нужно будет вывести блок --> <container name="vendor.module.some.container" htmlTag="div" htmlClass="my_custom_container" before="-"> <block class="Magento\Framework\View\Element\Template" name="vendor.module.custom_product_block" template="Vendor_Module::product/view/custom_block.phtml" /> </container> </referenceContainer> </body></page>
Я намеренно обернул блок в контейнер. Теперь в другом модуле мы
можем без проблем добавить в то же место еще один блок, перед или
после существующего:
<?xml version="1.0"?><!-- Vendor/AnotherModule/view/frontend/layout/catalog_product_view.xml --><page xmlns:xsi="http://personeltest.ru/away/www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="vendor.module.some.container"> <block class="Magento\Framework\View\Element\Template" name="vendor.another_module.custom_product_block" template="Vendor_AnotherModule::another_custom_block.phtml" after="vendor.module.custom_product_block"/> </referenceContainer> </body></page>
Layouts также являются "наследуемыми":
<?xml version="1.0"?><page xmlns:xsi="http://personeltest.ru/away/www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <!-- Подключаем какой-то другой layout --> <update handle="my_custom_layout_handle" /> <!-- можно удалять ненужное --> <referenceContainer name="container1" remove="true"/> <referenceBlock name="child_block1" remove="true"/> <!-- Или переместить: например container3 внутрь container2 --> <move element="container3" destination="container2"/> </body></page>
Т.к. практически все отображение в Magento использует layouts,
то можно смело утверждать (с некоторыми оговорками), что это
даёт возможность кастомизировать что угодно и где угодно (ну
почти).
ViewModel
Когда разрабатываешь систему, которая требует отображения
множества различных данных на фронте, в том числе - повторяющиеся
на некоторых страницах данные, приходится постоянно пробрасывать
эти самые данные через Controller во View. Это может быть
утомительно, и приходится придумывать различного рода уловки,
расширения, чтобы получать эти данные на уровне View, не повторяясь
в контроллерах.
Долгое время в Magento использовались классы блоков (например
Magento\Catalog\Block\Product\View), которые предоставляли доступ к
данным из template - вида
<?php // Vendor/Module/view/frontend/templates/some_template.phtml// внутри template доступна переменная $block, являющаяся объектом указанного в layoutкласса?><?= $block->getSomeData() ?>
Но с годами блоки разрастались, обрастали наследниками (т.к.
содержали в себе много нужного в других местах кода), и
превращались в полотна из несвязанных между собой методов. В
Magento 2.2 были представлены ViewModel, как возможность
использовать сразу несколько моделей внутри template, и построить
свой код архитектурно грамотнее:
<?xml version="1.0"?><page xmlns:xsi="http://personeltest.ru/away/www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <block class="Magento\Framework\View\Element\Template" name="some_name" template="Vendor_Module::some_template.phtml"> <arguments> <argument name="some_view_model" xsi:type="object">Vendor\Module\ViewModel\SomeViewModel</argument> <argument name="another_view_model" xsi:type="object">Vendor\Module\ViewModel\AnotherViewModel</argument> </arguments> </block> </body></page>
и в template:
<?php/** @var Vendor\Module\ViewModel\SomeViewModel $someViewModel */$someViewModel = $block->getSomeViewModel();/** @var Vendor\Module\ViewModel\AnotherViewModel $anotherViewModel */$anotherViewModel = $block->getAnotherViewModel();?>
Соответственно, одну ViewModel можно использовать на многих
страницах, не завися и не задумываясь о контроллере.
Declarative Schema
Самый популярный способ накатывать обновления на БД - это
миграции. И я видел множество проектов, где папки с миграциями, да
и сами миграции выглядели довольно внушительно. И вдобавок (если уж
говорить о продуктовой разработке, когда пользователи получают
новые версии продукта для обновления, как раз Magento-случай), если
разворачивать все с нуля - все миграции должны быть выполнены.
Declarative Schema - это, по сути, текущее состояние таблицы,
описанное в xml файле. Нам не нужно писать и поддерживать миграции,
мы просто меняем xml файлик. Magento сама считывает его, сравнивает
с текущим состоянием таблицы в БД, и меняет таблицу, если это
необходимо.
Конечно, далеко не все миграции - это изменение структуры БД,
поэтому наряду с Declarative Schema существует еще и механизм
патчей (php-классов, выполняющих какую-то логику).
UI компоненты
Т.к. xml - довольно гибкий формат, он позволяет нам достаточно
многое. Помните layoutы? Xml Layouts + DI позволяют нам строить
дерево JS компонентов для рендеринга страницы также гибко, как и
дерево PHP блоков. Взгляните на layout для чекаута (осторожно,
очень много текста)
checkout_index_index.xml
<?xml version="1.0"?><!--/** * Copyright Magento, Inc. All rights reserved. * See COPYING.txt for license details. */--><page xmlns:xsi="http://personeltest.ru/away/www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <block class="Magento\Checkout\Block\Onepage" name="checkout.root" template="Magento_Checkout::onepage.phtml" cacheable="false"> <arguments> <argument name="jsLayout" xsi:type="array"> <item name="types" xsi:type="array"> <item name="form.input" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item> <item name="config" xsi:type="array"> <item name="provider" xsi:type="string">checkoutProvider</item> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkoutProvider</item> </item> <item name="template" xsi:type="string">ui/form/field</item> <item name="elementTmpl" xsi:type="string">ui/form/element/input</item> </item> </item> </item> <item name="components" xsi:type="array"> <item name="checkout" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/onepage</item> </item> <item name="children" xsi:type="array"> <item name="errors" xsi:type="array"> <item name="sortOrder" xsi:type="string">0</item> <item name="component" xsi:type="string">Magento_Ui/js/view/messages</item> <item name="displayArea" xsi:type="string">messages</item> </item> <item name="authentication" xsi:type="array"> <item name="sortOrder" xsi:type="string">1</item> <item name="component" xsi:type="string">Magento_Checkout/js/view/authentication</item> <item name="displayArea" xsi:type="string">authentication</item> <item name="children" xsi:type="array"> <!--Additional authentication fields--> <item name="errors" xsi:type="array"> <item name="sortOrder" xsi:type="string">0</item> <item name="component" xsi:type="string">Magento_Checkout/js/view/authentication-messages</item> <item name="displayArea" xsi:type="string">messages</item> </item> </item> </item> <item name="progressBar" xsi:type="array"> <item name="sortOrder" xsi:type="string">0</item> <item name="component" xsi:type="string">Magento_Checkout/js/view/progress-bar</item> <item name="displayArea" xsi:type="string">progressBar</item> <item name="config" xsi:type="array"> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkout.steps.shipping-step.shippingAddress</item> <item name="1" xsi:type="string">checkout.steps.billing-step.payment</item> </item> </item> </item> <item name="estimation" xsi:type="array"> <item name="sortOrder" xsi:type="string">10</item> <item name="component" xsi:type="string">Magento_Checkout/js/view/estimation</item> <item name="displayArea" xsi:type="string">estimation</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/estimation</item> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkout.sidebar</item> </item> </item> </item> <item name="steps" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">steps</item> <item name="children" xsi:type="array"> <item name="shipping-step" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="sortOrder" xsi:type="string">1</item> <item name="children" xsi:type="array"> <item name="step-config" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="children" xsi:type="array"> <item name="shipping-rates-validation" xsi:type="array"> <item name="children" xsi:type="array"> <!--Step configuration components--> </item> </item> </item> </item> <item name="shippingAddress" xsi:type="array"> <item name="config" xsi:type="array"> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkout.steps.shipping-step.step-config</item> <item name="1" xsi:type="string">checkoutProvider</item> </item> <item name="popUpForm" xsi:type="array"> <item name="element" xsi:type="string">#opc-new-shipping-address</item> <item name="options" xsi:type="array"> <item name="type" xsi:type="string">popup</item> <item name="responsive" xsi:type="boolean">true</item> <item name="innerScroll" xsi:type="boolean">true</item> <item name="title" xsi:type="string" translate="true">Shipping Address</item> <item name="trigger" xsi:type="string">opc-new-shipping-address</item> <item name="buttons" xsi:type="array"> <item name="save" xsi:type="array"> <item name="text" xsi:type="string" translate="true">Ship Here</item> <item name="class" xsi:type="string">action primary action-save-address</item> </item> <item name="cancel" xsi:type="array"> <item name="text" xsi:type="string" translate="true">Cancel</item> <item name="class" xsi:type="string">action secondary action-hide-popup</item> </item> </item> </item> </item> </item> <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping</item> <item name="provider" xsi:type="string">checkoutProvider</item> <item name="sortOrder" xsi:type="string">10</item> <item name="children" xsi:type="array"> <item name="customer-email" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/form/element/email</item> <item name="displayArea" xsi:type="string">customer-email</item> <item name="tooltip" xsi:type="array"> <item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item> </item> <item name="children" xsi:type="array"> <item name="before-login-form" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-login-form</item> <item name="children" xsi:type="array"> <!-- before login form fields --> </item> </item> <item name="additional-login-form-fields" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">additional-login-form-fields</item> <item name="children" xsi:type="array"> <!-- additional login form fields --> </item> </item> </item> </item> <item name="before-form" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-form</item> <item name="children" xsi:type="array"> <!-- before form fields --> </item> </item> <item name="before-fields" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-fields</item> <item name="children" xsi:type="array"> <!-- before fields --> </item> </item> <item name="address-list" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-address/list</item> <item name="displayArea" xsi:type="string">address-list</item> </item> <item name="address-list-additional-addresses" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">address-list-additional-addresses</item> <item name="children" xsi:type="array"> <!-- address-list-additional-addresses --> </item> </item> <item name="before-shipping-method-form" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-shipping-method-form</item> <item name="children" xsi:type="array"> <!-- address-list-additional-addresses --> </item> </item> <item name="shipping-address-fieldset" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="config" xsi:type="array"> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkoutProvider</item> </item> </item> <item name="displayArea" xsi:type="string">additional-fieldsets</item> <item name="children" xsi:type="array"> <!-- The following items override configuration of corresponding address attributes --> <item name="region" xsi:type="array"> <!-- Make region attribute invisible on frontend. Corresponding input element is created by region_id field --> <item name="visible" xsi:type="boolean">false</item> </item> <item name="region_id" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/form/element/region</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">ui/form/field</item> <item name="elementTmpl" xsi:type="string">ui/form/element/select</item> <item name="customEntry" xsi:type="string">shippingAddress.region</item> </item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">true</item> </item> <!-- Value of region_id field is filtered by the value of county_id attribute --> <item name="filterBy" xsi:type="array"> <item name="target" xsi:type="string"><![CDATA[${ $.provider }:${ $.parentScope }.country_id]]></item> <item name="field" xsi:type="string">country_id</item> </item> </item> <item name="postcode" xsi:type="array"> <!-- post-code field has custom UI component --> <item name="component" xsi:type="string">Magento_Ui/js/form/element/post-code</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">true</item> </item> </item> <item name="company" xsi:type="array"> <item name="validation" xsi:type="array"> <item name="min_text_length" xsi:type="number">0</item> </item> </item> <item name="fax" xsi:type="array"> <item name="validation" xsi:type="array"> <item name="min_text_length" xsi:type="number">0</item> </item> </item> <item name="telephone" xsi:type="array"> <item name="config" xsi:type="array"> <item name="tooltip" xsi:type="array"> <item name="description" xsi:type="string" translate="true">For delivery questions.</item> </item> </item> </item> </item> </item> </item> </item> </item> </item> <item name="billing-step" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="sortOrder" xsi:type="string">2</item> <item name="children" xsi:type="array"> <item name="payment" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/payment</item> <item name="config" xsi:type="array"> <item name="title" xsi:type="string" translate="true">Payment</item> <item name="sortOrder" xsi:type="string">20</item> </item> <item name="children" xsi:type="array"> <item name="renders" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="children" xsi:type="array"> <!-- merge payment method renders here --> </item> </item> <item name="additional-payment-validators" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="children" xsi:type="array"> <!-- merge payment validators here --> <item name="email-validator" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/payment/email-validator</item> </item> </item> </item> <item name="customer-email" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/form/element/email</item> <item name="displayArea" xsi:type="string">customer-email</item> <item name="tooltip" xsi:type="array"> <item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item> </item> <item name="children" xsi:type="array"> <item name="before-login-form" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-login-form</item> <item name="children" xsi:type="array"> <!-- before login form fields --> </item> </item> <item name="additional-login-form-fields" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">additional-login-form-fields</item> <item name="children" xsi:type="array"> <!-- additional login form fields --> </item> </item> </item> </item> <item name="place-order-captcha" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/checkout/placeOrderCaptcha</item> <item name="displayArea" xsi:type="string">place-order-captcha</item> <item name="formId" xsi:type="string">payment_processing_request</item> <item name="configSource" xsi:type="string">checkoutConfig</item> </item> <item name="beforeMethods" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">beforeMethods</item> <item name="children" xsi:type="array"> <!-- merge additional data before payment methods here --> </item> <item name="validation" xsi:type="array"> <item name="validate-select" xsi:type="string">true</item> </item> <!-- Value of region_id field is filtered by the value of county_id attribute --> <item name="filterBy" xsi:type="array"> <item name="target" xsi:type="string">${ $.provider }:${ $.parentScope }.country_id</item> <item name="field" xsi:type="string">country_id</item> </item> </item> <item name="payments-list" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/payment/list</item> <item name="displayArea" xsi:type="string">payment-methods-list</item> <item name="config" xsi:type="array"> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkout.steps.billing-step.payment.renders</item> <item name="1" xsi:type="string">checkout.steps.billing-step.payment.additional-payment-validators</item> </item> </item> <item name="children" xsi:type="array"> <item name="before-place-order" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">before-place-order</item> <item name="dataScope" xsi:type="string">before-place-order</item> <item name="provider" xsi:type="string">checkoutProvider</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/payment/before-place-order</item> </item> </item> </item> </item> <!-- merge your payment methods here --> <item name="afterMethods" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">afterMethods</item> <item name="children" xsi:type="array"> <!-- merge additional data after payment methods here --> </item> </item> </item> </item> </item> </item> </item> </item> <item name="sidebar" xsi:type="array"> <item name="sortOrder" xsi:type="string">50</item> <item name="component" xsi:type="string">Magento_Checkout/js/view/sidebar</item> <item name="displayArea" xsi:type="string">sidebar</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/sidebar</item> <item name="deps" xsi:type="array"> <item name="0" xsi:type="string">checkout.steps</item> </item> </item> <item name="children" xsi:type="array"> <item name="summary" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary</item> <item name="displayArea" xsi:type="string">summary</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/summary</item> </item> <item name="children" xsi:type="array"> <item name="totals" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/totals</item> <item name="displayArea" xsi:type="string">totals</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Magento_Checkout/summary/totals</item> </item> <item name="children" xsi:type="array"> <!-- sort order for this totals is configured on admin panel--> <!-- Stores->Configuration->SALES->Sales->General->Checkout Totals Sort Order --> <item name="subtotal" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/subtotal</item> <item name="config" xsi:type="array"> <item name="title" xsi:type="string" translate="true">Cart Subtotal</item> </item> </item> <item name="shipping" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/shipping</item> <item name="config" xsi:type="array"> <item name="title" xsi:type="string" translate="true">Shipping</item> <item name="notCalculatedMessage" xsi:type="string" translate="true">Not yet calculated</item> </item> </item> <item name="grand-total" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/grand-total</item> <item name="config" xsi:type="array"> <item name="title" xsi:type="string" translate="true">Order Total</item> </item> </item> </item> </item> <item name="itemsBefore" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="children" xsi:type="array"> <!-- merge your components here --> </item> </item> <item name="cart_items" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/cart-items</item> <item name="children" xsi:type="array"> <item name="details" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details</item> <item name="children" xsi:type="array"> <item name="thumbnail" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item> <item name="displayArea" xsi:type="string">before_details</item> </item> <item name="subtotal" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item> <item name="displayArea" xsi:type="string">after_details</item> </item> <item name="message" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/message</item> <item name="displayArea" xsi:type="string">item_message</item> </item> </item> </item> </item> </item> <item name="itemsAfter" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="children" xsi:type="array"> <!-- merge your components here --> </item> </item> </item> </item> <item name="shipping-information" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-information</item> <item name="config" xsi:type="array"> <item name="deps" xsi:type="string">checkout.steps.shipping-step.shippingAddress</item> </item> <item name="displayArea" xsi:type="string">shipping-information</item> <item name="children" xsi:type="array"> <item name="ship-to" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-information/list</item> <item name="displayArea" xsi:type="string">ship-to</item> </item> </item> </item> </item> </item> </item> </item> <item name="checkoutProvider" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> </item> </item> </argument> </arguments> </block> </referenceContainer> <referenceContainer name="page.messages" remove="true"/> </body></page>
Мы задаем инструкции для рендеринга страницы так, как будто мы
делаем это в PHP Array, но с более наглядным отображением, и
возможностью расширения. Благодаря xml и Magento 2 мы можем
подменить любой кусочек или добавить что-то свое.
В админке таким же образом можно расширить любую UI Component
форму, грид или что-то еще (да, еще остались формы и гриды,
написанные "по-старому" в PHP классах), например вот таким образом
можно добавить колонку на UI Grid:
<?xml version="1.0" encoding="UTF-8"?><!--/** * Copyright Magento, Inc. All rights reserved. * See COPYING.txt for license details. */--><listing xmlns:xsi="http://personeltest.ru/away/www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <columns name="sales_order_columns"> <column name="refunded_to_store_credit" class="Magento\Sales\Ui\Component\Listing\Column\Price"> <settings> <label translate="true">Refunded to Store Credit</label> <visible>false</visible> </settings> </column> </columns></listing>
Напоследок хочу отметить то, что коммьюнити не стоит на месте в
плане новинок, например последние на данный момент версии Magento
поддерживают только php 7.3 и 7.4, elasticsearch 7.4/7.6
P.S. Я хочу еще раз подчеркнуть, что в статье приводятся
достоинства, которые, в свою очередь, не лишены недостатков :). Я
не преследовал цель заставить всех поверить, что Magento -
квинтэссенция всего, и нужно срочно бросать свое
{cms/frameworkName} и переходить на Magento. Я лишь хочу показать,
что Magento 2 не для "кодинга", а очень даже для
"программирования".
11.09.2020 16:15:38 |
Автор: 
Это все, что нужно чтобы VS заработал с
нашим демо-бэкендом.
Бизнес-логика из основных компонент может
быть легко внедрена в любые темы с использованием Vue.js миксин
Здесь вы можете найти статик ресурсы.
Обратите внимание, что Service Worker работают только в prod
режиме.
Категории: 
