Widget-Loader
Der Loader ist das einzige Antares-Skript, das auf jeder Seite deines Shops liegt. Alles, was danach kommt, lädt erst, wenn ein Kunde die Suche wirklich benutzt.
<script async src="https://cdn.antares.commergy.de/loader/v1.js"></script>Das Plugin setzt dieses Tag selbst; von Hand einbinden musst du es nur bei einer eigenen Storefront-Implementierung.
Was der Loader tut
Abschnitt betitelt „Was der Loader tut“- Konfiguration holen. Layout, Theme-Tokens, Texte und der öffentliche Schlüssel liegen als statische Datei auf dem CDN.
- Am Suchfeld andocken. Er findet das Suchfeld deines Themes und hängt sich an
focusundkeydown. - Warten. Mehr nicht. Solange niemand die Suche anfasst, passiert nichts.
- Beim ersten Kontakt das eigentliche Widget nachladen (unter 30 kB),
<antares-search>definieren und die Eingabe übernehmen.
Warum er 2 kB wiegt
Abschnitt betitelt „Warum er 2 kB wiegt“Weil er auf jeder Seite liegt, auch auf denen, auf denen niemand sucht. Alles, was
nicht zum Andocken gebraucht wird — Layouts, Filter, Übersetzungen, die Darstellung —
steckt im nachgeladenen Bundle. Der Loader blockiert das Rendering nicht (async),
lädt keine Schriften und keine fremden Skripte.
Wenn wir nicht erreichbar sind
Abschnitt betitelt „Wenn wir nicht erreichbar sind“Der Loader wartet drei Sekunden und gibt dann auf. Das native Shopware-Suchformular liegt unberührt darunter und übernimmt: deine Kunden bekommen die Shopware-Ergebnisse statt unserer. Schlechter, aber nichts bricht — das ist ein Produktprinzip, kein Fehlerpfad.
Denselben Weg nimmt der Loader, wenn deine Content-Security-Policy ihn blockiert. Für deine Kunden sieht das identisch aus; im Panel siehst du es daran, dass keine Suchen ankommen, siehe Content-Security-Policy.
Kein Subresource-Integrity-Hash
Abschnitt betitelt „Kein Subresource-Integrity-Hash“Bewusst. Der Loader ist die Ausfallsicherung und wird gelegentlich aktualisiert; ein
integrity-Hash, der nach einem Update nicht mehr passt, würde die Suche in deinem
Shop abschalten, statt sie zu schützen. Die Herkunft ist stattdessen über script-src
erzwungen.
Eigene Storefront
Abschnitt betitelt „Eigene Storefront“Baust du dein Frontend selbst, sind zwei Dinge zu beachten: <antares-search> ist ein
Custom Element mit Shadow DOM, es erbt also nicht die Stile deiner Seite, sondern
seine eigenen Tokens. Und das native Suchformular sollte erhalten bleiben — es ist
der Fallback, auf den sich der Loader verlässt.