1

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.

Improve this question
  • Did you try my solution ? – Pawan Oct 13 '18 at 7:00
  • 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 7:56
  • Did you get a chance to see my recent comments ? – Pawan Oct 20 '18 at 4:25
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

Improve this answer
  • 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 7:46
  • please answer me – Developper Magento Oct 16 '18 at 7:50
  • please can you explain what do you mean by changing class name ??? – Developper Magento Oct 16 '18 at 7: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
0

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...

Improve this answer
0

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.

Improve this answer
0

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.

Improve this answer
0

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>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.