Split Blocks - Placera Page Builder-block över och under sidinnehållet

Vad är split_blocks?

I ett typiskt Shoporama-tema återges Page Builder-block antingen före eller efter huvudinnehållet på sidan. Detta fungerar bra i många fall, men det begränsar butiksägaren. Vad händer om du vill ha en hjältebanner ovanför produktlistan och en nyhetsbrevregistrering under den?

Det är precis vad split_blocks löser. När den är aktiverad delar Page Builder upp blocken i två zoner:

• Block ovanför innehållet - Hjältebanners, kampanjmeddelanden, USP-avsnitt och allt annat som måste fånga användarens uppmärksamhet direkt.
• Block under innehållet - Produktrekommendationer, nyhetsbrevsregistrering, Instagram-flöde, vittnesmål och liknande kompletterande innehåll.

Mellan de två zonerna finns sidans huvudinnehåll - produktinformation, kategorilista, kassaflöde eller vad som helst som sidan visar. Detta ger butiksägaren full kontroll över layouten utan att behöva redigera mallar.

Aktivering i theme_settings.json

För att aktivera split_blocks lägger du till en rad i ditt temas theme_settings.json-fil, som finns i temats rot:

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

Utan den här raden - eller med "split_blocks": false - visas alla block i en enda lista och återges vanligtvis efter huvudsidans innehåll.

Upplevelsen i admin

När split_blocks är aktiverat ändras Page Builder i adminpanelen. Istället för en enhetlig blocklista får butiksägaren två separata zoner:

• "Block ovanför innehåll" - Den övre dragbara listan där blocken ska visas innan sidans huvudinnehåll placeras.
• En visuell avdel are - Texten "Main page content" visas tydligt mellan de två zonerna, så att butiksägaren alltid vet var deras eget innehåll återges.
• "Block under innehåll" - Den nedre dragbara listan för block som ska visas efter huvudinnehållet.

Blocken kan dras fritt mellan de två zonerna med drag-and-drop. Positionsdata sparas automatiskt, så butiksägaren behöver inte tänka på tekniken - det är bara att dra blocken dit de passar bäst.

Implementering av mallar

I temats Smarty-mallar används två separata variabler för att rendera blocken: $page_blocks_top och $page_blocks_bottom. Dessa fylls automatiskt i av Shoporama baserat på blockens position.

Allt du behöver göra som temautvecklare är att inkludera dem på rätt ställen i din mall:

<!-- Block ovanför innehållet --> <{includefile="components/page-blocks.html" blocks=$page_blocks_top}><!-- Huvudsidans innehåll här --> <!-- Block under innehållet --> <{includefile="components/page-blocks.html" blocks=$page_blocks_bottom}>>

Båda anropen använder samma components/page-blocks.html-komponent- den vet inte om den återger topp- eller bottenblock, den återger bara de block den får. Detta gör implementeringen enkel och konsekvent.

Fullständigt exempel: category.html

Här är ett komplett exempel på en kategorisida som använder split_blocks. Lägg märke till hur blocken omsluter det faktiska kategoriinnehållet:

<div id="main" class="pb-12"> <!-- Toppblock: hjältebanners, kampanjer, USP-avsnitt --><{include file="components/page-blocks.html" blocks=$page_blocks_top}> <!-- Brödsmulor --><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> <{include file="components/breadcrumbs.html"}> </div> <!-- Kategoriprodukter, filtrering etc. --><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <{include file="components/category-content.html"}> </div> <!-- Nedre block: rekommendationer, nyhetsbrev, Instagram --><{include file="components/page-blocks.html" blocks=$page_blocks_bottom}> </div>

Mönstret är detsamma för alla sidtyper - produkt, sida, blogginlägg, sökning, korg, kassa och användarprofil. Placera de övre blocken före huvudinnehållet och de nedre blocken efter. Det var allt.

När är split_blocks vettiga?

Split_blocks är relevanta för de flesta moderna teman, men här är några situationer där det är särskilt värdefullt:

• Kategorisidor med hero-banners - Butiksägaren kan placera en reklambanner ovanför produktlistan och kompletterande innehåll under den.
• Produktsidor med relaterat innehåll - Rekommendationer och korsförsäljning under produktinformationen, medan ett kampanjmeddelande visas högst upp.
• Framsida - Full kontroll över vad som visas före och efter huvudinnehållet utan att behöva redigera mallar.
• Kassaflöde - Förtroendemarkörer och USP-avsnitt ovanför kassablanketten och supportinformation under den.

Om ditt tema bara har block på ett ställe (t.ex. bara under innehållet) är split_blocks inte nödvändigt. Men så snart butiksägaren behöver placera innehåll runt huvudinnehållet är det rätt lösning.

För att sammanfatta

Med split_blocks ger du butiksägaren kontroll över blockplaceringen på alla sidor - utan att de behöver redigera koden. Implementeringen kräver en rad i theme_settings.json och två includes i varje mall. Det är en liten insats med stor inverkan på flexibiliteten i butikslayouten.

Läs mer om Page Builder och hur du implementerar Theme Builder i ditt tema. Se även vårt inlägg om dragspelslayout för temainställningar för en annan användbar theme_settings.json-funktion.