Delte blokker - Plasser Sidebygger-blokker over og under sideinnholdet

Hva er split_blocks?

I et typisk Shoporama-tema gjengis Sidebygger-blokker enten før eller etter hovedinnholdet på siden. Dette fungerer fint i mange tilfeller, men det begrenser butikkeieren. Hva om du vil ha et heltebanner over produktlisten og en påmelding til nyhetsbrev under den?

Det er akkurat det split_blocks løser. Når den er aktivert, deler Sidebyggeren blokkene i to soner:

• Blokker over innholdet - Hero-bannere, kampanjemeldinger, USP-seksjoner og alt annet som må fange brukerens oppmerksomhet med en gang.
• Blokker under innholdet - produktanbefalinger, påmelding til nyhetsbrev, Instagram-feed, attester og lignende tilleggsinnhold.

Mellom de to sonene er hovedinnholdet på siden - produktinformasjon, kategoriliste, kasseflyt eller hva siden viser. Dette gir butikkeieren full kontroll over layouten uten å måtte redigere maler.

Aktivering i theme_settings.json

For å aktivere split_blocks legger du til én linje i temaets theme_settings.json-fil, som ligger i roten av temaet:

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

Uten denne linjen - eller med "split_blocks": false - vises alle blokkene i en enkelt liste og gjengis vanligvis etter hovedinnholdet på siden.

Opplevelsen i admin

Når split_blocks er aktivert, endres Sidebygger i adminpanelet. I stedet for én samlet blokkliste får butikkeieren to separate soner:

• "Blokker over innhold" - Den øverste listen som kan dras, der blokkene skal vises før hovedinnholdet på siden plasseres.
• En visuell skill elinje - teksten "Hovedsideinnhold" vises tydelig mellom de to sonene, slik at butikkeieren alltid vet hvor deres eget innhold er gjengitt.
• "Blokker under innhold" - Den nederste listen som kan dras for blokker som skal vises etter hovedinnholdet.

Blokker kan fritt dras mellom de to sonene ved hjelp av dra-og-slipp. Posisjonsdata lagres automatisk, slik at butikkeieren ikke trenger å tenke på teknikken - det er bare å dra blokkene dit de passer best.

Implementering av maler

I temaets Smarty-maler brukes to separate variabler til å gjengi blokkene: $page_blocks_top og $page_blocks_bottom. Disse fylles automatisk ut av Shoporama basert på blokkenes posisjon.

Alt du trenger å gjøre som temautvikler er å inkludere dem på de riktige stedene i malen din:

<!-- Blokker over innholdet --> <{includefile="components/page-blocks.html" blocks=$page_blocks_top}><!-- Hovedsideinnhold her --> <!-- Blokker under innholdet --> <{includefile="components/page-blocks.html" blocks=$page_blocks_bottom}> ><!-- Blokker under innholdet --> <{includefile="components/page-blocks.html" blocks=$page_blocks_bottom}

Begge anropene bruker den samme components/page-blocks .html-komponenten- den vet ikke om den gjengir topp- eller bunnblokker, den gjengir bare de blokkene den får. Dette gjør implementeringen enkel og konsekvent.

Fullstendig eksempel: category.html

Her er et komplett eksempel på en kategoriside som bruker split_blocks. Legg merke til hvordan blokkene omslutter det faktiske kategoriinnholdet:

<div id="main" class="pb-12"> <!-- Toppblokker: heltebannere, kampanjer, USP-seksjon --><{include file="components/page-blocks.html" blocks=$page_blocks_top}> < ! -- Brødsmuler --><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 osv. --><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <{include file="components/category-content.html"}> </div> <!-- Nederste blokker: anbefalinger, nyhetsbrev, Instagram --><{include file="components/page-blocks.html" blocks=$page_blocks_bottom}> </div>

Mønsteret er det samme på tvers av alle sidetyper - produkt, side, blogginnlegg, søk, handlekurv, kasse og brukerprofil. Plasser de øverste blokkene før hovedinnholdet og de nederste blokkene etter. Det er alt.

Når gir split_blocks mening?

Split_blocks er relevant for de fleste moderne temaer, men her er noen situasjoner der det er spesielt verdifullt:

• Kategorisider med heltebannere - Butikkeieren kan plassere etreklamebanner over produktlisten og utfyllende innhold under den.
• Produktsider med relatert innhold - Anbefalinger og kryssalg under produktinformasjonen, mens et reklamebudskap vises øverst.
• Forsiden - Full kontroll over hva som vises før og etter hovedinnholdet uten å måtte redigere maler.
• Kasseflyt - Tillitsmarkører og USP-seksjoner over kasseskjemaet, og supportinformasjon under det.

Hvis temaet ditt bare har blokker på ett sted (f.eks. bare under innholdet), er split_blocks ikke nødvendig. Men så snart butikkeieren trenger å plassere innhold rundt hovedinnholdet, er det den riktige løsningen.

For å oppsummere

Med split_blocks gir du butikkeieren kontroll over blokkplasseringen på alle sider - uten at han eller hun trenger å redigere koden. Implementeringen krever én linje i theme_settings.json og to includes i hver mal. Det er en liten innsats med stor innvirkning på butikkens layoutfleksibilitet.

Les mer om Page Builder og hvordan du implementerer Theme Builder i temaet ditt. Se også innlegget vårt om trekkspilloppsett for temainnstillinger for en annen nyttig funksjon i theme_settings.json.