I'm trying to move the Gift Options block(gift message form) from the current Shopping cart page to the first step of the Checkout (Shipping). I need to place it right under Shipping Methods. I tried adding a GiftMessage module to my theme and within this modified the layout file checkout_index_index.xml to reference the checkout root block for Gift Message insertion, but it was of no use. Any help would be greatly appreciated. Thanks!
<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>
Best Answer
First of all, we need to understand how the Magento Gift Message works on Cart Page.
This file is our light. We will save a lot of time if we understand its logic.
window.giftOptionsConfig
: this global variable used for config. We should recreate it on checkout.Let's start to implement our custom logic. Create a new module, add following logic:
app/code/Vendor/CheckoutDemo/view/frontend/layout/checkout_index_index.xml
There are 3 notes:
-Shipping step will use our custom shipping html template. It's easier to add our custom region.
-Our Gift area: I copied the content from
vendor/magento/module-gift-message/view/frontend/layout/checkout_cart_index.xml
.-The Gift config
Create app/code/Vendor/CheckoutDemo/view/frontend/templates/gift_options.phtml
We use the
giftOptionsConfig
global variable because the gift message js logic will use it.app/code/Vendor/CheckoutDemo/etc/frontend/di.xml
app/code/Vendor/CheckoutDemo/Model/GiftMessageConfigProvider.php
Create the shipping html, copy the content from
vendor/magento/module-checkout/view/frontend/web/template/shipping.html
to our customapp/code/Vendor/CheckoutDemo/view/frontend/web/template/shipping.html
. And, add our custom gift message region:app/code/Vendor/CheckoutDemo/view/frontend/web/template/shipping.html
Result: