eo-heimat

FAQs - EO.Heimat

Suche

Widgeteinbindung

Sie benötigen 2 Seiten auf ihrer eigenen Webseite:

  • 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
  • Optional: Teaser-Seite: Adresse der Seite die für die Darstellung der Teaseransicht auf Ihrer Webseite verwendet wird
  • Optional: Tabellen-Seite: Adresse der Seite die für die Darstellung der Tabellenansicht auf Ihrer Webseite verwendet wird
  • Optional: Akkordion-Seite: Adresse der Seite die für die Darstellung der Akkordionansicht auf Ihrer Webseite verwendet wird

Codebeispiel Übersichts-Seite:

See the Pen EO Events List by Matthias Bestfleisch (@mbestfleisch) on CodePen.

Codebeispiel Detail-Seite:

See the Pen EO Events Detailview 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>
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>

Codebeispiel Teaser-Seite:

See the Pen EO Events Teaser by Matthias Bestfleisch (@mbestfleisch) on CodePen.

Codebeispiel Tabellen-Seite:

See the Pen EO Events Table by Matthias Bestfleisch (@mbestfleisch) on CodePen.

Codebeispiel Akkordion-Seite:

See the Pen EO Events Akkordion 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>, <PFAD ZUR LISTE> und <PFAD ZUR DETAILSEITE> durch Ihre Informationen ersetzen und bei Bedarf Ihre Farbwerte unter den data-color Attributen.

Liste

				
					<div class="eoevents-widget" id="eoevents-list-widget-eo"
data-widget-id="eo" 
data-namespace="eo"
data-list-uri="<PFAD ZUR LISTE>" 
data-api-key="<APIKEY>"
data-target-uri="<PFAD ZUR DETAILSEITE>/#xxxSLUGxxx/#xxxMOMENTxxx" 
data-api-url="https://events2.api.eberl-online.net/">
  <svg xmlns="http://www.w3.org/2000/svg" width="150" viewBox="0 0 100 100">
    <circle fill="#97bd0f" cx="6" cy="50" r="6">
      <animateTransform attributeName="transform" dur="1s" type="translate" values="0 15 ; 0 -15; 0 15" repeatCount="indefinite" begin=".1" />
    </circle>
    <circle fill="#97bd0f" cx="30" cy="50" r="6">
      <animateTransform attributeName="transform" dur="1s" type="translate" values="0 10 ; 0 -10; 0 10" repeatCount="indefinite" begin=".2" />
    </circle>
    <circle fill="#97bd0f" cx="54" cy="50" r="6">
      <animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5" repeatCount="indefinite" begin=".3" />
    </circle>
  </svg>
</div>

<div class="eoevents-async-scripts" data-path="https://events-widget2.api.eberl-online.net/">
  <div data-name="eoevents-list"></div>
</div>

<script type="module" src="https://events-widget2.api.eberl-online.net/loadAsyncEvents.min.js" data-rocket-defer defer></script>
<link data-minify="1" href="https://www.faq.eo-heimat.de/wp-content/cache/min/1/eoevents-Variables.css?ver=1730281416" rel="stylesheet" type="text/css">

Detailansicht

				
					<div class="eoevents-widget" id="eoevents-dv-widget-eo" 
data-namespace="eo" 
data-widget-id="eo" 
data-api-key="<APIKEY>"
data-target-uri="<PFAD ZUR DETAILSEITE>/#xxxSLUGxxx/#xxxMOMENTxxx" 
data-list-uri="<PFAD ZUR LISTE>"
data-api-url="https://events2.api.eberl-online.net/"
>
</div>

<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"); 
		doc.setAttribute('data-event', parts[0]);
		if (parts.length > 1) {
			doc.setAttribute('data-moment', parts[1]);
		}
	}
}
</script>

<div class="eoevents-async-scripts" data-path="https://events-widget2.api.eberl-online.net/">
  <div data-name="eoevents-detailView"></div>
</div>

<script data-minify="1" src="https://www.faq.eo-heimat.de/wp-content/cache/min/1/loadAsyncEvents.min.js?ver=1728040721" data-rocket-defer defer></script>
<link data-minify="1" href="https://www.faq.eo-heimat.de/wp-content/cache/min/1/eoevents-Variables.css?ver=1730281416" rel="stylesheet" type="text/css">

Teaseransicht

				
					<div class="eoevents-widget" id="eoevents-teaser-widget-eo"
data-widget-id="eo" 
data-namespace="eo" 
data-api-key="<APIKEY>"
data-target-uri="<PFAD ZUR DETAILSEITE>/#xxxSLUGxxx/#xxxMOMENTxxx" 
data-api-url="https://events2.api.eberl-online.net/" 
></div>

<div class="eoevents-async-scripts" data-path="https://events-widget2.api.eberl-online.net/">
  <div data-name="eoevents-teaser"></div>
</div>

<script data-minify="1" src="https://www.faq.eo-heimat.de/wp-content/cache/min/1/loadAsyncEvents.min.js?ver=1728040721" data-rocket-defer defer></script>
<link data-minify="1" href="https://www.faq.eo-heimat.de/wp-content/cache/min/1/eoevents-Variables.css?ver=1730281416" rel="stylesheet" type="text/css">
<link data-minify="1" href="https://www.faq.eo-heimat.de/wp-content/cache/min/1/eoevents-Variables.css?ver=1730281416" rel="stylesheet" type="text/css">

Tabellenansicht

				
					<div class="eoevents-widget" id="eoevents-table-widget-eo"
data-widget-id="eo" 
data-namespace="eo" 
data-api-key="<APIKEY>"
data-target-uri="<PFAD ZUR DETAILSEITE>/#xxxSLUGxxx/#xxxMOMENTxxx" 
data-api-url="https://events2.api.eberl-online.net/"
></div>

<div class="eoevents-async-scripts" data-path="https://events-widget2.api.eberl-online.net/">
  <div data-name="eoevents-faketable"></div>
</div>

<script data-minify="1" src="https://www.faq.eo-heimat.de/wp-content/cache/min/1/loadAsyncEvents.min.js?ver=1728040721" data-rocket-defer defer></script>
<link data-minify="1" href="https://www.faq.eo-heimat.de/wp-content/cache/min/1/eoevents-Variables.css?ver=1730281416" rel="stylesheet" type="text/css">

Akkordionansicht

				
					<div class="eoevents-widget" id="eoevents-accordion-widget-eo"
data-widget-id="eo" 
data-namespace="eo" 
data-api-key="<APIKEY>"
data-target-uri="<PFAD ZUR DETAILSEITE>/#xxxSLUGxxx/#xxxMOMENTxxx" 
data-api-url="https://events2.api.eberl-online.net/" 
></div>

<div class="eoevents-async-scripts" data-path="https://events-widget2.api.eberl-online.net/">
  <div data-name="eoevents-accordion"></div>
</div>

<script data-minify="1" src="https://www.faq.eo-heimat.de/wp-content/cache/min/1/loadAsyncEvents.min.js?ver=1728040721" data-rocket-defer defer></script>
<link data-minify="1" href="https://www.faq.eo-heimat.de/wp-content/cache/min/1/eoevents-Variables.css?ver=1730281416" rel="stylesheet" type="text/css">
Zurück zur Startseite

Datenschutz | Impressum 

Created by OYA media GmbH