Magento 2: How to add hyperlink on text in knockout template

Question

Welcome message = "Welcome Sign-in".

I want to add my account link on Sign-in text in the welcome message. sign-in text should be a link and direct the user to my account page.

<?php
$welcomeMessage = $block->getWelcome();
?>
<?php switch ($block->getShowPart()):
    case 'welcome': ?>
        <li class="greet welcome" data-bind="scope: 'customer'">
            <!-- ko if: customer().fullname  -->
            <span data-bind="text: new String('<?= $block->escapeHtml(__('Welcome, %1!', '%1')) ?>').replace('%1', customer().fullname)">
            </span>
            <!-- /ko -->
            <!-- ko ifnot: customer().fullname  -->         
            <a data-bind="attr: {href: myaccount_url}, html: name" class="product-item-link">
                <span data-bind='html:"<?= $block->escapeHtml($welcomeMessage) ?>"'></span>
            </a>
            <?= $block->getBlockHtml('header.additional') ?>
            <!-- /ko -->
        </li>
        <script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                        "customer": {
                            "component": "Magento_Customer/js/view/customer"
                        }
                    }
                }
            }
        }
        </script>
    <?php break; ?>

    <?php case 'other': ?>
        <?= $block->getChildHtml() ?>
    <?php break; ?>

<?php endswitch; ?>

Please help me to add my account URL here or let me know if any better way to achieve this. Thanks

Answer 1

One option is to use a plugin to add more data to customer private data

https://github.com/DominicWatts/CustomerLogin/blob/master/Plugin/Magento/Customer/CustomerData/Customer.php#L46

Then add to knockout template

https://github.com/DominicWatts/CustomerLogin/blob/master/view/frontend/templates/index/index.phtml#L19

Use standard magento url logic to build account url

Answer 2

<a data-bind="attr: {href: myaccount_url, title: name}" tabindex="-1" class="product-item-link">

Please refere Change knockout a href data-bind to link to image

Answer 3

After spent more hours and read different related articles and shared opinion, I am able to manage this as below:-

<?php

$welcomeMessage = $block->getWelcome();
?>
<?php switch ($block->getShowPart()):
    case 'welcome': ?>
        <li class="greet welcome" data-bind="scope: 'customer'">
            <!-- ko if: customer().fullname  -->
            <span data-bind="text: new String('<?= $block->escapeHtml(__('Welcome, %1!', '%1')) ?>').replace('%1', customer().fullname)">
            </span>
            <!-- /ko -->
            <!-- ko ifnot: customer().fullname  -->
            <span data-bind='html:"<?= $block->escapeHtml(__("%1 <a href='%2'>Sign-in</a>", $block->getWelcome(), $block->getUrl('customer/account/login'))) ?>"'>
            </span>         
            <?= $block->getBlockHtml('header.additional') ?>
            <!-- /ko -->
        </li>
        <script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                        "customer": {
                            "component": "Magento_Customer/js/view/customer"
                        }
                    }
                }
            }
        }
        </script>
    <?php break; ?>

    <?php case 'other': ?>
        <?= $block->getChildHtml() ?>
    <?php break; ?>

<?php endswitch; ?>

Hope this helps for you. Any better way to do this, always welcome Thanks