Integration mit WordPress

Voraussetzung für die Integration von WordPress Content in den Centauri Shop ist immer eine WordPress Seite ohne Kopf-/Fußbereiche. Die Seite muss beim Aufruf in WordPress also NUR den Content liefern.

Die WordPress Installation darf nicht verbieten, den Content auf fremden Domänen anzuzeigen.

Integration mit IFRAME

Die Anzeige der WordPress Seite kann mit dem CMS Modul Einbetten (IFRAME) durchgeführt werden, bei dem die PermanentUrl der Seite als Parameter des eingefügten I-Frames verwendet wird.

Über Styles im Modul oder über CSS muss der Seite anschließend noch eine Höhe gegeben werden, damit der Content komplett angezeigt wird. z.B.

CODE

height: 500px

Da die Höhe bei responsiven Seiten variieren kann, kann für das Justieren der Höhe auch auf Javascript Hilfe zurückgegriffen werden, z.B. mit https://iframe-resizer.com/

Integration mit Javascript

Bei der zweiten Variante lädt Javascript den HTML Code der Seite direkt in das Objekt Modell der Shop Seite, wodurch nach Ablauf des Javascripts eine komplette HTML Seite entsteht.

Dazu wird Script Code in die CMS Seite eingefügt, der nach untenstehendem Muster aufgebaut ist. Außerdem wird innerhalb der Seite mittels des CMS Moduls HTML-Block ein leerer DIV-Container mit einer festgelegten Id, im unteren Beispiel der Id wp-content9999, eingefügt.

Der Code lädt dann den Inhalt der Wordpress Seite 9999 in die HTML Seite des Shops.

CODE

const cssFiles = [
    'https://wordpress.firma.at/wp-content/plugins/elementor/assets/css/widget-spacer.min.css',
    'https://wordpress.firma.at/wp-content/uploads/elementor/css/custom-frontend.min.css',
    'https://wordpress.firma.at/wp-content/plugins/elementor/assets/css/widget-image.min.css',
    'https://wordpress.firma.at/wp-content/uploads/elementor/css/post-9999.css',
    'https://wordpress.firma.at/wp-content/plugins/elementor/assets/css/widget-nested-accordion.min.css',
  ];

  const head = document.head;
  const timestamp = new Date().getTime(); 

  cssFiles.forEach(file => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = `${file}?v=${timestamp}`;
    head.appendChild(link);
  });

  fetch('https://wordpress.firma.at/wp-json/wp/v2/pages/9999')
    .then((response) => response.json())
    .then((data) => {
      let content = data.content.rendered;

      const baseUrl = 'https://wordpress.firma.at';

      content = content.replace(/(["(])\/wp-content\//g, `$1${baseUrl}/wp-content/`);

      document.getElementById('wp-content9999').innerHTML = content;
    })
    .catch((error) => console.error('Error fetching page data:', error));

Der obere Teil lädt die notwendigen CSS Links der Wordpress Seite in den HTML Code des Shops.

Die CSS Styles beeinflussen damit auch HTML Code des Shops. Es ist also darauf zu achten, dass keine allgemeinen Umdefinitionen von Tags stattfindet, sondern mit eindeutigen Klassen gearbeitet wird.

Ab Zeile 19 wird der HTML Inhalt der Seite 9999 geladen, relative Referenzen auf Resourcen in absolute Referenzen auf die WordPress Seite umgebaut und der entstandene Code in den DIV-Container mit der ID wp-content9999 eingefügt.

Integration mit Server-seitigem Einfügen

Bei der letzten Variante wird die Integration des HTML Codes bereits am Server durchgeführt. Beim Abruf der Seite ist dann nicht mehr zu unterscheiden, ob der Code ursprünglich vom Server errechnet wurde oder von einem WordPress Server.

Da der Shop-Server den finalen HTML Code erst liefern kann, wenn der WordPress Server den HTML Code fertig geliefert hat, addieren sich die Ladezeiten und die Abhängigkeit in Sachen Verfügbarkeit der Server.

Die Einbindung erfolgt ähnlich wie die Methode über den I-Frame Container, nur wird diesmal das CMS Modul Url abfragen benutzt.

Damit das CMS Modul Url abfragen angezeigt wird, muss der Parameter pages.system auf true gesetzt werden.

Da WordPress Seiten normalerweise einen kompletten HTML Seitenaufbau haben, muss der geladene Content auf den Inhalt des body Tags reduziert werden. Dazu kann beim Modul ein XPath Ausdruck mitgegeben werden, z.B. //body

Vorraussetzung für den XPath Ausdruck ist allerdings, dass WordPress wohlgeformtes XHTML liefert. Ist das nicht der Fall sollte der XPath Ausdruck leer bleiben. In dem Fall versucht das CMS Modul selbständig einen body Tag im HTML Content zu finden und wird dessen Inhalt weiterverarbeiten.

Die benötigten CSS Klassen müssen getrennt in die Content Seite integriert werden.