Как настроить процесс оформления заказа в Magento 2

Опубликовано: 2018-04-23

Оглавление

В Magento 2 процесс оформления заказа переработан для более быстрого и удобного использования. Страница оформления заказа проводит покупателя через 2 простых шага процесса. Клиенты, вошедшие в свои учетные записи, могут быстро завершить оформление заказа, поскольку большая часть информации уже находится в их учетных записях. Первым шагом в процессе оформления заказа является заполнение информации об адресе доставки и выбор способа доставки. На втором этапе клиент выбирает способ оплаты и применяет любые купоны для завершения покупки.

Настройте оформление заказа по умолчанию в Magento 2.

Вы можете либо добавить новый шаг оформления заказа, либо изменить представление существующего оформления заказа, чтобы настроить оформление заказа по умолчанию по-своему.

Добавить новый этап оформления заказа

Вы можете добавить пользовательский шаг оформления заказа, он должен быть реализован как компонент пользовательского интерфейса. Ради совместимости, возможности обновления и простоты обслуживания не редактируйте код Magento по умолчанию, добавляйте свои настройки в отдельный модуль.

Шаг 1. Создайте часть представления компонента шага оформления заказа.

Чтобы создать часть просмотра нового шага оформления заказа:

  1. Добавьте каталог модуля. Все пользовательские файлы должны храниться там. Чтобы ваша настройка оформления заказа применялась правильно, ваш пользовательский модуль должен зависеть от модуля Magento_Checkout . Не используйте Ui для имени своего пользовательского модуля, поскольку нотация %Vendor%_Ui , необходимая при указании путей, может вызвать проблемы.
  2. Создайте файл .js , реализующий модель представления.
  3. Создайте шаблон .html для компонента.

Каждый шаг подробно описан ниже:

1. Добавьте файл JavaScript, реализующий новый шаг.

Новый шаг оформления заказа должен быть реализован как компонент пользовательского интерфейса. То есть его реализация JavaScript должна быть модулем JavaScript.

Файл должен храниться в <your_module_dir>/view/frontend/web/js/view .

<your_module_dir> обозначает путь к каталогу вашего модуля из корневого каталога. Обычно это будет одно из следующих: app/code/<YourVendor>/<YourModule> или vendor/<yourvendor>/module-<module>-<name> .

Ниже приведен пример my-step-view.js с комментариями: 

 определять(
    ['ko', 'uiComponent', 'underscore', 'Magento_Checkout/js/model/step - навигатор'],
    функция(
        ко,
        Составная часть,
        _,
        шагНавигатор
    ) {'
        использовать строгий';
        /**
         *
         * mystep – имя .html шаблона компонента,
         * <Vendor>_<Module> — имя каталога вашего модуля.
         *
         */
        вернуть Component.extend({
            значения по умолчанию: {
                шаблон: '<Продавец> _ <Модуль> /mystep'
            },

            //добавляем сюда свою логику для отображения шага,
            isVisible: ko.observable(true),

            /**
             *
             * @возвращает {*}
             */
            инициализировать: функция () {
                это._супер();
                // регистрируем свой шаг
                stepNavigator.registerStep(
                    //код шага будет использоваться как идентификатор содержимого шага в шаблоне компонента
                    'шаг_код',
                    //псевдоним шага
                    нулевой,
                    // значение заголовка шага
                    'Название шага',
                    // наблюдаемое свойство с логикой при отображении шага или шаге скрытия
                    это.видимый,

                    _.bind(это.навигация, это),

                    /**
                     * значение порядка сортировки
                     * 'значение заказа сортировки' < 10: шаг отображается перед этапом доставки;
                     * 10 < 'отсортировать стоимость заказа' < ​​20: шаг отображается между этапом доставки и оплаты
                     * «значение заказа сортировки»> 20: шаг отображается после шага оплаты
                     */
                    15
                );

                вернуть это;
            },

            /**
             * Метод navigation() отвечает за навигацию между шагами оформления заказа
             * во время оформления. Вы можете добавить пользовательскую логику, например, некоторые условия
             * для перехода на свой пользовательский шаг
             */
            навигация: функция () {

            },

            /**
             * @возвращает недействительным
             */
            перейти к следующему шагу: функция () {
                stepNavigator.следующий();
            }
        });
    }
);
2. Добавьте шаблон .html

В каталог модуля добавьте шаблон .html для компонента. Он должен находиться в <your_module_dir>/view/frontend/web/template .

Ниже приведен пример mystep.html : 

 <!– Следует использовать значение step_code из файла .js–>
<li data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Название шага'" data-role="title"></div>
    <div class="step-content" data-role="content">

        <form data-bind="submit: navigationToNextStep" novalidate="novalidate">
            <div class="панель действий-инструментов">
                <div класс="основной">
                    <button data-role="opc-continue" type="submit" class="действие кнопки продолжить в первую очередь">
                        <span><!– ko i18n: 'Далее'–><!– /ko –></span>
                    </кнопка>
                </div>
            </div>
        </форма>
    </div>
</li>

Шаг 2. Добавьте свой шаг в макет страницы оформления заказа.

Чтобы новый шаг отображался на странице, вам необходимо объявить его в макете страницы Checkout, который определен в checkout_index_index.xml .

Поэтому вам нужно добавить расширяющий файл макета checkout_index_index.xml в следующее место: <your_module_dir>/view/frontend/layout/checkout_index_index.xml

