Cómo personalizar el proceso de pago en Magento 2

Publicado: 2018-04-23

Tabla de contenido

En Magento 2, el proceso de pago se rediseñó para una experiencia más rápida y fácil. La página de pago lleva al cliente a través de 2 sencillos pasos del proceso. Los clientes que han iniciado sesión en sus cuentas pueden completar el pago rápidamente, porque gran parte de la información ya está en sus cuentas. El primer paso del proceso de pago es que el cliente complete la información de la dirección de envío y elija el método de envío. Durante el segundo paso, el cliente elige el método de pago y aplica los cupones para completar la compra.

Personaliza el pago predeterminado de Magento 2

Puede agregar un nuevo paso de pago o cambiar la vista de un pago existente para personalizar el pago predeterminado a su manera.

Agregar un nuevo paso de pago

Puede agregar un paso de pago personalizado, debe implementarse como un componente de la interfaz de usuario. En aras de la compatibilidad, la capacidad de actualización y el fácil mantenimiento, no edite el código predeterminado de Magento, agregue sus personalizaciones en un módulo separado.

Paso 1: cree la parte de vista del componente del paso de pago

Para crear la parte de vista del nuevo paso de pago:

  1. Agregue un directorio de módulos. Todos los archivos personalizados deben almacenarse allí. Para que su personalización de pago se aplique correctamente, su módulo personalizado debe depender del módulo Magento_Checkout . No use Ui para el nombre de su módulo personalizado, ya que la notación %Vendor%_Ui , requerida al especificar rutas, podría causar problemas.
  2. Cree el archivo .js implementando el modelo de vista.
  3. Cree una plantilla .html para el componente.

Cada paso se describe en detalle a continuación:

1. Agregue el archivo JavaScript implementando el nuevo paso

Se debe implementar un nuevo paso de pago como componente de la interfaz de usuario. Es decir, su implementación de JavaScript debe ser un módulo de JavaScript.

El archivo debe almacenarse en el <your_module_dir>/view/frontend/web/js/view .

La notación <your_module_dir> representa la ruta al directorio de su módulo desde el directorio raíz. Por lo general, será uno de los siguientes: app/code/<YourVendor>/<YourModule> o vendor/<yourvendor>/module-<module>-<name> .

A continuación, se incluye un ejemplo my-step-view.js con comentarios: 

 definir(
    ['ko', 'uiComponent', 'guion bajo', 'Magento_Checkout/js/model/step - navegador'],
    función(
        Ko,
        Componente,
        _,
        pasonavegador
    ) {'
        uso estricto';
        /**
         *
         * mystep: es el nombre de la plantilla .html del componente,
         * <Proveedor>_<Módulo>: es el nombre del directorio de su módulo.
         *
         */
        devolver Componente.extender({
            predeterminados: {
                plantilla: ' < Proveedor > _ < Módulo > /mystep'
            },

            //agregue aquí su lógica para mostrar el paso,
            esVisible: ko.observable(verdadero),

            /**
             *
             * @devoluciones {*}
             */
            inicializar: función () {
                esto._super();
                // registra tu paso
                pasoNavigator.registroPaso(
                    //el código del paso se usará como ID de contenido del paso en la plantilla del componente
                    'código_paso',
                    // alias de paso
                    nulo,
                    // valor del título del paso
                    'Título del paso',
                    //propiedad observable con lógica al mostrar el paso o al ocultar el paso
                    esto es visible,

                    _.bind(esto.navegar, esto),

                    /**
                     * valor de orden de clasificación
                     * 'valor de orden de clasificación' < 10: el paso se muestra antes del paso de envío;
                     * 10 < 'valor de orden de clasificación' < 20: el paso se muestra entre el paso de envío y el de pago
                     * 'valor de orden de clasificación' > 20: el paso se muestra después del paso de pago
                     */
                    15
                );

                devolver esto;
            },

            /**
             * El método de navegar () es responsable de la navegación entre el paso de pago
             * durante el pago. Puede agregar lógica personalizada, por ejemplo, algunas condiciones
             * para cambiar a su paso personalizado
             */
            navegar: función () {

            },

            /**
             * @devoluciones nulas
             */
            navegarAlSiguientePaso: function() {
                pasoNavigator.next();
            }
        });
    }
);
2. Agregue la plantilla .html

