Quick-View-Element - warum gibt es dort keinen Close-Button?

Shopware 5 Allgemein
1

Hallo liebe Leute,

ich hab da mal ne Frage zum Quick-View-Element. Kann man dort eine Einstellung vornehmen, dass ein Close-Button z.B. oben rechts angezeigt wird, der dann das Element schließt?

Das Problem stellt sich besonders im Mobile-View: hier nimmt das Quick-View-Overlay fast den ganzen Bildschirm ein und der User muss auf den schwarzen Shop-Overlay “neben” dem Quick-View-Element tippen. Mich rief jetzt tatsächlich ein Kunde an, der fragte, wie er das Fenster wieder schließen kann …

2

Hey Raschu, 

bin gerade am selben Problem dran und versuche es über die vorhanden Modal close oder andere Javascript Komponenten zu lösen.
Ich will da ungern extra ein JS dafür schreiben wollen / müssen. 

We will see.

Gruß
Artij

3

Hier mal meine Lösung nach tagelangem stöbern und ausprobieren.
Ohne Gewähr aber funktioniert:

  1. im eigenen theme folgenden Ordner anlegen: mytheme\widgets\swag_emotion_advanced

  2. darin die Datei index.tpl mit folgendem Inhalt anlegen (Bsp):

    {extends file=“parent:widgets/swag_emotion_advanced/index.tpl”}

    {block name=“emotion_advanced_quick_view_content”}

     {$smarty.block.parent}

    {/block}

Dadurch wird die Quelldatei im Plugin SwagEmotionAdvanced überschrieben, die den Inhalt des QuickView-Elements erzeugt.

  1. button mit css stylen:

    #button-closeQuickView {
    float: right;
    .unitize(margin-top, 10);
    }

  2. EventHandler in eigener js-Datei ergänzen (meine sieht dann so aus und kommt ins Verzeichnis eigenestheme\frontend_public\source\js:)

    $.overridePlugin(‘swQuickView’, {
    /**
    * Registers all necessary events.
    */
    registerEvents: function() {
    var me = this;

         $.subscribe(me.getEventName('plugin/swProductSlider/onLoadItemsSuccess'), $.proxy(me.trackProducts, me));
     $.subscribe(me.getEventName('plugin/swInfiniteScrolling/onFetchNewPageFinished'), $.proxy(me.trackProducts, me));
     $.subscribe(me.getEventName('plugin/swInfiniteScrolling/onLoadPreviousFinished'), $.proxy(me.trackProducts, me));
     $.subscribe(me.getEventName('plugin/swListingActions/onGetFilterResultFinished'), $.proxy(me.trackProducts, me));
     $.subscribe(me.getEventName('plugin/swLastSeenProducts/onCreateProductList'), $.proxy(me.trackProducts, me));

     me.$el.on(me.getEventName('click'), me.opts.productLinkSelector, $.proxy(me.onProductLink, me));

     me._on($document, 'keydown', $.proxy(me.onKeyPress, me));

     me.$quickView.on(me.getEventName('click'), '[data-view="' + me.opts.nextViewState + '"]', $.proxy(me.showNext, me));
     me.$quickView.on(me.getEventName('click'), '[data-view="' + me.opts.prevViewState + '"]', $.proxy(me.showPrev, me));

     me.$quickView.on(me.getEventName('click'), '#button-closeQuickView', $.proxy(me.hideQuickView, me));

     me.$quickView.on(me.getEventName('click'), me.overlaySelector, $.proxy(me.hideQuickView, me));
     me.$quickView.on(me.getEventName('touchstart'), me.overlaySelector, $.proxy(me.hideQuickView, me));
     me.$quickView.on(me.getEventName('touchmove'), me.overlaySelector, function(event) {
         event.preventDefault();
         event.stopPropagation();
         event.cancelBubble = true;
     });
 },

    });

Entscheidend ist die Zeile in der Mitte des Codes:

me.$quickView.on(me.getEventName('click'), '#button-closeQuickView', $.proxy(me.hideQuickView, me));

diese setzt den Eventhandler auf den Button.

  1. in der theme.php eintragen:

    protected $injectBeforePlugins = false;

Dadurch überschreibt das eigene theme das Plugin.

Und dort natürlich auch die js-Datei einbinden:

protected $javascript = [.....];

Die Einbindung des Eventhandler geht bestimmt auch eleganter als gleich die ganze Plugin-Funktion zu überschreiben. Vielleicht hat ja da jemand eine bessere Idee?

Ergebnis sieht dann so aus:

306×573 10.3 KB

4

Ja diesen Lösungsansatz will ich gerade vermeiden.

Bei den Schritten 1-3 bin ich deiner Meinung so vorzugehen.
Jedoch würde ich nicht über ID trotz JS gehen sondern eine zusätzliche eigene CSS Klasse im camelCase anlegen und diese dann bearbeiten.

Ich versuche mit dem JS einen anderen Ansatz und gebe die Lösung dann weiter…

Gruß
Artij