7

In magento 2. For mini cart and store switcher, they are dropdown with click. How to change on hover instead of 'click'.

I had tried with jquery trigger click, but It don't work.

15

In the file magento\vendor\magento\module-checkout\view\frontend\templates\cart\minicart.phtml (or an override magento\app\design\frontend\Custom\YourTheme\Magento_Checkout\templates\cart\minicart.phtml) in the data-mage-init attribute use the following:

"triggerEvent": "hover"
"closeOnMouseLeave": true

and remove "timeout": "2000"

Example code:

<div class="block block-minicart empty"
         data-role="dropdownDialog"
         data-mage-init='{"dropdownDialog":{
            "triggerEvent" : "hover",
            "appendTo":"[data-block=minicart]",
            "triggerTarget":".showcart",
            "closeOnMouseLeave": true,
            "closeOnEscape": true,
            "triggerClass":"active",
            "parentClass":"active",
            "buttons":[]}}'>
        <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
            <!-- ko template: getTemplate() --><!-- /ko -->
        </div>
        <?php echo $block->getChildHtml('minicart.addons'); ?>
    </div>
4

This can be done using the native data-mage-init attribute's magento functionality. As long as you include the event you can define a number of other attributes such as:

  1. closeOnMouseLeave
  2. closeOnEscape
  3. triggerClass
  4. parentClass
  5. timeout
  6. triggerTarget

There are more of these that are littered through the magento templates. So for this example, you could have the following ont he .block-minicart element in the app/design/frontend/[vendor]/theme/Magento_Checkout/templates/cart/minicart.phtml template (roughly line 40):

<div class="block block-minicart empty"
             data-role="dropdownDialog"
             data-mage-init='{"dropdownDialog":{
                "appendTo":"[data-block=minicart]",
                "triggerTarget":".showcart",
                "triggerEvent":"hover",
                "timeout": "1000",
                "closeOnMouseLeave": true,
                "closeOnEscape": true,
                "triggerClass":"active",
                "parentClass":"active",
                "buttons":[]}}'>
3

Make minicart.phtml structure like this

Default structure

<div data-block="minicart" class="minicart-wrapper">
<!--- Content --------> 
</div>

Add below div just above

<div data-block="minicart" class="minicart-wrapper"> to minicart.phtml

<div class="container">
    <div data-block="minicart" class="minicart-wrapper">
        <!--- Content --------> 
    </div>
</div>

Remove below code from block block-minicart empty div

data-mage-init='{"dropdownDialog":{
                "appendTo":"[data-block=minicart]",
                "triggerTarget":".showcart",
                "timeout": "2000",
                "closeOnMouseLeave": false,
                "closeOnEscape": true,
                "triggerClass":"active",
                "parentClass":"active",
                "buttons":[]}}'

Add below Js code to minicart.phtml

<script type="text/javascript">
    require([
        "jquery",
        "mage/mage"
    ], function ($) {
        $(document).ready(function () {
            $('.container').hover(function () {
                $(this).children('.minicart-wrapper,.action showcart').addClass("active");
                $(this).children('.ui-dialog ui-widget ui-widget-content ui-corner-all ui-front mage-dropdown-dialog').show();

            }, function () {
                $(this).children('.minicart-wrapper,.action showcart').removeClass("active");
                $(this).children('.ui-dialog ui-widget ui-widget-content ui-corner-all ui-front mage-dropdown-dialog').hide();
            });
        });
    });
</script>

Now minicart content display on hover insted of on click.

Let me know if you have any issue.

2

magento\vendor\magento\module-checkout\view\frontend\templates\cart\minicart.phtml

Override By

magento\app\design\frontend\Custom\YourTheme\Magento_Checkout\templates\cart\minicart.phtml

<div class="container">
<div data-block="minicart" class="minicart-wrapper">
    <a class="action showcart" href="<?php /* @escapeNotVerified */ echo $block->getShoppingCartUrl(); ?>"
       data-bind="scope: 'minicart_content'">
        <span class="text"><?php /* @escapeNotVerified */ echo __('My Cart'); ?></span>
        <span class="counter qty empty"
              data-bind="css: { empty: !!getCartParam('summary_count') == false }, blockLoader: isLoading">
            <span class="counter-number"><!-- ko text: getCartParam('summary_count') --><!-- /ko --></span>
            <span class="counter-label">
            <!-- ko if: getCartParam('summary_count') -->
                <!-- ko text: getCartParam('summary_count') --><!-- /ko -->
                <!-- ko i18n: 'items' --><!-- /ko -->
            <!-- /ko -->
            </span>
        </span>
    </a>
    <?php if ($block->getIsNeedToDisplaySideBar()): ?>
        <div class="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>
            <?php echo $block->getChildHtml('minicart.addons'); ?>
        </div>
    <?php endif ?>
    <script>
        window.checkout = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getConfig()); ?>;
    </script>
    <script type="text/x-magento-init">
    {
        "[data-block='minicart']": {
            "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
        },
        "*": {
            "Magento_Ui/js/block-loader": "<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
        }
    }
    </script>
