Im Rahmen eines Kundenprojekts standen wir vor der Anforderung, eine eigene Komponente zur Darstellung verwandter Produkte zu programmieren und in WooCommerce, einem bekannten Shopsystem für WordPress, in der Produktansicht anzuzeigen. Im Folgenden zeigen wir Ihnen, wie das zu bewerkstelligen ist:

Vorüberlegungen

Der einfachste Ansatz hierfür wäre gewesen, das entsprechende Page Template von WooCommerce in unser WordPress-Theme zu übernehmen, und dort zu überschreiben. Das hat aber einige Nachteile:

  • Wenn WooCommerce Änderungen am eigenen Template vornimmt, müssen wir die Änderungen manuell in unser angepasstes Template im Theme übernehmen, um eine korrekte Darstellung des gesamten Shops zu gewährleisten. Somit kann es nach Updates von WooCommerce zu Darstellungsfehlern kommen. Ein Risiko, das wir nicht eingehen wollten.
  • Die Lösung wäre abhängig vom verwendeten WordPress Theme.

Deshalb haben wir einen anderen Weg gefunden, unser eigenes Modul in die Darstellung von WooCommerce selber einzuklinken, ohne dass es zu den oben genannten Problemen kommen kann.

Lösungsansatz

WooCommerce bietet an vielen Punkten sogenannte Hooks, über die man sich in die Funktionalität und Darstellung mit eigenen Funktionen einklinken kann. WooCommerce nutzt diesen Mechanismus selber, um seine Templates modular aufzubauen. Wir klinken uns einfach in diesen Mechanismus ein, um an der gewünschten Stelle unseren HTML-Code darzustellen.

Lösung

Mit der von WordPress selber bereitgestellten Funktion add_action()  hängen wir uns in der Darstellung eines einzelnen Produkts direkt nach dem Produktbild ein, wo dann unsere Funktion my_display_module()  ausgeführt wird.

Weitergehende Programmierung

Natürlich wollten wir nicht einfach statischen Text ausgeben. Das weitere Ziel war, an der Stelle Bilder von verwandten Produkten auszugeben.

Hierzu haben wir erst die darzustellenden Produkte beim jeweiligen Hauptprodukt als sogenannte Upsells im Bereich „Verlinkte Produkte“ eingetragen.

Der Zugriff auf diese Produkte in der Programmierung war dann nicht mehr so schwer:

Über den Befehl global $product;  können wir auf die Variable zugreifen, in der WooCommerce das aktuelle Produkt speichert. Die von WooCommerce bereitgestellte Funktion wc_products_array_orderby()  liefert uns ein Array von Produkten, in unserem Fall die Produkte, die als Upsell beim aktuellen Produkt hinterlegt sind. Dieses Array wird in der Variable $upsells  gespeichert.

Um jetzt auf die einzelnen Produkte zugreifen zu können, können wir das Array einfach mit einem foreach -Loop durchlaufen, und beispielsweise die Produkt-Titel auszugeben:

So war es uns einfach möglich, diesen Code um weitere Funktionalität anzureichern, um innerhalb des foreach -Loops eine eigene Darstellung und Programmierung mit den Upsell-Produkten aufzubauen.