Integration der 
mein.toubiz #elements

Mit den mein.toubiz #elements gibt es umfangreiche Möglichkeiten die Ausgabe der Inhalte zu definieren. Der Grundaufbau des Codes ist dabei immer gleich.
Auf dieser Seite wollen wir dir und deinem Anbieter zeigen, wie du die #elements auf deine Bedürfnisse in der Ausgabe anpassen kannst. 

Bist du noch gar nicht so tief im Thema, dann verschaffe dir gerne hier vorab einen Überblick über die unterschiedlichen #elements und was es damit auf sicht hat.

Beispielcode eines #elements

Element Ausflugsziele gefiltert auf Kategorie Museen

Den Code kannst du über eigene kleine Anpassungen auf deine Bedürfnisse anpassen. Was möglich ist möchte ich dir nachfolgend gerne vorstellen.

  • Wenn du eine #elements Ausspielung bei uns beauftragt hast, bekommst du einen Widget-Code, in dem wir bereits definieren, ob es sich um article- (z.B. Sehenswürdigkeiten) oder event-Daten  (Veranstaltungen) handelt. 

  • Im gelieferten Code findest du eine Information zur gewählten Sprache. Im Code wird das z.B. mit lang="de" für deutsch gekennzeichnet. Mögliche Sprachen sind: de, en, es, cz, dk, fr, it und nl. Solltest du dein #element also in englisch zeigen wollen, müsstest du diese Passage folgendermaßen ändern: lang="en"

     

    Achte bitte darauf keine anderen Zeichen zu löschen oder zu ergänzen. Dies könnte zu Problemen in der Ausspielung führen.

     

    Hinweis: 
    Damit die Daten in einer anderen Sprache gezeigt werden, musst du die Datensätze noch übersetzen. Feste Begriffe des Systems sind von uns bereits Übersetzt.
    Die Sprachkürzel ausformuliert sind: Deutsch, Englisch, Spanisch, Tschechisch, Dänisch, Französisch, Italienisch und Niederländisch.

    Im Beispiel-Code ist mit lang="de" deutsch angegeben

  • Möchtest du nur Daten deines Mandanten oder auch die Daten deiner untergeordneten Orte darstellen? Dies kannst du folgendermaßen steuern:

    Nur Inhalte des eigenen Mandanten ausgeben: 
    client: 'current' 

    Bei Mandanten mit zugeordneten Mandanten (Untergeordnete Orte): clientIncludingManaged: 'current' 

     

    Auch Daten anderer Mandanten (über Channel abonniert):

    clientIncludingManaged: '' 

    Im Beispiel werden auch Untergeordnete Orte berücksichtigt.

  • So kannst du dein #element auf die Detailseite eines Eintrags verlinken:

    route="/article/ID-des-articles-aus-toubiz" 

    Beispiel-Code für die Artikel-Detailseite

  • So kannst du deine Einträge nach Namen sortieren:

    query:{sorting:{property:'name',direction:'asc'}}

    Beispiel-Code mit Sortierung nach Name

  • Wird nichts definiert, werden standardmäßig folgende Filter ausgegeben. 

     

    Für den Datentyp „article“ (Punktdaten wie POI):

    Für den Datentyp „event“ (Termindaten wie Veranstaltungen):

    Die einzelnen Filter können mit folgenden Befehlen ausgeblendet werden: hideFilters:['Filtername','Filtername']  -> also z.B. hideFilters:['cities','regions'] 

     

    Optionen sind: 

    'regions'Regionen
    'cities'Orte
    'categories'Kategorien
    'highlights'Filterung auf Tipps
    'search'Suchfeld

     

    Hier wird die Regions-, Kategorien- und Orts-Filterung ausgeblendet 

    Folgende weitere Filter stehen Ihnen in den einzelnen #elements zur Verfügung

     

    #element Essen & Trinken: 

    'kitchen'Küche & Bewirtung
    'target_groups'Zielgruppe
    'safety'Schutzmaßnahmen
    'take_away'Abholservice
    'delivery_service'Lieferservice
    'shop'Verkaufsstand
    'voucher'Gutschein
    'awards'Auszeichnungen
    'rooms'Räumlichkeiten
    'reservation'Tisch reservieren
    'openingTimesCollection'geöffnet
    'price'Preis

     

    #element Veranstaltungskalender: 

    'search'Suchfeld
    'categories'Kategorien
    'properties'Interessen
    'highlights'Tipp
    'areas'Region
    'cities'Orte

     

    #element Ausflugsziele: 

    'search'Suchfeld
    'categories'Kategorien
    'individual'Geeignet für
    'voucher'Gutscheine
    'highlights'Tipp
    'areas'Region
    'cities'Orte

     

    #element A-Z: 

    'search'Suchfeld
    'categories'Kategorien
    'cities'Orte
    'areas'Regionen
    'tip'Tipp
    'openingTimesCollection'geöffnet

     

    #element Einkaufen: 

    'search'Suchfeld
    'categories'Kategorien
    'cities'Orte
    'areas'Regionen
    'tip'Tipp
    'service'Service

     

    #element Direkt vom Hersteller:

    'search'Suchfeld
    'categories'Kategorien
    'cities'Orte
    'areas'Regionen
    'assortment'Sortiment
    'tip'Tipp
    'service'Service

     

    #element Strecken & Touren: 

    'search'Suchfeld
    'categories'Kategorien
    'cities'Orte
    'areas'Regionen
    'awards'Auszeichnungen
    'tourDifficultyCollection'Wegeigenschaften
    'tourType'Tourenart
    'tourHighlight'Highlights
    'properties'Besonderheiten
    'tip'Tipp

     

    #element Übernachten: 

    'search'Suchfeld
    'categories'Kategorien
    'cities'Orte
    'areas'Regionen
    'awards'Auszeichnungen
    'storno'kostenfrei stornieren
    'price'Preis
    'target_groups'Geeignet für
    'facilities'Ausstattung und Service
    'location'Lage
    'voucher'Gutschein
    'tip'Tipp
  • Hierzu wird die ID der gewünschten Kategorien benötigt. Eine aktuelle Liste der Kategorien und IDs kannst du dir ganz einfach unter dem Menüpunkt »Kategorien« downloaden.

     

    Bsp.: a46e5ee3-d762-41cd-a937-59b494758e6d -> Restaurant 

    Bei der Filterung nach mehreren Kategorien müssen diese kommagetrennt und in Apostrophe aneinandergereiht werden: 

    category:['ecbcf3e8-1b8b-489e-8fe3-a3adf6e28381', 'a11a35ee-215e-462c-8182-dc9eea2716d8', '9390c13f-25f7-41dc-8a7d-3e5ca2930ddd'] 

     

    Wichtig ist hier darauf zu achten, dass Kategorien ausgewählt werden, die auch zum entsprechenden Element gehören.

     

    Mit dem Filter category erscheinen in dem #element nur Einträge, die eine der definierten Kategorien als Hauptkategorie gewählt haben. Sollen ebenfalls auch Einträge erscheinen, die eine der Kategorien als "weitere Kategorie" gewählt haben, muss der Filter categoryWithSecondary heißen. 

     

    categoryWithSecondary:['ecbcf3e8-1b8b-489e-8fe3-a3adf6e28381', 'a11a35ee-215e-462c-8182-dc9eea2716d8', '9390c13f-25f7-41dc-8a7d-3e5ca2930ddd'] 

     

    Element Ausflugsziele gefiltert auf Museums-Kategorien

    Im Frontend stehen dann lediglich die gewählten Kategorien zur Verfügung.

  • Filter können in der Widget Konfiguration als aktive Filter- (tags) übergeben werden. D.h. die so übergebenen Filter sind beim Aufruf des Widget bereits als aktive Tags gesetzt und können vom User dann entfernt werden. Nach Reload der Seite sind die Tags wieder aktiv. Dies kann für alle Filter angewendet werden und funktioniert für Artikel und Events.

     

    Beispiel zum Übergheben von Orten und Kategorien:
    activeFilters: {cities: ['979cc93d-fd3c-44bf-b02e-4b01318c3a90' , '864743cf-e65e-466d-a409-659e9eed1c79' , '6e955822-e056-4908-af26-b87889f2cb02']categories: ['KategorieID' , 'KategorieID2']},

    Diese Info muss im Bereich der serialized-configuration platziert werden.

     

    Eine aktuelle Liste der Kategorien und IDs schicken wir Dir gerne zu.

    Im Beispiel wird die Kategorie "Restaurant" als gewählter Filter angezeigt.

    Ansicht im Frontend. Über Klick auf das x kann der Filter entfernt werden.

  • Der Highlight-Slider ist standardmäßig ausgeblendet und kann mit highlightSlider:true  eingeblendet werden. Dies muss zwischen serialized configuration und query eingesetzt werden.  

     

    Im Beispiel ist der Highlight-Slider eingeblendet.

    Ansicht im Frontend. Über Klick auf das x kann der Filter entfernt werden.

  • Um den Titel des #elements auszublenden, setzt man displayElementTitle: false, zwischen serialized confuguration und die query.

  • Im #element kann auch eine “Archiv Seite”, also eine Seite definiert werden, auf der sich die Detailansichten sollen. 

    Das eignet sich zum Beispiel, wenn das Widget auf einer Landingpage zwischen dem Content eingebunden wird. Dann macht es mehr Sinn die Detailseite in einem neuen Tab auf einer Seite zu öffnen, auf welcher nur das Widget liegt.

     

    staticWidgetPath: '/event/', 
    oder 
    staticWidgetPath: '/article/',

     

    Der staticWidgetPath muss direkt innerhalb der serialized-configuration und außerhalb vom query platziert werden.

     

    Wichtig ist, dass sich unter diesem Pfad auf der Seite dann auch entsprechend eine Ergebnisliste des jeweiligen Typs befindet.

  • Die Besucherinformationen sind standardmäßig für die Detailseiten eingeblendet und können mit displayCapacityOnDetail:false ausgeblendet werden. 

     

    Diese Angabe muss direkt in der serialized-configuration platziert werden.

     


Wichtige Hinweise

 

Hochzeichen prüfen 
Wird das geneigte Hochkomma oder einfache Anführungszeichen benutzt funktioniert der Code nicht. Es muss das Apostroph sein. 

 

Klammern 

Alle Klammern die einmal geöffnet werden, müssen auch wieder geschlossen werden. Wenn normale Klammern genutzt werden, funktioniert der Code nicht. Es müssen immer geschweifte Klammern sein, ausser es handelt sich um ein Array (Zusammenfassung mehrerer Objekte eines bestimmten Datentyps), dann müssen die eckigen Klammern genutzt werden.

 

Kommata 

Mehrere Befehle innerhalb eines Bereichs müssen mit einem Komma getrennt sein. 

 

Inhaltliche Übereinstimmung 

Das #element events kann nicht mit route article oder Kategorien unter POI und Infrastruktur genutzt werden. Und andersherum verhält es sich gleich.

 

Widget gefiltert auf eine Sammlung

Es kann auch  eine Filterung auf eine bestimmte Sammlung gefiltert werden. Wenn Du dies wünscht, kannst Du Dich gerne bei uns melden.