Split Blocks — Placer Page Builder-blokke over og under sidens indhold

Hvad er split_blocks?

I et typisk Shoporama-tema renderes Page Builder-blokke enten før eller efter sidens hovedindhold. Det fungerer fint i mange tilfælde, men det begrænser butiksejeren. Hvad nu hvis man gerne vil have et hero-banner over produktlisten, og en nyhedsbrev-signup under den?

Det er præcis det, split_blocks løser. Når funktionen er aktiveret, opdeler Page Builder blokkene i to zoner:

• Blokke over indholdet — Hero-bannere, kampagnebeskeder, USP-sektioner og alt andet der skal fange brugerens opmærksomhed med det samme.
• Blokke under indholdet — Produktanbefalinger, nyhedsbrev-signup, Instagram-feed, testimonials og lignende supplerende indhold.

Imellem de to zoner ligger sidens hovedindhold — produktinfo, kategoriliste, checkout-flow eller hvad siden nu viser. Det giver butiksejeren fuld kontrol over layoutet uden at skulle redigere templates.

Aktivering i theme_settings.json

For at aktivere split_blocks skal du tilføje én linje i dit temas theme_settings.json-fil, som ligger i roden af temaet:

{
  "info": "Mit Tema",
  "split_blocks": true,
  "settings": [
    ...
  ]
}

Uden denne linje — eller med "split_blocks": false — vises alle blokke i én samlet liste, og de renderes typisk efter sidens hovedindhold.

Oplevelsen i admin

Når split_blocks er aktiveret, ændrer Page Builder sig i admin-panelet. I stedet for én samlet blokliste får butiksejeren to separate zoner:

• "Blokke over indholdet" — Den øverste draggable liste, hvor blokke der skal vises før sidens hovedindhold placeres.
• En visuel divider — Teksten "Sidens hovedindhold" vises tydeligt mellem de to zoner, så butiksejeren altid ved, hvor sidens eget indhold renderes.
• "Blokke under indholdet" — Den nederste draggable liste, til blokke der skal vises efter hovedindholdet.

Blokke kan frit trækkes mellem de to zoner med drag-and-drop. Positionsdata gemmes automatisk, så butiksejeren ikke skal tænke over teknikken — bare trække blokkene derhen, hvor de giver mening.

Template-implementering

I temaets Smarty-templates bruges to separate variabler til at rendere blokkene: $page_blocks_top og $page_blocks_bottom. Disse fyldes automatisk af Shoporama baseret på blokkenes position.

Det eneste du skal gøre som temaudvikler er at inkludere dem de rigtige steder i dit template:

<!-- Blokke over indholdet -->
<{include file="components/page-blocks.html" blocks=$page_blocks_top}>

<!-- Sidens hovedindhold her -->

<!-- Blokke under indholdet -->
<{include file="components/page-blocks.html" blocks=$page_blocks_bottom}>

Begge kald bruger den samme components/page-blocks.html-komponent — den ved ikke om den renderer top- eller bund-blokke, den renderer bare de blokke den får. Det gør implementeringen enkel og konsistent.

Komplet eksempel: category.html

Her er et komplet eksempel på en kategoriside der bruger split_blocks. Bemærk hvordan blokkene omslutter det egentlige kategori-indhold:

<div id="main" class="pb-12">
    <!-- Top-blokke: hero-bannere, kampagner, USP-sektion -->
    <{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>

    <!-- Kategoriens produkter, filtrering osv. -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <{include file="components/category-content.html"}>
    </div>

    <!-- Bund-blokke: anbefalinger, nyhedsbrev, Instagram -->
    <{include file="components/page-blocks.html" blocks=$page_blocks_bottom}>
</div>

Mønstret er det samme på tværs af alle sidetyper — produkt, side, blogindlæg, søgning, kurv, checkout og brugerprofil. Placér top-blokke før hovedindholdet og bund-blokke efter. Det er alt.

Hvornår giver split_blocks mening?

Split_blocks er relevant for de fleste moderne temaer, men her er nogle situationer hvor det er særligt værdifuldt:

• Kategorisider med hero-bannere — Butiksejeren kan placere et kampagnebanner over produktlisten og supplerende indhold under den.
• Produktsider med relateret indhold — Anbefalinger og krydsalg under produktinformationen, mens en kampagnebesked vises øverst.
• Forsiden — Fuld kontrol over hvad der vises før og efter det primære indhold, uden at skulle redigere templates.
• Checkout-flowet — Tillidsmarkører og USP-sektioner over checkout-formularen, og supportinformation under den.

Hvis dit tema kun har blokke ét sted (fx kun under indholdet), er split_blocks ikke nødvendigt. Men så snart butiksejeren har brug for at placere indhold omkring hovedindholdet, er det den rigtige løsning.

Opsummering

Med split_blocks giver du butiksejeren kontrol over blok-placering på alle sider — uden at de behøver at redigere kode. Implementeringen kræver én linje i theme_settings.json og to includes i hvert template. Det er en lille indsats med stor effekt for butikkens layout-fleksibilitet.

Læs mere om Page Builder og hvordan du implementerer Theme Builder i dit tema. Se også vores indlæg om accordion-layout til temaindstillinger for en anden nyttig theme_settings.json-funktion.