Parameter “xs-pdf-viewer”

Dieses Widget öffnet das über die Link-Id identifizierte PDF-Dokument.

Eingang
Parameter	Pflicht	Beschriebung	Beispielwert
linkID	Ja	Externe Link-ID des Uploads, der im Viewer geöffnet werden soll. Die ID kann im Infopaket-Upload am Upload erzeugt werden.	b8fd8f7c-d815-41a3-b36b-d7120821d1d1
download	Nein	Aktiviert die Downloadfunktion der PDF-Dokumente für diesen Kanal. Wenn deaktiviert, wird der Downloadbutton nicht angezeigt.	true
shopcart	Nein	Aktiviert das Warenkorbevent, dass das einbindende System zum Öffnen des Warenkorboverlays verwenden kann. Wenn deaktiviert, wird der Warenkorbbutton im PDF-Viewer nicht angezeigt.	true
shopsearch	Nein	Aktiviert das Suchevent, dass das einbindende System zur weiteren Suche verwenden kann. Wenn deaktiviert, wird der Suchbutton für den Shop nicht angezeigt.	true
externalsearch	Nein		true
donwloadinnewtab	Nein	Wird der Parameter auf true gesetzt, so öffnet sich beim klick auf den Downloadbutton ein neuer Tab und die Datei wird heruntergeladen	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" }
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" }
Ausgang
status		Dieses Event wird immer beim Initialisieren ausgegeben. error complete found
shopsearch		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" } }
shopcart		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"" }
shopcart		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

Beispielparameter

{
    "linkID" : "b8fd8f7c-d815-41a3-b36b-d7120821d1d1",
    "download" : false,
    "shopcart" : false,
    "shopsearch" : true,
    "externalsearch" : true,
    "donwloadinnewtab" : true,
    "style":{
        "primarycolor": "#616161",
        "secondarycolor": "#D3D3D3"
    }
}

Beispielintegration

Folgendes Codesnippet in den HTML DOM einbetten.

<!-- Widget -->
<xs-loader 
    accesstoken="[acccesstoken]" 
    refreshtoken="[refreshtoken]" 
    targeturl="https://2.0.open-datacheck.de" 
    widget="xs-pdf-viewer" 
    widgetmode="true" 
    language="de" 
    parameter="ewogICAgImxpbmtJRCIgOiAiYjhmZDhmN2MtZDgxNS00MWEzLWIzNmItZDcxMjA4MjFkMWQxIiwKICAgICJkb3dubG9hZCIgOiBmYWxzZSwKICAgICJzaG9wY2FydCIgOiBmYWxzZSwKICAgICJzaG9wc2VhcmNoIiA6IHRydWUsCiAgICAiZXh0ZXJuYWxzZWFyY2giIDogdHJ1ZSwKICAgICJkb253bG9hZGlubmV3dGFiIiA6IHRydWUsCiAgICAic3R5bGUiOnsKICAgICAgICAicHJpbWFyeWNvbG9yIjogIiM2MTYxNjEiLAogICAgICAgICJzZWNvbmRhcnljb2xvciI6ICIjRDNEM0QzIgogICAgfQp9">
</xs-loader>

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

Beispielevent “shopsearch”

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

<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-pdf-viewer');
        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.

<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-pdf-viewer');
        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.

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

Beispielcode (PHP)

Beispielintegration "PDFViewer"

<?php
    $systemURL = "https://real.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_pdfviewer = json_decode($result, true);

        // Widget Parameter konfigurieren
        $parameters = [
            "linkID" => "b8fd8f7c-d815-41a3-b36b-d7120821d1d1",
            "download" => true,
            "shopcart" => true,
            "shopsearch" => true,
            "externalsearch" => true,
            "donwloadinnewtab" => false,
            "style" => [
                "primarycolor" => "#b8e4f9",
                "secondarycolor" => "#D3D3D3"
            ]
        ];
        $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>PDF-Viewer-Widget funktioniert nur mit aktiviertem Javascript.</noscript>

            <!-- Widget Resourcen -->
            <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-pdf-viewer" accesstoken="<?php echo $json_pdfviewer['access_token'];?>" refreshtoken="<?php echo $json_pdfviewer['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-pdf-viewer');

                    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)
                    });

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

                const body_element = document.querySelector('body');
                body_element.addEventListener('shopsearch', (statusEvent) => {
                    console.log('"shopsearch" emitted @body: ' + statusEvent.detail)
                });

                body_element.addEventListener('shopcart', (statusEvent) => {
                    console.log('"shopcart" emitted @body: ' + statusEvent.detail)
                });
                    
                body_element.addEventListener('status', (statusEvent) => {
                    console.log('"status" emitted @body: ' + statusEvent.detail)
                });

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

Technische Dokumentation des PDF-Viewer-Widgets