마 젠토 2 체크 아웃 커스텀 필드 검증

Magento2 결제-선택한 배송 방법에 따라 사용자 정의 결제 필드에 대한 유효성 검사를 추가하는 가장 좋은 방법은 무엇입니까?

예를 들어 LayoutProcessor의 주소 양식에 필드를 추가하여 유효성 검사 규칙을 지정할 수 있습니다. 맞춤형 운송 업체를 선택한 경우이 입력란을 필수로 만들어야합니다.

내 목표는 사용자 정의 필드가 채워지지 않은 경우 사용자가 다음 단계로 진행하지 못하게하는 것입니다. 주문 배치 (검토 및 결제 단계) 전에 사용자 지정 유효성 검사를 추가 할 수 있지만 이전 단계에서이를 확인해야한다는 것을 알고 있습니다.

이것을 시도 하고 LayoutProcessor 플러그인에서 아래처럼 'validation'=> [ 'required-entry'=> true] 를 추가하십시오.

'config' => [
                'customScope' => 'shippingAddress',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/input',
                'options' => [],
                'id' => 'custom_field'
            ],
            'dataScope' => 'customfield',
            'label' => 'custom field # :',
            'provider' => 'checkoutProvider',
            'validation' => ['required-entry' => true],
            'visible' => true,
            'sortOrder' => 250,
            'id' => 'custom_field'

예, Magento_Checkout / js / model / shipping-save-processor / default.js에서 변경하면 가능합니다

체크 아웃에서 confirm email반드시 같아야하는 필드 를 추가 email했으며 필수 필드는 요구 사항에 따라 사용자 지정할 수 있습니다.

app\code\Ketan\Checkout\view\frontend\requirejs-config.js

var config = {
    "map": {
       "*": {
           "Magento_Checkout/js/model/shipping-save-processor/default" : "Ketan_Checkout/js/shipping-save-processor"
       }
   }
}

js를 확장 file app\code\Ketan\Checkout\view\frontend\web\js\shipping-save-processor.js

/*
* *
*  @author DCKAP Team
*  @copyright Copyright (c) 2018 DCKAP (https://www.dckap.com)
*  @package Dckap_CustomFields
*/
define(
   [
       'ko',
       'Magento_Checkout/js/model/quote',
       'Magento_Checkout/js/model/resource-url-manager',
       'mage/storage',
       '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',
       'jquery'
   ],
   function (
       ko,
       quote,
       resourceUrlManager,
       storage,
       paymentService,
       methodConverter,
       errorProcessor,
       fullScreenLoader,
       selectBillingAddressAction,
       $
   ) {
       'use strict';

       return {
           saveShippingInformation: function () {
               var payload;

               var username = $("#customer-email").val();
               var conformusername = $("#conformusername").val();

              /*============ Customization Start =============*/
              //if(quote.shippingMethod().method_code=='flaterate'){ // Check if flaterate is selected
                if(conformusername != username){
                  $("#conformusername-error").show(); // show hidden message
                  $("#conformusername").focus();      // move cursor to the point
                  return false;
                 }
              // }
              /*============ Customization End =============*/


               if (!quote.billingAddress()) {
                   selectBillingAddressAction(quote.shippingAddress());
               }
               payload = {
                   addressInformation: {
                       shipping_address: quote.shippingAddress(),
                       billing_address: quote.billingAddress(),
                       shipping_method_code: quote.shippingMethod().method_code,
                       shipping_carrier_code: quote.shippingMethod().carrier_code
                   }
               };
               fullScreenLoader.startLoader();

               return storage.post(
                   resourceUrlManager.getUrlForSetShippingInformation(quote),
                   JSON.stringify(payload)
               ).done(
                   function (response) {
                       quote.setTotals(response.totals);
                       paymentService.setPaymentMethods(methodConverter(response.payment_methods));
                       fullScreenLoader.stopLoader();
                   }
               ).fail(
                   function (response) {
                       errorProcessor.process(response);
                       fullScreenLoader.stopLoader();
                   }
               );
           }
       };
   }
);