Analisis del formulario del checkout

Hay varias maneras de añadir campo al formulario del checkout. una de ellas es crear un plugin que añada o modifique el comportamiento del método LayoutProcessor::process. Este método devuelve un array de datos, que son recogidos de los xml relacionados con el checkout. Entonces mediante el plugin puedes modificar o añadir datos en él. Otra manera es si tienes un magento cloud o b2b pudes crear los campos con customer attributes.

La otra manera es modificar los comportamientos, a través de los xml. La incoveniencia de este métodos es que la ruta para llegar a lo que queremos tocar puede ser muy larga y a simple vista puede ser confuso.

Proceso de crear los campos customizados sin guardar los datos en la bbdd

El checkout está compuesto por 2 apartados: #shipping y #payment. Esto lo podemos ver en la url.
Después de rellenar todos los campos requeridos y clicamos el botón next, se envían los datos del formulario del shipping a shipping-information. Los datos se guardarán en el quote.
Tenemos que meter los datos en la propiedad extension_attributes a través del mixin del método set-shipping-information. Ojo No olvidemos crear el fichero extension_attributes.xml para meter los datos customs en el modelo Magento\Quote\Api\Data\AddressInterface. Así nuestros datos estarán dentro del saco de datos enviados al servidor.

Ojo! los datos enviados en el apartado del # shipping , se presupone que son iguales que los del billing. Por eso en la parte del billing, hay un checkbox para indicar que la dirección de facturación es diferente o no.

Ahora bien, sólo hemos hecho una parte. No se guardarán datos en la bbdd. Si queremos que se puedan guardar tenemos que hacer la segunda parte.

Guardar datos en la bbdd

Creamos campo para todas aquellas tablas que necesitan que estén los datos. Por ej: quote, sales_order y sales_order_grid
Creamos un plugin para el método shippingInformationManagement para guardar los datos customs al quote
Crear el fichero fieldset.xml para meter los mismos datos customs del quote a sales_order.
Crear un evento saveOrderBeforeModelQuoteObserver para pasar los datos del quote a sales_order

DisplayArea: area que contiene muchos campos con su html (template). Estas displayAreas serán pintadas por el método getRegion.

        
            <!-- ko foreach: getRegion('additional-fieldsets') -->
                <!-- ko template: getTemplate() --><!-- /ko --> 
            <!--/ko-->
        
    

Component: se refiere al js asociado al html de ese campo.

Config: configuramos los templates

Referencias:

• Customer attributes
• Add new field to the checkout form with plugin