Magento 2 allow navigation to update without cacheable="false"

Question

In my main nav I have link and the url changes based upon if the customer is logged in. If the customer is login in the link is /shop/trade else the link is /trade.

My code is the following:

<?php
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$customerSession = $objectManager->get('Magento\Customer\Model\Session');
if($customerSession->isLoggedIn()){
    echo '/shop/trade';
}
else{ 
    echo '/trade';
} 
?>

The issue is though the block is being cached and thus the user does not see the updated link when logged in. I looked at using cacheable="false" on the block but I learnt this will disable caching on all pages since the nav is on all pages.

Whats the best way to sort this?

Answer 1

Create a js file:

VendorName/ModuleName/view/frontend/web/js/view/customer.js

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

    return Component.extend({
        isLoggedIn: ko.observable(true),
        customer: ko.observable({}),

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

        /**
         * Check customer localstorage
         */
        checkCustomerLocalStorage: function () {
            var self = this;
            var time = setInterval(function () {
                self.customer = customerData.get('customer');

                if (localStorage["mage-cache-storage"] != '{}') {
                    clearInterval(time);
                }

                if (self.customer().fullname != undefined) {
                    // show your login link
                    // $("a.mylink").attr("href", "/shop/trade");
                } else {
                    // show your logout link
                    // $("a.mylink").attr("href", "/trade");
                }
            }, 1000);
        }
    });
});

Inside phtml file:

<script type="text/x-magento-init">
{
    "*": {
        "VendorName_ModuleName/js/view/customer":{}
    }
}
</script>

Answer 2

You should use knockout to load generate this content dynamically.

Smth like this should work:

<div data-bind="scope: 'customer'">

        <a style="display: none" data-bind="visible: (customer().fullname)" href="#authorized">authorized link</a>
        <a style="display: none" data-bind="visible: (!customer().fullname)"href="#guest">guest link</a>
</div>
...
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "customer": {
                        "component": "Magento_Customer/js/view/customer"
                    }
                }
            }
        }
    }
</script>