I am working on Magento 2.3.5-p1. I need to move the gift message block to the checkout just after the shipping address and before the shipping methods, for this I have followed the steps in this answer
Now the gift message block appears exactly where I want but when I click on the button to go to the second step of the checkout nothing happens, it does not take me to the second step, no errors are shown in the nginx log, nor in the magento log nor in the browser console.
I leave my code in case someone can help me solve the problem. Thanks in advance.
Vendor/Module/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="MagentoCheckoutModelCompositeConfigProvider">
<arguments>
<argument name="configProviders" xsi:type="array">
<item name="gift_message_checkout_config_provider" xsi:type="object">VendorModuleModelGiftMessageConfigProviderProxy</item>
</argument>
</arguments>
</type>
</config>
Vendor/Module/Model/GiftMessageConfigProvider.php
<?php
namespace VendorModuleModel;
class GiftMessageConfigProvider extends MagentoGiftMessageModelGiftMessageConfigProvider
{
public function getConfig()
{
$config = parent::getConfig();
return ['giftMessageConfig' => $config];
}
}
Vendor/Module/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">
<head>
<css src="Vendor_Module::css/gift-message.css"/>
</head>
<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_Module/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="MagentoFrameworkViewElementTemplate" name="gift.messages.data" template="Vendor_Module::gift_options.phtml"/>
</referenceBlock>
</body>
</page>
Vendor/Module/view/frontend/templates/gift_options.phtml
<script>
window.giftOptionsConfig = window.checkoutConfig.giftMessageConfig;
</script>
Vendor/Module/view/frontend/web/template/shipping.html
In this file I have only copied the original from Magento and added the Gift Options part
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<li id="shipping" class="checkout-shipping-address" data-bind="fadeVisible: visible()">
<div class="step-title" translate="'Shipping Address'" data-role="title" />
<div id="checkout-step-shipping"
class="step-content"
data-role="content">
<each if="!quoteIsVirtual" args="getRegion('customer-email')" render="" />
<each args="getRegion('address-list')" render="" />
<each args="getRegion('address-list-additional-addresses')" render="" />
<!-- Address form pop up -->
<if args="!isFormInline">
<div class="new-address-popup">
<button type="button"
class="action action-show-popup"
click="showFormPopUp"
visible="!isNewAddressAdded()">
<span translate="'New Address'" />
</button>
</div>
<div id="opc-new-shipping-address"
visible="isFormPopUpVisible()"
render="shippingFormTemplate" />
</if>
<each args="getRegion('before-form')" render="" />
<!-- Inline address form -->
<render if="isFormInline" args="shippingFormTemplate" />
</div>
</li>
<!--Shipping method template-->
<li id="opc-shipping_method"
class="checkout-shipping-method"
data-bind="fadeVisible: visible(), blockLoader: isLoading"
role="presentation">
<div class="checkout-shipping-method">
<div class="checkout-gift-title" translate="'Gift Options'" data-role="title" />
<each args="getRegion('gift_options')" render="" />
<div class="step-title"
translate="'Shipping Methods'"
data-role="title" />
<each args="getRegion('before-shipping-method-form')" render="" />
<div id="checkout-step-shipping_method"
class="step-content"
data-role="content"
role="tabpanel"
aria-hidden="false">
<form id="co-shipping-method-form"
class="form methods-shipping"
if="rates().length"
submit="setShippingInformation"
novalidate="novalidate">
<render args="shippingMethodListTemplate"/>
<div id="onepage-checkout-shipping-method-additional-load">
<each args="getRegion('shippingAdditional')" render="" />
</div>
<div role="alert"
if="errorValidationMessage().length"
class="message notice">
<span text="errorValidationMessage()" />
</div>
<div class="actions-toolbar" id="shipping-method-buttons-container">
<div class="primary">
<button data-role="opc-continue" type="submit" class="button action continue primary">
<span translate="'Next'" />
</button>
</div>
</div>
</form>
<div class="no-quotes-block"
ifnot="rates().length > 0"
translate="'Sorry, no quotes are available for this order at this time'" />
</div>
</div>
</li>
