I want to bind customer scope to a non-html element as I do not want html to be loaded if customer is not logged in. In the OOTB magento inside vendor/magento/module-theme/view/frontend/templates/html/header.phtml li tag is loaded even if customer is not logged in. Visually the li is hidden in this case but the accessibility screen reader reads it.

I want to bind a scope to a non-html element so that I can write a condition something like below.

<!-- ko scope: customer -->
        <!-- ko if: customer().fullname  -->
        <li class="greet welcome">
            <span class="logged-in"
                  data-bind="text: new String('<?= $block->escapeHtml(__('Welcome, %1!', '%1')) ?>').replace('%1', customer().fullname)">
        <!-- /ko -->
    <!-- /ko -->

But scope is not bound.

knockout.js:3381 Uncaught ReferenceError: Unable to process binding "if: function(){return customer().firstname }"
Message: customer is not defined.

Any other way to achieve this?


For scope you should use a String. Try:

<!-- ko scope: 'customer' -->
  • That did the trick! Thank you so much @JanuszJanczy :)
    – Sejal Shah
    Oct 10 '20 at 13:59
  • Thanks for this, do you happen to have a link to the knockout/magento documentation for this? I have been googling for a while and I can't find anything but this question and answer
    – Meberem
    Jul 10 at 18:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.