Add CSS class to body if the customer is logged in magento 2

Question

i want to add css in top menu if the customer is logged in. I tried this code in requirejs-config.js :

var htmlBody = $("body[data-container='body']");
if ($(".customer-welcome").length) {
    htmlBody.addClass("customer-logged-in");
} else {
    htmlBody.addClass("customer-logged-out");
};

But no result so please can you help me to find a better solution and thanks in advance.

Pawan thanks for your replay but i did not understand where to put this code and do i have to add 2 class in a css document and what's the meaning of "change the class name if the theme is not luma " ? please more explanation and really thanks a lot for your replay — Developper Magento, Oct 16 '18 at 07:56

Pawan · Answer 1 · 2018-10-12T16:37:02.117

1

If you want to avoid $objectManager directly, You can do it by JQuery

require(['jquery', 'jquery/ui'], function($){
  jQuery(document).ready( function() {
    var isLoggedIn = jQuery('.authorization-link > a').attr('href').indexOf('/login')<0;
        if(isLoggedIn){
            jQuery( ".body" ).addClass( "customer-welcome" );
        }
  });
});

IF isLoggedIn is true, it will add class to body.

Note: You may need to change class name, if it is not Luma Theme

Tested and Working. Hope above will Help!

Hint From Answer of Comment

edited Oct 12 '18 at 16:37

answered Oct 12 '18 at 16:25

Pawan

5,856
2
14
36

can you please explain more where to put this code and do i have to create 2 class in css document and thanks for your replay – Developper Magento Oct 16 '18 at 07:46
please answer me – Developper Magento Oct 16 '18 at 07:50
please can you explain what do you mean by changing class name ??? – Developper Magento Oct 16 '18 at 07:53
Add above code to footer.phtml – Pawan Oct 16 '18 at 10:22
Which theme you are using ? – Pawan Oct 16 '18 at 10:23
shop4u is the name of theme that i am using – Developper Magento Oct 16 '18 at 12:21
Have you tried my code in footer.phtml ? could you please share URL of website ? – Pawan Oct 16 '18 at 16:20
no not yet :( can you please tell me the exactly module that i have to pout this code under (module_theme?) or i just have to create a new module and excuse me for my question because i still new in magento – Developper Magento Oct 17 '18 at 08:40
This is jquery code, you can put it any phtml or JS file. No need of additional module. – Pawan Oct 17 '18 at 12:49
Even you can test in console. – Pawan Oct 17 '18 at 12:50
have you tried it again ? – Pawan Oct 18 '18 at 16:58
Simply alert(jQuery('.authorization-link > a').attr('href').indexOf('/login')<0); in both case in console – Pawan Oct 18 '18 at 17:10
I have checked for shop4u theme and it is working fine! – Pawan Oct 18 '18 at 17:10

score 1 · Answer 2 · answered Oct 12 '18 at 16:47

If you want to add to the different class to the body when the customer is logged out and logged in.

Create a custom module, which will add two custom layout handles, for example, customer_logged_out and customer_logged_in and add those handles to the layout.

Use the following code as the sample and modify it according to your requirement.

app/code/Anshu/Custom/Observer/AddHandles.php

<?php

namespace Anshu\Custom\Observer;

use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;
use Magento\Customer\Model\Session as CustomerSession;

class AddHandles implements ObserverInterface
{
    protected $_customerSession;

    public function __construct(CustomerSession $_customerSession)
    {
        $this->_customerSession = $_customerSession;
    }

    public function execute(Observer $observer)
    {
        $layout = $observer->getEvent()->getLayout();

        //To check that customer is logout
        if (!$this->_customerSession->isLoggedIn())
        {
            $layout->getUpdate()->addHandle('customer_logged_out');
        }
    }
}

app/code/Anshu/Custom/view/frontend/layout/customer_logged_out.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <attribute name="class" value="my-class-test"/>
    </body>
</page>

Above code is for the logged out customer, similarly, you can do it for logged in the customer as well.

This worked for me, but it left out one step which people may not know to do, which is to add the file etc/events.xml to your custom module and use it to call the AddHandles.php observer. <event name="layout_load_before"><observer name="check_login_status" instance="[Custom]\[Module]\Observer\AddHandles" /></event> — TMax, Jul 08 '21 at 20:33

Greg · Answer 3 · 2018-10-12T15:41:11.727

Not tested, but try this:

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

if($customerSession->isLoggedIn()) {
    echo '<script type="text/javascript">',
  'jsfunction();',
  '</script>';
}
?>


<script type="text/javascript">
/// some code

    function jsfunction() {
        var htmlBody = $("body[data-container='body']");
        htmlBody.addClass("customer-logged-in");
    }

/// some code
</script>

I would not recommend using the object manager directly, use the dependency injection instead. The above is just an example...

score 0 · Answer 4 · answered Oct 12 '18 at 15:53

Try this:

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


<script>
$(document).onReady(){
  var isLoggedIn = "<?php echo $customerSession->isLoggedIn(); ?>";

  if(isLoggedIn == true){
    var htmlBody = $("body[data-container='body']");
    htmlBody.addClass("customer-logged-in");**strong text**
  }
}

</script>

Calls the function when the document is ready, and applies the defined class

also, backing up what bare feet said: you want to avoid using Object Manager where you can and should instead rely on dependency injection where you can. it would be better to define a block and call isLoggedIn from there, so +1 to him.

score 0 · Answer 5 · answered Oct 16 '18 at 08:24

Try this code in your phtml

<?php
 $obm = \Magento\Framework\App\ObjectManager::getInstance();
 $context = $obm->get('Magento\Framework\App\Http\Context');
 $isLoggedIn = $context->getValue(\Magento\Customer\Model\Context::CONTEXT_AUTH);
 $customerIsLogging = 0;
?>

<?php if($isLoggedIn): ?>
    $customerIsLogging = 1;
<?php else: ?>
    $customerIsLogging = 0;
<?php endif; ?>


<script type="text/javascript">
    require(['jquery'], function($){
        var isLoggedIn = '<?php echo $customerIsLogging ?>';
        var htmlBody = $("body[data-container='body']");
        if(isLoggedIn == 1){
            htmlBody.addClass("customer-logged-in");
        }else{
            htmlBody.addClass("customer-logged-out");
        }
    });
</script>

Add CSS class to body if the customer is logged in magento 2

5 Answers5

Linked