Description
On this page you will find the technical description for integrating the PDF viewer. The PDF viewer can be used to view PDF documents. Within the PDF viewer, many additional functions such as a download button, a shopping cart, a search function, etc. can be used and added. Below you will find an overview of the content of this page:
Contents
Parameters “xs-pdf-viewer”
This widget opens the PDF document identified by the link ID.
Eingang | |||
|---|---|---|---|
Parameter | Pflicht | Beschriebung | Beispielwert |
linkID | Yes | External link ID of the upload to be opened in the viewer. The ID can be generated in the info package upload at the time of upload. | b8fd8f7c-d815-41a3-b36b-d7120821d1d1 |
download | No | Activates the download function of the PDF documents for this channel. If deactivated, the download button will not be displayed. | true |
shopcart | No | Enables the shopping cart event that the embedding system can use to open the shopping cart overlay. If disabled, the shopping cart button will not be displayed in the PDF viewer. | true |
shopsearch | No | Activates the search event that the embedding system can use for further searches. If deactivated, the search button for the shop will not be displayed.. | true |
externalsearch | No | true | |
donwloadinnewtab | No | If the parameter is set to true, a new tab will open when you click on the download button and the file will be downloaded | true |
downloadinnewtabtarget | No | To be used in conjunction with “downloadinnewtab”. Only used if “downloadinnewtab” is set to true Specifies the destination that the download URL should open By default or if no value is set, “_blank” is used | {
...
"downloadinnewtabtarget": "_parent"
}
|
style | No | JSON object to define the primary and secondary color of the widget. The object has two fields:
| "style":{
"primarycolor": "#616161",
"secondarycolor": "#D3D3D3"
}
|
Ausgang | |||
status | This event is always issued during initialization.
| ||
shopsearch | This event is only output if this function has been activated for the corresponding channel. The event contains the following two pieces of information.
| {
"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 | This event is only output if this function has been enabled for the corresponding channel.
| {
"searchterm":"test",
"manufacturerid":"testid"
"thumbnailurl": "https://2.0.open-datacheck.de/webservicehub/DateiabrufOMD?type=LO&fileID=c2l0ZXMvZGVmYXVsdC9maWxlcy9pbmZvcGFja2FnZS8yLzEzMDEvMTYzNTE3MjczMi90aHVtYm5haWxzLzEwMzE5MjY0LnBkZi5qcGVn"
"uploaddescription": "Installation 2021""
}
| |
shopcart | This event is output when you click on an external link in a PDF document. | Output of the value specified in the PDF document for the external link as a string | |
Example image
Example parameters
{
"linkID" : "b8fd8f7c-d815-41a3-b36b-d7120821d1d1",
"download" : false,
"shopcart" : false,
"shopsearch" : true,
"externalsearch" : true,
"donwloadinnewtab" : true,
"style":{
"primarycolor": "#616161",
"secondarycolor": "#D3D3D3"
}
}
Example integration
Embed the following code snippet into the HTML DOM.
<!-- 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>
Example event “shopsearch”
The following code example waits for the return event “shopsearch” from 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>
Example event “shopcart”
The following code example waits for the return event “shopcart” from 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>
Example event “status”
The following code example waits for the return event “status” from 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>
Sample code (PHP)
<?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>