Skip to content

Template binding Magento2.4.5 not working in checkout

Since we have upgraded to magento 2.4.5 the popup URl is not showing mij carrier_custom template.

if I put the data binding as a normaly shown object it works correct.
but if the popup is clicked I recieve below message in the console

enter image description here

if we use the plugin in older version it runs fine

the code I have used in de JS file is:

   bindFeather: function () {
        $.featherlight.defaults.root = '#featherroot';
        $.featherlight.defaults.beforeOpen = function (element) {

            if (typeof element != 'undefined') {

                var templateName = element.currentTarget.dataset.featherlight.substr(1);
                var templatePlaceholder = '<div data-bind="template: {name:'dm-delivery-methods-content'}"></div>';



                $('#featherroot').find('.featherlight-content').html(templatePlaceholder).first().each(function () {

                    var bindingContext = ko.contextFor($(this).get());

                    $(this).each(function () {
                        ko.applyBindingsToDescendants(bindingContext, this);
                    });
                });


                return {controlsDescendantBindings: true};
            }
        };
    },

the Carrier_custom.html starts with :

<div class="lightbox dm-lightbox" id="dm-delivery-methods"></div>
<script type="text/html" id="dm-delivery-methods-content">

    <h2 data-bind="i18n: getPopupTitle()"></h2>

    <div class="dm-address">

        <div class="dm-methods-container">

            <div class="dm-dates">

                <!-- ko foreach: { data: availableDates, as: 'date'} -->

                <div class="dm-delivery-date" data-bind="click: function() { $parent.selectDate(date.standard) }, css: { selected: $parent.selectedDate() == date.standard }">
                    <span data-bind="text: date.formatted"></span>
                    <div class="dm-methods-lowestprice" data-bind="css: { free: date.fromPrice === '0,00' }">
                        <span data-bind="i18n: 'From: '"></span>
                        <span data-bind="text: '&#8364' + date.fromPrice"></span>
                    </div>
                </div>

the Phtml is also correct stup and the XML file refers to the correct template.

sample checkout page:

enter image description here
I have searched the internet but no matching case found.
but somehow is does not work can somebody please help

thanks in advance

kind regards
Ruud