Die OXOMI Produktdaten-Integrationen ermöglichen es, produktbezogene Informationen wie Videos, Bilder, Dateianhänge und Artikeldetails in Webseiten zu integrieren. Die Art der Information kann dabei individuell gewählt werden.
Hierfür stehen im Detail die nachfolgenden JavaScript-Funktionen zur Verfügung:
- Die Nutzung von oxomi.fillProductData ermöglicht die effiziente Befüllung von HTML-Elementen mit Produktdaten. Die Integration sucht automatisch nach speziellen data-Attributen und fügt entsprechende Informationen in die Elemente ein.
- oxomi.productData bietet eine alternative Methode zur Informationsabfrage. Sie können gezielt Aufrufparameter verwenden, um individuelle Details zu einem Produkt abzurufen und in definierte DOM-Elemente zu integrieren.
- Mit oxomi.productDataExists können Sie vor dem eigentlichen Abruf von Produktinformationen überprüfen, ob die gewünschten Daten vorhanden sind. Dies ermöglicht eine effiziente Handhabung von Anfragen.
- oxomi.requestProductData ermöglicht es, gezielt Produktinformationen abzurufen. Die Produktinformationen werden dabei in einem JSON-Objekt zurückgegeben.
Die nachfolgenden Abschnitte geben einen detaillierten Einblick in jede Integration und zeigen, wie sie optimal genutzt werden können, um Ihre Webseiten mit aktuellen und relevanten Produktdaten anzureichern.
Die oxomi.fillProductData Integration bietet mit minimalem Entwicklungsaufwand effizienten und einfachen Zugang zu den vielfältigen OXOMI Produktdaten. Die Funktion sucht automatisch HTML-Elemente mit speziellen data-Attributen und füllt diese mit entsprechenden Produktinformationen.
Die Methode ermöglicht die Angabe eines Ziels via DOM-Element oder Selektor-String. Dies ist besonders nützlich, wenn auf komplexen Seiten nur bestimmte Elemente befüllt werden sollen. Die Suche nach relevanten Elementen wird dadurch vorab eingeschränkt und somit beschleunigt.
Ein wichtiges Merkmal dieser Integration ist, dass bereits bearbeitete Elemente markiert werden. Dadurch wird sichergestellt, dass bei erneutem Aufruf der JavaScript-Funktion diese Elemente nicht erneut befüllt werden. Diese Vorgehensweise trägt nicht nur zur besseren Performance bei, sondern ermöglicht auch die optimale Bündelung von Anfragen. Das bedeutet, dass mehrere Elemente mit nur einem Funktionsaufruf effizient befüllt werden können. Daher wird die Verwendung der oxomi.fillProductData gegenüber oxomi.productData empfohlen.
Attribute
Die nachfolgende Tabelle zeigt die möglichen data-Attribute, die von der Integration unterstützt werden.
Attribut | Typ | Beschreibung |
---|---|---|
data-oxomi-product-data | string |
Gibt den Informations-Typ an, der abgefragt werden soll. Die zur Verfügung stehenden Werte können hier eingesehen werden: Informationstypen |
data-oxomi-item-number | string |
Gibt die Artikelnummer des Produktes an, das abgefragt werden soll. |
data-oxomi-supplier-number | string |
Gibt die Lieferantennummer des Produktes an, das abgefragt werden soll. Hinweis:
|
Parameter
Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.
Parameter | Parametertyp | Beschreibung | target | string |
Gibt das Ziel-Element an, auf welches die Elemente Suche eingeschränkt werden soll. |
---|
Beispiel
Das folgende Beispiel zeigt, wie die Integration verwendet werden kann, um die Produktbilder eines Produktes anzuzeigen.<div data-oxomi-product-data="product-images" data-oxomi-supplier-number="SUPPLIER" data-oxomi-item-number="ARTIKELNR"> </div> <script type="text/javascript"> oxomi.fillProductData(); </script>Interactive Code Example
Die oxomi.productData Integration stellt eine alternative Methode zum Befüllen von HTML-Elementen mit Produktdaten dar. Im Wesentlichen dient sie demselben Zweck wie oxomi.fillProductData, weicht jedoch in der Herangehensweise ab.
Im Gegensatz zur Verwendung von data-Attributen zur Identifizierung von zu befüllenden Elementen ermöglicht oxomi.productData die Übermittlung von Aufrufparametern. Diese definieren dann die Ziel-Elemente, in welche die entsprechenden Daten gerendert werden sollen. Die definierten Ziel-Elemente werden nur sichtbar geschaltet, sofern Daten für das angeforderte Produkt existieren.
Es ist wichtig zu beachten, dass oxomi.productData auf einen Produktdatensatz pro Aufruf beschränkt ist. Anders als bei der oxomi.fillProductData Integration, die mehrere Elemente auf einmal befüllen kann, erfordert oxomi.productData also einen separaten Aufruf für jeden Produktdatensatz. Diese Einschränkung sollte berücksichtigt werden, insbesondere wenn eine größere Anzahl verschiedener Produkte auf einer Seite dargestellt und mit Produktdaten aus OXOMI angereichert werden soll.
Parameter
Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.
Parameter | Parametertyp | Beschreibung | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
information | Object |
Gibt die Informations-Typen und deren Ziel-Elemente sowie mögliche weitere Einstellungsparameter an. Die zur Verfügung stehenden Werte können hier eingesehen werden: Informationstypen Pro angefragtem Informations-Typ ist ein Objekt mit den folgenden Parametern anzugeben:
|
|||||||||
products | Array |
Gibt die Artikelnummern und Lieferantennummern der Produkte an, die abgefragt werden sollen. Die so gefundenen Inhalte werden bei Abfrage mehrerer Produkte kombiniert und in die entsprechenden Ziel-Elemente gerendert. Gefundene Produktinformationen (z. B. Bilder, Anhänge, Merkmale, …) werden konsistent vom ersten in einem Datensatz gefundenen Produkt übernommen. Pro angefragtem Produkt ist ein Objekt mit den folgenden Parametern anzugeben:
|
Beispiel
Das folgende Beispiel zeigt, wie die Integration verwendet werden kann, um die Produktbilder, Anhänge und Videos eines Produktes in entsprechenden DOM-Elementen anzuzeigen.oxomi.productData({ products: [{ itemNumber: 'ARTIKELNR', supplierNumber: 'SUPPLIER' }], information: { 'product-images': { target: '#product-images' }, 'attachments': { target: '#product-attachments', limit: 5 } 'videos': { target: '#product-videos' includeOutdated: true } } });Interactive Code Example
Die oxomi.productDataExists Funktion bietet eine Möglichkeit, zu überprüfen, ob bestimmte Informationen zu einem Produkt in OXOMI hinterlegt sind. Dieser Aufruf liefert ein Promise zurück, das mit einem Ergebnis-JSON-Objekt befüllt wird. Das JSON-Objekt gibt Auskunft darüber, welche der angefragten Produktinformationen verfügbar sind, dazu zählen beispielsweise Videos, Bilder, Anhänge und weitere relevante Daten.
Durch die Verwendung von oxomi.productDataExists kann vor dem eigentlichen Abruf von Produktinformationen festgestellt werden, ob die gewünschten Daten überhaupt vorhanden sind. Dies ermöglicht eine effiziente und gezielte Handhabung von Anfragen, da unnötige Abfragen vermieden werden können, wenn die benötigten Informationen nicht verfügbar sind.
Parameter
Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.
Parameter | Parametertyp | Beschreibung |
---|---|---|
information | Object |
Gibt den Informations-Typen an, welcher überprüft werden soll. Die zur Verfügung stehenden Werte können hier eingesehen werden: Informationstypen |
itemNumber | string |
Gibt die Artikelnummer des Produkts an, für welches die Abfrage durch geführt werden soll. |
supplierNumber | string |
Gibt die Nummer des Lieferanten an, über welchen das Produkt bezogen wird. Hinweis:
|
Beispiel
Das folgende Beispiel zeigt, wie die Integration verwendet werden kann, um zu überprüfen, ob ein Produkt Videos, Bilder und Anhänge enthält.oxomi.productDataExists({ itemNumber: 'ARTIKELNR', supplierNumber: 'SUPPLIER', information: ['product-images', 'attachments', 'videos'] });Die Antwort auf die Anfrage könnte wie folgt aussehen:
{ product-images: true attachments: false videos: true }
Um die Existenz von Daten mehrerer Produkte in einem einzigen Aufruf zu überprüfen, können Sie die Parameter der Integration durchnummerieren. Analog zur Produktdatenintegration wird für Inhalte hierbei die Existenz bekundet, wenn mindestens eins der angegebenen Produkte entsprechende Inhalte bereit stellt. Bei Produktinformationen (z. B. Bilder, Anhänge, Merkmale, …) wird die Existenz konsistent vom ersten in einem Datensatz gefundenen Produkt übernommen. Beispiel:
oxomi.productDataExists({ itemNumber1: 'ARTIKELNR', supplierNumber1: '-', itemNumber2: 'WERKSARTIKELNR', supplierNumber2: 'SUPPLIER', information: ['product-images', 'attachments', 'videos'] });
Die Funktion oxomi.requestProductData bietet eine Möglichkeit, gezielt Produktinformationen abzurufen. Dieser Aufruf liefert ein Promise zurück, das mit einem Ergebnis-JSON-Objekt befüllt wird. Das JSON-Objekt gibt Auskunft über die angeforderten Produktinformationen. Die Integration nutzt intern dabei die Produktdaten API V1. Daher können alle dort verfügbaren Parameter und Optionen auch in dieser Integration verwendet werden.
Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.
Parameter | Parametertyp | Beschreibung |
---|---|---|
itemNumber | string |
Gibt die Artikelnummer des Produkts an, für welches die Abfrage durch geführt werden soll. |
itemNumberPrefix | string |
Gibt das Präfix für die Artikelnummer an. Hinweis:
|
supplierNumber | string |
Gibt die Nummer des Lieferanten an, über welchen das Produkt bezogen wird. Hinweis:
|
queries | string |
Gibt die Art der Produktinformationen an, die abgefragt werden sollen. Die zur Verfügung stehenden Werte können hier eingesehen werden: Informationstypen |
Einzelinformationen
Die nachfolgende Tabelle zeigt die zur Verfügung stehenden Einzelinformationen an. Mit diesen können die einzelnen Informationen eines Produktes abgefragt werden.
Wert | Beschreibung | ||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
energy-label |
Provides the ErP energy label of a product. |
||||||||||||||||||||||||||||||||
attachments |
Provides the attachments of a product. Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.
|
||||||||||||||||||||||||||||||||
icons |
Provides the icons, pictograms and quality seals of a product. Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.
|
||||||||||||||||||||||||||||||||
cover |
Provides the datasheet cover image of a product. |
||||||||||||||||||||||||||||||||
properties |
Provides the properties of a product. |
||||||||||||||||||||||||||||||||
features |
Provides the features of a product. |
||||||||||||||||||||||||||||||||
galleries |
Provides the galleries linked to the product. Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.
|
||||||||||||||||||||||||||||||||
spare-parts |
Provides the spare parts information of a product. Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.
|
||||||||||||||||||||||||||||||||
html-description |
Provides the HTML formatted description text of a product. |
||||||||||||||||||||||||||||||||
tender-text |
Provides the HTML-formatted tender text of a product. |
||||||||||||||||||||||||||||||||
product-images |
Provides images of a product. Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.
|
||||||||||||||||||||||||||||||||
measurements |
Provides the dimensions of a product. |
||||||||||||||||||||||||||||||||
card |
Provides the product card for display in a list. Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.
|
||||||||||||||||||||||||||||||||
building-phases |
Provides the images, files, and videos of a product grouped by construction phases. |
||||||||||||||||||||||||||||||||
videos |
Provides the videos associated with the product. Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.
|
||||||||||||||||||||||||||||||||
pages |
Provides the document pages that match the product. Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.
|
||||||||||||||||||||||||||||||||
relationships |
Provides the relationships of a product. Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.
|
||||||||||||||||||||||||||||||||
commercial |
Provides the commercial information of a product. Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.
|
||||||||||||||||||||||||||||||||
stories |
Provides the Stories associated with the product. Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.
|
||||||||||||||||||||||||||||||||
datasheet-story |
Provides the active main story of a product. |
Datenblatt-Blöcke
Die nachfolgende Tabelle zeigt die zur Verfügung stehenden Informationsblöcke an. Mit diesen können ganze Blöcke an Informationen abgefragt werden. Die Darstellung der Blöcke entspricht dabei der aus dem OXOMI-Datenblatt.
Wert | Beschreibung |
---|---|
header | Renders the block ‘Header’ of the datasheet. |
details | Renders the block ‘Item Details’ of the datasheet. |
bim-3d | Renders the block ‘BIM/3D’ of the datasheet. |
datasheet-story | Renders the Information block of the datasheet. |
characteristics | Renders the Properties block of the datasheet. |
related-files | Renders the block ‘Media’ of the datasheet. |
relations | Renders the block ‘Relationships’ of the datasheet. |