Naja, dann kann ich ja meinen Infinite Scrolling Branch im Photoblog löschen…

Allerdings nicht ohne mal kurz aufzuschreiben wie ich das eigentlich umsetzen wollte.

Neue Fotos sollten immer eingeblendet werden, wenn die Unterkante der Seite erreicht ist, bzw. wenn der „Mehr Laden“-Button in den ViewPort scrollt.

Anstelle einer ulkigen scrollTopLengthHeightWasAuchImmer()-Konstruktion, habe ich es mit der Intersection Observer API versucht. Und das war ziemlich einfach:

// Das ist der Link mit dem Click Event zum Laden weiterer Fotos.
const loadMoreButton = document.querySelector('#load-more')

const loadMoreButtonObserver = new IntersectionObserver(
    (entries, options) => {
        for (let entry of entries) {
            if (entry.isIntersecting) {
                entry.target.click()
            }
        }
    }
)

if (loadMoreButton) {
    loadMoreButtonObserver.observe(loadMoreButton)
}

Per E-Mail antworten
Du hast Fragen an mich oder ein Thema für die FAQ?

Per E-Mail antworten
Du hast Fragen an mich oder ein Thema für die FAQ?

Und so wollte ich einfach das OffCanvasCartPlugin aus der Storefront ein klein wenig erweitern und die Eingabe einer Postleitzahl im Offcanvas Cart ermöglichen - manchmal zur Lieferkostenberechnung unabdingbar – und dabei die Infrastruktur zum Updaten von Feldern nutzen, die das Plugin schon mitbringt. Also einfach kurz das src/plugin/offcanvas-cart/offcanvas-cart.plugin extended, meine paar Methoden hinzugefügt und fertig. Dachte ich.

PluginManager.override('OffCanvasCart', 
    ZipExtensionOffcanvasCartPlugin, '[data-offcanvas-cart]'
);

Ich war wohl nicht der Einzige, der das dachte. Beispielsweise im SwagAmazonPay Plugin wird das Offcanvas Dingelchen auch schon überschrieben. Und gemäß dem Motto "Die Letzten werden die Ersten sein" gewinnt natürlich das Plugin, das die letzte Überschreibung durchführt. Das war nicht meins.

Letztlich bleibt einem nichts anderes übrig, die eigene Erweiterung als neues Plugin zu registrieren. Allerdings muss man dann auch darauf achten, indem selbst registrierte Plugins nicht noch einmal alle Events erstellt werden, sodass der Offcanvas zweimal geöffnet wird etc. In diesem speziellen Fall mit dem Offcanvas Plugin war das einfach, indem ich die init() überschrieben habe, ohne einen Aufruf von super.init()

export default class ZipExtensionOffcanvasCartPlugin
        extends OffCanvasCartPlugin {
    init() {
        this.client = new HttpClient()
        this._registerZipTriggerEvents()
    }

    _registerZipTriggerEvents() {
        this.$emitter.subscribe('offCanvasOpened', () => {
            const forms = DomAccess.querySelectorAll(
                document, '.js-offcanvas-cart-add-zip', false
            )
            if (forms) {
                Iterator.iterate(forms, 
                    form => form.addEventListener(
                        'submit', this._onAddZip.bind(this))
                    )
            }
        });
    }

    _onAddZip(event) {
        event.preventDefault()
        const form = event.target
        const selector = '.js-offcanvas-cart-zip'

        this.$emitter.publish('onAddZip')

        super._fireRequest(form, selector)
    }
}

Die Zip in die ShippingLocation über einen SalesChannelContextFactoryDecorator in den SalesChannelContexts zu bekommen und der vernünftige Umgang damit im Checkout war dann im Vergleich zu dem Javascript-Theater der wesentlich entspanntere Teil des Ganzen. Und ist vielleicht später mal einen Post wert.

Per E-Mail antworten
Du hast Fragen an mich oder ein Thema für die FAQ?

Und da ich gerade dabei war, gibt es noch drei weitere Web Components:

• Der Now Playing Schnipsel rechts oben, der meinen gerade gecsrobbelten Titel anzeigt.
• Die Vor-/Zurücknavigation unter den Posts
• Die am häufigsten gespielten Alben auf der now-Seite

Per E-Mail antworten
Du hast Fragen an mich oder ein Thema für die FAQ?