Technische Dokumentation des Documents-Widget

Changelog

09.08.2023 → neuer Eingangsparameter disableMetaTag
24.11.2022 → neuer Eingangsparameter “showArchivedDocs”
21.11.2022 → Neuen Eingangsparameter “widgetstate” und Ausgangsevent “pdflinkextended“ hinzugefügt
30.09.2022 → Neuen Eingangsparameter “downloadinnewtabtarget“ hinzugefügt
26.09.2022 → Einbindung über Widget-Loader V2.0.0 hinzugefügt
09.08.2022 → Eingangsevent closeAllDialogs hinzugefügt
19.07.22: PDFlink hinzugefügt
14.07.2022 → Dokumentation Suchlogik hinzugefügt
06.07.2022
- shopcart Event erweitert
- dialogstatus Event hinzugefügt
- Parameter style und pdfviewer hinzugefügt
04.05.2022 → Screenshots ausgetauscht
14.04.2022 → Neuen Parameter searchRequest hinzugefügt. Spezifikation der Eingangsparameter angepasst.
02.03.2022 → Beispieleinbindung ergänzt
02.03.2022 → Umstellen Widget-Loader-Version auf 1.0.1
02.03.2022 → Umstellen URLs von GC nach OpenDatacheck
01.12.2022 → neuer Status not_found
28.01.2022 → Erstellen der Dokumentation als Einzelseite

Alle Widgets werden über den “xs-loader” eingebunden. Bitte machen Sie sich mit der Dokumentation https://itek-wissen.atlassian.net/wiki/spaces/SOF/pages/2841313293 vertraut.

Dieses Widget startet eine Suche mit den übergebenen Parametern und stellt die Treffer in Verkaufsdokumenten als Einzelseiten dar. Es werden nur PDF Dokumente berücksichtigt.

