Make Blog - Plugins

Versandkosten-Link im Loop: Verschachtelung auflösen

In diesem Tutorial geht es um das WooCommerce-Template für Produkte im Loop und die Lösung eines Problems im Zusammenhang mit dem Versandkosten-Link von WooCommerce German Market.

Hinweis: Die Themes von MarketPress sind von dem hier beschriebenen Problem nicht betroffen.

Das WooCommerce-Template für Produkte im Loop (content-product.php) lässt sich stark vereinfacht so darstellen:

Über den Action-Hook woocommerce_after_shop_loop_item_title schickt WooCommerce selbst sein Preis-Template ins Produkt, über den Hook woocommerce_after_shop_loop_item kommt das Warenkorb-Button hinzu.

Das ganze Produkt wird also von einem Link-Element umschlossen. Das ist praktisch, damit das Produkt als Ganzes angeklickt werden kann; und seit HTML5 dürfen Anker-Elemente auch Block-Elemente umschließen. Alles gut bis hierhin also.

WGM nutzt ebenfalls den Hook woocommerce_after_shop_loop_item_title, um das Preis-Template um die notwendigen Zusatzangaben wie Steuern und Versandkosten-Link zu erweitern. Das ist die richtige Vorgehensweise für ein Plugin, aber in diesem Fall entsteht hier ein Dilemma:

  1. Es ist rechtlich notwendig, den Versandkosten-Link direkt unter dem Preis anzuzeigen, aber …
  2. …wir befinden uns noch innerhalb des Produkt-Links.

Verschachtelte Links sind in HTML verboten, und die Browser können damit in der Praxis ganz unterschiedlich umgehen. Die meisten werden versuchen, die Verschachtelung zu korrigieren. Während man also im Quelltext der Loop-Seite einen Aufbau wie oben schematisch dargstellt findet, zeigen die Entwicklerwerkzeuge im Browser, dass das Markup automatisch korrigiert wurde. Dort findet sich so ein Aufbau:

Verschachtelung im Template auflösen

Um die Verschachtelung sinnvoll und kontrolliert aufzulösen, ist eigentlich ein Eingriff ins WooCommerce-Template content-product.php notwendig. Ab Zeile 45 sollte das Template ungefähr so aussehen:

Je nach Theme kann das Template noch andere Elemente, oder einen anderen Aufbau enthalten. Entscheidend ist: der Produkt-Link wird geschlossen, bevor do_action( 'woocommerce_after_shop_loop_item_title' ); aufgerufen wird, und die Verschachtelung so vermieden.

Verschachtelung mittels Hook auflösen

Ohne einen Eingriff ins Template geht es auch, wenn auch nicht ganz so elegant. Wiederum bildet der Action Hook woocommerce_after_shop_loop_item_title die Schnittstelle.
Über diesen Hook lassen sich ein schließendes und ein wieder öffnendes Link-Element einschleusen, mit denen der im Template gesetzte, das Produkt umschließende Link einfach „unterbrochen“ wird.

Wiederum vereinfacht dargestellt, möchten wir so etwas erreichen:

Hinweis: Der zuletzt wieder geöffnete Link bleibt ggf. ohne textlichen Inhalt. HMTL-Validatoren werden deswegen Alarm schlagen.

Umsetzen lässt sich die „Link-Unterbrechung“ über ein eigenes Funktionalitäten-Plugin, oder über die functions.php des aktiven Child-Themes. Wenn in deiner WordPress-Installation PHP 5.3 oder höher aktiv ist, kannst du die folgenden Actions mit anonymen Funktionen einsetzen:

Zu beachten sind hier die Prioritäten der Actions:

  • Wir wollen sicher stellen, dass das schließenden Link-Element vor allen anderen Actions ankommt, die über denselben Hook laufen. Deswegen die „0“-Priorität.
  • Beim wieder-öffnenden Element ist es genau andersherum: es soll nach allen anderen Aktionen kommen, die über denselben Hook laufen. daher die „99“.

Mehr zu Hooks in WordPress findest du in den Entwicklerhandbüchern.

Falls bei dir PHP in einer kleineren Version als 5.3 läuft, solltest du ganz schnell bei deinem Hoster um eine aktuelle PHP-Version auf deinem Server bitten. Bis die dann läuft, musst du die anonymen in benannte Funktionen auslagern:

Zusammenfassung

Das Problem mit dem Versandkosten-Link von WGM, der im Produkt-Loop innerhalb des Produkt-Links liegt, lässt sich am besten über die Anpassung des Templates in einem Child-Theme erreichen.

Sofern die Anpassung des Templates nicht gewünscht oder nicht möglich ist, kannst du das Problem auch mittels der seitens WooCommerce zur Verfügung stehenden Hooks lösen.

Fragen?

Grundsätzliche Fragen zu diesem Tutorial beantworten wir gerne in den Kommentaren.

Beitrag teilen

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">