Versions Compared

Version Old Version 1 New Version 2
Changes made by

Jan Ernst (Unlicensed)

Jan Ernst (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Expand
titleChangelog

  • 02.08.2023 → neuer Eingangsparameter “usemultitree” hinzugefügt

  • 28.07.2023 → neuer Eingangsparameter “usesubstitutes” hinzugefügt

  • 28.07.2023 → neuer Eingangsparameter “usedocuments” hinzugefügt

  • 28.07.2023 → neuer Eingangsparameter “usebimcad” hinzugefügt

  • 10.05.2023 → Erweiterung der “predefinedFilters” im die optionalen Felder “disabled” & “hidden”

  • 10.05.2023 → neues Event “selectedarticle“ hinzugefügt

  • 10.05.2023 → neuen Eingangsparameter “articleselectionmode“ hinzugefügt

  • 02.02.2022 → Seite erstellt

...

Parameter “xs-deepsearch-shadow-dom”

Eingang

Parameter

Pflicht

Beschreibung

Beispielwert

channelid

Nein

Wenn eine ChannelID angegeben wird, wird die Anzeige der DeepSearch auf diese angefragten Kanäle eingeschrenkt. Die ChannelIDs müssen dabei immer in einem Array übergeben werden.

Der Benutzer muss dem angegeben Channel zugeordnet am System zugeordnet sein.

[2, 5]

channelfocus

Nein

Gibt an welcher Channel nach dem Starten des Widgets fokussiert werden soll. Wenn nicht angegeben oder die ChannelID nicht vorhanden ist, wird der erste Channel fokussiert.

5

predefinedarchivedfiltervalue

Nein

Gibt an ob der Archiviert Filter beim Aufruf auf den gewünschten Wert gesetzt ist.

Mögliche Werte:

  • false = Zeigt alle Dokumente die nicht archiviert sind an

  • true = Zeigt alle Dokumente die archiviert sind an

true

prefermanufacturerlogoview

Nein

Gibt an, ob die Herstelleransicht verwendet werden soll bis:

  • Nur Dokumente eines Herstellers im Ergebnisraum vorliegen

  • Ein oder mehrere Hersteller explizit ausgewählt wurden

    • Auswahl eines Herstellers in der Herstellerübersicht

    • Auswahl eines oder mehrerer Hersteller in dem Filter Hersteller

  • Wird der Parameter Herstellerübersicht nicht gesetzt wird der Standard, also die Ergebnisliste mit den Dokumenten angezeigt

 

Mögliche Werte:

  • true = Herstelleransicht wird bevorzugt

  • false = Standardverhalten

true

externalsearch

Nein

 

false

usebaudocs

Nein

Integration des BauDocs-Widget innerhalb der Artikeldetails

false

baudocsaccesstoken

Ja, wenn “usebaudocs” = true

OAuth2 Zugriffstoken für das BauDocssystem. Dieses Token muss zuvor vom integrierenden System am BauDocssystem angefragt werden.

-

baudocsrefreshtoken

Ja, wenn “usebaudocs” = true

OAuth2 Refreshtoken für das BauDocssystem. Dieses Token muss zuvor vom integrierenden System am BauDocssystem angefragt werden.

-

manufactureridtype

Ja, wenn “usebaudocs” = true

Der IDTyp der bei einer BauDocsanfrage zum Identifizieren / Mappen mitgesendet wird.

Diese Funktionalität steht nur zur Verfügung, wenn eine IDHUB Integration beauftragt wurde.

odc

videodefaultposter

Nein

Im Web verfügbares Bild das beim starten des Videos angezeigt wird, wenn kein Videoposter vorhanden ist.

https://url.png

removeroundbracketsinsuppliername

Nein

Entfernt Texte die im Lieferantennamen in Klammern umschlossen sind. Beispiel: “Lieferant(abc)” wird in der Oberfläche ersetzt durch “Lieferant”.

Standardwert ist false.

true

removesquarebracketsinsuppliername

Nein

Entfernt Texte die im Lieferantennamen in eckigen Klammern umschlossen sind. Beispiel: “Lieferant[abc]” wird in der Oberfläche ersetzt durch “Lieferant”.

Standardwert ist false.

true

widgetstate

Nein

Initialisiert das Widget nach einem Rücksprung.

c2l0ZXMvZGVmYXVsdC9maWxlcy9pbmZvcGFja2FnZS8yLzEzMDEvMTYzNTE3MjczMi9wYWdlL3RodW1ibmFpbHMvMTAzMTkyNjRfOTA2LnBkZi5qcGVn

style

Nein

JSON-Objekt zur Definition der Primär- und Sekundär-Farbe des Widgets. Das Objekt hat zwei Felder:

  • primarycolor: Primärfarbe. Als Wert wird ein Hexadezimal-String erwartet (Beispiel: "#616161").

  • secondarycolor: Sekundärfarbe. Als Wert wird ein Hexadezimal-String erwartet (Beispiel: "#D3D3D3").

Code Block
"style":{
  "primarycolor": "#616161",
  "secondarycolor": "#D3D3D3"
}

predifinedfilters

Nein

Filter die beim Einsprung in das DeepSearch-Widget vorausgewählt seien sollen. Die Filtereinstellung kann pro Kanal vorgenommen werden.

Felder im

  • channelid: Die Id des Channels auf die der Filter angewandt werden soll.

  • filters: Eine Liste von vorausgewählten Filtern.

Es gibt die Filtertypen “Auswahl” (eine Liste von Filteroptionen) und “Bereich” (Einschränkung per minimal und maximal Wert z.B. bei Preisen). Im Feld filters können beide Typen verwendet werden.

Felder für den Typ “Auswahl”:

  • name: Der Name des Filters

  • values: Eine Liste von Filteroptionen die vorausgewählt seien sollen

  • disabled: Dieser Filter wird vorausgewählt und kann über die DeepSearchoberfläche nur teilweise geändert werden. Es könne die gewählten Filter abgewählt werden, bis nur noch einer von den vorausgewählten vorhanden ist. Ein zurücksetzen dieses Filters setzt die Werte wieder auf den ausgangszustand zurück. Damit ist gewährleistet das die maximale vordefinierte Ergebnismenge nicht verlassen werden kann.

  • hidden : Dieser Filter wird vorausgewählt und wird in der DeepSearch nicht angezeigt. Dieser kann über das Frontend nicht verändert werden.

Felder für den Typ “Bereich”:

  • name: Der Name des Filters

  • minvalue: Untere Grenze der Auswahl

  • maxvalue: Obere Grenze der Auswahl

Code Block
languagejson
"predifinedfilters":[
  {
    "channelid": 1,
    "filters":[
      {        
        "name": "warengruppe",
        "values": ["Washlets", "WCs"]
        "disabled": false,
        "hidden": true          
      },
      {
        "name": "preis",
        "minvalue": 100,
        "maxvalue": 10000 
      }
    ]
  },
  {
    "channelid": 2,
    "filters": [
      {
        "name": "infoPackageName.name",
        "values": ["Preisliste", "Price List"]
        "disabled": true,
      }
    ]
  }
]

pdfviewer

nein

Das Objekt dient als Konfigurationsobjekt für den PDF-Viewer

Aktuell gibt es nur eine Oberkategorie

  • position

    • top

    • right

    • bottom

    • left

Alle Werte werden als Pixel-Werte implementiert. Eine Einheit muss nicht zwingend angegeben werden.

Code Block
"pdfviewer":{
             "position":{
                   "top": "150px",
                   "right": "20px",
                   "bottom": "50px",
                   "left": "20px"
             }
    }

downloadinnewtab

Nein

Wird der Parameter auf true gesetzt, so öffnet sich beim klick auf den Downloadbutton ein neuer Tab und die Datei wird heruntergeladen

Code Block
{
  ...
  "downloadinnewtab": true
}

downloadinnewtabtarget

Nein

In Verbindung mit “downloadinnewtab” zu verwenden. Wird nur verwendet, wenn “downloadinnewtab” auf true gesetzt ist

Gibt das Ziel an, das die Download-URL öffnen soll

Im Standard oder wenn kein Wert gesetzt ist, wird “_blank“ verwendet

Code Block
{
  ...
  "downloadinnewtabtarget": "_parent"
}

externallinkid

Nein

Die link ID der hochgeladenen Datei, die beim Aufruf des Widgets geöffnet werden soll.

Muss zusammen mit “externallinkchannelid” gesetzt werden

Code Block
{
  ...
  "externallinkid": "4233358a-52ca-4656-ac4e-f8a4305143da"
}

externallinkchannelid

Nein

Der Kanal in dem die Datei, die mit “externallinkid” referenziert wurde, hinterlegt ist.

Muss zusammen mit “externallinkid” gesetzt werden

Code Block
{
  ...
  "externallinkchannelid": 2
}

widgetstate

Nein

Alle GET-Parameter der Deep-Search als Base64 String.

Damit kann eine bestimmte Ansicht sofort beim Öffnen der Deep-Search geladen werden.

Code Block
{
  ...
  "widgetstate":"eyJhcHBTdGF0ZSI6eyJ0ZXJtIjoiIiwiZm9jdXMiOjIsInRhYmRhdGEiOiJbe1widGFiXCI6MCxcImNoYW5uZWxpZFwiOjEsXCJkYXRhXCI6e1wicGFcIjowLFwicmFcIjoyNSxcImZjYVwiOjEwLFwiZmFcIjp7XCJzZWxlY3Rpb25cIjpbe1wiY2F0ZWdvcnlcIjpcImhlcnN0ZWxsZXJOYW1lXCIsXCJvcHRpb25zXCI6W1wiUmljaHRlcm1laWVyU3VwcGxpZXJcIl19XSxcInJhbmdlXCI6W119LFwic2NhXCI6XCJcIixcInNvYVwiOlwiXCIsXCJ2bWFcIjpcInRcIixcInJmYlwiOlt7XCJjb2x1bW5OYW1lXCI6XCJwcmVpc1wiLFwiZmxvb3JcIjowLFwiY2VpbGluZ1wiOjMwMzk5LjI1fV19fSx7XCJ0YWJcIjoxLFwiY2hhbm5lbGlkXCI6NTIsXCJkYXRhXCI6e1wicGRcIjowLFwicmRcIjoyNSxcImZjZFwiOjEwLFwiZmRcIjp7XCJzZWxlY3Rpb25cIjpbe1wiY2F0ZWdvcnlcIjpcInN1cHBsaWVyTmFtZVwiLFwib3B0aW9uc1wiOltcIlJpY2h0ZXJtZWllclN1cHBsaWVyXCJdfV0sXCJyYW5nZVwiOltdfSxcInNjZFwiOlwiXCIsXCJzb2RcIjpcIlwiLFwidm1kXCI6XCJjXCIsXCJyZmJcIjpbXX19LHtcInRhYlwiOjEsXCJjaGFubmVsaWRcIjo0OCxcImRhdGFcIjp7XCJwZFwiOjAsXCJyZFwiOjI1LFwiZmNkXCI6MTAsXCJmZFwiOntcInNlbGVjdGlvblwiOlt7XCJjYXRlZ29yeVwiOlwic3VwcGxpZXJOYW1lXCIsXCJvcHRpb25zXCI6W1wiUmljaHRlcm1laWVyU3VwcGxpZXJcIl19XSxcInJhbmdlXCI6W119LFwic2NkXCI6XCJcIixcInNvZFwiOlwiXCIsXCJ2bWRcIjpcImNcIixcInJmYlwiOltdfX0se1widGFiXCI6MSxcImNoYW5uZWxpZFwiOjIsXCJkYXRhXCI6e1wicGRcIjowLFwicmRcIjoyNSxcImZjZFwiOjEwLFwiZmRcIjp7XCJzZWxlY3Rpb25cIjpbe1wiY2F0ZWdvcnlcIjpcInN1cHBsaWVyTmFtZVwiLFwib3B0aW9uc1wiOltcIlJpY2h0ZXJtZWllclN1cHBsaWVyXCJdfV0sXCJyYW5nZVwiOltdfSxcInNjZFwiOlwiXCIsXCJzb2RcIjpcIlwiLFwidm1kXCI6XCJjXCIsXCJyZmJcIjpbXX19LHtcInRhYlwiOjEsXCJjaGFubmVsaWRcIjo1MCxcImRhdGFcIjp7XCJwZFwiOjAsXCJyZFwiOjI1LFwiZmNkXCI6MTAsXCJmZFwiOntcInNlbGVjdGlvblwiOlt7XCJjYXRlZ29yeVwiOlwic3VwcGxpZXJOYW1lXCIsXCJvcHRpb25zXCI6W1wiUmljaHRlcm1laWVyU3VwcGxpZXJcIl19XSxcInJhbmdlXCI6W119LFwic2NkXCI6XCJcIixcInNvZFwiOlwiXCIsXCJ2bWRcIjpcImNcIixcInJmYlwiOltdfX0se1widGFiXCI6MSxcImNoYW5uZWxpZFwiOjYsXCJkYXRhXCI6e1wicGRcIjowLFwicmRcIjoyNSxcImZjZFwiOjEwLFwiZmRcIjp7XCJzZWxlY3Rpb25cIjpbe1wiY2F0ZWdvcnlcIjpcInN1cHBsaWVyTmFtZVwiLFwib3B0aW9uc1wiOltcIlJpY2h0ZXJtZWllclN1cHBsaWVyXCJdfV0sXCJyYW5nZVwiOltdfSxcInNjZFwiOlwiXCIsXCJzb2RcIjpcIlwiLFwidm1kXCI6XCJjXCIsXCJyZmJcIjpbXX19LHtcInRhYlwiOjIsXCJjaGFubmVsaWRcIjo0NCxcImRhdGFcIjp7XCJwZG93XCI6MCxcInJkb3dcIjoyNSxcImZjZG93XCI6MTAsXCJmZG93XCI6e1wic2VsZWN0aW9uXCI6W3tcImNhdGVnb3J5XCI6XCJzdXBwbGllck5hbWVcIixcIm9wdGlvbnNcIjpbXCI1XCJdfV0sXCJyYW5nZVwiOltdfSxcInNjZG93XCI6XCJkYXRlXCIsXCJzb2Rvd1wiOlwiZGVzY1wiLFwidm1kb3dcIjpcInRcIixcInJmYlwiOltdfX1dIn0sInBkZlN0YXRlIjp7InNlYXJjaFRlcm0iOiJzcGV6aWZpa2F0aW9uIiwic2VsZWN0ZWRQYWdlIjoxLCJ1cGxvYWRJRCI6NTQ1LCJtYW51ZmFjdHVyZXJJZCI6IlJpY2h0ZXJtZWllclN1cHBsaWVyIiwiY2hhbm5lbElEIjo0OCwib3B0aW9ucyI6WyJhbWF6b24iXSwiaGFzRGVlcHNlYXJjaCI6dHJ1ZSwiY2hhbm5lbFNldHRpbmdIYXNTaG9wY2FydCI6dHJ1ZSwiY2hhbm5lbFNldHRpbmdIYXNDbGlwcGluZyI6ZmFsc2UsImNoYW5uZWxTZXR0aW5nSGFzQ2xpcHBpbmdEaWFsb2ciOmZhbHNlLCJjaGFubmVsU2V0dGluZ0hhc1Nob3BTZWFyY2giOnRydWUsImNoYW5uZWxTZXR0aW5nU2hvd0V4dGVybmFsU2VhcmNoIjpmYWxzZSwiY2hhbm5lbFNldHRpbmdzQ2FuRG93bmxvYWQiOmZhbHNlLCJwZGZTZWFyY2hFeGFjdE1hdGNoIjpmYWxzZSwidGh1bWJuYWlsUGF0aCI6Imh0dHBzOi8veHNwb3J0YWwtdGVzdC5pdGVrLmRlL3dlYnNlcnZpY2VodWIvRGF0ZWlhYnJ1Zk9NRD90eXBlPUxPJmZpbGVJRD1jMmwwWlhNdlpHVm1ZWFZzZEM5bWFXeGxjeTlwYm1admNHRmphMkZuWlM4eEx6VXZNVFl6TlRVd01URTROaTkwYUhWdFltNWhhV3h6TDJKdFpXTmhkRjh5TURBMUxuQmtaaTVxY0dWbiIsInVwbG9hZERlc2NyaXB0aW9uIjoiQmVzY2hyZWlidW5nIERldXRzY2giLCJkb3dubG9hZEluTmV3VGFiIjpmYWxzZX19"
}

articleselectionmode

Nein

Zeigt in der Artikelliste einen Button “Hinzufügen” an der beim drücken das Ausgangsevent “selectedarticle” auslößt.

Standardwert ist false.

true

usesubstitutes

Nein

Integration des Substitute-Widgets (alternativartikel) innerhalb der Artikeldetails. Dieses Feature kann nur Verwendet werden, wenn dies am System und für den Kanal aktiviert wurde. Über diesen Parameter kann es bei der Integration deaktiviert werden.

Standardwert ist true.

false

usedocuments

Nein

Integration des XS-Documents-Widgets (Bibliothek) innerhalb der Artikeldetails. Dieses Feature kann nur Verwendet werden, wenn dies am System und für den Kanal aktiviert wurde. Über diesen Parameter kann es bei der Integration deaktiviert werden.

Standardwert ist true.

false

usebimcad

Nein

Integration des BIM / CAD Widgets innerhalb der Artikeldetails. Dieses Feature kann nur Verwendet werden, wenn dies am System und für den Kanal aktiviert wurde. Über diesen Parameter kann es bei der Integration deaktiviert werden.

Standardwert ist true.

false

Ausgang

shopsearch

Nein

Dieses Event wird nur ausgegeben, wenn diese Funktion für den entsprechenden Kanal angeschaltet wurde.

Das Event beinhaltet folgende zwei Informationen.

  • searchterm

    • String / Kann leer sein

  • manufacturerid

    • String / Kann leer sein

  • callback

    • thumbnailurl: String, URL zum Thumbnail des Dokumentes. Bei Abruf muss der OAuth2 Token im Header der Anfrage mitgegeben werden.

    • uploaddescription: String, Uploadbeschreibung des Dokumentes

    • widgetstate: String, Status des Widgets für Rücksprung. Muss dem Widget beim Rücksprung in den Parametern übergeben werden um den Status wiederherzustellen.

 

Code Block
{
   "searchterm":"test",
   "manufacturerid":"testid"
   "callback": {
      "searchterm":"test",
      "manufacturerid":"testid",
      "thumbnailurl": "https://2.0.open-datacheck.de/webservicehub/DateiabrufOMD?type=LO&fileID=c2l0ZXMvZGVmYXVsdC9maWxlcy9pbmZvcGFja2FnZS8yLzEzMDEvMTYzNTE3MjczMi90aHVtYm5haWxzLzEwMzE5MjY0LnBkZi5qcGVn"
      "uploaddescription": "Installation 2021"
      "widgetstate": "c2l0ZXMvZGVmYXVsdC9maWxlcy9pbmZvcGFja2FnZS8yLzEzMDEvMTYzNTE3MjczMi9wYWdlL3RodW1ibmFpbHMvMTAzMTkyNjRfOTA2LnBkZi5qcGVn"
   }
}

shopcart

Nein

Dieses Event wird nur ausgegeben, wenn diese Funktion für den entsprechenden Kanal angeschaltet wurde.

  • thumbnailurl: String, URL zum Thumbnail des Dokumentes. Bei Abruf muss der OAuth2 Token im Header der Anfrage mitgegeben werden.

  • uploaddescription: String, Uploadbeschreibung des Dokumentes

  • widgetstate: String, Status des Widgets für Rücksprung. Muss dem Widget beim Rücksprung in den Parametern übergeben werden um den Status wiederherzustellen.

 

Code Block
{
  "searchterm":"test",
  "manufacturerid":"testid",
  "thumbnailurl": "https://2.0.open-datacheck.de/webservicehub/DateiabrufOMD?type=LO&fileID=c2l0ZXMvZGVmYXVsdC9maWxlcy9pbmZvcGFja2FnZS8yLzEzMDEvMTYzNTE3MjczMi90aHVtYm5haWxzLzEwMzE5MjY0LnBkZi5qcGVn"
  "uploaddescription": "Installation 2021"
  "widgetstate": "c2l0ZXMvZGVmYXVsdC9maWxlcy9pbmZvcGFja2FnZS8yLzEzMDEvMTYzNTE3MjczMi9wYWdlL3RodW1ibmFpbHMvMTAzMTkyNjRfOTA2LnBkZi5qcGVn"
}

 

status

ja

Dieses Event wird immer beim Initialisieren ausgegeben.

  • error

  • complete

 

dialogstatus

Nein

Dieses Event wird beim öffnen und schließen eines Dialoges ausgegeben. Werte:

  • open

  • close

pdflink

Nein

Dieses Event wird bei einem Klick auf einen externen Link in einem PDF Dokument ausgegeben.

Ausgabe des im PDF Dokument angegebene Wert für den externen Link als String

pdflinkextended

Nein

Dieses Event wird zusätzlich zum Event “pdflink” ausgelöst und beinhaltet ein callback-Attribut, das für den Rücksprung ins Widget verwendet werden kann.

Die Attribute in des Callback-Events sind:

  • searchterm

  • manufacturerid

  • thumbnailurl

  • uploaddescription

  • widgetstate

Beispielausgabe des Events:

Code Block
{
  link: "article://502151000"
  callback: {
      {
        "searchterm":"test",
        "manufacturerid":"testid"
        "thumbnailurl": "https://2.0.open-datacheck.de/webservicehub/DateiabrufOMD?type=LO&fileID=c2l0ZXMvZGVmYXVsdC9maWxlcy9pbmZvcGFja2FnZS8yLzEzMDEvMTYzNTE3MjczMi90aHVtYm5haWxzLzEwMzE5MjY0LnBkZi5qcGVn"
        "uploaddescription": "Installation 2021"
        "widgetstate": "c2l0ZXMvZGVmYXVsdC9maWxlcy9pbmZvcGFja2FnZS8yLzEzMDEvMTYzNTE3MjczMi9wYWdlL3RodW1ibmFpbHMvMTAzMTkyNjRfOTA2LnBkZi5qcGVn"
      }
  }
}

selectedarticle

Nein

Dieses Event wird nur ausgegeben, wenn der Eingangsparameter “articleselectionmode” auf “true” gesetzt ist. Dann wird beim klicken auf den Button “Hinzufügen” in der Artikelliste das Event ausgelöst.

Die Attribute des Events:

  • productInstanceId

  • productInstanceIdBase64 (optional)

  • productId

  • productIdBase64 (optional)

  • supplierId

  • supplierPid (optional)

Beispielausgabe:

Code Block
{
    "productInstanceId": "Broetje§|§818575-623452§|§1682326405000",
    "productInstanceIdBase64": "QnJvZXRqZcKnfMKnODE4NTc1LTYyMzQ1MsKnfMKnMTY4MjMyNjQwNTAwMA",
    "productId": "Broetje§|§818575-623452",
    "productIdBase64": "QnJvZXRqZcKnfMKnODE4NTc1LTYyMzQ1Mg",
    "supplierId": "Broetje",
    "supplierPid": "818575-623452"
}

usemultitree

Nein

Anzeige des Baums als Filter in der Artikelsuche. Dieses Feature kann nur Verwendet werden, wenn dies am System und für den Kanal aktiviert wurde. Des weiteren muss eine Definition des Baumes am Kanal gepflegt worden sein. Über diesen Parameter kann es bei der Integration deaktiviert werden.

Standardwert ist true.

false

Eingangsevents

closeAlldialogs

Dieses Event kann an das Widget emittet werden. Das Widget fängt das Event und schließt daraufhin alle zu Zeit geöffneten Dialogfenster.

Beispielaufruf:

Code Block
document.querySelector("xs-deepsearch-shadow-dom").dispatchEvent(new Event("closeAllDialogs"))

Beispielparameter

Code Block
breakoutModewide
{
    "channelid" : [2,1],
    "externalsearch" : false,
    "usebaudocs" : false,
    "removeroundbracketsinsuppliername" : true,
    "removesquarebracketsinsuppliername" : true,
    "style":{
        "primarycolor": "#616161",
        "secondarycolor": "#D3D3D3"
    },
    "pdfviewer":{
             "position":{
                   "top": "150px",
                   "right": "20px",
                   "bottom": "50px",
                   "left": "20px"
             }
    }
}

Beispielintegration

Folgendes Codesnippet in den HTML DOM einbetten.

Widget-Loader V1.x.x

Code Block
breakoutModewide
<!-- Widget -->
<xs-loader 
    accesstoken="[acccesstoken]" 
    refreshtoken="[refreshtoken]" 
    targeturl="https://2.0.open-datacheck.de" 
    widget="xs-deepsearch-shadow-dom" 
    widgetmode="true" 
    language="de" 
    parameter="eyJjaGFubmVsaWQiOjIsImV4dGVybmFsc2VhcmNoIjpmYWxzZSwidXNlYmF1ZG9jcyI6ZmFsc2V9">
</xs-loader>

<!-- Widget Resourcen -->
<script src="https://widget.itek.de/xs-loader/1.0.1/runtime.js" defer></script>
<script src="https://widget.itek.de/xs-loader/1.0.1/polyfills.js" defer></script>
<script src="https://widget.itek.de/xs-loader/1.0.1/main.js" defer></script>

Widget-Loader V2.x.x

Code Block
<!-- Widget -->
<xs-loader 
    accesstoken="[acccesstoken]" 
    refreshtoken="[refreshtoken]" 
    targeturl="https://2.0.open-datacheck.de" 
    widget="xs-deepsearch-shadow-dom" 
    widgetmode="true" 
    language="de" 
    parameter="eyJjaGFubmVsaWQiOjIsImV4dGVybmFsc2VhcmNoIjpmYWxzZSwidXNlYmF1ZG9jcyI6ZmFsc2V9">
</xs-loader>

<!-- Widget Resourcen -->
<link rel="stylesheet" href="https://widget.itek.de/xs-loader/2.0.0/styles.css">
<noscript><link rel="stylesheet" href="https://widget.itek.de/xs-loader/2.0.0/styles.css"></noscript>
<script src="https://widget.itek.de/xs-loader/2.0.0/xs-loader.js" defer></script>

Beispielevent “shopsearch”

Folgendes Codebeispiel wartet auf das Rückgabevent “shopsearch” von der DeepSearch.

Code Block
breakoutModewide
<script defer>
      // Auf ein Event vom Widget "xs-loader" warten. 
      //Wenn das Event "true" ist, kann ein Eventlistener für die DeepSearch registriert werden
      const loader_element = document.querySelector('xs-loader');
      loader_element.addEventListener('loadfinished', (loadEvent) => {
        console.log("Load finished: " +  loadEvent.detail);
        
        // Auf ein Event vom Widget warten.
        const widget_status = document.querySelector('xs-deepsearch-shadow-dom');
        widget_status.addEventListener('shopsearch', (statusEvent) => {
          console.log('"shopsearch" emitted: ' + statusEvent.detail)
        });
      });
</script>

Beispielevent “shopcart”

Folgendes Codebeispiel wartet auf das Rückgabevent “shopcart” von der DeepSearch.

Code Block
breakoutModewide
<script defer>
      // Auf ein Event vom Widget "xs-loader" warten. 
      //Wenn das Event "true" ist, kann ein Eventlistener für die DeepSearch registriert werden
      const loader_element = document.querySelector('xs-loader');
      loader_element.addEventListener('loadfinished', (loadEvent) => {
        console.log("Load finished: " +  loadEvent.detail);
        
        // Auf ein Event vom Widget warten.
        const widget_status = document.querySelector('xs-deepsearch-shadow-dom');
        widget_status.addEventListener('shopcart', (statusEvent) => {
          console.log('"shopcart" emitted: ' + statusEvent.detail)
        });
      });
</script>

Beispielevent “status”

Folgendes Codebeispiel wartet auf das Rückgabevent “status” von der DeepSearch.

Code Block
breakoutModewide
<script defer>
      // Auf ein Event vom Widget "xs-loader" warten. 
      //Wenn das Event "true" ist, kann ein Eventlistener für die DeepSearch registriert werden
      const loader_element = document.querySelector('xs-loader');
      loader_element.addEventListener('loadfinished', (loadEvent) => {
        console.log("Load finished: " +  loadEvent.detail);
        
        // Auf ein Event vom Widget warten.
        const widget_status = document.querySelector('xs-deepsearch-shadow-dom');
        widget_status.addEventListener('status', (statusEvent) => {
          console.log('"status" emitted: ' + statusEvent.detail)
        });
      });
</script>

...

Beispielcode (PHP)

Expand
titleBeispielintegration "DeepSearch"

Widget-Loader V1.x.x

Code Block
languagephp
<?php
    $systemURL = "https://2.0.open-datacheck.de"; // URL der Anlage, von der das Widget eingebunden werden soll
    $systemUsername  = ""; // Benutzer auf der Anlage
    $systemPassword = ""; // Passwort des Anlagen-Benutzeres
    $xsloaderVersion = "1.0.1"; // Version des XS-Loader Widgets

    $params = array(
        'grant_type' => 'password',
        'client_id' => 'article_search_client',
        'username'=> $systemUsername,                
        'password' => $systemPassword,
        'scope' => 'customer_portal_view_article_data_30',
    );

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $systemURL . "/oauth2/token");
    curl_setopt($ch, CURLOPT_POST, TRUE);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    $result = curl_exec($ch);
    $json_deepsearch = json_decode($result, true);
    curl_close($ch);
