Movendo o bloco de formulário de mensagem de presente do carrinho para o checkout etapa 1

8

Estou tentando mover o bloco Opções de presente (formulário de mensagem de presente) da página atual do carrinho de compras para a primeira etapa do Checkout (Remessa). Preciso colocá-lo diretamente em Métodos de envio. Tentei adicionar um módulo GiftMessage ao meu tema e, dentro disso, modifiquei o arquivo de layout checkout_index_index.xml para referenciar o bloco raiz do checkout para inserção de mensagem de presente, mas não adiantou. Qualquer ajuda seria muito apreciada. Obrigado!

<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
fonte
11
Você entendeu?
— jackcar
@maquina você encontrou solução?
— Kul

Respostas:

5

Antes de tudo, precisamos entender como a mensagem de presente do Magento funciona na página do carrinho.

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

Este arquivo é a nossa luz. Economizaremos muito tempo se entendermos sua lógica.

window.giftOptionsConfig: essa variável global usada para config. Devemos recriá-lo no checkout.

Vamos começar a implementar nossa lógica personalizada. Crie um novo módulo, adicione a seguinte 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>

Existem 3 notas:

A etapa de envio usará nosso modelo html de envio personalizado. É mais fácil adicionar nossa região personalizada.

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

-Nossa área de presentes: copiei o conteúdo 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-->

-A configuração do presente

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

Crie app / code / Vendor / CheckoutDemo / view / frontend / templates / gift_options.phtml

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

Usamos a giftOptionsConfigvariável global porque a lógica da mensagem de presente js a utilizará.

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];
    }
}

Crie o html de remessa, copie o conteúdo vendor/magento/module-checkout/view/frontend/web/template/shipping.htmlpara nosso costume app/code/Vendor/CheckoutDemo/view/frontend/web/template/shipping.html. E adicione nossa região de mensagem de presente personalizada:

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:

insira a descrição da imagem aqui

— Khoa TruongDinh
fonte
Ótimo. está funcionando bem.
— Kul
podemos adicionar a opção de embrulho aqui também?
— Kul
11
Papel de embrulho @Kul na versão Magento E-commerce?
— Khoa TruongDinh
Sim. No comércio.
— Kul
3

Experimente o código abaixo 

<?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, fiz uma extensão de gateway de pagamento na qual renderizei meu arquivo de modelo personalizado na seção de pagamento. Também adicionei esse código aqui, por favor, adicione Se eu perder alguma coisa. (Cirkle_Behalf) é o nome do 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
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.