Storefinder - iframe

Was

Diese Anleitung zeigt, wie man den Storefinder von einem Webshop mithilfe eines iframes in eine Website einfügt, damit Besucher direkt auf den Webshop zugreifen und einkaufen können. Ein iframe (Inline Frame) ist ein HTML-Element, mit dem sich externe Webseiten oder Inhalte in eine bestehende Webseite einbetten lassen.

Eigene Website.

Der Webshop kann bei Bedarf in eine bestehende Website integriert werden, damit Benutzer diesen nutzen und zum Webshop gehen können, um etwas zu kaufen.

Hier ist ein Beispiel vom Storefinder, wie es auf der Website gestaltet werden könnte:

Der iframe hat zwei Registerkarten:

Lieferung

Für die Lieferung muss der Benutzer eine Adresse eingeben. Es gibt zwei mögliche Szenarien:

1. Wenn die Adresse mit dem Liefergebiet übereinstimmt, wird der Benutzer auf die Artikellistenseite mit der ausgewählten Lieferadresse im Webshop weitergeleitet.

2. Wenn die Adresse mit dem Liefergebiet nicht übereinstimmt, wird der Benutzer auf die Seite mit der Storeliste weitergeleitet, um den nächstgelegenen Store für die Abholung auszuwählen.

Abholung

Für die Abholung muss der Benutzer eine Abholzeit auswählen. Nach der Auswahl wird er auf die Artikelseite weitergeleitet, auf der die Abholoption vorausgewählt ist.

Zusätzlich gibt es, falls in dem Administrationsbereich aktiviert, die Schaltflächen "Anmelden" und "Registrieren":

1. Wenn der Benutzer nicht angemeldet ist, wird er durch Anklicken dieser Schaltflächen zum Webshop weitergeleitet, wo ein Anmelde-/Registrierungsdialog angezeigt wird.

Registrierungsdialog mit "Jetzt anmelden und genießen!":

Anmeldedialog mit "Login":

2. Wenn der Benutzer bereits angemeldet ist, wird er zur Profilseite weitergeleitet.

Einbindung des Webshops per iframe

Zur Umsetzung stellen wir den benötigten iframe-Code für die Integration zur Verfügung:

allow="geolocation; popups; popups-to-escape-sandbox; window-management"

sandbox="allow-same-origin allow-scripts allow-popups allow-modals allow-forms allow-top-navigation allow-top-navigation-by-user-activation"></iframe>

wo:

geolocation (Geolokalisierung): Ermöglicht es dem iframe, den Standort des Nutzers abzufragen.
popups (Popup-Fenster): Ermöglicht, dass Popups nicht von Browsern blockiert werden.
popups-to-escape-sandbox (Popups außerhalb der Sandbox): Ermöglicht, dass Pop-ups außerhalb der Sandbox funktionieren, z. B. durch Öffnen eines neuen Fensters mit einer anderen Website.
window-management (Fensterverwaltung): Ermöglicht eine aktivere Interaktion des iframe-Inhalts mit den Browserfenstern, einschließlich des Öffnens, Änderns der Größe oder Schließens derselben.
allow-same-origin (gleichen Ursprung erlauben): Erlaubt dem Inhalt innerhalb des iframes den Zugriff auf Ressourcen mit gleichem Ursprung (Domäne, Protokoll und Port) wie die übergeordnete Seite.
allow-scripts (Skripte erlauben): Erlaubt die Ausführung von JavaScript innerhalb des iframes.
allow-modals (modale Fenster erlauben): Erlaubt das Öffnen von Pop-ups innerhalb des iframes.
allow-forms (Formulare erlauben): Erlaubt die Eingabe von Formularen innerhalb des iframes.
allow-top-navigation (Navigation zur obersten Ebene erlauben): Erlaubt die Navigation zum übergeordneten Fenster/Tab. Der Inhalt innerhalb des iframes kann die übergeordnete Seite ändern.
allow-top-navigation-by-user-activation (Navigation zur obersten Ebene bei Benutzeraktion erlauben): Dasselbe wie "allow-top-navigation", aber nur, wenn es durch die Aktion des Benutzers ausgelöst wird.

Standardmäßig hat der iframe eine Höhe (height) von 505px, damit er sowohl auf mobile als auch auf Desktop-Bildschirme passt. Wenn du jedoch einen schmaleren Abschnitt für Desktop-Geräte bevorzugst, können wir einen benutzerdefinierten <style> bereitstellen, der zum <head>-Abschnitt der Website hinzugefügt werden sollte.

Idealerweise lässt sich die iframe-Höhe individuell anpassen, für eine bessere Benutzeroberfläche.

<style>

@media screen and (min-width: 904px) {

#storefinder {

height: 340px;

}

</style>