Menú

Personalizar campos del checkout con LayoutProcessor en Magento 2

José Cruz Chávez

Personalizar campos del checkout con LayoutProcessor en Magento 2
📁 magento2 magento 2checkoutlayoutprocessorfrontend

Para personalizar checkout sin tocar core, una estrategia comun es usar un plugin sobre LayoutProcessor.

Registrar plugin

<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
<plugin name="gdw_checkout_layout_plugin" type="GDW\Hello\Plugin\CheckoutLayout"/>
</type>

Modificar jsLayout

<?php
namespace GDW\Hello\Plugin;
class CheckoutLayout
{
public function afterProcess($subject, array $jsLayout): array
{
$path = & $jsLayout['components']['checkout']['children']['steps']['children']
['shipping-step']['children']['shippingAddress']['children']
['shipping-address-fieldset']['children'];
$path['gdw_reference'] = [
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => ['customScope' => 'shippingAddress.custom_attributes'],
'dataScope' => 'shippingAddress.custom_attributes.gdw_reference',
'label' => 'Referencia de entrega',
'provider' => 'checkoutProvider',
'visible' => true,
'validation' => ['required-entry' => false],
'sortOrder' => 250,
];
return $jsLayout;
}
}

Conclusión

Este enfoque permite cambios flexibles en checkout y mantiene compatibilidad con upgrades.

¿Listo para impulsar
tu E-commerce?

Cuéntame sobre tu proyecto y te respondo con una propuesta clara para desarrollo, optimización o migración.

Ir al formulario de contacto
WooCommerce Logo
Magento 2 Logo
Shopify Logo