마 젠토 2 결제-배송지 주소와 배송 방법 사이에 맞춤 입력란 추가


21

배송지 주소배송 방법 섹션 사이에 맞춤 입력란을 추가하려고 합니다. 그리고이 필드의 값을 궁극적으로 테이블 quotesales_order테이블 에 모두 저장하고 싶습니다 . 이는 "주문 설명"필드를 추가하는 것과 유사하지만이 주소는 배송 주소 섹션 바로 다음과 배송 방법 섹션 바로 앞에 표시되어야합니다.

나는 체크 아웃에 사용자 정의 필드사용자 정의 양식 을 추가하는 방법에 대한 Magento dev 가이드를 살펴 보고 어느 정도 솔루션을 구현했습니다.

내가 지금까지 한 일 :

  1. checkout_index_index.xml레이아웃을 업데이트하고 uiComponent"shippingAddress"항목 아래에 새 컨테이너를 추가했습니다 .
  2. 컨테이너 내부에 필요한 요소 (필드)를 추가했습니다.
  3. 을 무시 /js/view/shipping.js하고 shipping.phtml내 사용자 지정 모듈한다.
  4. shipping.phtml결제 컨테이너 주소와 배송 방법 사이에 위에서 만든 컨테이너를 호출했습니다 (새 정적 양식을 추가하는 것과 유사 함)

이제 원하는 필드가 정확히 원하는 위치의 한 페이지 체크 아웃에서 렌더링됩니다. 그러나 나는 아래의 문제를 만났다.

  1. 위에서 추가 한 맞춤 입력란의 값에 액세스하는 방법은 무엇입니까? 배송 주소 확장 속성에 값을 저장하려고합니다. 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

귀하의 질문에 따라 귀하는 이미 확장 속성이 설정되어 있다고 가정합니다. 나는 비슷한 수정을했으며 희망적으로 내 대답이 도움이되기를 바랍니다.

사용자 정의 모듈에서 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'
        }
    }
};

페이로드에 확장 속성을 추가하십시오.

/ * 전역 정의, 경고 * /
밝히다(
    [
        '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 / 전체 화면 로더',
        'Magento_Checkout / js / action / select-billing-address'
    ],
    기능
        $,
        ko,
        인용문,
        resourceUrlManager,
        저장,
        paymentService,
        methodConverter,
        errorProcessor,
        fullScreenLoader,
        selectBillingAddressAction
    ) {
        '엄격한 사용';

        {
            saveShippingInformation : 함수 () {
                var 페이로드;

                if (! quote.billingAddress ()) {
                    selectBillingAddressAction (quote.shippingAddress ());
                }
                // 배송 주소에 확장 속성 추가
                페이로드 = {
                    주소 정보 : {
                        배송 _ 주소 : 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 ();

                반품 저장
                    resourceUrlManager.getUrlForSetShippingInformation (quote),
                    JSON.stringify (페이로드)
                ).끝난(
                    기능 (응답) {
                        quote.setTotals (응답. 총계);
                        paymentService.setPaymentMethods (methodConverter (response.payment_methods));
                        fullScreenLoader.stopLoader ();
                    }
                ).실패(
                    기능 (응답) {
                        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 클래스
{
    보호 된 $ quoteRepository;
    공공 함수 __construct (
        \ Magento \ Quote \ Model \ QuoteRepository $ quoteRepository
    ) {
        $ this-> quoteRepository = $ quoteRepository;
    }
    / **
     * @param \ Magento \ Checkout \ Model \ ShippingInformationManagement $ 제목
     * @param $ cartId
     * @param \ Magento \ Checkout \ Api \ Data \ ShippingInformation 인터페이스 $ addressInformation
     * /
    beforeAddressAddressInformation 공용 함수 (
        \ 마 젠토 \ 체크 아웃 \ 모델 \ 배송 정보 관리 $ 제목,
        $ cartId,
        \ 마 젠토 \ 체크 아웃 \ Api \ 데이터 \ 배송 정보 인터페이스 $ 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
     * /
    보호 된 $ _objectManager;

    / **
     * @param \ Magento \ Framework \ ObjectManager 인터페이스 $ objectmanager
     * /
    공용 함수 __construct (\ Magento \ Framework \ ObjectManagerInterface $ objectmanager)
    {
        $ this-> _ objectManager = $ objectmanager;
    }

    공용 함수 실행 (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

좋은 지적은 다른 방법을 알지 못했습니다. 지적 해 주셔서 감사합니다.
NathanielR

@ vaso123 여기서 Nathaniel은 플러그인과 하나의 이벤트 관찰자를 만들어서 핵심 기능을 무시하기 때문에 무언가를 알지 못하는 것 같습니다. 좀 더 설명해 주시겠습니까? 정말 도움이 될 것입니다 ... Thanks
Sarvagya

@Sarvagya require js를 사용할 때는을 사용하지 말고 map *mixin을 대신 사용하십시오.
vaso123

@ vaso123 나는 그가 Magento_Checkout / js / model / shipping-save-processor / default '를 참조한다고 생각합니다 :'Namespace_CustomModule / js / model / shipping-save-processor / default ' -저장 프로세서 / 기본값 }이 글을 쓴 이후로 오랜 시간이 걸렸으므로 Sarvagya가 틀렸다면 바로 정정 해주세요.
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;
}

}

이 작업이 완료되면 결제 페이지를 확인하십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.