Magento 2チェックアウト-配送先住所と配送方法の間にカスタムフィールドを追加します


21

配送先住所配送方法のセクションの間にカスタムフィールドを追加しようとしています。そして、このフィールドの値は最終的にテーブルquotesales_orderテーブルの両方に保存されます。これは「注文コメント」フィールドを追加することに似ていますが、このフィールドは配送先住所セクションの直後で配送方法セクションの前に表示されます。

カスタムフィールドカスタムフォームをチェックアウトに追加する方法に関するMagento開発者ガイドを確認し、ある程度までソリューションを実装しました。

これまでにやったこと:

  1. checkout_index_index.xmlレイアウトを更新し、uiComponent「shippingAddress」アイテムの下に新しい(コンテナ)を追加しました。
  2. コンテナ内に必要な要素(フィールド)を追加しました。
  3. カスタムモジュールで/js/view/shipping.jsshipping.phtmlをオーバーライドします。
  4. 上記のコンテナをshipping.phtmlチェックアウトの配送先住所と配送方法の間に呼び出しました(新しい静的フォームの追加に似ています)

これで、必要なフィールドがワンページチェックアウトで正確にレンダリングされます。しかし、私は以下の問題に遭遇しました。

  1. 上で追加したカスタムフィールドの値にアクセスする方法は?値をshippingAddress拡張属性に保存しようとしています。私setShippingInformationActionは以下にしようとするmixinを内部に追加しました

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

しかし、上記のコードは、要素がにないため実際に失敗しますshipping-address-fieldsetwindow要素を介して値を取得できる場合があります。しかし、Magentoからこれにアクセスする方法はありますか?

  1. この要素の値をローカルキャッシュストレージ(Magento_Checkout/js/checkout-data)に保存して、ページを更新した後でも値が保持されるようにする方法はありますか?

2
この上を見てみましょう- magento.stackexchange.com/questions/135969/...を
igloczek

私はそれはあなたが役立つことを願っています下のリンクを参照してくださいmagento.stackexchange.com/questions/187847/...
プラディープ・クマール

回答:


1

あなたの質問に基づいて、私はあなたがすでにあなたの拡張属性を設定していると仮定しています。私は同様の修正を実施しましたが、うまくいけば私の答えが役立ちます。

カスタムモジュールでrequirejs-configファイルを作成して、デフォルトの配送プロセッサ/デフォルトを拡張します

名前空間/CustomModule/view/frontend/requirejs-config.js
var config = {
    「マップ」:{
        「*」:{
            'Magento_Checkout / js / model / shipping-save-processor / default': 'Namespace_CustomModule / js / model / shipping-save-processor / default'
        }
    }
};

拡張属性をペイロードに追加します。

/ * global define、alert * /
define(
    [
        「jquery」、
        「ko」、
        'Magento_Checkout / js / model / quote'、
        'Magento_Checkout / js / model / resource-url-manager'、
        「メイジ/ストレージ」、
        「Magento_Checkout / js / model / payment-service」、
        'Magento_Checkout / js / model / payment / method-converter'、
        'Magento_Checkout / js / model / error-processor'、
        'Magento_Checkout / js / model / full-screen-loader'、
        'Magento_Checkout / js / action / select-billing-address'
    ]、
    関数 (
        $、
        コ、
        見積もり、
        resourceUrlManager、
        ストレージ、
        paymentService、
        methodConverter、
        errorProcessor、
        fullScreenLoader、
        selectBillingAddressAction
    ){
        'use strict';

        return {
            saveShippingInformation:関数(){
                varペイロード;

                if(!quote.billingAddress()){
                    selectBillingAddressAction(quote.shippingAddress());
                }
                //配送先住所に拡張属性を追加します
                ペイロード= {
                    住所情報: {
                        shipping_address:quote.shippingAddress()、
                        billing_address:quote.billingAddress()、
                        shipping_method_code:quote.shippingMethod()。method_code、
                        shipping_carrier_code:quote.shippingMethod()。carrier_code、
                        extension_attributes:{
                            custom_field:$( '#custom_field')。val()、 
                        }
                    }
                };

                fullScreenLoader.startLoader();

                return storage.post(
                    resourceUrlManager.getUrlForSetShippingInformation(quote)、
                    JSON.stringify(ペイロード)
                ).done(
                    関数(応答){
                        quote.setTotals(response.totals);
                        paymentService.setPaymentMethods(methodConverter(response.payment_methods));
                        fullScreenLoader.stopLoader();
                    }
                )。失敗します(
                    関数(応答){
                        errorProcessor.process(response);
                        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
{
    保護された$ quoteRepository;
    パブリック関数__construct(
        \ Magento \ Quote \ Model \ QuoteRepository $ quoteRepository
    ){
        $ this-> quoteRepository = $ quoteRepository;
    }
    / **
     * @param \ Magento \ Checkout \ Model \ ShippingInformationManagement $ subject
     * @param $ cartId
     * @param \ Magento \ Checkout \ Api \ Data \ ShippingInformationInterface $ addressInformation
     * /
    パブリック関数beforeSaveAddressInformation(
        \ Magento \ Checkout \ Model \ ShippingInformationManagement $ subject、
        $ cartId、
        \ Magento \ Checkout \ Api \ Data \ ShippingInformationInterface $ addressInformation
    ){
        $ extensionAttributes = $ addressInformation-> getExtensionAttributes();
        $ customField = $ extensionAttributes-> getCustomField();
        $ quote = $ this-> quoteRepository-> getActive($ cartId);
        $ quote-> 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
     * /
    protected $ _objectManager;

    / **
     * @param \ Magento \ Framework \ ObjectManagerInterface $ objectmanager
     * /
    パブリック関数__construct(\ Magento \ Framework \ ObjectManagerInterface $ objectmanager)
    {
        $ this-> _ objectManager = $ objectmanager;
    }

    パブリック関数execute(EventObserver $ observer)
    {
        $ order = $ observer-> getOrder();
        $ quoteRepository = $ this-> _ objectManager-> create( 'Magento \ Quote \ Model \ QuoteRepository');
        / ** @var \ Magento \ Quote \ Model \ Quote $ quote * /
        $ quote = $ quoteRepository-> get($ order-> getQuoteId());
        $ order-> setCustomField($ quote-> getCustomField());

        $ thisを返します。
    }
}


コアメソッドをオーバーライドするのは幸運ではありません。別のモジュールがあなたのモジュールをオーバーライドしたらどうなりますか? magento.stackexchange.com/questions/135969/...
vaso123

良い点は、代替方法を認識していませんでした。指摘してくれてありがとう。
ナサニエル

@ vaso123ここでは、Nathanielがプラグインと1つのイベントオブザーバを作成したため、ここでオーバーライドされるコア機能があるため、何かに気づいていないようです。それをもう少し説明してもらえますか、本当に役に立ちます...ありがとう
-Sarvagya

@Sarvagya require jsを使用するときはmap *、使用せず、代わりにmixinを使用してください。
vaso123

@ vaso123私は彼がMagento_Checkout / js / model / shipping-save-processor / defaultを参照していると信じています: 'Namespace_CustomModule / js / model / shipping-save-processor / default' -save-processor / default。}私がこれを書いてからしばらく経ちましたので、間違っている場合はサルヴァギャーに訂正してください。
ナサニエル

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;
}

}

これが完了したら、チェックアウトページを確認します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.