Ein einfacher Webshop mit eingebundenem 3D-Konfigurator

Nordwerk ist ein Demoshop aus statischem HTML und etwas JavaScript, ohne Framework und Backend. Alles Produktbezogene, also 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

Was aus dem WebKatalog kommt und was erfunden ist:

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 allen Herstellern des Demozugangs

Shop-Fiktion

  • Nordwerk selbst: Name, Kontaktdaten, Texte, Versandregeln
  • Die Beispielprojekte und alle Raumbilder; die Bilder sind KI-generiert
  • 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“
  • Jede Verbindung zu den gezeigten Herstellern: ihre Daten dienen nur als Beispiel
Detailstufen im Vergleich. Ein Schulungsartikel der Demodaten zeigt denselben Tisch in drei Grafik- und drei Texturstufen, vom schematischen Volumenmodell bis zur Furnieroberfläche. Damit lassen sich Darstellung und Ladezeiten vergleichen.

Schulungsartikel öffnen

Was auf welchem Weg aus dem WebKatalog kommt

Jedes Element des Shops mit dem Mechanismus und dem Aufruf dahinter.

Im ShopMechanismusAufruf
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.

iFrame-Einbettung (Standard)

Der WebKatalog bringt Katalog, Merkmalseditor und Informationsbereich mit. Sie binden ein iFrame ein und stellen ein Token bereit. Aussehen und Umfang steuern Sie über URL-Parameter.

  • Kein eigener Konfigurator nötig
  • Katalog oder Einzelartikel
  • Warenkorb per urlwarenkorb an Ihren Shop

Beispiel: Markenkatalog

postMessage-Integration (Lead-Shop)

Katalog, Merkmalseditor, Preis und Warenkorb bleiben in Ihrem Shop. Der WebKatalog liefert Daten und 3D und meldet Interaktionen 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.

planning?… 

        

          
          In neuem Tab öffnen
        

      

    

  







  

    

      

        
Der Code, den Sie dafür brauchen

      

    

    

      

        
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>

      

      

        
Ereignisse empfangen

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

      

      

        
Merkmal im Shop ändern

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

      

      

        
OCI-Übergabe an die Beschaffung

        
// Variante A: der WebKatalog postet selbst
…/planning?hookurl=https://srm.kunde.example/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. Er wird direkt verwendet, Artikel müssen nicht neu angelegt
         oder doppelt gepflegt werden.

    

    

      
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.