Produktbilder etwas größer anzeigen? Thumbnails des Sliders vertikal laufen lassen? Die Produktbeschreibung in einem Akkordeon darstellen?

Kein Problem mit eigenen Block-Templates.

Jeder Block zur Präsentation der Produkte und Kategorien kommt mit einer Auswahl des Block-Templates. Um die Darstellung im Frontend zu individualisieren, können eigene Templates für jeden Block erstellt werden.

Über ein Dropdown des Blocks kann das Template ausgewählt werden. Mindestens ein Template wird standardmäßig ausgeliefert, neue Templates können manuell über ein Child-Theme hinzugefügt werden.


Block-Templates im OBS-Pages Plugin

Die Block-Templates liegen im OBS-Pages Plugin unter /oneboxshop-pages/templates:

Kategorie-Templates

unter /oneboxshop-pages/templates/category-page

BlocknameOrdner
Breadcrumbs/breadcrumb
Filter/filter
Sortierung/order
Pagination/pagination
Produkte/products
Filter entfernen /remove-filter
WordPress Suchergebnisse/search-results-wordpress
Titel/title

Produkt-Templates

unter /oneboxshop-pages/templates/product-page

BlocknameOrdner
Breadcrumbs/breadcrumb
Kaufen/buy
Beschreibung/description
Merkmale/features
Passend/matching
Modelltabelle/model-table
Bilder /picture
Titel/title
Variationen/variations
Preis/price

Block-Templates selber erstellen

Innerhalb eines dieser Block-Ordner liegen die unterschiedlichen Block-Templates. In jedem Block-Ordner ist ein Ordner /default, der das Default-Template enthält.

So liegt das Default-Template für die Produktbeschreibung in /oneboxshop-pages/templates/product-page/description/default,
das Default-Template für die Filter auf einer Kategorie-Seite in /oneboxshop-pages/templates/category-page/filter/default.

In dem Template muss eine Datei index.php vorhanden sein, die zur Darstellung des Blocks im Frontend aufgerufen wird. Von dieser Datei kann auf andere Dateien verwiesen werden.

Der Name des Templates wird im Header-Kommentar der index.php definiert, mit

/**
 * Template Name: Mein eigenes Template
 */

Integration eines neues Block-Templates

Individuelle Block-Templates können im Theme hinterlegt werden. Das OBS-Pages Plugin sucht im aktiven Theme unter /obs-blocks nach Block-Templates in der gleichen Ordnerstruktur wie im Plugin. Block-Templates mit gleichem Namen im Theme ersetzen das Block-Template aus dem Plugin, Templates mit neuem Namen erscheinen zusätzlich.

Damit die individuellen Block-Templates nicht durch Updates überschrieben werden, sollte ein Child-Theme genutzt werden, in dem die eigenen Block-Templates liegen.

Zum Erstellen eines neuen Block-Templates kann ein vorhandenes aus dem Plugin in das aktive Child-Theme kopiert werden um es anzupassen.

Ein neues Template für die Produktbeschreibung muss dafür in /{aktives Theme}/obs-blocks/product-page/description/eigene-description liegen.

Das Design kann dann in der Datei index.php angepasst werden, zusätzliche Dateien können innerhalb des Template-Ordners abgelegt und aus der index.php aufgerufen werden. Zur Übersichtlichkeit und Konsistenz empfehlen wir die Ordner-Struktur aus dem OBS-Plugin: Zusätzliche Dateien werden in einem /includes Ordner gespeichert, JavcScript innerhalb in /js, CSS innerhalb in /css.

Benötigte Styles werden in der index.php mit dem Filter obs_block_template_style_paths, benötigte Skripte mit dem Filter obs_block_template_script_paths eingebunden. Dadurch werden die CSS und JS Dateien im Footer per JavaScript geladen. Vorteil der Einbindung über diese Filter ist, dass auch bei AJAX-Nachladen eines Blocks die Dateien zur Verfügung stehen. Die WordPress-eigenen Funktionen wp_enqueue_style und wp_enqueue_script werden nur beim ersten Aufruf, nicht beim Nachladen von Inhalt ausgeführt.

// Beispiel: Einbindung eines Styles in der index.php eines Blocks im Child-Theme
add_filter(
	'obs_block_template_style_paths',
	function ( $styles ) {
		$styles[] = get_stylesheet_directory_uri() . '/obs-blocks/product-page/description/eigene-description/includes/css/style.css';

		return $styles;
	}
);

// Beispiel: Einbindung zweier Skripte in der index.php eines Blocks im Child-Theme
add_filter(
	'obs_block_template_script_paths',
	function ( $scripts ) {
		$scripts[] = get_stylesheet_directory_uri() . '/obs-blocks/product-page/description/eigene-description/includes/js/scripts.js';
		$scripts[] = get_stylesheet_directory_uri() . '/obs-blocks/product-page/description/eigene-description/includes/js/custom.js';

		return $scripts;
	}
);