Bergbahn Widget

Sie benötigen zwei Seiten auf ihrer eigenen Webseite:

Bergbahn-Detail-Seite: Adresse der Seite die für die Darstellung der Detailseite ihrer Bergbahn auf ihrer Webseite verwendet wird
Detail-Seite (data-target-uri): Adresse der Seite die für die Darstellung der Detailseiten von Liften, Pisten, etc.
Zum Code ->

Codebeispiel für Bergbahn-Detail-Seite:

See the Pen Bergsportbericht-Bahn-Detailseite by Matthias Bestfleisch (@mbestfleisch) on CodePen.

Codebeispiel für Detail-Seite:

See the Pen Bergsportbericht-Bahn-Weitere-Detailseiten by Matthias Bestfleisch (@mbestfleisch) on CodePen.

Anmerkung:

Bietet der Server keine Möglichkeit, die URL umzuleiten und hat man die Lösung mit dem Hash verwendet, kann man folgendes Skript vor loadasync einbinden:

				
					<script>
  const arr =  window.location.hash.split("#");
  const hash = arr[arr.length-1];
  doc = document.getElementById("eopois-dv-widget-eo");
  doc.setAttribute('data-poi', hash);
</script>

Codes

Hier können Sie sich die nötigen Codeschnipsel für Ihre Website kopieren.

Sie müssen lediglich <APIKEY>, <PFAD ZUR LISTE>, <PFAD ZUR DETAILSEITE> und ggf. <POI SLUG> durch Ihre Informationen ersetzen und bei Bedarf Ihre Farbwerte unter den data-color Attributen.

Bergbahn Detailansicht

				
					<div id="eopois-dv-widget-eo" class="eopois-widget"
  data-poi="<POI SLUG>"
  data-api-key="<APIKEY>"
  data-list-uri="<PFAD ZUR LISTE>"
  data-target-uri="<PFAD ZUR DETAILSEITE>/#xxxSLUGxxx"

  data-namespace="eo"
  data-widget-id="eo"
  data-api-url="https://poi3.api.eberl-online.net/"
  data-color-primary="#97bd0f"
  data-color-secondary="#97bd0f"
  data-color-accent="#bbbbbb"
  data-color-success="#00ff00"
  data-color-error="#ff0000"
  data-color-info="#0000ff"
  data-color-warning="yellow"
  data-color-text="#000000">
</div>

<div class="eopois-async-scripts" data-path="https://pois-widget2.api.eberl-online.net/">
    <div data-name="eopois-detailView"></div>
</div>
<script type="module" src="https://pois-widget2.api.eberl-online.net/loadAsyncPois.min.js" data-rocket-defer defer></script>
<link data-minify="1" href="https://www.faq.eo-heimat.de/wp-content/cache/min/1/eopois-Variables.css?ver=1728031585" rel="stylesheet" type="text/css">

Detailansicht Regions-POIs / Touren

				
					<div id="eopois-dv-widget-eo" class="eopois-widget"
  data-api-key="<APIKEY>"
  data-list-uri="<PFAD ZUR LISTE>"
  data-target-uri="<PFAD ZUR DETAILSEITE>/#xxxSLUGxxx"

  data-namespace="eo"
  data-widget-id="eo"
  data-api-url="https://poi3.api.eberl-online.net/"
  data-color-primary="#97bd0f"
  data-color-secondary="#97bd0f"
  data-color-accent="#bbbbbb"
  data-color-success="#00ff00"
  data-color-error="#ff0000"
  data-color-info="#0000ff"
  data-color-warning="yellow"
  data-color-text="#000000"
  >
</div>

<script>
  const arr =  window.location.hash.split("#");
  const hash = arr[arr.length-1];
  doc = document.getElementById("eopois-dv-widget-eo");
  doc.setAttribute('data-poi', hash);
</script>

<div class="eopois-async-scripts" data-path="https://pois-widget2.api.eberl-online.net/">
    <div data-name="eopois-detailView"></div>
</div>
<script type="module" src="https://pois-widget2.api.eberl-online.net/loadAsyncPois.min.js" data-rocket-defer defer></script>
<link data-minify="1" href="https://www.faq.eo-heimat.de/wp-content/cache/min/1/eopois-Variables.css?ver=1728031585" rel="stylesheet" type="text/css">

				
					<script>
var hash = window.location.hash.split('#').pop();
if (hash) {
	var parts = hash.split('/');
	if (parts && parts.length > 0) {
		doc = document.getElementById("eoevents-dv-widget-eo"); //hier muss die korrekte id des Widget-Divs rein!
		doc.setAttribute('data-event', parts[0]);
		if (parts.length > 1) {
			doc.setAttribute('data-moment', parts[1]);
		}
	}
}
</script>

FAQs - EO.Heimat