Cómo reordenar (cambiar) la dirección de facturación antes de la dirección de envío


17

en la página de pago de Onepage necesito reordenar la dirección de facturación antes de la dirección de envío. de hecho, la lógica debería ser al revés de lo que es ahora. Si la dirección de envío difiere de la dirección de facturación, debería poder editarla. ahora puede editar la dirección de facturación si difiere de la dirección de envío. Además, la dirección de facturación debe aparecer en la misma "página" que la dirección de envío. Actualmente paso 1 en los pasos de pago de Magento.

¿Cómo haría esto? tal vez hay un complemento para esto, pero aún no pude encontrar uno.

Adjunto una captura de pantalla de una tienda alemana que lo hace así:

ingrese la descripción de la imagen aquí

Encontré el archivo de plantilla .html para el formulario de facturación y parece que este es el lugar donde termina en checkout_index_index.xml:

<item name="billing-step" xsi:type="array">
    <item name="component" xsi:type="string">uiComponent</item>
    <item name="sortOrder" xsi:type="string">2</item>
    <item name="children" xsi:type="array">
        <item name="payment" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Checkout/js/view/payment</item>
            <item name="config" xsi:type="array">
                <item name="title" xsi:type="string" translate="true">Payment</item>
            </item>
            <item name="children" xsi:type="array">
                <!-- ... -->
                <!-- merge your payment methods here -->
                <item name="afterMethods" xsi:type="array">
                    <item name="component" xsi:type="string">uiComponent</item>
                    <item name="displayArea" xsi:type="string">afterMethods</item>
                    <item name="children" xsi:type="array">
                        <!-- merge additional data after payment methods here -->

<!-- I think here the billing form ends up -->

                    </item>
                </item>
            </item>
        </item>
    </item>
</item>

Pero no está específicamente ubicado aquí y parece que no puedo encontrar otro lugar donde se inyecte en ese lugar.


2
El formulario de dirección de facturación se agrega en el archivo Magento/Checkout/Block/Checkout/LayoutProcessor.php.
Aaron Allen el

Sí, eso es todo. Allí logré reordenar al menos. Sin embargo, todavía tengo que cambiar la lógica de la dirección.
steros

¿Has utilizado el pago personalizado?
Amit Bera

Necesito anular Magento\Checkout\Block\Checkout\LayoutProcessory cambiar de posición como estoy pensando. No estoy seguro
Ankit Shah

1
@AnkitShah Eso no funcionará, ya que solo necesito mover la dirección de facturación, no todo el paso de facturación. Además, como Aaron señaló que el primer paso para hacerlo es escribir un módulo que sobrescriba LayoutProcessor. Ya lo hice con éxito, pero la lógica de elegir que la dirección de facturación sea la misma que la dirección de envío no es correcta. Y además, no estoy seguro de si todo el proceso funcionará. Al menos puedo continuar en el proceso de pago, pero hasta ahora no estoy seguro de los efectos secundarios.
steros

Respuestas:


11

Como Aaron señaló, se agrega el formulario Magento/Checkout/Block/Checkout/LayoutProcessor.php. Con esta información desarrollé un módulo con un plugin after que se conecta a ese procesador:

app/code/<vendor>/<module>/Model/Checkout/LayoutProcessorPlugin.php

<?php

namespace <vendor>\ReorderBillingForm\Model\Checkout;

class LayoutProcessorPlugin
{

    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */

    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    )
    {
        // get billing address form at billing step
        $billingAddressForm = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['afterMethods']['children']['billing-address-form'];

        // move address form to shipping step
        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['billing-address-form'] = $billingAddressForm;

        // remove form from billing step
        unset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['afterMethods']['children']['billing-address-form']);

        return $jsLayout;
    }
}

app/code/<vendor>/<module>/etc/module.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="<vendor>_<module>" setup_version="1.0.0"/>
</config>

app/code/<vendor>/<module>/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="reorder-billing-form"
                type="<vendor>\<module>\Model\Checkout\LayoutProcessorPlugin" sortOrder="<yourOrder>"/>
    </type>
</config>

app/code/<vendor>/<module>/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    '<vendor>_<module>',
    __DIR__
);

Esto reordena exitosamente el formulario de dirección de facturación (y con suerte ahorra algunos dolores de cabeza para otras personas). Pero todavía hay trabajo necesario en el javascript (?) Que maneja el billing address is the same as shipping addressmecanismo. Como esto todavía funciona de la manera "estándar".

Información adicional:

Vi que en el backend si creas un nuevo pedido, el diseño es exactamente el deseado. El formulario de facturación es "anterior" al formulario de envío y la lógica también es al revés. Si puedo encontrar el tiempo, creo que podría ser beneficioso mirar el código allí. Quizás también sea posible usarlo en la interfaz.


¿No debería ser el espacio de nombres un espacio de nombres <vendor>\ReorderBillingForm\Block\Checkout;?
Frank Groot

2
No estoy seguro. Me encontré con problemas de almacenamiento en caché (una vez más) parece. A veces no funcionaría, a veces sí. Reescribí el módulo y ahora funciona todo el tiempo. Era importante de usar aroundProcess. Actualicé mi publicación.
steros

Gracias por actualizar su respuesta, pero recibo el siguiente errorNotice: Undefined index: billing-address-form in LayoutProcessorPlugin.php:20
Frank Groot

Hmm extraño, no entiendo eso. Pero puede verificar cómo se estructura $ jsLayout mediante depuración. Actualmente no tengo una instancia en ejecución. Si configuro otro, intentaré averiguar cuál podría ser el problema.
steros

¿Ya actualizaste la respuesta? todavía está usando afterProcess, no alrededor del Proceso @DarsVaeda Estamos usando su solución, pero todavía aparece la Dirección de Billign en el Paso de pago
Alex

0

El error Undefined index: billing-address-formen el LayoutProcessorPlugin.phpque ocurre cuando se tiene la caja propiedad "para mostrar la dirección de facturación en " en " Forma de pago " en lugar de " página de pago ".

Arreglar con:

UPDATE core_config_data SET VALUE = 1 WHERE path = 'checkout/options/display_billing_address_on';

Hubiera preferido agregar esto como un comentario a la publicación de DarsVaedas (ver arriba), pero parece que no tengo el permiso ...


¡Gracias @jaybong por agregar la instrucción sql para arreglar esto!
digijay
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.