0

How to hide Proceed to Checkout button in the mini cart section magneto 2 from custom module based on my condition.

For example: if the custom session data is set then hide - Proceed To Checkout
if the custom session data is not set then show - Proceed To Checkout

1

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',
    'underscore',
    'sidebar',
    'mage/translate',
    'mage/dropdown'
], function (Component, customerData, $, ko, _) {
    'use strict';

    var mixin = {
        isButtonEnable: function () {
            /*You can add your condition here based on your requirements.*/
            return true;
        }
    };

    return function (target) {
        return target.extend(mixin);
    };
});
  • Here in this JS file I've added isButtonEnable() 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 © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="block-title">
    <strong>
        <span class="text" translate="'My Cart'"/>
        <span
            class="qty empty"
            text="getCartParam('summary_count')"
            data-bind="css: { empty: !!getCartParam('summary_count') == false },
                       attr: { title: $t('Items in Cart') }">
        </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 translate="'Close'"/>
    </button>

    <if args="getCartParam('summary_count')">
        <div class="items-total">
            <span class="count" if="maxItemsToDisplay < getCartLineItemsCount()" text="maxItemsToDisplay"/>
            <translate args="'of'" if="maxItemsToDisplay < getCartLineItemsCount()"/>
            <span class="count" text="getCartParam('summary_count')"/>
                <!-- ko if: (getCartLineItemsCount() === 1) -->
                    <span translate="'Item in Cart'"/>
                <!--/ko-->
                <!-- ko if: (getCartLineItemsCount() > 1) -->
                    <span translate="'Items in Cart'"/>
                <!--/ko-->
        </div>

        <each args="getRegion('subtotalContainer')" render=""/>
        <each args="getRegion('extraInfo')" render=""/>

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

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

    <ifnot args="getCartParam('summary_count')">
        <strong class="subtitle empty"
                data-bind="visible: closeSidebar()"
                translate="'You have no items in your shopping cart.'"
        />
        <if args="getCartParam('cart_empty_message')">
            <p class="minicart empty text" text="getCartParam('cart_empty_message')"/>
            <div class="actions">
                <div class="secondary">
                    <a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
                        <span translate="'View and Edit Cart'"/>
                    </a>
                </div>
            </div>
        </if>
    </ifnot>

    <div class="actions" if="getCartParam('summary_count')">
        <div class="secondary">
            <a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
                <span translate="'View and Edit Cart'"/>
            </a>
        </div>
    </div>

    <div id="minicart-widgets" class="minicart-widgets" if="getRegion('promotion').length">
        <each args="getRegion('promotion')" render=""/>
    </div>
</div>
<each args="getRegion('sign-in-popup')" render=""/>

I've added condition in above file in button

<if args="isButtonEnable()">
    <button
            id="top-cart-btn-checkout"
            type="button"
            class="action primary checkout"
            data-action="close"
            data-bind="
                attr: {
                    title: $t('Proceed to Checkout')
                },
                click: closeMinicart()
            "
            translate="'Proceed to Checkout'"
    />
</if>

enter image description here

You can download this module as well here

Hope this will help you!

  • Thanks for your answer i will try and update you but one small query @krishan can u suggest how to keep conditions here for that button like if the session data is set...etc.. – Nagaraju K Nov 14 '19 at 8:54
  • If customer is logged in then you want to show that button otherwise not ? Am I right here ? – Kishan Savaliya Nov 14 '19 at 8:55
  • we are storing some data in the session variable in our custom helper (custom module). if that value is set then -> hide mini cart button. If not set then show mini cart button. – Nagaraju K Nov 14 '19 at 8:58
  • Okay give me few mins I'll update my answer – Kishan Savaliya Nov 14 '19 at 8:59
  • 1
1

You can overrirde content.html by requirejs-config.js in your module.

app/code/{Vendor}/{Module_Name}/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_Checkout/template/minicart/content.html':
                'Vendor_ModuleName/template/minicart/content.html'
        }
    }
};

copy content.html from

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

paste to

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

Then, remove this below code from your module file :

And then remove this below code.

<button
   id="top-cart-btn-checkout"
   type="button"
   class="action primary checkout"
   data-action="close"
   data-bind="
   attr: {
   title: $t('Proceed to Checkout')
   },
   click: closeMinicart()
   "
   translate="'Proceed to Checkout'"
   />

Now, setup upgrade and flush cache.

php bin/magento s:up
php bin/magento c:f

Output :

enter image description here

  • 1
    Thanks @rohan it seems working. but let me check from my end and getback to you – Nagaraju K Nov 14 '19 at 13:26
0

1) override

vendor/magento/module-checkout/view/frontend/web/template/minicart/content.html to your theme folder

and remove

                       <button
                    id="top-cart-btn-checkout"
                    type="button"
                    class="action primary checkout"
                    data-action="close"
                    data-bind="
                        attr: {
                            title: $t('Proceed to Checkout')
                        },
                        click: closeMinicart()
                    "
                    translate="'Proceed to Checkout'"
            />

block of code and check after running php bin/magento se:up command

or second simply add css for #top-cart-btn-checkout{ display:none}

  • thanks for quick reply. but i would like to do it from my custom module can u advise? – Nagaraju K Nov 14 '19 at 7:41
  • No you have to change in your theme folder – Rutvee Sojitra Nov 14 '19 at 7:51

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.