frontendmagento2PHP
In magento 2, when you switch on the gift option from the backend. It gets displayed on the Cart page.
I need to display this on cart page and checkout page as well, under cart items.
How can i achieve that.
I have tried editing the xml for checkout_index_index adding block for gift in itemsAfter but to no avail.
You can write a block file in your module for this.
And Create a file in app/code/vendor/module/view/frontend/file.phtml
In this file you can get the customer session and quote data. So that you can perform any calculation based on that.
To call this block in checkout and cart page you have to define both xml file for that in the same module ie.
checkout_index_index.xml
checkout_cart_index.xml
In these xml you can call your block file with the help of refrence.
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.
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
<?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>
There are 3 notes:
-Shipping step will use our custom shipping html template. It's easier to add our custom region.
<item name="shippingAddress" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Vendor_CheckoutDemo/shipping</item>
</item>
-Our Gift area: I copied the content from 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-->
-The Gift config
<block class="Magento\Framework\View\Element\Template" name="gift.messages.data" template="Vendor_CheckoutDemo::gift_options.phtml"/>
Create app/code/Vendor/CheckoutDemo/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/CheckoutDemo/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\CheckoutDemo\Model\GiftMessageConfigProvider\Proxy</item>
</argument>
</arguments>
</type>
</config>
app/code/Vendor/CheckoutDemo/Model/GiftMessageConfigProvider.php
<?php
namespace Vendor\CheckoutDemo\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/CheckoutDemo/view/frontend/web/template/shipping.html. And, add our custom gift message region:
app/code/Vendor/CheckoutDemo/view/frontend/web/template/shipping.html
......
<div class="step-title" translate="'Gift Options'" data-role="title" />
<each args="getRegion('gift_options')" render="" />
......
Result:
Best Answer
Try this method
Step1: app/code/Vendor/Module/view/frontend/layout/checkout_index_index.xml
Step2: app/code/Vendor/Module/view/frontend/templates/checkout/gift_options.phtml