Regions Widget

Sie benötigen drei Seiten auf ihrer eigenen Webseite:

Übersichts-Seite (data-summary-uri): Adresse der Seite die für die Darstellung der Übersichtsseite auf ihrer Webseite verwendet wird
Listen-Seite (data-list-uri): Adresse der Seite die für die Darstellung der Trefferliste auf ihrer Webseite verwendet wird
Detail-Seite (data-target-uri): Adresse der Seite die für die Darstellung der Detailseite auf ihrer Webseite verwendet wird
Zum Code ->

Codebeispiel Übersichts-Seite:

See the Pen Bergsporbericht-Region by Matthias Bestfleisch (@mbestfleisch) on CodePen.

Codebeispiel Listen-Seite:

See the Pen Bergsporbericht-Liste by Matthias Bestfleisch (@mbestfleisch) on CodePen.

Codebeispiel Teaser-Seite:

See the Pen Bergsporbericht-Teaser by Matthias Bestfleisch (@mbestfleisch) on CodePen.

Codebeispiel Content-Teaser-Seite:

See the Pen Bergsporbericht-Detail by Matthias Bestfleisch (@mbestfleisch) on CodePen.

Codebeispiel Detail-Seite:

See the Pen Bergsporbericht-Detail by Matthias Bestfleisch (@mbestfleisch) on CodePen.

Codes

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

Sie müssen lediglich <APIKEY> durch Ihren ApiKey ersetzen und gegebenenfalls Ihre Farbwerte unter den data-color Attributen.

Regionsübersicht (Summary)

				
					<div id="eopois-summary-widget-eo" class="eopois-widget"
  data-api-key="<APIKEY>"
  data-list-uri="<PFAD ZUR LISTE>"

  data-widget-id="eo"
  data-namespace="eo"
  data-api-url="https://poi3.api.eberl-online.net/"
  data-color-primary="#97bd0f"
  data-color-secondary="#97bd0f"
  data-color-text="#FFFFFF">
</div>
<div class="eopois-async-scripts" data-path="https://pois-widget2.api.eberl-online.net/">
         <div data-name="eopois-summary"></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">

Listenansicht

				
					<div class="eopois-widget" id="eopois-list-widget-eo"
  data-target-uri="<PFAD ZUR DETAILANSICHT>/#xxxSLUGxxx"
  data-list-uri="<PFAD ZUR LISTE>"
  data-api-key="<APIKEY>"
  
  data-api-url="https://poi3.api.eberl-online.net/"
  data-widget-id="eo"
  data-namespace="eo"
  data-color-primary="#97bd0f"
  data-color-secondary="#97bd0f"
  data-color-text="#FFFFFF"
  >
</div>
<div class="eopois-async-scripts" data-path="https://pois-widget2.api.eberl-online.net/">
         <div data-name="eopois-list"></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

				
					<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">

FAQs - EO.Heimat