0

I would like add a feature to show a data like the "Welcome username". So i searched about how it works and i followed this tutorial

I'm blocked because i'm always getting the error unable to process binding company()

I created a model which represent a company, in my class extending SectionSourceInterface in the getSectionData method i return ['name' => 'test'] to test the feature.

I put this in my frontend/di.xml :

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">    
    <type name="Magento\Customer\CustomerData\SectionPoolInterface">
        <arguments>
            <argument name="sectionSourceMap" xsi:type="array">
                <item name="company" xsi:type="string">Test\Company\CustomerData\Company</item>
            </argument>
        </arguments>
    </type>
</config>

I add this my default.xml module layout :

<referenceContainer name="header.panel">
    <block class="Magento\Framework\View\Element\Template" name="welcome_msg" before="-" template="Test_Company::html/welcome.phtml"/>
</referenceContainer>

I put this in my welcome.phtml :

<?php
/**
 * @var \Magento\Framework\View\Element\Template $block
 */
?>
<p>Hello</p>
<!-- ko if: company().name  -->
    <li class="greet welcome" data-bind="scope: 'company'">
        <span data-bind="text: new String('<?=$block->escapeHtml(__('Welcome, %1!', '%1'))?>').replace('%1', company().name)"></span>
    </li>
<!-- /ko -->
<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "company": {
                    "component": "Test_Company/js/view/company"
                }
            }
        }
    }
}
</script>

and i put this in my company.js :

define([
    'uiComponent',
    'Magento_Customer/js/customer-data'
], function (Component, customerData) {
    'use strict';

    return Component.extend({
        /** @inheritdoc */
        initialize: function () {
            this._super();

            this.company = customerData.get('company');
        }
    });
});

Could you help me please to know what's wrong in my process ?

2

Calling company() outside the scope

You are currently calling <!-- ko if: company().name --> outside the scope binding. Try changing it to this:

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

Another alternative would be to move the scope binding higher up in the DOM, on the UL maybe.

Possible issue with the property

It could also be because company is not a Knockout observable, I've not worked on Magento 2 for few months so take this with a pinch of salt.

  1. Add Knockout as a dependency of your JS
  2. Initialise this.company as a KO observable

That would look like this:

define([
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'ko'
], function (Component, customerData, ko) {
    'use strict';

    return Component.extend({
        /** @inheritdoc */
        initialize: function () {
            this._super();

            this.company = ko.observable(customerData.get('company'));
        }
    });
});
| improve this answer | |
  • 1
    I think there is another reason Ben. We call company().name outside the scope data-bind="scope: 'company'"? – Khoa TruongDinh May 29 '19 at 15:18
  • Ooo yeah I didn't see that if statement, good spot. I'll update this answer. – Ben Crook May 29 '19 at 15:42
  • Hello, thanks verry much i'll try it wednesday after the day off and i return to you if it works. Your solution about the outside the scope seems to be right, i remember i failed a copy/past of the declaration i founded in the Theme module in the header template file. Do you have some good documentations / tutorials about working with knockout ? I don't really understand everything about how it works. Thanks – Kpone May 29 '19 at 20:47
  • I don't think anybody understands it that well. The official docs are slightly helpful and can be found here and I have written a tutorial here – Ben Crook May 30 '19 at 8:19
  • Thanks very much it works well :) – help May 31 '19 at 6:25

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.