?>

<html>
    <head> 
        <title>Widget Integration Test</title>
    </head>

    <body>
        <noscript>
            DeepSearch funktioniert nur mit aktiviertem Javascript.
        </noscript>

            <!-- vor das widget--> 
            <link rel="stylesheet" href="https://widget.itek.de/xs-loader/<?php echo $xsloaderVersion ?>/styles.css">
            <noscript><link rel="stylesheet" href="https://widget.itek.de/xs-loader/<?php echo $xsloaderVersion ?>/styles.css"></noscript>
            <script src="https://widget.itek.de/xs-loader/<?php echo $xsloaderVersion ?>/runtime.js" defer></script>
            <script src="https://widget.itek.de/xs-loader/<?php echo $xsloaderVersion ?>/polyfills.js" defer></script>
            <script src="https://widget.itek.de/xs-loader/<?php echo $xsloaderVersion ?>/main.js" defer></script>

            <!-- Widget -->
            <xs-loader widget="xs-deepsearch-shadow-dom" accesstoken="<?php echo $json_deepsearch['access_token'];?>" refreshtoken="<?php echo $json_deepsearch['refresh_token'];?>" targeturl="<?php echo $systemURL ?>" language="de" widgetmode=true ></xs-loader>
    </body> 
</html>

Widget-Loader V2.x.x

