Оформлення Magento 2 - додайте спеціальне поле між адресою доставки та способом доставки


21

Я намагаюся додати спеціальне поле між розділами адреси доставки та способами доставки . І я хочу, щоб значення цього поля зберігалися в кінцевому підсумку quoteі в sales_orderтаблицях. Це щось подібне до додавання поля "коментар до замовлення", але це поле повинно з'являтися відразу після розділу адреси доставки та перед розділом способу доставки.

Я ознайомився з посібниками Magento dev про те, як додати користувальницьке поле та спеціальну форму до каси та певною мірою реалізував рішення.

Що я зробив досі:

  1. Оновили checkout_index_index.xmlмакет, додали новий uiComponent(контейнер) під пунктом "доставка Адреса".
  2. Доданий потрібний мені елемент (поле) всередині контейнера.
  3. Замініть /js/view/shipping.jsі shipping.phtmlв моєму користувальницькому модулі.
  4. Викликали вищезазначений контейнер усередині shipping.phtmlміж адресою доставки замовлення та способом доставки (щось подібне до додавання нової статичної форми)

Тепер поле, яке я хочу, відображається на одній сторінці замовлення саме там, де я хочу. Але я зіткнувся з проблемами нижче.

  1. Як отримати доступ до значення спеціального поля, яке я додав вище? Я намагаюся зберегти значення в атрибуті розширення shippingAddress. Я додав міксин setShippingInformationActionвсередину, який намагаюся зробити нижче

    shippingAddress['extension_attributes']['custom_field'] = shippingAddress.customAttributes['custom_field'];

Але вище код насправді не вдається, оскільки елемент не знаходиться в shipping-address-fieldset. Можливо, я міг би отримати значення через windowелемент. Але чи є спосіб отримати доступ до цього через Magento?

  1. Чи є спосіб зберегти значення цього елемента в локальному сховищі кешу ( Magento_Checkout/js/checkout-data), щоб значення збережеться навіть після оновлення сторінки?

2
Погляньте на це - magento.stackexchange.com/questions/135969/…
igloczek

Перейдіть за посиланням нижче, я сподіваюся, що це допоможе вам magento.stackexchange.com/questions/187847/…
Pradeep Kumar

Відповіді:


1

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

У власному модулі створіть файл-конфігурацію Requjs для розширення процесора доставки за замовчуванням / за замовчуванням

Простір імен / CustomModule / view / frontend / Requjs-config.js
var config = {
    "карта": {
        "*": {
            'Magento_Checkout / js / модель / доставка-збереження-процесор / за замовчуванням': 'Namespace_CustomModule / js / model / shipping-save-procesor / default'
        }
    }
};

Додайте атрибут розширення до корисного навантаження.

/ * глобальне визначення, попередження * /
визначити (
    [
        'jquery',
        'ко',
        'Magento_Checkout / js / модель / цитата',
        'Magento_Checkout / js / model / resource-url-manager',
        "маг / сховище",
        'Magento_Checkout / js / модель / Payment-service',
        'Magento_Checkout / js / model / Payment / method-converter',
        'Magento_Checkout / js / модель / процесор помилок',
        "Magento_Checkout / js / model / full-screen loader",
        'Magento_Checkout / js / action / select-billing-address'
    ],
    функція (
        $,
        ко,
        цитата,
        resourceUrlManager,
        зберігання,
        оплата сервісу,
        methodConverter,
        errorProcessor,
        fullScreenLoader,
        selectBillingAddressAction
    ) {
        'користуватися суворим';

        повернути {
            saveShippingInformation: function () {
                вартісне навантаження;

                if (! quote.billingAddress ()) {
                    selectBillingAddressAction (quote.shippingAddress ());
                }
                // Додавання атрибутів розширення до вашої адреси доставки
                корисний вантаж = {
                    адресна інформація: {
                        shipping_address: quote.shippingAddress (),
                        billing_address: quo.billingAddress (),
                        shipping_method_code: quote.shippingMethod (). method_code,
                        shipping_carrier_code: quote.shippingMethod (), код оператора,
                        extension_attributes: {
                            custom_field: $ ('# custom_field'). val (), 
                        }
                    }
                };

                fullScreenLoader.startLoader ();

                повернути storage.post (
                    resourceUrlManager.getUrlForSetShippingInformation (цитата),
                    JSON.stringify (корисне навантаження)
                ) .done (
                    функція (відповідь) {
                        quo.setTotals (response.totals);
                        PaymentService.setPaymentMethods (methodConverter (response.payment_methods));
                        fullScreenLoader.stopLoader ();
                    }
                ) .fail (
                    функція (відповідь) {
                        errorProcessor.process (відповідь);
                        fullScreenLoader.stopLoader ();
                    }
                );
            }
        };
    }
);

Збережіть атрибут у вашій Цитаті за допомогою плагіна (Не впевнений, чи можете ви тут використовувати спостерігача, я не перевіряв)

