Changing link being cached

Question

I have modified a themes account_links.phtml file. Client has requested that it just says "Login" and if logged in it should just show "My Account".

This is the code I came up with:

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$customerSession = $objectManager->get('Magento\Customer\Model\Session');

?>
<div id="header-account" class="account-links top-links links-wrapper-separators-left skip-content skip-content--style">
    <?php if ($customerSession->isLoggedIn()): ?>

        <ul class="header links">
            <li class="authorization-link" data-label="or">
                <a href="<?php echo $block->getUrl('customer/account') ?>">My Account</a>
            </li>
        </ul>

    <?php else: ?>
        <ul class="header links">
            <li class="authorization-link" data-label="or">
                <a href="<?php echo $block->getUrl('customer/account/login') ?>">Login</a>
            </li>
        </ul>
    <?php endif; ?>
</div>

This works if the cache is disabled but if cache is enabled then it always shows "Login".

How do I make it so that this isn't broken by the cache as site needs the cache enabled.

Answer 1

In your module create a helper class and query this from your template. This should work with all caches enabled.

template

   <?php

       $_helper = $this->helper('MyModule\Page\Helper\Data');
       $_loggedIn=false;

       if ($_helper->isLoggedIn()) {

            $_loggedIn=true;
       }
    ?>

    <div>

    <?php if ($_loggedIn): ?>
    logged in
    <php endif; ?

    </div>

helper Data.php

<?php
namespace MyModle\Page\Helper;

use Magento\Framework\App\Helper\AbstractHelper;

class Data extends AbstractHelper
{
    /**
     * @var \Magento\Framework\App\Http\Context
     */
    private $httpContext;

    public function __construct(
        \Magento\Framework\App\Helper\Context $context,
        \Magento\Framework\App\Http\Context $httpContext
    ) {
        parent::__construct($context);
        $this->httpContext = $httpContext;
    }

    public function isLoggedIn()
    {
        // https://magento.stackexchange.com/a/171126/7863
        //
        $isLoggedIn = $this->httpContext->getValue(\Magento\Customer\Model\Context::CONTEXT_AUTH);
        return $isLoggedIn;
    }
}

Answer 2

The most reliable way to avoid caching problems like this is to move the logic entirely onto the client side (in JavaScript). This is how Magento 2 handles all user-specific data: It renders the page with generic data, then fills in user-specific data (like the header account info) with JS, AJAX requests, and local storage of session data. The same is true for account pages, cart, and checkout.

This approach is more complex, it requires knowledge of a lot more of Magento's layers, but it is the only way to accomplish what you want, cleanly, without intentionally disabling caching in one way or another.

You can find a basic rundown of this approach for what you're trying to do in this answer by 10basetom: https://magento.stackexchange.com/a/171954/1905

This information may also be helpful: How to check that customer is logged in on frontend in Magento 2.1?

And for basic info on Magento's JS system in general, see the dev docs: http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/js_init.html