En el directorio del módulo, agregue la plantilla .html para el componente. Debe estar ubicado en el <your_module_dir>/view/frontend/web/template .

A continuación se muestra un ejemplo mystep.html : 

 <!–Se debe usar el valor 'step_code' del archivo .js–>
<li data-bind="fadeVisible: isVisible">
    <div class="título del paso" data-bind="i18n: 'Título del paso'" data-role="título"></div>
    <div class="paso-contenido" data-role="contenido">

        <form data-bind="enviar: navegar al siguiente paso" novalidate="novalidate">
            <div class="barra de herramientas de acciones">
                <div clase="principal">
                    <button data-role="opc-continue" type="submit" class="acción del botón continuar principal">
                        <span><!– ko i18n: 'Siguiente'–><!– /ko –></span>
                    </botón>
                </div>
            </div>
        </formulario>
    </div>
</li>

Paso 2: agregue su paso al diseño de la página de pago

Para que el nuevo paso se muestre en la página, debe declararlo en el diseño de la página de pago, que se define en checkout_index_index.xml .

Por lo tanto, debe agregar un archivo de diseño extensible checkout_index_index.xml en la siguiente ubicación: <your_module_dir>/view/frontend/layout/checkout_index_index.xml

A continuación, se incluye un ejemplo de checkout_index_index.xml : 

 <página xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <cuerpo>
        <referenceBlock name="checkout.root">
            <argumentos>
                <argumento nombre="jsLayout" xsi:tipo="matriz">
                    <elemento nombre="componentes" xsi:tipo="matriz">
                        <nombre del artículo="pago" xsi:tipo="matriz">
                            <elemento nombre="hijos" xsi:tipo="matriz">
                                <elemento nombre="pasos" xsi:tipo="matriz">
                                    <elemento nombre="hijos" xsi:tipo="matriz">
                                        <!– El nuevo paso que agregas –>
                                        <item name="mi-nuevo-paso" xsi:type="matriz">
                                            <item name="component" xsi:type="string">%Vendor%_%Module%/js/view/my-step-view</item>
                                            <!–Para mostrar el contenido del paso antes del paso de envío, el valor "sortOrder" debe ser < 1–>
                                            <!–Para mostrar el contenido del paso entre el paso de envío y el paso de pago 1 < "sortOrder" < 2 –>
                                            <!–Para mostrar el contenido del paso después del paso de pago "sortOrder" >2 –>
                                            <elemento nombre="ordenar" xsi:tipo="cadena">2</elemento>
                                            <elemento nombre="hijos" xsi:tipo="matriz">
                                                <!–agregue aquí la declaración del componente secundario para su paso–>
                                            </elemento>
                                        </elemento>
                                    </elemento>
                                </elemento>
                            </elemento>
                        </elemento>
                    </elemento>
                </argumento>
            </argumentos>
        </bloque de referencia>
    </cuerpo>
</página>

Campo personalizado de pago de Magento 2

$119,00

Pago en un solo paso de Magento 2

$99 $119,00

Personalizar la vista de un pago existente

En las aplicaciones de Magento, el pago se implementa mediante componentes de interfaz de usuario. Puede personalizar cada paso cambiando la implementación de JavaScript o la plantilla para un componente, agregando, eliminando o deshabilitando un componente.

Paso 1: cambie la implementación y la plantilla .js del componente

Para cambiar la implementación de .js y la plantilla utilizada para la representación de componentes, debe declarar los nuevos archivos en el diseño de la página de pago. Para hacer esto, siga los siguientes pasos:

  1. En su directorio de módulos personalizados, cree el siguiente archivo nuevo: <your_module_dir>/view/frontend/layout/checkout_index_index.xml . (Para que su personalización de pago se aplique correctamente, su módulo personalizado debe depender del módulo Magento_Checkout).
  2. En este archivo, agregue lo siguiente: 
 <página xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <cuerpo>
        <referenceBlock name="checkout.root">
            <argumentos>
                <argumento nombre="jsLayout" xsi:tipo="matriz">
                    <!– Tu personalización estará aquí –>
                    …
                </argumento>
            </argumentos>
        </bloque de referencia>
    </cuerpo>