Ниже приведен пример checkout_index_index.xml : 

 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <тело>
        <referenceBlock name="checkout.root">
            <аргументы>
                <argument name="jsLayout" xsi:type="массив">
                    <item name="components" xsi:type="массив">
                        <item name="checkout" xsi:type="array">
                            <item name="дети" xsi:type="массив">
                                <item name="шаги" xsi:type="массив">
                                    <item name="дети" xsi:type="массив">
                                        <!– Новый шаг, который вы добавляете –>
                                        <item name="мой-новый-шаг" xsi:type="массив">
                                            <item name="component" xsi:type="string">%Vendor%_%Module%/js/view/my-step-view</item>
                                            <!–Для отображения содержимого шага перед отправкой шага значение sortOrder должно быть < 1–>
                                            <!–Для отображения содержимого шага между этапом доставки и этапом оплаты 1 < "sortOrder" < 2 -->
                                            <!–Для отображения содержимого шага после шага оплаты «sortOrder» >2 –>
                                            <item name="sortOrder" xsi:type="string">2</item>
                                            <item name="дети" xsi:type="массив">
                                                <!–добавьте сюда объявление дочернего компонента для вашего шага–>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </аргумент>
            </аргументы>
        </referenceBlock>
    </тело>
</страница>

Пользовательское поле для оформления заказа в Magento 2

$119,00

Magento 2 Оформление заказа в один шаг

$99 $119,00

Настроить вид существующей кассы

В приложениях Magento оформление заказа реализовано с помощью компонентов пользовательского интерфейса. Вы можете настроить каждый шаг, изменив реализацию или шаблон JavaScript для компонента, добавив, удалив или отключив компонент.

Шаг 1. Измените реализацию и шаблон компонента .js.

Чтобы изменить реализацию .js и шаблон, используемый для рендеринга компонентов, вам необходимо объявить новые файлы в макете страницы оформления заказа. Для этого выполните следующие действия:

  1. В каталоге вашего пользовательского модуля создайте следующий новый файл: <your_module_dir>/view/frontend/layout/checkout_index_index.xml . (Чтобы ваша настройка оформления заказа применялась правильно, ваш пользовательский модуль должен зависеть от модуля Magento_Checkout.)
  2. В этот файл добавьте следующее: 
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <тело>
        <referenceBlock name="checkout.root">
            <аргументы>
                <argument name="jsLayout" xsi:type="массив">
                    <!– Ваша настройка будет здесь –>
                    …
                </аргумент>
            </аргументы>
        </referenceBlock>
    </тело>
</страница>
  1. В <Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xml найдите компонент, который необходимо настроить. Скопируйте соответствующий узел и все родительские узлы до <argument> . Нет необходимости оставлять все атрибуты и значения родительских узлов, так как вы не собираетесь их менять.
  2. Измените путь к файлу .js компонента, шаблону или любому другому свойству.

Пример:

Модуль Magento_Shipping добавляет компонент, отображаемый как ссылка на информацию о политике доставки, на шаг доставки:

 <Magento_Shipping_module_dir>/view/frontend/layout/checkout_index_index.xml

выглядит следующим образом: 

 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <тело>
        <referenceBlock name="checkout.root">
            <аргументы>
                <argument name="jsLayout" xsi:type="массив">
                    <item name="components" xsi:type="массив">
                        <item name="checkout" xsi:type="array">
                            <item name="дети" xsi:type="массив">
                                <item name="шаги" xsi:type="массив">
                                    <item name="дети" xsi:type="массив">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="дети" xsi:type="массив">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="дети" xsi:type="массив">
                                                        <item name="before-shipping-method-form" xsi:type="array">
                                                            <item name="дети" xsi:type="массив">
                                                                <item name="shipping_policy" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_Shipping/js/view/checkout/shipping/shipping-policy</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </аргумент>
            </аргументы>
        </referenceBlock>
    </тело>
</страница>

Шаг 2. Добавьте новый компонент в макет страницы оформления заказа.

Любой компонент пользовательского интерфейса добавляется в checkout_index_index.xml аналогично тому, как добавляется компонент шага оформления заказа.

Убедитесь, что вы объявляете компонент так, чтобы он правильно отображался родительским компонентом. Если родительский компонент является общим компонентом пользовательского интерфейса (на который ссылается псевдоним uiComponent ), его дочерние компоненты отображаются без каких-либо условий. Но если родительский компонент является расширением общих компонентов пользовательского интерфейса, то рендеринг дочерних элементов может быть определенным образом ограничен. Например, компонент может отображать только дочерние элементы из определенной displayArea .

Шаг 3 : Отключить компонент

Чтобы отключить компонент в вашем checkout_index_index.xml , используйте следующие инструкции: 

 <item name="%the_component_to_be_disabled%" xsi:type="массив">
    <item name="config" xsi:type="array">
        <item name="componentDisabled" xsi:type="boolean">true</item>
    </item>
</item>

Шаг 4. Удалите компонент

Чтобы удалить компонент из рендеринга макета, вам нужно создать плагин для метода \Magento\Checkout\Block\Checkout\LayoutProcessor::process . В своем плагине реализуйте метод around, удаляющий соответствующие узлы макета во время выполнения.

Следующий образец является примером метода вокруг удаления компонента: 

 unset($jsLayout['components']['checkout']['children']['steps'][%path_to_target_node%]); //%path_to_target_node% — путь к узлу компонента в checkout_index_index.xml
вернуть $jsLayout;

(Если вы хотите использовать этот образец в своем коде, замените заполнитель %path_to_target_node% реальным значением.)

*Отключить или удалить компонент: если вы отключите компонент, он будет загружен, но не отрисован. Если вы удалите компонент, он не будет загружен.

Похожие сообщения:
Как добавить код скидки в кассу в Magento
Как добавить пользовательский платеж в кассу Magento 2