Eingang
Parameter	Pflicht	Beschreibung	Beispielwert
channelid	Ja	Kanalid die als Grundlage für die Suche verwendet werden soll.	2
searchRequest	nein Es muss entweder der Parameter searchRequest oder die Kombination von searchterm und manufacturerid übergeben werden	Struktur zur Übergabe von lieferantenspezifischen Suchbegriffen. Es muß mindestens ein Objekt in searchRequest enthalten sein. Inerhalb dieses Objekts ist das Attribut searchTerm Pflicht. Wird darin auch das Attribut manufacturerid verwendet, so muß dieses mindestens eine Id enthalten.	{ "searchRequest": [{ "searchTerms": [ "Suchbegriff 1" ], "manufacturerid": [ "Lieferant 1", "Lieferant 2" ] }, { "searchTerms": [ "Suchbegriff 2", "Suchbegriff 3" ], "manufacturerid": [ "Lieferant 2" ] } ] }
searchterm	nein Es muss entweder der Parameter searchRequest oder searchterm übergeben werden.	Suchbegriff der zum Durchsuchen der Dokumente im Kanal verwendet wird.	test
manufacturerid	Nein Wird der Parameter searchRequest verwendet, so darf dieser Parameter nicht verwendet werden.	Liste von HerstellerID’s zum einschränken der Suche. Wenn keine ID’s angegeben wurden, werden alle Dokumente nach dem “searchterm” innerhalb des Kanals durchsucht.	[“COSMO”,”Oventrop”]
manufactureridtype	Nein	Der Id-Typ, welcher bei einer Anfrage verwendet wird. Das Feld muss nur gesetzt werden, wenn die manufacturerid von einem anderen System verwendet werden soll. Dabei müssen alle manufacturerids vom selben Typ sein. Diese Funktionalität steht nur zur Verfügung, wenn eine IDHUB Integration beauftragt wurde. Wird dieser Parameter nicht übertragen, so werden die übergebenen manufacturerid vom angefragten System verwendet. Der manufactureridtype bezieht sich sowohl auf den Parameter manufacturerid als auch auf die Property manufacturerid in dem Objekt des Parameters searchRequest.	odc
maxsize	Nein	Maximale Anzahl der Einzelseiten die angezeigt werden sollen.	100
maxpagesperdocument	Nein	Maximale Anzahl der Einzelseiten die pro Dokument zurückgeliefert werden. Wenn nicht angegeben wird 5 als Defaultwert verwendet.	5
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"`).	"style":{ "primarycolor": "#616161", "secondarycolor": "#D3D3D3" }
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.	"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	{ ... "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	{ ... "downloadinnewtabtarget": "_parent" }
showArchivedDocs	Nein	Der Parameter sorgt dafür, je nachdem welchen String man übergibt, ob nur Archivierte oder keine Archivierte oder alle angezeigt werden. Folgende Werte können angegeben werden: “archived“ ← zeigt nur Archivierte Dokumente an und keine nicht Archivierten Dokumente “notArchived“ ← zeigt keine Archivierte Dokumente an, nur nicht Archivierten Dokumente “all“ ← zeigt alle Dokumente an, also archiviert und nicht archiviert Hinweis: Wert “all“ ist nicht zwingend notwendig, da dieser Wert defaultmäßig gesetzt wird, wenn der Parameter nicht bzw. leer übergeben wird	{ ... “showArchivedDocs“: “archived“ }
widgetstate	Nein	Alle GET-Parameter des XS-Documents-Widget als Base64 String. Damit kann eine bestimmte Ansicht sofort beim Öffnen der Deep-Search geladen werden. In Kombination mit dem “pdflinkextended“-Event verwendbar	{ ... "widgetstate": "eyJzZWFyY2hUZXJtIjoid2Fzc2VyeuRobGVyIHdhc3NlcnphZWhsZXIgd2HfZXJ65GhsZXIiLCJzZWxlY3RlZFBhZ2UiOjc3LCJ1cGxvYWRJRCI6MzEsImV4dGVybmFsVXBsb2FkSUQiOiI1NDlmZDIxNi0zYTJkLTQ3MmQtODgyOS0yOGFkN2EyNTc3MGIiLCJtYW51ZmFjdHVyZXJJZCI6WyJKUC1UZXN0bGllZmVyYW50IiwiYWRtaW5sZnIxIiwiU0FJTjAxIl0sImNoYW5uZWxJRCI6Miwib3B0aW9ucyI6W10sImhhc0RlZXBzZWFyY2giOnRydWUsImNoYW5uZWxTZXR0aW5nSGFzU2hvcGNhcnQiOmZhbHNlLCJjaGFubmVsU2V0dGluZ0hhc0NsaXBwaW5nIjpmYWxzZSwiY2hhbm5lbFNldHRpbmdIYXNDbGlwcGluZ0RpYWxvZyI6ZmFsc2UsImNoYW5uZWxTZXR0aW5nSGFzU2hvcFNlYXJjaCI6ZmFsc2UsImNoYW5uZWxTZXR0aW5nU2hvd0V4dGVybmFsU2VhcmNoIjpmYWxzZSwidGh1bWJuYWlsUGF0aCI6Imh0dHBzOi8veHNwb3J0YWwtaW50ZWdyYXRpb24uaXRlay5kZS93ZWJzZXJ2aWNlaHViL0RhdGVpYWJydWZPTUQ/dHlwZT1MTyZmaWxlSUQ9YzJsMFpYTXZaR1ZtWVhWc2RDOW1hV3hsY3k5cGJtWnZjR0ZqYTJGblpTOHhMekV2TVRZMk5qTTBPREE1T0M5MGFIVnRZbTVoYVd4ekwwTER0bkp1WlhJdFVISmxhWE5zYVhOMFpTMUlaV2w2ZFc1bkxUQTFMVEl3TWpJdWNHUm1MbXB3WldjPSZ0a249MTA3Mjc0ODZmZjAyZmMyZWYyNzY0ZTUzZjFhOTE2MGFkN2VhYjAzMyIsInVwbG9hZERlc2NyaXB0aW9uIjoiQvZybmVyIFByZWlzbGxpc3RlIn0=" }
disableMetaTag	Nein	Das XS-Documents-Widget bindet ein meta-Tag ein. Dieses meta-Tag ist wie folgt definiert: <meta name="viewport" content="width=device-width, initial-scale=1"> Das Tag ist essenziell für die Darstellung des Widgets auf mobilen Endgeräten. Bei der Einbindung des Widgets in Apps kann der Tag zu Problemen führen. Mit diesem Parameter lässt sich steuern, ob der meta-Tag angelegt wird. Der meta-Tag kann dann beispielsweise von der einbinden Webseite zur Verfügung gestellt werden. Zu beachten ist, dass, falls der Tag abgeschaltet wird, für eine korrekte Darstellung auf mobilen Endgeräten keine Gewähr übernommen wird. Standardwert ist false.	true
Ausgang
status	ja	Dieses Event wird immer beim Initialisieren ausgegeben. error complete found not_found
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.	{ "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.	{ "searchterm":"test", "manufacturerid":"testid" "thumbnailurl": "https://2.0.open-datacheck.de/webservicehub/DateiabrufOMD?type=LO&fileID=c2l0ZXMvZGVmYXVsdC9maWxlcy9pbmZvcGFja2FnZS8yLzEzMDEvMTYzNTE3MjczMi90aHVtYm5haWxzLzEwMzE5MjY0LnBkZi5qcGVn" "uploaddescription": "Installation 2021" "widgetstate": "c2l0ZXMvZGVmYXVsdC9maWxlcy9pbmZvcGFja2FnZS8yLzEzMDEvMTYzNTE3MjczMi9wYWdlL3RodW1ibmFpbHMvMTAzMTkyNjRfOTA2LnBkZi5qcGVn" }
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: { 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" } } }
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: document.querySelector("xs-documents").dispatchEvent(new Event("closeAllDialogs"))

Fall 1 nur Parameter searchterm angegeben:

Der Suchbegriff wird bei Leerzeichen aufgetrennt und mittels Oder-Operator zusammengeführt.
Gefundene Dokumente enthalten mindestens einen der Teilsuchbegriffe enthalten.

Fall 2 Parameter searchterm und manufacturerid angegeben:

Der Suchbegriff wird wie in Fall 1 aufbereitet.
Das Feld manufacturerid dient als zusätzlicher Filter. Die einzelnen IDs werden Oder verknüpft.
manufacturerid und searchterm werden mittels Und-Operator verknüpft.
Gefundene Dokumente enthalten mindestens einen der Teilsuchbegriffe und von einem der angegebene Lieferanten stammen.

Fall 3 Parameter searchRequest angegeben:

Aufbereitung der einzelnen Suchbegriffe in searchTerms wie in Fall 1
Die Aufbereiteten Suchbegriffe werden mittels Oder-Operator verknüpft.
Das Feld manufacturerid dient als zusätzlicher Filter. Die einzelnen IDs werden Oder verknüpft.
manufacturerid und searchterm werden mittels Und-Operator verknüpft.
Die Suchrequests im Array searchRequest werden Oder verknüpft.
Gefundene Dokumente die auf mindestens einen der Suchrequests passen.

{
  "channelid":2,
  "searchterm":"test",
  "manufacturerid":"testid",
  "manufactureridtype":"opendatacheck_shk",
  "maxsize":100,
  "style":{
    "primarycolor": "#616161",
    "secondarycolor": "#D3D3D3"
  },
  "pdfviewer":{
             "position":{
                   "top": "150px",
                   "right": "20px",
                   "bottom": "50px",
                   "left": "20px"
             }
    }
}

Folgendes Codesnippet in den HTML DOM einbetten.

<!-- Widget -->
<xs-loader 
    accesstoken="[acccesstoken]" 
    refreshtoken="[acccesstoken]" 
    targeturl="https://2.0.open-datacheck.de" 
    widget="xs-documents" 
    widgetmode="true" 
    language="de" 
    parameter="ewogICAiY2hhbm5lbGlkIjoyLAogICAic2VhcmNodGVybSI6InRlc3QiLAogICAibWFudWZhY3R1cmVyaWQiOiJ0ZXN0aWQiLAogICAibWFudWZhY3R1cmVyaWR0eXBlIjoib3BlbmRhdGFjaGVja19zaGsiLAogICAibWF4c2l6ZSI6MTAwCn0=">
</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 -->
<xs-loader 
    accesstoken="[acccesstoken]" 
    refreshtoken="[acccesstoken]" 
    targeturl="https://2.0.open-datacheck.de" 
    widget="xs-documents" 
    widgetmode="true" 
    language="de" 
    parameter="ewogICAiY2hhbm5lbGlkIjoyLAogICAic2VhcmNodGVybSI6InRlc3QiLAogICAibWFudWZhY3R1cmVyaWQiOiJ0ZXN0aWQiLAogICAibWFudWZhY3R1cmVyaWR0eXBlIjoib3BlbmRhdGFjaGVja19zaGsiLAogICAibWF4c2l6ZSI6MTAwCn0=">
</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>

Folgendes Codebeispiel wartet auf das Rückgabevent “status” von dem Documents Widget.

<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-documents');
        widget_status.addEventListener('status', (statusEvent) => {
          console.log('"status" emitted: ' + statusEvent.detail)
        });
      });
