Ein normaler Webshop.
Das 3D kommt von außen.

Nordwerk ist ein Demoshop: statisches HTML, etwas JavaScript, kein Framework, kein Backend. Alles Produktbezogene — Artikeldaten, Preise, Merkmale, Bilder und die 3D-Ansicht — stammt aus dem 3D office WebKatalog. So sieht die Integration in Ihrem Shop auch aus.

Produktseite ansehen

Was hier echt ist

Ein Demoshop, der Dinge behauptet, überzeugt niemanden. Deshalb sauber getrennt:

Live aus dem WebKatalog

Artikeldaten, Kurz- und Langtexte, Variantentexte
Merkmale, zulässige Werte und Materialbilder
Preise und aufgelöste Artikelnummern der Demodaten
Gerenderte Produktbilder jeder Konfiguration
Die 3D-Ansicht samt Konfiguration, AR und Downloads
Der Katalogbaum mit über 50 Herstellern

Shop-Fiktion

Nordwerk selbst – Name, Texte, Versandregeln
Bestellung, Auftragsnummer und Bestätigungsmail
Das „Beschaffungssystem“, das die OCI-Rückgabe entgegennimmt
Preise der Herstellerserien: der Demozugang führt nur die Demodaten mit Preisen, deshalb stehen diese Artikel auf „Preis auf Anfrage“

Jedes Shop-Element und sein Gegenstück

Was auf welchem Weg aus dem WebKatalog kommt.

Im Shop	Mechanismus	Aufruf
Produktkacheln, Preis, Artikelnummer	REST, Artikel laden	GET /api/ofml.dll/ofml/articles
Produktbild in jeder Ausführung	REST, Bild rendern	GET /api/odb.dll/odb/articlesimage.jpg
Material- und Farbmuster im Shop-Design	REST, Vorschaubilder	GET /api/ocd.dll/ocd/preview/…
Farbe wählen → neuer Preis, neue Artikelnummer	REST, Merkmal ändern	POST /api/ofml.dll/ofml/articles
3D-Ansicht auf der Produktseite	iFrame, Einzelartikelansicht	/planning?disablecatalogue=true&ocdreinit=…
Auswahl im Shop → 3D folgt	postMessage an den WebKatalog	SET_ARTICLE
Konfiguration im 3D → Shop-Preis folgt	postMessage an den Shop	PROPERTY_UPDATED
„Markenkatalog öffnen“	iFrame im Katalogmodus	/planning?opencatalogue=true
Artikel aus dem Katalog übernehmen	postMessage, Frage und Antwort	REQUEST_CURRENT_ARTICLE → CURRENT_ARTICLE
Preisanzeige und Rabatt im Viewer schalten	postMessage, ohne Neuladen	SET_CONFIG
Dunkelmodus des Shops	postMessage	SET_THEME
Anfrage-Formular mit Konfiguration	Lead-Datensatz für Ihr CRM	CONTACT_REQUEST
Übergabe an die Beschaffung	OCI 5.0, Formular-POST	NEW_ITEM-… an Ihre HOOK_URL
Katalogbaum, Marken, Suche	REST, Katalognavigation	GET /api/xcf.dll/xcf/getnodes

Zwei Integrationstiefen

Beide laufen in diesem Demoshop — Sie können sie direkt vergleichen.

Standard

iFrame-Einbettung

Der WebKatalog bringt Katalog, Merkmalseditor und Informationsbereich mit. Sie setzen ein Tag auf Ihre Seite, sonst nichts. Aussehen und Umfang steuern Sie über URL-Parameter.

Ohne Entwicklungsaufwand
Katalog oder Einzelartikel
Warenkorb per urlwarenkorb an Ihren Shop

Beispiel: Markenkatalog

Lead-Shop

postMessage-Integration

Ihr Shop bleibt die Oberfläche: eigener Katalog, eigener Merkmalseditor, eigener Preis, eigener Warenkorb. Der WebKatalog liefert Daten und 3D – und meldet jede Interaktion für Ihr Tracking.

Volle Kontrolle über Design und Ablauf
Benutzer-Tracking über USER_TRACKING
Leads mit vollständiger Konfiguration

Beispiel: Produktseite

URL-Parameter ausprobieren

Der Konfigurator wird über die URL gesteuert. Schalten Sie um — die Ansicht lädt neu.

Der Code, den Sie dafür brauchen

1 · Einbetten

<!-- Produktseite: ein Artikel, kein Katalog -->
<iframe
  src="https://web.3doffice.de/webkatalog2_5/planning
       ?token={TOKEN}
       &disablecatalogue=true
       &manufacturer=_dx&program=webst
       &basearticlenumber=27D
       &ocdreinit={REINITSTRING}"
  style="width:100%;height:70vh;border:0"
  allow="fullscreen; xr-spatial-tracking">
</iframe>

2 · Zuhören

window.addEventListener("message", (event) => {
  // Herkunft immer prüfen
  if (event.origin !== "https://web.3doffice.de") return;

  switch (event.data?.type) {
    case "PROPERTY_UPDATED":
      shop.setPrice(event.data.article.ocd.price);
      shop.setArticleNumber(
        event.data.article.ocd.finalarticlenumber);
      break;
    case "USER_TRACKING":
      analytics.track(event.data.action, event.data);
      break;
    case "CONTACT_REQUEST":
      crm.createLead(event.data);
      break;
  }
});

3 · Im Shop konfigurieren

// Merkmal ändern – Antwort enthält neuen Preis,
// neue Artikelnummer und neuen Reinitstring
const updated = await fetch(
  `${API}/ofml.dll/ofml/articles?${params}`, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    id: article.id, rootid: article.rootid,
    proptype: "ocd", propclass: "SONSTIGE",
    prop: "FARBE_PL", newvalue: "HOLZ_EICHE",
    jsondata: JSON.stringify(article),
  }),
}).then(r => r.json());

iframe.contentWindow.postMessage(
  { type: "SET_ARTICLE", article: updated }, origin);

4 · An die Beschaffung übergeben

// Variante A: der WebKatalog postet selbst
…/planning?hookurl=https://srm.kunde.de/oci&ociversion=5.0

// Variante B: der Shop baut die Felder (dieser Demoshop)
{
  "OCI_VERSION": "5.0",
  "NEW_ITEM-DESCRIPTION[1]": "NW Rect Schreibtisch",
  "NEW_ITEM-MATNR[1]": "27 R 08 16 KL Q",
  "NEW_ITEM-QUANTITY[1]": "4",
  "NEW_ITEM-PRICE[1]": "560.00",
  "NEW_ITEM-CURRENCY[1]": "EUR",
  "EGR_CUSTOMDATA_REINITSTRING[1]": "eJytkUEO…"
}

Was Sie mitbringen

OFML-Daten

Ihren bestehenden Datenstand. Keine Neuanlage, keine doppelte Artikelpflege.

Ein Token

Zugangsdaten werden serverseitig gegen den Auth-Server getauscht. Ein Skript wie api/token.php in diesem Demoshop genügt.

Ihre Domain auf der Freigabeliste

Damit iFrame-Einbettung und postMessage funktionieren, tragen wir Ihre Domain in die CORS-Freigabe ein.

Vollständige Dokumentation: URL-Parameter, JSON-API, postMessage-Referenz und Warenkorb-Integration unter rest.3doffice.de/webkatalog2_5/docs.