0

I'm trying to open Custom Module List when I click on the button in the header. For this I tried the below code.

In header.phtml file added x-magento-init code

 <div id="my_list-div" data-bind="scope:'my_list'">

    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
        {
            "#my_list-div": {
                "Magento_Ui/js/core/app":{
                    "components":{
                        "my_list":{
                            "component": "ABCSolutions_MYList/js/list",
                            "template": "ABCSolutions_MYList/list"
                        }
                    }
                }
        }
    }
    </script>
 </div>

and html code is

<div class="container">
.........
</div>

and the js is

    define([
    'ko',
    'uiComponent',
    'mage/url',
    'mage/storage',
    'jquery',
    'Magento_Ui/js/modal/modal',
    'loader',
    'Magento_Ui/js/modal/confirm',
], function (ko, Component, urlBuilder,storage, $, modal, loader, confirm) {
    'use strict';

    let enterePressEvent = false;

    return Component.extend({

        defaults: {
            template: 'ABCSolutions_MYList/list',
        },

       
        showLoading: ko.observable(false),
        loadingMessage: ko.observable(''),
        loadingMessage2: ko.observable(''),


        initObservable: function () {
            this._super();
            return this;
        },

        initialize: function () {
            this._super();
        },

        openMyList: function () {
            alert("Open My List");
        },


    });

});

I included this in the header file as shown below code in the default.xml file

    <?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>
        <referenceContainer name="head.additional">
            <block class="Magento\Framework\View\Element\Template" name="header.my.list" template="ABCSolutions_MYList::list.phtml">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="my_list" xsi:type="array">
                                <item name="component" xsi:type="string">ABCSolutions_MYList/js/list</item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

In Header.phtml file added the anchor tag

<a class="my_lists"  title="My List" data-bind="click: openMyList" style="cursor:pointer;">                   
              <i class="porto-icon porto-icon-list"></i>
          </a>

I'm getting the error Unable to process binding "click: function(){return openMyList }".

Any issue with the above code? please help on this

11
  • In which file have you added text/x-magento-init code? Commented Sep 4 at 10:10
  • list.phtml file
    – Bojjaiah
    Commented Sep 4 at 12:12
  • You need to do all your code in the file you want to customise i.e header.phtml, put the text/x-magento-init code there and wrap the html you want to manipulate within a div that has the scope data bind. Commented Sep 4 at 12:24
  • Ok, Can we delete default.xml layout file? on this case
    – Bojjaiah
    Commented Sep 4 at 12:34
  • Yes, it's not required either way as you're adding the js component through text/x-magento-init Commented Sep 4 at 12:47

1 Answer 1

0

The ko functions you have defined will only work within your defined scope, you should modify the initial code like below;

 <div id="my_list-div" data-bind="scope:'my_list'">
    // all your functions will only work within this div as it is your scope 
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>
    <script type="text/x-magento-init">
        {
            "#my_list-div": {
                "Magento_Ui/js/core/app":{
                    "components":{
                        "my_list":{
                            "component": "ABCSolutions_MYList/js/list",
                            "template": "ABCSolutions_MYList/list"
                        }
                    }
                }
        }
    }
    </script>

So, in short you cannot write the html you need to manipulate in another phtml file it should be within the the initial code and within div with id my_list-div

3
  • not working. however, if the script is outside of the div getting an error.
    – Bojjaiah
    Commented Sep 4 at 4:47
  • add your updated code in question. Commented Sep 4 at 6:24
  • updated my thread as suggested your answer.
    – Bojjaiah
    Commented Sep 4 at 7:37

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.