Einbaudemo für Webshops

Der links stehende Shop zeigt an einem einfachen Beispiel eines echten Weinguts,
wie der Shop optimal in die Seite eingebaut werden kann. Sie können im Shop frei testen.
Bitte lesen Sie eingangs dieses Dokument.

ausblenden Shop groß Smartphone Startansicht Beispiel für die Umleitung

Einbaucode für die Iframe

---

<iframe style="overflow-y:hidden" frameBorder=0  id="wboshopframe" src="EINBAUCODE"></iframe>
	

Bitte passen Sie die Parameter wie gewünscht an und entfernen Sie Platzhalter, Zeilenumbrüche und ggf. Leerzeichen!

Javascript-Code für die Höhenabfrage

---

<script>
	// Wartet auf eine Größenänderung des IFrames
	window.onload = function () {
		window.addEventListener("message", receiveMessage, false);		
	}
	// Ändern der Höhe des IFrames
	function setHoehe(hoehe) {
		document.getElementById("wboshopframe").style.height=hoehe+"px";
		// Optional: Scrollt die Seite nach oben:
		window.scrollTo(0, 0);
		// Otional: Entfernt die Scrollbar 
		document.getElementById("wboshopframe").scrolling="no";
	}
	// Hilfsfunktion zum Verarbeiten von Höhenanfragen
	function receiveMessage(event) { 
	  if (event.origin == "https://nephele-s5.de") {
		setHoehe(event.data);
	  }		
	}
</script>

Bauen Sie diesen Code nach dem Iframe-Aufruf in Ihre Seite ein. Achten Sie ggf. darauf, dass das onload-Event nicht von anderen Modulen oder Scripten wie z.B. Jquery überschrieben wird oder nehmen Sie den Aufruf in Ihre bereits bestehenden Onload-Events auf.

Javascript-Code für eine manuelle Abfrage (optional)

---

document.getElementById("wboshopframe").
contentWindow.postMessage("getHeight", "https://nephele-s5.de");

Dieser Code kann zum Beispiel genutzt werden, wenn Ihre Seite die Größe z.B. durch Scripte verändert.