การตรวจสอบฟิลด์ที่กำหนดเองแบบพิเศษของวีโอไอพี 2

Magento2 checkout - วิธีที่ดีที่สุดในการเพิ่มการตรวจสอบสำหรับฟิลด์การชำระเงินที่กำหนดเองซึ่งขึ้นอยู่กับวิธีการจัดส่งที่เลือกคืออะไร?

เช่นฉันกำลังเพิ่มเขตข้อมูลไปยังแบบฟอร์มที่อยู่ในLayoutProcessorที่ฉันสามารถระบุกฎการตรวจสอบ ฉันต้องทำให้ฟิลด์นี้จำเป็นถ้าเลือกผู้ให้บริการที่กำหนดเองของฉัน

เป้าหมายของฉันคือป้องกันไม่ให้ผู้ใช้ไปยังขั้นตอนถัดไปหากไม่กรอกฟิลด์ที่กำหนดเองของฉัน ฉันรู้ว่าฉันสามารถเพิ่มการตรวจสอบความถูกต้องที่กำหนดเองก่อนขั้นตอนการสั่งซื้อ (ขั้นตอนการตรวจสอบและการชำระเงิน) แต่ฉันจำเป็นต้องตรวจสอบความถูกต้องก่อน

ลองนี้แค่เพิ่ม'validation' => ['required-entry' => true]เช่นด้านล่างในปลั๊กอิน LayoutProcessor

'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();
                   }
               );
           }
       };
   }
);