</script>

Beispieleinbindung

Widget-Loader V1.x.x

<?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
    $phpDebug = true; // Debugmode für den PHP Teil
    $phpDisableSSLVerify = true;

    $params = array(
        'grant_type' => 'password',
        'client_id' => 'article_search_client',
        'username'=> $systemUsername,                
        'password' => $systemPassword,
        'scope' => 'customer_portal_view_article_data_30',
    );
    
    try{
        $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);
        
        if( $phpDisableSSLVerify) {
            //Disable CURLOPT_SSL_VERIFYHOST and CURLOPT_SSL_VERIFYPEER by
            curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        }
       
        $result = curl_exec($ch);
        if(curl_exec($ch) === false && $phpDebug) 
        {
            echo 'Curl-Fehler: ' . curl_error($ch);
        }
        $json_deepsearch = json_decode($result, true);

        // Widget Parameter konfigurieren
        $parameters = [
            'channelid' => 2,
            'searchterm' => 'Gefahrgutkennzeichen',
            'maxsize' => 20,
            'manufactureridtype' => 'opendatacheck_shk',
            'manufacturerid' => ['Oventrop','COSMO'],
        ];
        $jsonParameters = json_encode($parameters);
        $base64Parameters = base64_encode($jsonParameters);
    }catch (Exception $e) {
        if( $phpDebug)
        {
            echo 'Exception abgefangen: ',  $e->getMessage(), "\n";
        }
    }
    
    curl_close($ch);
