Disable minicart dropdown on mobile devices

Question

When on mobile devices, I want to display the cart icon on the navbar but on clicking, it should go directly to the cart page.

Answer 1

Managed to fix it by duplicating the .minicart-wrapper div inside of app/design/frontend/vendor_name/theme_name/Magento_Checkout/templates/cart/minicart.phtml

You also need to remove the "showcart" class from the tag immediately inside of #minicart-mobile. This will remove the dropdown functionality and redirect you to the cart page.

I've hidden the desktop or mobile minicarts (as required) using bootstrap's d-none classes but you can achieve the same result using traditional CSS media queries

Minicart Desktop

<div id="minicart-desktop" data-block="minicart" class="d-none d-lg-block minicart-wrapper align-self-center mt-0">
    <a class="showcart" href="<?= /* @escapeNotVerified */ $block->getShoppingCartUrl() ?>"
       data-bind="scope: 'minicart_content'">
        <span class="counter qty empty d-flex"
              data-bind="css: { empty: !!getCartParam('summary_count') == false }, blockLoader: isLoading">
            <span class="counter-number mx-auto"><!-- ko text: getCartParam('summary_count') --><!-- /ko --></span>
        </span>
    </a>
    <?php if ($block->getIsNeedToDisplaySideBar()): ?>
        <div class="minicart-container block block-minicart empty"
             data-role="dropdownDialog"
             data-mage-init='{"dropdownDialog":{
                "appendTo":"[data-block=minicart]",
                "triggerTarget":".showcart",
                "timeout": "2000",
                "closeOnMouseLeave": false,
                "closeOnEscape": true,
                "triggerClass":"active",
                "parentClass":"active",
                "buttons":[]}}'>
            <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
                <!-- ko template: getTemplate() --><!-- /ko -->
            </div>
            <?= $block->getChildHtml('minicart.addons') ?>
        </div>
    <?php endif ?>
    <script>
        window.checkout = <?= /* @escapeNotVerified */ $block->getSerializedConfig() ?>;
    </script>
    <script type="text/x-magento-init">
    {
        "[data-block='minicart']": {
            "Magento_Ui/js/core/app": <?= /* @escapeNotVerified */ $block->getJsLayout() ?>
        },
        "*": {
            "Magento_Ui/js/block-loader": "<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>"
        }
    }
    </script>
</div>

Minicart Mobile

<div id="minicart-mobile" data-block="minicart" class="d-lg-none d-xl-none minicart-wrapper align-self-center mt-0">
    <a class="" href="<?= /* @escapeNotVerified */ $block->getShoppingCartUrl() ?>"
       data-bind="scope: 'minicart_content'">
        <span class="counter qty empty d-flex"
              data-bind="css: { empty: !!getCartParam('summary_count') == false }, blockLoader: isLoading">
            <span class="counter-number mx-auto"><!-- ko text: getCartParam('summary_count') --><!-- /ko --></span>
        </span>
    </a>
    <?php if ($block->getIsNeedToDisplaySideBar()): ?>
        <div class="minicart-container block block-minicart empty"
             data-role="dropdownDialog"
             data-mage-init='{"dropdownDialog":{
                "appendTo":"[data-block=minicart]",
                "triggerTarget":".showcart",
                "timeout": "2000",
                "closeOnMouseLeave": false,
                "closeOnEscape": true,
                "triggerClass":"active",
                "parentClass":"active",
                "buttons":[]}}'>
            <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
                <!-- ko template: getTemplate() --><!-- /ko -->
            </div>
            <?= $block->getChildHtml('minicart.addons') ?>
        </div>
    <?php endif ?>
    <script>
        window.checkout = <?= /* @escapeNotVerified */ $block->getSerializedConfig() ?>;
    </script>
    <script type="text/x-magento-init">
    {
        "[data-block='minicart']": {
            "Magento_Ui/js/core/app": <?= /* @escapeNotVerified */ $block->getJsLayout() ?>
        },
        "*": {
            "Magento_Ui/js/block-loader": "<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>"
        }
    }
    </script>
</div>

Answer 2

The easiest way to disable mini cart dropdown on mobile devices is to use a mixin. Create or use an existing module with the following code.

app/code/MagePal/MinicartOpen/view/frontend/web/js/dropdown-mixin.js

define([
    'jquery'
], function($){
    return function(){
        $.widget('mage.dropdownDialog', $.mage.dropdownDialog, {
            open:function(){
                var $cartLink = $('div.minicart-wrapper a.showcart');

                if (!$('.action.nav-toggle').is(":visible") || !$cartLink.length){
                    return this._super();
                } else {
                    window.location.href = $cartLink.attr("href");
                }
            }
        });

        return $.mage.dropdownDialog;
    };
});

The above code will check to see if the mobile hamburger menu is visible and redirect to the cart page if visible.

app/code/MagePal/MinicartOpen/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'mage/dropdown': {
                'MagePal_MinicartOpen/js/dropdown-mixin': true
            }
        }
    }
};

Answer 3

If you are using luma theme classes then you can manage it by following code:

<script type="text/javascript">
    require(['jquery'], function($){
        $(document).ready(function(){
            var $window = $(window);
            function checkWidth() {
                var windowsize = $window.width();
                if (windowsize < 440) {
                    $('.action.showcart').unbind('click');
                }
                else{
                    $('.action.showcart').bind('click');
                }
            }

            checkWidth();
            $(window).resize(checkWidth);
        });
    });
</script>

I have added the above code to my phtml file you need to add this to your js file. Also here I mentioned the mobile device width(440). If the width is lower than 440 then minicart will not work and vice-versa.

Hope this helps!

Note: Code was tested on Luma theme.

Answer 4

I've made this into a Module for anyone that would like to use it!

Can be found here - https://github.com/joeyoung658/Magento2-DisableMoblieMiniCart

Based on @renon-stewart response!