Перемещение блока формы подарочного сообщения из корзины в кассу шаг 1

Я пытаюсь переместить блок «Параметры подарка» (форма сообщения с подарком) со страницы текущей корзины покупок на первый шаг оформления заказа (Доставка). Мне нужно разместить его прямо под Методы доставки. Я попытался добавить модуль GiftMessage к своей теме, и в рамках этого изменил файл макета checkout_index_index.xml, чтобы он ссылался на корневой блок извлечения для вставки Подарочного сообщения, но он был бесполезен. Любая помощь будет принята с благодарностью. Спасибо!

<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
источник

Ты понял?

— домкрат

@ maquina вы нашли решение?

— Кул

Ответы:

Прежде всего, нам нужно понять, как работает сообщение Magento Gift Message на странице корзины.

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

Этот файл наш свет. Мы сэкономим много времени, если поймем его логику.

window.giftOptionsConfig: эта глобальная переменная используется для конфигурации. Мы должны воссоздать его на кассе.

Давайте начнем реализовывать нашу собственную логику. Создайте новый модуль, добавьте следующую логику:

Приложение / код / Vendor / CheckoutDemo / вид / интерфейс / расположение / 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>

Есть 3 примечания:

-Доставка шаг будет использовать наш собственный HTML-шаблон доставки. Проще добавить наш пользовательский регион.

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

-Наша область подарков: я скопировал содержимое с 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-->

-Конфигурация подарка

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

Создайте приложение / код / Vendor / CheckoutDemo / view / frontend / templates / gift_options.phtml

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

Мы используем giftOptionsConfigглобальную переменную, потому что логика подарочного сообщения будет использовать ее.

Приложение / код / Vendor / CheckoutDemo / и т.д. / интерфейс / 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>

Приложение / код / Vendor / CheckoutDemo / Модель / GiftMessageConfigProvider.php

<?php

namespace Vendor\CheckoutDemo\Model;

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

Создайте HTML-код доставки, скопируйте содержимое vendor/magento/module-checkout/view/frontend/web/template/shipping.htmlв наш пользовательский app/code/Vendor/CheckoutDemo/view/frontend/web/template/shipping.html. И добавьте наш регион для пользовательских подарочных сообщений:

Приложение / код / Vendor / CheckoutDemo / вид / интерфейс / веб / шаблон / shipping.html

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

Результат:

— Хоа ТруонгДинь
источник

Отлично. работает нормально

— Кул

мы можем добавить опцию подарочной упаковки и здесь?

— Кул

@ Кул подарочная упаковка в версии электронной коммерции Magento?

— Khoa TruongDinh

Да. В торговле.

— Куль

Попробуйте код ниже

<?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>

Ранее я сделал одно расширение для платежного шлюза, в котором я отображал свой пользовательский файл шаблона в разделе оплаты. Я также добавил этот код здесь, пожалуйста, добавьте, если я что-то пропустил. (Cirkle_Behalf) - это имя модуля.

  <?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>

— Санджай Гохил
источник