Magento – Disable minicart dropdown on mobile devices

magento2mini-cartmobile-device

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.

Best Answer

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>
Related Topic