</div>
</div>
<script type="text/javascript">
    require([
        "jquery",
        "mage/mage"
    ], function ($) {
        $(document).ready(function () {
            $('.container').hover(function () {
                $(this).children('.minicart-wrapper,.action showcart').addClass("active");
                $(this).children('.ui-dialog ui-widget ui-widget-content ui-corner-all ui-front mage-dropdown-dialog').show();

            }, function () {
                $(this).children('.minicart-wrapper,.action showcart').removeClass("active");
                $(this).children('.ui-dialog ui-widget ui-widget-content ui-corner-all ui-front mage-dropdown-dialog').hide();
            });
        });
    });
</script>
  • It working for me. <script type="text/javascript"> require([ "jquery", "mage/mage" ], function ($) { $(document).ready(function () { $('.container').hover(function () { $(this).find('.minicart-wrapper,.action.showcart').addClass(‌​"active"); $(this).find('.ui-widget-content').show(); }, function () { $(this).find('.minicart-wrapper,.action.showcart').removeCla‌​ss("active"); $(this).find('.ui-widget-content').hide(); }); }); }); </script> – Mr Tim Dec 21 '16 at 3:45
  • I added above code but its not working. – Jai Dec 28 '16 at 10:51
  • @Jal you can check my answer. – Suresh Chikani Jul 6 '17 at 12:35
1
<div class="block block-minicart empty"
     data-role="dropdownDialog"
     data-mage-init='{"dropdownDialog":{
        "triggerEvent" : "hover",
        "appendTo":"[data-block=minicart]",
        "triggerTarget":".showcart",
        "timeout": "200",
        "closeOnMouseLeave": true,
        "closeOnEscape": true,
        "triggerClass":"active",
        "parentClass":"active",
        "buttons":[]}}'>
    <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
        <!-- ko template: getTemplate() --><!-- /ko -->
    </div>
    <?php echo $block->getChildHtml('minicart.addons'); ?>
</div>

Answer #5 is the correct answer however, the Timeout can be used to set how long the mini cart stays visible after mouse leave. The default is 500, but I've seen quirks in leaving it out. Setting it to "timeout": "200" seems to work fine for me. Adding inline JS as in Answers #1 & #3 should be avoided.

  • Welcome to SE. Its better to add code in your answer rather then giving reference to it. – Priyank May 4 '18 at 16:15
1

The Above code works fine in 2.2.4

<div class="block block-minicart empty"
     data-role="dropdownDialog"
     data-mage-init='{"dropdownDialog":{
        "triggerEvent" : "hover",
        "appendTo":"[data-block=minicart]",
        "triggerTarget":".showcart",
        "timeout": "200",
        "closeOnMouseLeave": true,
        "closeOnEscape": true,
        "triggerClass":"active",
        "parentClass":"active",
        "buttons":[]}}'>
    <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
        <!-- ko template: getTemplate() --><!-- /ko -->
    </div>
    <?php echo $block->getChildHtml('minicart.addons'); ?>
</div>
  • +1 Works like Charm. – anonymous May 31 '18 at 13:17
0
<div class="container">
<div data-block="minicart" class="minicart-wrapper">
    <a class="action showcart" href="<?php /* @escapeNotVerified */ echo $block->getShoppingCartUrl(); ?>"
       data-bind="scope: 'minicart_content'">
        <span class="text"><?php /* @escapeNotVerified */ echo __('My Cart'); ?></span>
        <span class="counter qty empty"
              data-bind="css: { empty: !!getCartParam('summary_count') == false }, blockLoader: isLoading">
            <span class="counter-number"><!-- ko text: getCartParam('summary_count') --><!-- /ko --></span>
            <span class="counter-label">
            <!-- ko if: getCartParam('summary_count') -->
                <!-- ko text: getCartParam('summary_count') --><!-- /ko -->
                <!-- ko i18n: 'items' --><!-- /ko -->
            <!-- /ko -->
            </span>
        </span>
    </a>
    <?php if ($block->getIsNeedToDisplaySideBar()): ?>
        <div class="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>
            <?php echo $block->getChildHtml('minicart.addons'); ?>
        </div>
    <?php endif ?>
    <script>
        window.checkout = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getConfig()); ?>;
    </script>
    <script type="text/x-magento-init">
    {
        "[data-block='minicart']": {
            "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
        },
        "*": {
            "Magento_Ui/js/block-loader": "<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
        }
    }
    </script>
</div>
</div>
<script type="text/javascript">
    require([
        "jquery",
        "mage/mage"
    ], function ($) {
        $(document).ready(function () {
            $('.container').hover(function () {
                $(this).children('.minicart-wrapper,.action showcart').addClass("active");
                $(this).children('.ui-dialog ui-widget ui-widget-content ui-corner-all ui-front mage-dropdown-dialog').show();

            }, function () {
                $(this).children('.minicart-wrapper,.action showcart').removeClass("active");
                $(this).children('.ui-dialog ui-widget ui-widget-content ui-corner-all ui-front mage-dropdown-dialog').hide();
            });
        });
    });
</script>

This code also working too fine . You need to add a css like , .minicart-wrapper.active .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.mage-dropdown-dialog { display: block !important; } You will get an good result.

Thanks

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.