1

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. 

enter image description here

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/shipping.html and still the same issue persists.

Improve this question
3
  • Are you trying to overwrite the .js file and then set a new template or just the .html file?
    – MagePal Extensions
    Commented Jun 2, 2022 at 20:21
  • @MagePalExtensions the end goal was to overwrite the .js file and set a new template. But for simplicity I wanted to see if I could overwrite just the .html file and I was experiencing the same issue with both approach.
    – user105444
    Commented Jun 2, 2022 at 21:12
  • can you please provide me with the correct code for shipping.html? I am trying, but I'm still having trouble with the page loading.
    – Marija
    Commented yesterday

3 Answers 3

Reset to default
3

Since Magento (Adobe Commerce) 2.4.4 you should change your HTML template and close all tags like:

<li id="shipping" class="checkout-shipping-address" data-bind="fadeVisible: visible()">
    <div class="step-title" translate="'Shipping Address'" data-role="title"></div>
    <div id="checkout-step-shipping"
         class="step-content"
         data-role="content">

        <each if="!quoteIsVirtual" args="getRegion('customer-email')" render="" ></each>
        <each args="getRegion('address-list')" render="" ></each>
        <each args="getRegion('address-list-additional-addresses')" render="" ></each>

        <!-- 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'"></span>
                </button>
            </div>
            <div id="opc-new-shipping-address"
                 visible="isFormPopUpVisible()"
                 render="shippingFormTemplate"></div>
        </if>

        <each args="getRegion('before-form')" render="" ></each>

        <!-- Inline address form -->
        <render if="isFormInline" args="shippingFormTemplate"></render>
    </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"></div>

        <each args="getRegion('before-shipping-method-form')" render="" ></each>

        <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"></render>

                <div id="onepage-checkout-shipping-method-additional-load">
                    <each args="getRegion('shippingAdditional')" render="" ></each>
                </div>
                <div role="alert"
                     if="errorValidationMessage().length"
                     class="message notice">
                    <span text="errorValidationMessage()"></span>
                </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'"></span>
                        </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>
    </div>
</li>
Improve this answer
3
  • Thank you so much for pointing this out @Victor Tihonchuk!. This resolved my issue that I was seeing. Feel kind of silly now that I didn't immediately realize this. That the console was literally telling me this the whole time 😓.
    – user105444
    Commented Jun 2, 2022 at 21:11
  • Are these 2.4.4 template changes documented anywhere, this is an issue for custom themes with old templates?
    – paj
    Commented Jun 3, 2022 at 11:08
  • 1
    You can see Magento Open Source 2.4.4 Release Notes HTML tags are now nested and closed properly to meet standards in JQuery 3.5.x for non-void elements including custom elements.
    – Victor Tihonchuk
    Commented Jun 3, 2022 at 11:11
0

Try

var config = {
   'map': {
       '*': {
          'Magento_Checkout/template/shipping.html': 'Custom_ Module/template/shipping.html'
       }
    }
};

Then run bin/magento setup:upgrade

Improve this answer
1
  • Thank you for your suggestion! Unfortunately this didn't work for me
    – user105444
    Commented Jun 2, 2022 at 21:17
0

Can you please provide the correct code?

Improve this answer
New contributor
marija is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

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.