Skip to content

Magento 2.46 – Move Gift Option Form to Checkout page and convert To Ajax form

I followed this guide this guide and was able to successfully copy the gift option form to my checkout page.

I placed the form just below my shipping forms. The problem is that if I click the update button, for the gift option form, it refreshes the page and wipes everything from shipping form.

I noticed that several people have already complained of this issue. Does anyone have a solution to this problem ?

This is how I moved the gift option to checkout:

checkout_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <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="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="afterMethods" xsi:type="array">
                                                            <item name="children" 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>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
        <referenceContainer name="content">
            <block class="MagentoGiftMessageBlockCartGiftOptions" name="checkout.cart.order.actions.gift_options" template="cart/gift_options.phtml" cacheable="false"/>
        </referenceContainer>
    </body>
</page>

How To Convert Gift form to Ajax

I was thinking that the easiest option could be to convert the ‘Gift option form’ to an Ajax submitting form, that way the page will not refresh on update. Does anyone have any ideas how I can go about doing this ?