0 
Magento 2.4.2-p1
Porto theme

I enabled Gift Messages in:

Stores > Settings > Configuration > Sales > Sales:
  • Allow Gift Messages on Order Level
  • Allow Gift Messages for Order Items

It does not show up on the front end. What do I need to do to make this work?

UPDATED on September 8th, 2021:

I read somewhere that this has been moved from the check-out page to the View Cart page in order to streamline the order process? I don't even see it in View Cart page and we really really need to have it in the Check-out as we do deliveries and this is a must. Any solutions on how to achieve this will be appreciated.

UPDATED on September 11th:

The solution suggested by Meet Shekhat (below) does not work for me.

Any other possible solutions to this?

I found this - would it help?

Magento 2, display gift options in checkout page

I believe I found the original article that inspired Meet Shekhat:

Moving Gift message form block from Cart to Checkout step 1

I was going to try those steps but it gets confusing. Would anyone who understands it please write this out in:

Step 1: do this
Step 2: do this
Step 3: do this 
etc.

The bounty expires in 3 days. Would someone please have a working solution? This is critical for us. I've spent days googling this and I can't seem to find a working solution. Thank you.

UPDATED September 13th, 2021:

I checked the steps provided by Meet Shekhat 7 times. Everything is 100% correct but it does not work = the Comments field does not show anywhere!

The link provided by Deep Shah:

Moving Gift message form block from Cart to Checkout step 1

is the one I have found previously but cannot understand it properly. Would someone please re-write that posted answer and post here the steps from there? I will then gift you the bounty provided it works. Thank you.

UPDATED on September 15th, 2021:

Just to be clear - the bounty expired but I still haven't found a working solution. I implemented both of the suggested solutions below but neither works for me = the box just doesn't appear anywhere!

Improve this question
4
  • Please try the below link: magento.stackexchange.com/questions/184769/… I hope it's work for you...
    – Deep Shah
    Commented Sep 13, 2021 at 12:40
  • Thank you for trying to help. I've added this link to my original post yesterday already but I also mentioned that the instructions are not clear to follow for me. Is there any way you could re-write them please in an easy to understand way? Such as Step 1: Create a file in path/file and put this in it. Step 2. Create another file in path/file and put that in it... Reading the other article for example: "There are 3 notes: -Shipping step will use our custom shipping html template. It's easier to add our custom region." WHAT? What does that mean? Where does that go? I'm just lost.
    – Allysin
    Commented Sep 13, 2021 at 13:35
  • Did you checked it on fresh magento 2.4.2-p1 instance? Is it working there?
    – Rahul Barot
    Commented Sep 14, 2021 at 4:32
  • @Rahul Barot I don't have a way to try this. We have a fresh Magento 2.4.2-p1 install with the Smartwave Porto theme and 9 extensions from Amasty installed by Amasty. Are you thinking it could be Amasty's extensions interfering with this?
    – Allysin
    Commented Sep 15, 2021 at 12:37

2 Answers 2

Reset to default
1
+50

First of all, we need to understand how the Magento Gift Message works on Cart Page.

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

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.

Create a new module, add following logic:

app/code/Vendor/CheckoutGiftMessage/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_CheckoutGiftMessage/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_CheckoutGiftMessage::gift_options.phtml"/>
        </referenceBlock>
    </body>
</page>

Create app/code/Vendor/CheckoutGiftMessage/view/frontend/templates/gift_options.phtml

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

We use the giftOptionsConfig global variable because the gift message js logic will use it.

app/code/Vendor/CheckoutGiftMessage/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\CheckoutGiftMessage\Model\GiftMessageConfigProvider\Proxy</item>
            </argument>
        </arguments>
    </type>
</config>

app/code/Vendor/CheckoutGiftMessage/Model/GiftMessageConfigProvider.php

<?php

namespace Vendor\CheckoutGiftMessage\Model;

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

Create the shipping html, copy the content from vendor/magento/module-checkout/view/frontend/web/template/shipping.html to our custom app/code/Vendor/CheckoutGiftMessage/view/frontend/web/template/shipping.html. And, add our custom gift message region:

app/code/Vendor/CheckoutGiftMessage/view/frontend/web/template/shipping.html

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

Hope it will work for you!

Improve this answer
11
  • I have gone through all the steps, then deleted Cache and re-indexed but the Gift message still doesn't show on the front end. Did I do something wrong? The only thing I wasn't certain about is the very last bit = "And, add our custom gift message region:". Where exactly in the app/code/Vendor/CheckoutGiftMessage/view/frontend/web/template/shipping.html file do I add this code? I just kind of put it in the middle of the file...
    – Allysin
    Commented Sep 11, 2021 at 19:01
  • Please put code end of the file and please check.
    – Meet Shekhat
    Commented Sep 13, 2021 at 4:41
  • That's exactly where it was (at the end of the file). I have just worked through all the steps backwards and double checked the file paths and also downloaded the files I previously uploaded to the server and then compared them with what you posted and everything is 100% correct but it doesn't work. I don't understand these things much but how is it meant to work if we didn't change/overwrite any of the existing code? Isn't it like if I made a file and put 'I'm the best' inside the file and then expected it to show up somewhere but it wouldn't be called up by anything?
    – Allysin
    Commented Sep 13, 2021 at 13:56
  • If you don't mind can we connect on skype so i can properly understand your issue and help you.
    – Meet Shekhat
    Commented Sep 14, 2021 at 9:07
  • Would TeamViewer work?
    – Allysin
    Commented Sep 15, 2021 at 12:38
0

follow above solution to display Gift Options on Checkout page.

Step 1: Create file app/code/Vendor/CheckoutGiftMessage/view/frontend/layout/checkout_index_index.xml

Step 2: Create file app/code/Vendor/CheckoutGiftMessage/view/frontend/templates/gift_options.phtml

Step 3: Create file app/code/Vendor/CheckoutGiftMessage/etc/frontend/di.xml

Step 4: Create file app/code/Vendor/CheckoutGiftMessage/Model/GiftMessageConfigProvider.php

Step 5: Create file app/code/Vendor/CheckoutGiftMessage/view/frontend/web/template/shipping.html

Note: In step 1 inside shippingAddress and inside children inside that create before-form item and in it's children add code which is inside shippingAddress item.

here you can change YourVendorName/YourModuleName instead of Vendor/CheckoutGiftMessage.

I hope this is help you out please go through steps and it's working fine.

Improve this answer
1
  • @Allysin, I hope you like this steps.
    – Deep Shah
    Commented Sep 27, 2021 at 12:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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