Validação de campo personalizado do checkout do Magento 2


11

Magento2 checkout - qual é o melhor método para adicionar validação para o meu campo de checkout personalizado que depende do método de envio selecionado?

Por exemplo, estou adicionando campo ao formulário de endereço no LayoutProcessor, onde posso especificar regras de validação. Preciso tornar esse campo obrigatório se minha transportadora personalizada estiver selecionada.

Meu objetivo é impedir que o usuário avance para a próxima etapa se meu campo personalizado não for preenchido. Sei que posso adicionar validações personalizadas antes da colocação do pedido (etapa Revisão e pagamentos), mas preciso validá-la uma etapa antes.


Oi, como você resolveu isso?
Simonthesorcerer # 21/18

@ maciej-domski Você resolveu isso?
Ranjit Shinde


@Maciej Domski verificar o meu answer.i tentou fazê-lo por e-mail de confirmação e é o código de trabalho
Ketan Borada

Respostas:


1

tente isso, basta adicionar 'validation' => ['required-entry' => true] como abaixo no plugin 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'

0

sim, é possível alterando Magento_Checkout / js / model / shipping-save-processor / default.js

Eu adicionei o campo confirm emailque deve ser o mesmo emaile é obrigatório no check-out, você pode personalizar de acordo com os requisitos.

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

estender 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();
                   }
               );
           }
       };
   }
);
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.