Geteilte Blöcke - Platzieren Sie Page Builder-Blöcke über und unter dem Seiteninhalt

Was sind split_blocks?

In einem typischen Shoporama-Thema werden die Page Builder-Blöcke entweder vor oder nach dem Hauptinhalt der Seite angezeigt. Das funktioniert in vielen Fällen gut, aber es schränkt den Shop-Betreiber ein. Was ist, wenn Sie ein Hero-Banner über der Produktliste und eine Newsletter-Anmeldung darunter haben möchten?

Das ist genau das, was split_blocks löst. Wenn diese Funktion aktiviert ist, teilt der Page Builder die Blöcke in zwei Bereiche auf:

• Blöcke oberhalb des Inhalts - Hero-Banner, Kampagnenbotschaften, USP-Abschnitte und alles andere, was die Aufmerksamkeit des Nutzers sofort auf sich ziehen muss.
• Blöcke unterhalb des Inhalts - Produktempfehlungen, Newsletter-Anmeldung, Instagram-Feed, Testimonials und ähnliche ergänzende Inhalte.

Zwischen den beiden Bereichen befindet sich der Hauptinhalt der Seite - Produktinformationen, Kategorienliste, Kassenablauf oder was auch immer auf der Seite angezeigt wird. So hat der Shop-Betreiber die volle Kontrolle über das Layout, ohne Vorlagen bearbeiten zu müssen.

Aktivierung in theme_settings.json

Um split_blocks zu aktivieren, fügen Sie eine Zeile in die Datei theme_settings.json ein, die sich im Stammverzeichnis des Themes befindet:

{ "info": "Mein Theme", "split_blocks": true, "settings": [ ... ] }

Ohne diese Zeile - oder mit "split_blocks": false - werden alle Blöcke in einer einzigen Liste angezeigt und normalerweise nach dem Hauptseiteninhalt gerendert.

Die Erfahrung in der Verwaltung

Wenn split_blocks aktiviert ist, ändert sich der Page Builder im Administrationsbereich. Anstelle einer einheitlichen Blockliste erhält der Shop-Betreiber zwei getrennte Bereiche:

• "Blöcke über dem Inhalt" - Die obere, verschiebbare Liste, in der Blöcke angezeigt werden, bevor der Hauptinhalt der Seite platziert wird.
• Eine visuelle Trennlinie - Der Text "Hauptseiteninhalt" wird deutlich zwischen den beiden Zonen angezeigt, so dass der Shop-Betreiber immer weiß, wo sein eigener Inhalt gerendert wird.
• "Blöcke unter dem Inhalt" - Die untere, verschiebbare Liste für Blöcke, die nach dem Hauptinhalt angezeigt werden.

Die Blöcke können per Drag-and-Drop frei zwischen den beiden Zonen verschoben werden. Die Positionsdaten werden automatisch gespeichert, so dass der Shop-Betreiber nicht über die Technik nachdenken muss - ziehen Sie die Blöcke einfach dorthin, wo sie sinnvoll sind.

Template-Implementierung

In den Smarty-Vorlagen des Themas werden zwei separate Variablen zum Rendern der Blöcke verwendet: $page_blocks_top und $page_blocks_bottom. Diese werden von Shoporama automatisch auf der Grundlage der Position der Blöcke gefüllt.

Alles, was Sie als Theme-Entwickler tun müssen, ist, sie an den richtigen Stellen in Ihr Template einzufügen:

<!-- Blöcke oberhalb des Inhalts --> <{includefile="components/page-blocks.html" blocks=$page_blocks_top}><!-- Hauptseiteninhalt hier--> <!-- Blöcke unterhalb des Inhalts --> <{includefile="components/page-blocks.html" blocks=$page_blocks_bottom}>

Beide Aufrufe verwenden dieselbe Komponente components/page-blocks.html- sie weiß nicht, ob sie die oberen oder unteren Blöcke wiedergibt, sie gibt nur die Blöcke wieder, die sie erhält. Dies macht die Implementierung einfach und konsistent.

Vollständiges Beispiel: category.html

Hier ist ein vollständiges Beispiel einer Kategorieseite mit split_blocks. Beachten Sie, wie die Blöcke den eigentlichen Inhalt der Kategorie umschließen:

<div id="main" class="pb-12"> <!-- Top-Blöcke: Hero-Banner, Promotions, USP-Bereich --><{include file="components/page-blocks.html" blocks=$page_blocks_top}> <!-- Breadcrumbs --><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> <{include file="components/breadcrumbs.html"}> </div> <!-- Kategorie Produkte, Filterung, etc. --><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <{include file="components/category-content.html"}> </div> <!-- Untere Blöcke: Empfehlungen, Newsletter, Instagram --><{include file="components/page-blocks.html" blocks=$page_blocks_bottom}> </div>

Das Muster ist für alle Seitentypen gleich - Produkt, Seite, Blogbeitrag, Suche, Warenkorb, Kasse und Benutzerprofil. Platzieren Sie die oberen Blöcke vor dem Hauptinhalt und die unteren Blöcke danach. Das war's schon.

Wann sind split_blocks sinnvoll?

Split_blocks sind für die meisten modernen Themes relevant, aber hier sind einige Situationen, in denen sie besonders wertvoll sind:

• Kategorieseiten mit Hero-Bannern - Der Shop-Betreiber kann ein Werbebanner über der Produktliste und ergänzende Inhalte darunter platzieren.
• Produktseiten mit verwandten Inhalten - Empfehlungen und Cross-Selling unter den Produktinformationen, während oben eine Werbebotschaft erscheint.
• Titelseite - Volle Kontrolle darüber, was vor und nach dem Hauptinhalt erscheint, ohne dass Vorlagen bearbeitet werden müssen.
• Checkout-Flow - Vertrauensmarkierungen und USP-Abschnitte oberhalb des Checkout-Formulars und Support-Informationen darunter.

Wenn Ihr Theme nur Blöcke an einer Stelle hat (z.B. nur unter dem Inhalt), ist split_blocks nicht notwendig. Aber sobald der Shop-Betreiber Inhalte um den Hauptinhalt herum platzieren muss, ist es die richtige Lösung.

Zusammengefasst

Mit split_blocks geben Sie dem Shop-Betreiber die Kontrolle über die Platzierung der Blöcke auf allen Seiten - ohne dass er den Code bearbeiten muss. Die Implementierung erfordert eine Zeile in theme_settings.json und zwei Includes in jeder Vorlage. Es ist ein kleiner Aufwand mit großen Auswirkungen auf die Flexibilität des Shop-Layouts.

Lesen Sie mehr über den Page Builder und wie Sie den Theme Builder in Ihr Theme implementieren. Siehe auch unseren Beitrag über das Akkordeon-Layout in den Theme-Einstellungen für eine weitere nützliche theme_settings.json-Funktion.