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

Question

I asked a question about adding different class if customer is logged in or not logged : Add CSS class to body if the customer is logged in magento 2 the problem is that i need more explanation to try the solution of pawan so can you please help me and thanks in advance

score 1 · Answer 1 · answered Oct 16 '18 at 08:26

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>

thanks for your replay *any phtml ?? – Developper Magento Oct 16 '18 at 08:39 — Developper Magento, Oct 16 '18 at 08:39

Draze · Answer 2 · 2018-10-16T09:26:46.323

0

This is pawan's solution:

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" );
        }
    });
});

Like above, he checked if the customer is logged in or not by using variable isLoggedIn.

var isLoggedIn = jQuery('.authorization-link > a').attr('href').indexOf('/login')<0;

So, he finds string /login from <a href> tag, if the customer logged in, the variable returns true, otherwise it returns false.

if(isLoggedIn){
     jQuery( ".body" ).addClass( "customer-welcome" );
}

And if it returns true, it will add the class to the body.

Updated

You need to add this js to every pages in frontend like follow:

1) Create js file <vendor>/<module>/view/frontend/web/js/yourjs.js

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

2) Declare yourjs.js with requirejs-config.js file

Create requirejs-config.js file in <vendor>/<module>/view/frontend

with content below:

var config = {

// When load 'requirejs' always load the following files also
  deps: [
    "js/yourjs"
  ]
};

3) Create default.xml in <vendor>/<module>/view/frontend/layout

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Vendor_Module::js/yourjs.js"/>
    </head>
</page>

edited Oct 16 '18 at 09:26

answered Oct 16 '18 at 08:42

Draze

41
4

so the class is added automatically i don't have to define a css class in css document ?? and where to put this code jquery ??? – Developper Magento Oct 16 '18 at 08:45
Yes you still need to define the style of the class, this code will just add class for body but not its style – Draze Oct 16 '18 at 08:47
and where to put this code please ??? * – Developper Magento Oct 16 '18 at 08:49
and .addClass("customer-welcome" ) will be .addClass ("name of my css class ") ???? – Developper Magento Oct 16 '18 at 08:50
yes, it will be .addClass('your_class_name') – Draze Oct 16 '18 at 09:11
ok but where to put this jqyery code please – Developper Magento Oct 16 '18 at 09:20
check my update above – Draze Oct 16 '18 at 09:26
thanks Draze this is very expalined just one question this override have to be under my theme ? – Developper Magento Oct 16 '18 at 09:36
when you trying to override magento core, you should do it by create a custom module, so yes, it should be under your custom module – Draze Oct 16 '18 at 09:42
3

This is not the good approach because as per the question, the class needs to be added if the customer is logged in. But according to the answer, there is no check for customer state rather you are adding the class based on the DOM element class. Suppose in future that DOM element is removed or class is changed then your code will not work. – Anshu Mishra Oct 16 '18 at 09:58

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

2 Answers2

Updated