cancel
Showing results for 
Search instead for 
Did you mean: 

Unable to override shipping template using a custom module on Magento 2.4.4

SOLVED

Unable to override shipping template using a custom module on Magento 2.4.4

I'm currently having issues with overriding the default Magento Checkout `shipping.html` template using my custom module when upgrading to Magento 2.4.4. Whenever I attempt to override `shipping.html` the shipping form and shipping method on the checkout page is not being rendered. I have tested the same module with Magento 2.4.3 and confirmed that it is working as expected and the shipping form, along with the shipping method section, are being rendered properly. 

 

image (3).png


The only thing I am seeing in the console browser is the following warning from JQMigrate

 

jquery-migrate.js:100 JQMIGRATE: HTML tags must be properly nested and closed: 
<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="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>

 


I have the following in my `requirejs-config.js`:

 

var config = {
    map: {
        '*': {
           'Magento_Checkout/template/shipping': "Custom_Module/template/shipping",
        }
    }
};

 


And I have a `shipping.html` file located in the following path in my module: `app/code/Custom/Module/view/frontend/web/template/shipping.html` 

I've even tried replacing my custom html with the default html found in https://github.com/magento/magento2/blob/2.3/app/code/Magento/Checkout/view/frontend/web/template/sh... and still the same issue persists.

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Unable to override shipping template using a custom module on Magento 2.4.4

I posted this same question in another forum and received a response for this issue:

https://magento.stackexchange.com/a/356449/105444

The suggested change was fix I needed to make to get the shipping page to render properly again!

Its also stated that in the Magento 2.4.4 release that 
"HTML tags are now nested and closed properly to meet standards in JQuery 3.5.x for non-void elements including custom elements."


https://devdocs.magento.com/guides/v2.4/release-notes/open-source-2-4-4.html#infrastructure

View solution in original post

1 REPLY 1

Re: Unable to override shipping template using a custom module on Magento 2.4.4

I posted this same question in another forum and received a response for this issue:

https://magento.stackexchange.com/a/356449/105444

The suggested change was fix I needed to make to get the shipping page to render properly again!

Its also stated that in the Magento 2.4.4 release that 
"HTML tags are now nested and closed properly to meet standards in JQuery 3.5.x for non-void elements including custom elements."


https://devdocs.magento.com/guides/v2.4/release-notes/open-source-2-4-4.html#infrastructure