?>

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

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

        <!-- Widgetcontainer an die Stelle kopieren, wo das Widget angezeugt werden soll --> 
        <div id="widget-container" class="widget-container" >
            <!-- vor das widget-->
            <noscript>Documents funktioniert nur mit aktiviertem Javascript.</noscript>
            <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-documents" accesstoken="<?php echo $json_deepsearch['access_token'];?>" refreshtoken="<?php echo $json_deepsearch['refresh_token'];?>" targeturl="<?php echo $systemURL ?>" language="de" widgetmode=true parameter="<?php echo $base64Parameters; ?>"></xs-loader>

            
            <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-documents');

                    widget_status.addEventListener('shopsearch', (statusEvent) => {
                        console.log('"shopsearch" emitted: ' + statusEvent.detail)
                    });

                    widget_status.addEventListener('shopcart', (statusEvent) => {
                        console.log('"shopcart" emitted: ' + statusEvent.detail)
                    });
                    
                    widget_status.addEventListener('status', (statusEvent) => {
                        console.log('"status" emitted: ' + statusEvent.detail)
                    });
                });
            </script>
        </div>
    </body> 
</html>

Widget-Loader V2.x.x

<?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.1"; // Version des XS-Loader Widgets
    $phpDebug = true; // Debugmode für den PHP Teil
    $phpDisableSSLVerify = true;

    $params = array(
        'grant_type' => 'password',
        'client_id' => 'article_search_client',
        'username'=> $systemUsername,                
        'password' => $systemPassword,
        'scope' => 'customer_portal_view_article_data_30',
    );
    
    try{
        $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);
        
        if( $phpDisableSSLVerify) {
            //Disable CURLOPT_SSL_VERIFYHOST and CURLOPT_SSL_VERIFYPEER by
            curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        }
       
        $result = curl_exec($ch);
        if(curl_exec($ch) === false && $phpDebug) 
        {
            echo 'Curl-Fehler: ' . curl_error($ch);
        }
        $json_deepsearch = json_decode($result, true);

        // Widget Parameter konfigurieren
        $parameters = [
            'channelid' => 2,
            'searchterm' => 'Gefahrgutkennzeichen',
            'maxsize' => 20,
            'manufactureridtype' => 'opendatacheck_shk',
            'manufacturerid' => ['Oventrop','COSMO'],
        ];
        $jsonParameters = json_encode($parameters);
        $base64Parameters = base64_encode($jsonParameters);
    }catch (Exception $e) {
        if( $phpDebug)
        {
            echo 'Exception abgefangen: ',  $e->getMessage(), "\n";
        }
    }
    
    curl_close($ch);
?>

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

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

        <!-- Widgetcontainer an die Stelle kopieren, wo das Widget angezeugt werden soll --> 
        <div id="widget-container" class="widget-container" >
            <!-- vor das widget-->
            <noscript>Documents funktioniert nur mit aktiviertem Javascript.</noscript>
            <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-documents" accesstoken="<?php echo $json_deepsearch['access_token'];?>" refreshtoken="<?php echo $json_deepsearch['refresh_token'];?>" targeturl="<?php echo $systemURL ?>" language="de" widgetmode=true parameter="<?php echo $base64Parameters; ?>"></xs-loader>

            
            <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-documents');

                    widget_status.addEventListener('shopsearch', (statusEvent) => {
                        console.log('"shopsearch" emitted: ' + statusEvent.detail)
                    });

                    widget_status.addEventListener('shopcart', (statusEvent) => {
                        console.log('"shopcart" emitted: ' + statusEvent.detail)
                    });
                    
                    widget_status.addEventListener('status', (statusEvent) => {
                        console.log('"status" emitted: ' + statusEvent.detail)
                    });
                });
            </script>
        </div>
    </body> 
</html>

Inhalt

Integration per “xs-loader” Widget

Parameter “xs-documents“

Logik Suche

Beispielparameter

Beispielintegration

Widget-Loader V1.x.x

Widget-Loader V2.x.x

Beispielevent “status”

Beispielcode (PHP)