Mover el bloque de formulario de mensaje de regalo del carrito al pago, paso 1

8

Estoy tratando de mover el bloque de Opciones de regalo (formulario de mensaje de regalo) de la página actual del carrito de compras al primer paso de la compra (envío). Necesito colocarlo justo debajo de Métodos de envío. Intenté agregar un módulo GiftMessage a mi tema y dentro de este modifiqué el archivo de diseño checkout_index_index.xml para hacer referencia al bloque raíz de pago para la inserción del mensaje de regalo, pero fue inútil. Cualquier ayuda sería muy apreciada. ¡Gracias!

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceBlock name="checkout.root">
        <block class="Magento\GiftMessage\Block\Cart\GiftOptions" name="checkout.cart.order.actions.gift_options" template="cart/gift_options.phtml" cacheable="false">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="types" xsi:type="array"/>
                    <item name="components" xsi:type="array">
                        <item name="giftOptionsCart" xsi:type="array">
                            <item name="component" xsi:type="string">Magento_GiftMessage/js/view/gift-message</item>
                            <item name="config" xsi:type="array">
                                <item name="template" xsi:type="string">Magento_GiftMessage/gift-message</item>
                                <item name="formTemplate" xsi:type="string">Magento_GiftMessage/gift-message-form</item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </block>
    </referenceBlock>
</body>

magento2 checkout giftmessage maquina
fuente
1
¿Lo obtuviste?
Jackcar
@maquina encontraste la solución?
Kul

Respuestas:

5

En primer lugar, debemos entender cómo funciona el mensaje de regalo de Magento en la página del carrito.

vendor/magento/module-gift-message/view/frontend/templates/cart/gift_options.phtml

Este archivo es nuestra luz. Ahorraremos mucho tiempo si entendemos su lógica.

window.giftOptionsConfig: esta variable global utilizada para la configuración. Deberíamos recrearlo al finalizar la compra.

Comencemos a implementar nuestra lógica personalizada. Cree un nuevo módulo, agregue la siguiente lógica:

app / code / Vendor / CheckoutDemo / view / frontend / layout / checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="content">
            <referenceBlock name="checkout.root">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="checkout" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="steps" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="shipping-step" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="shippingAddress" xsi:type="array">
                                                        <item name="config" xsi:type="array">
                                                            <item name="template" xsi:type="string">Vendor_CheckoutDemo/shipping</item>
                                                        </item>
                                                        <item name="children" xsi:type="array">
                                                            <!--Gift Options Cart-->
                                                            <item name="giftOptionsCart" xsi:type="array">
                                                                <item name="displayArea" xsi:type="string">gift_options</item>
                                                                <item name="component" xsi:type="string">Magento_GiftMessage/js/view/gift-message</item>
                                                                <item name="config" xsi:type="array">
                                                                    <item name="template" xsi:type="string">Magento_GiftMessage/gift-message</item>
                                                                    <item name="formTemplate" xsi:type="string">Magento_GiftMessage/gift-message-form</item>
                                                                </item>
                                                            </item>
                                                            <!--End Gift Option-->
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </referenceBlock>
            <block class="Magento\Framework\View\Element\Template" name="gift.messages.data" template="Vendor_CheckoutDemo::gift_options.phtml"/>
        </referenceBlock>
    </body>
</page>

Hay 3 notas:

-El paso de envío utilizará nuestra plantilla html de envío personalizada. Es más fácil agregar nuestra región personalizada.

<item name="shippingAddress" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="template" xsi:type="string">Vendor_CheckoutDemo/shipping</item>
        </item>

-Nuestro área de regalo: Copié el contenido de vendor/magento/module-gift-message/view/frontend/layout/checkout_cart_index.xml.

<!--Gift Options Cart-->
    <item name="giftOptionsCart" xsi:type="array">
        <item name="displayArea" xsi:type="string">gift_options</item>
        <item name="component" xsi:type="string">Magento_GiftMessage/js/view/gift-message</item>
        <item name="config" xsi:type="array">
            <item name="template" xsi:type="string">Magento_GiftMessage/gift-message</item>
            <item name="formTemplate" xsi:type="string">Magento_GiftMessage/gift-message-form</item>
        </item>
    </item>
