Magento 2: How to check that customer is logged in on frontend?

create js file and check using below code

define([
    'uiComponent',
    'Magento_Customer/js/model/customer'
], function (
    Component,
    customer
) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'CustomModule/custom-file'
        },

        /**
         * Customer is logged in
         *
         * @return {boolean}
         */
        isLoggedIn: function () {
            return customer.isLoggedIn();
        }
    });
});

check this in custom-file.html

<!-- ko if: isLoggedIn() -->
    <div>Customer is logged in</div>
<!-- /ko -->

You can create default.xml file here in your module

app/code/Vendor/Module/view/frontend/layout/default.xml

Content for this file is..

<?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>
        <referenceContainer name="header-wrapper">
            <referenceBlock name="minicart">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="minicart_content" xsi:type="array">
                                <item name="config" xsi:type="array">
                                    <item name="template" xsi:type="string">Vendor_Module/minicart/content</item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </referenceBlock>
        </referenceContainer>
    </body>
</page>

Now you need to create content.html file here on this path

app/code/Vendor/Module/view/frontend/web/template/minicart/content.html

You can copy content of this default Vendor file there and comment button code

vendor/magento/module-checkout/view/frontend/web/template/minicart/content.html

If you want to add condition in that button then you need to create one requirejs-config.js file here on this location in your custom module..

app/code/Vendor/Module/view/frontend/requirejs-config.js

Content for this file is..

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/minicart': {
                'Vendor_Module/js/view/minicart-mixin': true
            }
        }
    }
};

Now create one minicart-mixin.js file here on this location

app/code/Vendor/Module/view/frontend/web/js/view/minicart-mixin.js

Content for this file is..

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

    var mixin = {
        isCustomerLoggedIn: function () {
            var customer = customerData.get('customer');
            if(customer().firstname){
                return true;
            }else{
                return false;
            }
        }
    };

    return function (target) {
        return target.extend(mixin);
    };
});
  • Here in this JS file I've added isCustomerLoggedIn() function there you can add your condition here based on your requirement to show hide your button.

And you can add condition in your content.html file like this

app/code/Vendor/Module/view/frontend/web/template/minicart/content.html

Content for this file is..

<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="block-title">
    <strong>
        <span class="text"><!-- ko i18n: 'My Cart' --><!-- /ko --></span>
        <span
            class="qty empty"
            data-bind="css: { empty: !!getCartParam('summary_count') == false },
                       attr: { title: $t('Items in Cart') }">
            <!-- ko text: getCartParam('summary_count') --><!-- /ko -->
        </span>
    </strong>
</div>

<div class="block-content">
    <button type="button"
            id="btn-minicart-close"
            class="action close"
            data-action="close"
            data-bind="attr: { title: $t('Close') }">
        <span><!-- ko i18n: 'Close' --><!-- /ko --></span>
    </button>

    <!-- ko if: getCartParam('summary_count') -->
        <div class="items-total">
            <span class="count"><!-- ko text: getCartParam('summary_count') --><!-- /ko --></span>
            <!-- ko if: getCartParam('summary_count') == 1 -->
                <!-- ko i18n: 'item' --><!-- /ko -->
            <!-- /ko -->
            <!-- ko if: getCartParam('summary_count') > 1 -->
                <!-- ko i18n: 'items' --><!-- /ko -->
            <!-- /ko -->
        </div>

        <!-- ko if: getCartParam('possible_onepage_checkout') -->
            <!-- ko foreach: getRegion('subtotalContainer') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!-- /ko -->
        <!-- /ko -->

        <!-- ko foreach: getRegion('extraInfo') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!-- /ko -->

        <!-- ko if: getCartParam('possible_onepage_checkout') -->
        <div class="actions">
            <div class="primary">
                <!-- ko if: (isCustomerLoggedIn()) -->
                    <button
                            id="top-cart-btn-checkout"
                            type="button"
                            class="action primary checkout"
                            data-action="close"
                            data-bind="
                                attr: {
                                    title: $t('Proceed to Checkout (Logged In)')
                                },
                                click: closeMinicart()
                            "
                            translate="'Proceed to Checkout (Logged In)'"
                    />
                <!--/ko-->

                <!-- ko ifnot: (isCustomerLoggedIn()) -->
                    <button
                            id="top-cart-btn-checkout"
                            type="button"
                            class="action primary checkout"
                            data-action="close"
                            data-bind="
                                attr: {
                                    title: $t('Proceed to Checkout (Not Logged In)')
                                },
                                click: closeMinicart()
                            "
                            translate="'Proceed to Checkout (Not Logged In)'"
                    />
                <!--/ko-->
                <div data-bind="html: getCartParam('extra_actions')"></div>
            </div>
        </div>
        <!-- /ko -->
    <!-- /ko -->

    <!-- ko if: getCartParam('summary_count') -->
    <strong class="subtitle"><!-- ko i18n: 'Recently added item(s)' --><!-- /ko --></strong>
    <div data-action="scroll" class="minicart-items-wrapper">
        <ol id="mini-cart" class="minicart-items" data-bind="foreach: { data: getCartParam('items'), as: 'item' }">
            <!-- ko foreach: $parent.getRegion($parent.getItemRenderer(item.product_type)) -->
                <!-- ko template: {name: getTemplate(), data: item, afterRender: function() {$parents[1].initSidebar()}} --><!-- /ko -->
            <!-- /ko -->
        </ol>
    </div>
    <!-- /ko -->

    <!-- ko ifnot: getCartParam('summary_count') -->
        <strong class="subtitle empty" data-bind="visible: closeSidebar()">
            <!-- ko i18n: 'You have no items in your shopping cart.' --><!-- /ko -->
        </strong>
        <!-- ko if: getCartParam('cart_empty_message') -->
            <p class="minicart empty text"><!-- ko text: getCartParam('cart_empty_message') --><!-- /ko --></p>

            <div class="actions">
                <div class="secondary">
                    <a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
                        <span><!-- ko text: $t('View and edit cart') --><!-- /ko --></span>
                    </a>
                </div>
            </div>
        <!-- /ko -->
    <!-- /ko -->

    <!-- ko if: getCartParam('summary_count') -->
    <div class="actions">
        <div class="secondary">
            <a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
                <span><!-- ko i18n: 'View and edit cart' --><!-- /ko --></span>
            </a>
        </div>
    </div>
    <!-- /ko -->

    <div id="minicart-widgets" class="minicart-widgets">
        <!-- ko foreach: getRegion('promotion') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!-- /ko -->
    </div>
</div>
<!-- ko foreach: getRegion('sign-in-popup') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->

Hope this will help you!