2

I am trying to add gift option section on checkout page.

I called gift option by following code. in checkout_index_index.xml

<referenceContainer name="content">
        <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 name="sortOrder" xsi:type="string">1</item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </block>
        </referenceContainer>

And it display in last. But I want this section in payment methods brfore payment selection like this. enter image description here

How can I achieve this.

  • is that your full checkout_index_index? – fmsthird Mar 28 '19 at 7:44
  • Yes i override in my custom theme and contain only this code – 111 Mar 28 '19 at 7:48
2

I hope you could archive your challenge by this time. For those that might need a clue about this, here we go.

In order to do any change in the checkout steps, you have to follow the instructions described here. After deciding where you wanna include your new component, we can start changing the checkout_index_index.xml

In my case, I would like to show the form to add the gift message right after the payment methods, so I will make my component be a child of afterMethods that we can find inside the payment section, check it out how it looks like down below:

     <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="payment" 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>

After that, you have to make sure to include the block Magento\GiftMessage\Block\Cart\GiftOptions as well, this is because the gift message component will require some information that comes from this function $block->getGiftOptionsConfigJson()

So, let's include our block:

    <referenceContainer name="content">
        <block class="Magento\GiftMessage\Block\Cart\GiftOptions" name="checkout.cart.order.actions.gift_options" template="cart/gift_options.phtml" cacheable="false"/>
    </referenceContainer>

The final file will have this content:

<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="payment" 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="Magento\GiftMessage\Block\Cart\GiftOptions" name="checkout.cart.order.actions.gift_options" template="cart/gift_options.phtml" cacheable="false"/>
    </referenceContainer>
</body>
</page>

After that, you wanna change the cart/gift_options.phtml just a little bit to not load the stack of components twice when you are in the checkout page:

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<div id="gift-options-cart" data-bind="scope:'giftOptionsCart'">
    <!-- Make sure we try to load the knockout stack of components only if we are in the cart page. -->
    <? if( $block->getRequest()->getFullActionName() === 'checkout_cart_index'): ?>
        <!-- ko template: getTemplate() --><!-- /ko -->
        <script type="text/x-magento-init">
            {
                "#gift-options-cart": {
                    "Magento_Ui/js/core/app": <?= /* @escapeNotVerified */ $block->getJsLayout() ?>
                }
            }
        </script>
    <? endif ?>
    <script>
        window.giftOptionsConfig = <?= /* @escapeNotVerified */ $block->getGiftOptionsConfigJson() ?>;
    </script>
</div>

Well, that's all :)

| improve this answer | |
  • I upvoted this, because it worked. Didn't place the gift options where the original poster requested, though. And unfortunately, gift options on the checkout page don't work very well because when you click update to save your gift message, it refreshes the page and you lose any information you may have entered in payment methods. I really wish Magento had built better gift options into the base installation. – TMax Feb 24 at 20:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.