<!--End Gift Option-->

-La configuración de regalo

<block class="Magento\Framework\View\Element\Template" name="gift.messages.data" template="Vendor_CheckoutDemo::gift_options.phtml"/>

Cree una aplicación / código / Vendor / CheckoutDemo / view / frontend / templates / gift_options.phtml

<script>
    window.giftOptionsConfig = window.checkoutConfig.giftMessageConfig;
</script>

Usamos la giftOptionsConfigvariable global porque la lógica js del mensaje de regalo la usará.

app / code / Vendor / CheckoutDemo / etc / frontend / 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\Model\CompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="gift_message_checkout_config_provider" xsi:type="object">Vendor\CheckoutDemo\Model\GiftMessageConfigProvider\Proxy</item>
            </argument>
        </arguments>
    </type>
</config>

app / code / Vendor / CheckoutDemo / Model / GiftMessageConfigProvider.php

<?php

namespace Vendor\CheckoutDemo\Model;

class GiftMessageConfigProvider extends \Magento\GiftMessage\Model\GiftMessageConfigProvider
{
    public function getConfig()
    {
        $config = parent::getConfig();
        return ['giftMessageConfig' => $config];
    }
}

Cree el html de envío, copie el contenido de vendor/magento/module-checkout/view/frontend/web/template/shipping.htmlnuestra costumbre app/code/Vendor/CheckoutDemo/view/frontend/web/template/shipping.html. Y agregue nuestra región de mensaje de regalo personalizado:

app / code / Vendor / CheckoutDemo / view / frontend / web / template / shipping.html

......
<div class="step-title" translate="'Gift Options'" data-role="title" />
<each args="getRegion('gift_options')" render="" />
......

Resultado:

ingrese la descripción de la imagen aquí

Khoa TruongDinh
fuente
Excelente. Está funcionando bien.
Kul
¿podemos agregar la opción de envoltura de regalo aquí también?
Kul
1
¿Papel de regalo @Kul en la versión de comercio electrónico de Magento?
Khoa TruongDinh
Si. En el comercio
Kul
3

Prueba el siguiente código 

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
   <block class="Magento\GiftMessage\Block\Cart\GiftOptions" name="checkout.cart.order.actions.gift_options" template="cart/gift_options.phtml" cacheable="false">
    <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="types" xsi:type="array"/>
                    <item name="components" xsi:type="array">
                        <item name="giftOptionsCart" xsi:type="array">
                            <item name="component" xsi:type="string">Magento_GiftMessage/js/view/gift-message</item>
                            <item name="config" xsi:type="array">
                                <item name="template" xsi:type="string">Magento_GiftMessage/gift-message</item>
                                <item name="formTemplate" xsi:type="string">Magento_GiftMessage/gift-message-form</item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </block>
    </referenceBlock>
  </referenceContainer> 
 </body>
</page>

Anteriormente, hice una extensión de pasarela de pago en la que presenté mi archivo de plantilla personalizada en la sección de pago. También he agregado ese código aquí, agregue si me falta algo. (Cirkle_Behalf) es el nombre del módulo.

  <?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
     <referenceContainer name="content">
      <block class="Cirkle\Behalf\Block\Behalf" name="behalf_popup" template="Cirkle_Behalf::behalf.phtml"/>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="billing-step" xsi:type="array">
                                            <item name="component" xsi:type="string">uiComponent</item>
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="renders" xsi:type="array">
                                                            <!-- merge payment method renders here -->
                                                            <item name="children" xsi:type="array">
                                                                <item name="behalf" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Cirkle_Behalf/js/view/payment/behalf</item>
                                                                    <item name="methods" xsi:type="array">
                                                                        <item name="behalf" xsi:type="array">
                                                                            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>

                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </referenceContainer>
   </body>
</page>
Sanjay Gohil
fuente