di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\ShippingInformationManagement">
        <plugin name="Namespace_CustomModule_save_delivery_date_in_quote" type="Namespace\CustomModule\Plugin\Checkout\SaveAddressInformation" />
    </type>

</config>

SaveAddressInformation.php

клас SaveAddressInformation
{
    захищений $ quoReRepository;
    публічна функція __construct (
        \ Magento \ Quote \ Model \ QuoteRepository $ quoRepository
    ) {
        $ this-> quoteRepository = $ quoRepository;
    }
    / **
     * @param \ Magento \ Checkout \ Model \ ShippingInformationManagement $ subject
     * @param $ cartId
     * @param \ Magento \ Checkout \ Api \ Data \ ShippingInformationInterface $ addressInformation
     * /
    публічна функція передSaveAddressInformation (
        \ Magento \ Оформити замовлення \ Модель \ ShippingInformationManagement $ предмет,
        $ cartId,
        \ Magento \ Checkout \ Api \ Data \ ShippingInformationInterface $ addressInformation
    ) {
        $ extensionAttributes = $ addressInformation-> getExtensionAttributes ();
        $ customField = $ extensionAttributes-> getCustomField ();
        $ quote = $ this-> quoteRepository-> getActive ($ cartId);
        $ quo-> setCustomField ($ customField);

    }
}

Збережіть атрибут до замовлення за допомогою Observer events.xml

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="sales_model_service_quote_submit_before">
        <observer name="unique_observer_name" instance="Namespace\CustomModule\Observer\SaveCustomFieldToOrder"/>
    </event>
</config>

SaveCustomFieldToOrder.php

клас SaveCustomFieldToOrder реалізує ObserverInterface
{
    / **
     * @var \ Magento \ Framework \ ObjectManagerInterface
     * /
    захищений $ _objectManager;

    / **
     * @param \ Magento \ Framework \ ObjectManagerInterface $ objectmanager
     * /
    публічна функція __construct (\ Magento \ Framework \ ObjectManagerInterface $ objectmanager)
    {
        $ this -> _ objectManager = $ objectmanager;
    }

    виконання публічної функції (спостерігач EventObserver $)
    {
        $ order = $ observer-> getOrder ();
        $ quoRepository = $ this -> _ objectManager-> create ('Magento \ Quote \ Model \ QuoteRepository');
        / ** @var \ Magento \ Quote \ Model \ Quote $ quote * /
        $ quote = $ quoteRepository-> get ($ order-> getQuoteId ());
        $ order-> setCustomField ($ quo-> getCustomField ());

        повернути $ this;
    }
}


Переважні основні методи не надто пощастило. Що робити, якщо інший модуль замінить ваш? magento.stackexchange.com/questions/135969/…
vaso123

Добре, що не було відомо про альтернативний метод. дякую, що вказали на це.
NathanielR

@ vaso123 Схоже, я теж чогось не знаю, бо тут Натаніел створив плагін і один спостерігач за подіями, тому основна функція тут перекрита. Поясніть, будь ласка, трохи більше, це було б дуже корисно ... Спасибі
Sarvagya

@Sarvagya Якщо ви потребуєте js, не використовуйте map *, замість цього використовуйте mixin.
vaso123

@ vaso123 Я вважаю, що він має на увазі Magento_Checkout / js / модель / доставка-збереження-процесор / за замовчуванням ':' Namespace_CustomModule / js / model / shipping-save-procesor / default ', який, як я розумію, замінює Magento_Checkout / js / модель / доставка -зберегти процесор / за замовчуванням. } минув час, коли я написав це, тому Сарвагя, будь ласка, виправте мене, якщо я помиляюся.
NathanielR

0

Створіть плагін для цього \Magento\Checkout\Block\Checkout\LayoutProcessor::processметоду.

Зробіть запис у di.xml на цьому шляху

app/code/CompanyName/Module/etc/frontend/di.xml

Створіть клас плагінів у цьому каталогу.

app/code/CompanyName\Module\Model\Plugin\Checkout

2 => Створіть клас плагінів у цьому каталозі. app/code/CompanyName\Module\Model\Plugin\Checkout

    $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
    ['shippingAddress']['children']['shipping-address-fieldset']['children']['custom_field'] = [
        'component' => 'Magento_Ui/js/form/element/abstract',
        'config' => [
            'customScope' => 'shippingAddress.custom_attributes',
            'template' => 'ui/form/field',
            'elementTmpl' => 'ui/form/element/input',
            'options' => [],
            'id' => 'custom-field'
        ],
        'dataScope' => 'shippingAddress.custom_attributes.custom_field',
        'label' => 'Custom Field',
        'provider' => 'checkoutProvider',
        'visible' => true,
        'validation' => [],
        'sortOrder' => 250,
        'id' => 'custom-field'
    ];


    return $jsLayout;
}

}

Після цього перевірте сторінку оформлення замовлення.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.