How do you pass more / custom parameters to the customer bind / private data in knockout

Question

So this is an extension of this question

Magento 2.3 display logged in/out message using private content

Default behavior is that data-bind="scope: 'customer' has a few properties

eg

data_id: 1234567890
firstname: "Dominic"
fullname: "Dominic Xigen"
websiteId: "1"

I'm looking for an example on how to pass other or custom customer attributes to knockout.

Answer 1

I've reached a solution using a plugin. Not sure if this is the right route. Doesn't seem to be a lot of documentation on how to do this.

Has changed my opinion on using knockout though. I now see it's potential.

Demo

https://github.com/DominicWatts/CustomerLogin

etc/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\Customer">
        <plugin disabled="false" name="Xigen_CustomerLogin_Plugin_Magento_Customer_CustomerData_Customer" sortOrder="10" type="Xigen\CustomerLogin\Plugin\Magento\Customer\CustomerData\Customer"/>
    </type>
</config>

/Plugin/Magento/Customer/CustomerData/Customer.php

<?php
namespace Xigen\CustomerLogin\Plugin\Magento\Customer\CustomerData;
/**
 * Class Customer
 * @package Xigen\CustomerLogin\Plugin\Magento\Customer\CustomerData
 */
class Customer
{
    /**
     * @var \Magento\Customer\Model\Session\Proxy
     */
    private $customerSession;
    /**
     * @var \Magento\Customer\Api\GroupRepositoryInterface
     */
    private $groupRepository;
    /**
     * Customer constructor.
     * @param \Magento\Customer\Model\Session\Proxy $customerSession
     * @param \Magento\Customer\Api\GroupRepositoryInterface $groupRepository
     */
    public function __construct(
        \Magento\Customer\Model\Session\Proxy $customerSession,
        \Magento\Customer\Api\GroupRepositoryInterface $groupRepository
    ) {
        $this->customerSession = $customerSession;
        $this->groupRepository = $groupRepository;
    }
    /**
     * @param \Magento\Customer\CustomerData\Customer $subject
     * @param $result
     * @return mixed
     */
    public function afterGetSectionData(\Magento\Customer\CustomerData\Customer $subject, $result)
    {
        $result['is_logged_in'] = $this->customerSession->isLoggedIn();
        if ($this->customerSession->isLoggedIn() && $this->customerSession->getCustomerId()) {
            $customer = $this->customerSession->getCustomer();
            $result['email'] = $customer->getEmail();
            $result['lastname'] = $customer->getLastname();
            $result['customer_group_id'] = $customer->getGroupId();
            $result['customer_group_name'] = $this->getGroupName($customer->getGroupId());
        }
        return $result;
    }
    /**
     * Get group name
     * @param $groupId
     * @return \Magento\Framework\Phrase|string
     */
    public function getGroupName($groupId)
    {
        try {
            $group = $this->groupRepository->getById($groupId);
            return $group->getCode();
        } catch (\Magento\Framework\Exception\NoSuchEntityException $e) {
            return __("None");
        } catch (\Magento\Framework\Exception\LocalizedException $e) {
            return __("None");
        }
    }
}

/view/frontend/templates/index/index.phtml

<div class="greet welcome" data-bind="scope: 'customer'">
    <!-- ko if: customer().is_logged_in  -->
    <span class="logged-in"
            data-bind="text: new String('<?= $block->escapeHtml(__('Welcome back %1', '%1')) ?>').replace('%1', customer().firstname)">
    </span>
    <!-- /ko -->
    <!-- ko ifnot: customer().is_logged_in  -->
    <span class="not-logged-in"
            data-bind='html:"<?= $block->escapeHtml(__("Please <a href='%1'>login</a>", $block->getUrl('customer/account/login'))) ?>"'>
    </span>
    <!-- /ko -->
    <!-- ko if: customer().email  -->
    <div>
        <span class="logged-in"
                data-bind="text: new String('<?= $block->escapeHtml(__('Email: %1', '%1')) ?>').replace('%1', customer().email)">
        </span>
    </div>
    <!-- /ko -->
    <!-- ko if: customer().customer_group_id  -->
    <div>
        <span class="logged-in"
                data-bind="text: new String('<?= $block->escapeHtml(__('Customer Group: %1', '%1')) ?>').replace('%1', customer().customer_group_name)">
        </span>
    </div>
    <!-- /ko -->
</div>
<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "customer": {
                    "component": "Magento_Customer/js/view/customer"
                }
            }
        }
    }
}
</script>