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

7

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.

magento2  mini-cart  magento-2.1.2  store-switcher 
— Herr Tim
quelle
— Ankit Shah
Vielen Dank, aber es ist Magento 1.9 nicht Magento 2.0
— Herr Tim
Bitte überprüfen Sie die Antwort, wenn funktioniert :)
— Ankit Shah

Antworten:

16

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>
— omelandr
quelle
4

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":[]}}'>
— Richard Cripps
quelle
3

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.

— Suresh Chikani
quelle
@ SH Patel +1 für Sie :)
— Nikunj Vadariya
2

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>
— Ankit Shah
quelle
Es funktioniert für mich. <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>
— Herr Tim
Ich habe den obigen Code hinzugefügt, aber er funktioniert nicht.
— Jai
@ Jal du kannst meine Antwort überprüfen.
— Suresh Chikani
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>

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.

— Das Q
quelle
Willkommen bei SE. Es ist besser, Code in Ihre Antwort einzufügen, als darauf zu verweisen.
— Priyank
1

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>
— Priya
quelle
+1 Funktioniert wie Charm.
— anonym
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>

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

— Priya
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.