</página>
  1. En el <Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xml , busque el componente que necesita personalizar. Copie el nodo correspondiente y todos los nodos principales hasta <argument> . No es necesario dejar todos los atributos y valores de los nodos principales, ya que no los va a cambiar.
  2. Cambie la ruta al archivo .js , la plantilla o cualquier otra propiedad del componente.

Ejemplo:

El módulo Magento_Shipping agrega un componente presentado como un enlace a la información de la política de envío al paso de envío:

 <Magento_Shipping_module_dir>/view/frontend/layout/checkout_index_index.xml

se parece a lo siguiente: 

 <página xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <cuerpo>
        <referenceBlock name="checkout.root">
            <argumentos>
                <argumento nombre="jsLayout" xsi:tipo="matriz">
                    <elemento nombre="componentes" xsi:tipo="matriz">
                        <nombre del artículo="pago" xsi:tipo="matriz">
                            <elemento nombre="hijos" xsi:tipo="matriz">
                                <elemento nombre="pasos" xsi:tipo="matriz">
                                    <elemento nombre="hijos" xsi:tipo="matriz">
                                        <item name="paso-envío" xsi:type="matriz">
                                            <elemento nombre="hijos" xsi:tipo="matriz">
                                                <nombre del artículo="dirección de envío" xsi:tipo="matriz">
                                                    <elemento nombre="hijos" xsi:tipo="matriz">
                                                        <item name="formulario-del-método-antes-del-envío" xsi:type="array">
                                                            <elemento nombre="hijos" xsi:tipo="matriz">
                                                                <item name="shipping_policy" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_Shipping/js/view/checkout/shipping/shipping-policy</item>
                                                                </elemento>
                                                            </elemento>
                                                        </elemento>
                                                    </elemento>
                                                </elemento>
                                            </elemento>
                                        </elemento>
                                    </elemento>
                                </elemento>
                            </elemento>
                        </elemento>
                    </elemento>
                </argumento>
            </argumentos>
        </bloque de referencia>
    </cuerpo>
</página>

Paso 2: agregue el nuevo componente al diseño de la página de pago

Cualquier componente de la interfaz de usuario se agrega en checkout_index_index.xml de manera similar a como se agrega un componente de paso de pago.

Asegúrese de declarar un componente para que el componente principal lo represente correctamente. Si un componente principal es un componente de interfaz de usuario general (al que hace referencia el alias uiComponent ), sus componentes secundarios se representan sin ninguna condición. Pero si un componente principal es una extensión de los componentes generales de la interfaz de usuario, entonces la representación de los elementos secundarios podría estar restringida de cierta manera. Por ejemplo, un componente puede mostrar solo elementos secundarios de una determinada área de displayArea .

Paso 3 : Deshabilitar un componente

Para deshabilitar el componente en su checkout_index_index.xml use las siguientes instrucciones: 

 <item name="%the_component_to_be_disabled%" xsi:type="array">
    <elemento nombre="config" xsi:type="matriz">
        <item name="componentDisabled" xsi:type="boolean">true</item>
    </elemento>
</elemento>

Paso 4: eliminar un componente

Para eliminar un componente de la representación del diseño, debe crear un complemento para el método \Magento\Checkout\Block\Checkout\LayoutProcessor::process . En su complemento, implemente el método around eliminando los nodos de diseño correspondientes en tiempo de ejecución.

El siguiente ejemplo es un ejemplo del método around eliminando un componente: 

 unset($jsLayout['components']['checkout']['child']['steps'][%path_to_target_node%]); //%path_to_target_node% es la ruta al nodo del componente en checkout_index_index.xml
devolver $jsLayout;

(Si desea utilizar este ejemplo en su código, reemplace el marcador de posición %path_to_target_node% con valor real).

*Deshabilitar vs eliminar un componente: si deshabilita un componente, se carga pero no se procesa. Si elimina un componente, no se carga.

Artículos Relacionados:
Cómo agregar un código de descuento al pago en Magento
Cómo agregar un pago personalizado al pago de Magento 2