4

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.

4 Answers 4

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>
1

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
            }
        }
    }
};
1
  • I like this answer, it's not overriding any core files and is using Magento's recommended approach for extending JavaScript, i.e. mixins. For my situation, I changed the if condition to if (!this.element.hasClass('block-minicart') || window.innerWidth >= 768). Thanks!
    – Holly
    Nov 14, 2019 at 10:42
0

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.

2
  • We use Bootstrap for responsiveness and I've found that mixing jQuery and Bootstrap breakpoints doesn't always work very well. I managed to fix it using a slightly "hacky" method but it works perfectly! Will provide my solution as an answer.
    – 1stMainDev
    Aug 22, 2018 at 9:22
  • Yes Please post your solution that will help others in future. Aug 22, 2018 at 9:26
0

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.