Anzahl der im Warenkorb liegenden Produkte auch im Produktlisting anzeigen

mga · 13. Oktober 2022 um 14:11

Hallo Leute,

ich bräuchte Hilfe bei der Implementierung von folgendem:
Im Produktlisting, also eine NavigationPage, werden alle Produkte angezeigt, die wir verkaufen. Wenn ein Produkt im Warenkorb ist, soll oben auf der Produktkarte die Anzahl angezeigt, die im Warenkorb vorhanden ist.

Dazu habe ich folgendes ausprobiert:

Es so wie beim Header->Cart über ein JS Plugin zu machen. Da wird allerdings dann für jedes Produkt auf der Seite ein Request gemacht um die Daten zu bekommen und die twig-Datei neu zu rendern. Das führt nebenbei auch dazu, dass beim Füllen in den Warenkorb für jedes Produkt auf der Seite, ein weiterer Artikel des selben Produkts in den Warenkorb gelegt wird.
Cart über das NavigationPageLoadedEvent in die Extension der Seite platziert.
→ Das funktioniert, allerdings wird nur aktualisiert wenn die Seite neu geladen wird. Die Seite wird leider nicht neugeladen wenn der OffCanvas Cart geschlossen wird.

Das führt mich zur aktuellen Problematik. Ich würde vermutlich eher pragmatisch die zweite Option bevorzugen, also würde ich bei der JS Methode, die das wieder schließt noch ein Location.reload oder so machen. Ich habe dazu die OffCanvas und deren Unterklassen gefunden (vendor\shopware\storefront\Resources\app\storefront\src\plugin\offcanvas). Ich sehe aber nicht, wie, wann und wo diese close Methode vom Button "Weiter Einkaufen "aufgerufen wird.

Im Plugin OffCanvasCart wird sie auch nicht aufgerufen.

Hat jemand einen Tipp oder eine andere vernünftige Lösung?

abdullah · 13. Oktober 2022 um 16:06

Auf den „Weiter einkaufen“ Button ist ein EventListener hinzugefügt worden. Sobald man auf den Button klickt, wird der OffCanvas geschlossen.

siehe:

github.com

shopware/platform/blob/ffeb56ce180f448355dcb1b7e50d7135b43c58a7/src/Storefront/Resources/app/storefront/src/plugin/offcanvas/offcanvas.plugin.js#L216


      
                          this.close(delay);
                          // remove the event listener immediately to avoid multiple listeners
                          document.removeEventListener(BACKDROP_EVENT.ON_CLICK, onBackdropClick);
                      };
          
          
            document.addEventListener(BACKDROP_EVENT.ON_CLICK, onBackdropClick);
                  }
              }
          
          
    window.addEventListener('popstate', this.close.bind(this, delay), { once: true });
              const closeTriggers = document.querySelectorAll(`.${OFF_CANVAS_CLOSE_TRIGGER_CLASS}`);
              Iterator.iterate(closeTriggers, trigger => trigger.addEventListener(event, this.close.bind(this, delay)));
          }
          
          
/**
           * Remove all existing offcanvas from DOM
           * @private
           */
          _removeExistingOffCanvas() {
              const offCanvasElements = this.getOffCanvas();
              return Iterator.iterate(offCanvasElements, offCanvas => offCanvas.remove());

Wenn du nach dem Schließen des OffCanvas ein Reload durchführen willst, dann empfehle ich auf das Event onCloseOffcanvas zu lauschen und anschließend ein Reload durchzuführen.

github.com

shopware/platform/blob/ffeb56ce180f448355dcb1b7e50d7135b43c58a7/src/Storefront/Resources/app/storefront/src/plugin/offcanvas/offcanvas.plugin.js#L107


      
                  // remove open class to make any css animation effects possible
                  Iterator.iterate(OffCanvasElements, backdrop => backdrop.classList.remove(OFF_CANVAS_OPEN_CLASS));
          
          
        // wait before removing backdrop to let css animation effects take place
                  setTimeout(this._removeExistingOffCanvas.bind(this), delay);
          
          
        Backdrop.remove(delay);
              }
          
          
    setTimeout(() => {
                  this.$emitter.publish('onCloseOffcanvas', {
                      offCanvasContent: OffCanvasElements,
                  });
              }, delay);
          }
          
          
/**
           * Callback for close button, goes back in browser history to trigger close
           * @returns {void}
           */
          goBackInHistory() {

mga · 17. Oktober 2022 um 07:51

Jetzt wo du es sagt, habe ich die JavaScript Events entdeckt in der Doku. Die habe ich scheinbar übersehen. Jetzt steht dort aber, dass und wie man das mit Plugins macht. OffCanvas extends aber nicht Plugin und wird somit nicht in der main.js im PluginManager registriert. Wie komme ich denn sonst an den OffCanvasSingleton Emitter?

Thema		Antworten	Aufrufe
Offcanvas Warenkorb deaktivieren und direkt in den Warenkorb springen Themes & Design	4	2034	2. August 2023
Produkte direkt in den Warenkorb legen / Einkaufswelt Programmierung	1	1094	31. Oktober 2016
Anzahl der Produkte im Warenkorb wird auf Produktseiten nicht mehr angezeigt. Themes & Design	3	1143	30. April 2021
Shopware 6.3.5.2 offcanvas Warenkorb funktioniert nicht Shopware 6 (German)	1	431	16. Juni 2021
Von einer Langing Page gleich zum Warenkorb mit Produkten Shopware 3.5 programming	1	444	12. Mai 2011

Anzahl der im Warenkorb liegenden Produkte auch im Produktlisting anzeigen

Verwandte Themen