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.

Maciej Domski
fonte
Oi, como você resolveu isso?
Simonthesorcerer # 21/18
@ maciej-domski Você resolveu isso?
Ranjit Shinde
Isto pode ajudar os outros magento.stackexchange.com/questions/262239/...
Prathap Gunasekaran
@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'
Tirth Patel
fonte
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();
                   }
               );
           }
       };
   }
);
Ketan Borada
fonte