Code Block
<?php
    $systemURL = "https://2.0.open-datacheck.de"; // URL der Anlage, von der das Widget eingebunden werden soll
    $systemUsername  = ""; // Benutzer auf der Anlage
    $systemPassword = ""; // Passwort des Anlagen-Benutzeres
    $xsloaderVersion = "2.0.0"; // Version des XS-Loader Widgets

    $params = array(
        'grant_type' => 'password',
        'client_id' => 'article_search_client',
        'username'=> $systemUsername,                
        'password' => $systemPassword,
        'scope' => 'customer_portal_view_article_data_30',
    );

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $systemURL . "/oauth2/token");
    curl_setopt($ch, CURLOPT_POST, TRUE);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    $result = curl_exec($ch);
    $json_deepsearch = json_decode($result, true);
    curl_close($ch);
?>

<html>
    <head> 
        <title>Widget Integration Test</title>
    </head>

    <body>
        <noscript>
            DeepSearch funktioniert nur mit aktiviertem Javascript.
        </noscript>

            <!-- vor das widget--> 
            <link rel="stylesheet" href="https://widget.itek.de/xs-loader/<?php echo $xsloaderVersion;?>/styles.css">
            <script src="https://widget.itek.de/xs-loader/<?php echo $xsloaderVersion ?>/xs-loader.js" defer></script>

            <!-- Widget -->
            <xs-loader widget="xs-deepsearch-shadow-dom" accesstoken="<?php echo $json_deepsearch['access_token'];?>" refreshtoken="<?php echo $json_deepsearch['refresh_token'];?>" targeturl="<?php echo $systemURL ?>" language="de" widgetmode=true ></xs-loader>
    </body> 
</html>

...