Magento 2, Change On Hover statt 'Click' für Mini Cart

In Magento 2. Für Mini-Cart und Store-Switcher werden sie mit einem Klick als Dropdown-Liste angezeigt. So ändern Sie beim Hover anstelle von "Klicken".

Ich hatte es mit jquery trigger click versucht, aber es funktioniert nicht.

Verwenden Sie in der Datei magento\vendor\magento\module-checkout\view\frontend\templates\cart\minicart.phtml(oder einer Überschreibung magento\app\design\frontend\Custom\YourTheme\Magento_Checkout\templates\cart\minicart.phtml) im data-mage-initAttribut Folgendes:

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

und entfernen "timeout": "2000"

Beispielcode:

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

Dies kann mithilfe der data-mage-initMagento-Funktionalität des nativen Attributs erfolgen. Solange Sie das Ereignis einschließen, können Sie eine Reihe anderer Attribute definieren, z.

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

Es gibt mehr davon, die durch die Magento-Vorlagen verstreut sind. In diesem Beispiel könnte das folgende .block-minicartElement in der app/design/frontend/[vendor]/theme/Magento_Checkout/templates/cart/minicart.phtmlVorlage enthalten sein (ungefähr Zeile 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":[]}}'>

Machen minicart.phtml Struktur wie folgt

Standardstruktur

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

Fügen Sie unten div direkt oben hinzu

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

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

Entfernen Sie den folgenden Code aus dem 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":[]}}'

Fügen Sie den folgenden Js-Code zu minicart.phtml hinzu

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

Jetzt wird der Minicart-Inhalt beim Klicken mit der Maus angezeigt.

Lassen Sie mich wissen, wenn Sie ein Problem haben.

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

Überschreiben von

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>

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

Antwort 5 ist die richtige Antwort. Mit dem Timeout können Sie jedoch festlegen, wie lange der Mini-Wagen nach dem Verlassen der Maus sichtbar bleibt. Der Standardwert ist 500, aber ich habe Macken gesehen, als ich ihn weggelassen habe. Das Setzen auf "Timeout": "200" scheint für mich gut zu funktionieren. Das Hinzufügen von Inline-JS wie in den Antworten 1 und 3 sollte vermieden werden.

Der obige Code funktioniert gut 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>

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

Dieser Code funktioniert auch zu gut. Sie benötigen ein css wie hinzufügen , .minicart-wrapper.active .ui-dialog.ui-widget.ui-widget-content.ui-Ecke-all.ui-front.mage-Drop - Down-dialog {display: Block wichtig ;; } Sie erhalten ein gutes Ergebnis.

Vielen Dank