Accordion-layout til temaindstillinger i Shoporama

Hvad er accordion-layout?

Når et Shoporama-tema har mange temaindstillinger, kan det klassiske kort-layout med sidebar hurtigt blive uoverskueligt. Accordion-layoutet løser det ved at organisere alle sektioner i foldbare paneler, der kan åbnes og lukkes individuelt. Det giver butiksejeren et rent og fokuseret overblik — selv med 15+ sektioner.

Montana-temaet — Shoporamas nyeste Tailwind CSS-baserede tema — bruger accordion-layoutet med hele 16 sektioner og er det perfekte eksempel på, hvordan det fungerer i praksis.

Accordion vs. klassisk layout

Der er to layout-muligheder for temaindstillinger i Shoporama:

• Klassisk layout — To-kolonne layout (9+3 kolonner) med Bootstrap-kort og en sidebar med scroll-spy navigation. Velegnet til temaer med få sektioner.
• Accordion-layout — Centreret single-column layout med foldbare sektioner, søgefunktion og localStorage. Ideelt til temaer med mange sektioner og felter.

Sådan aktiverer du accordion-layout

Det eneste du skal gøre er at tilføje "accordion": true i dit temas theme_settings.json-fil. Filen ligger i roden af dit tema.

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

Uden denne linje — eller med "accordion": false — bruges det klassiske kort-layout automatisk.

Funktioner i accordion-layoutet

Accordion-layoutet kommer med en række funktioner der gør det nemt at navigere i temaindstillinger:

• Foldbare sektioner — Hver sektion kan åbnes og lukkes med et klik. Chevron-ikoner viser tydeligt om sektionen er åben eller lukket.
• Søgefunktion — Et søgefelt i toppen filtrerer sektioner og felter i realtid. Matchende tekst bliver fremhævet, og kun relevante sektioner vises.
• Husker tilstand — Hvilke sektioner der er åbne/lukkede gemmes i localStorage, så butiksejeren ikke skal starte forfra ved næste besøg.
• Centreret layout — Indholdet vises i en enkelt kolonne (col-lg-10), hvilket giver mere plads til hvert felt og fjerner behovet for sidebar-navigation.

Strukturen i theme_settings.json

Filen theme_settings.json definerer hele strukturen for temaindstillinger. Her er et komplet eksempel inspireret af Montana-temaet:

{
  "info": "Montana",
  "accordion": true,
  "features": [
    "Tailwind CSS-baseret responsivt design",
    "Fuldt tilpasselige farver, logo og favicon",
    "USP-bar med tilpasselige ikoner i headeren"
  ],
  "settings": [
    {
      "path": "general",
      "name": "Generelt",
      "description": "Betalings- og fragtmetoder samt leveringstider.",
      "fields": [
        {
          "path": "payment_methods",
          "name": "Betalingsmetoder",
          "description": "Kommasepareret liste, fx: dankort,visa,mastercard",
          "type": "string"
        },
        {
          "path": "shipping_time_in_stock",
          "name": "Leveringstid (på lager)",
          "description": "Eks: 1-3 hverdage",
          "type": "string"
        }
      ]
    },
    {
      "path": "theme",
      "name": "Tema & Farver",
      "description": "Farver, logo og favicon for din butik.",
      "fields": [
        {
          "path": "primary",
          "name": "Primær farve",
          "description": "Bruges til tekst, headings og mørke elementer.",
          "type": "color",
          "default_value": "#111827"
        },
        {
          "path": "action",
          "name": "Handlingsfarve",
          "description": "Bruges til knapper, links og CTA-elementer.",
          "type": "color",
          "default_value": "#2563eb"
        },
        {
          "path": "background",
          "name": "Baggrundsfarve",
          "description": "Sidens baggrundsfarve.",
          "type": "color",
          "default_value": "#ffffff"
        }
      ]
    },
    {
      "path": "value_propositions",
      "name": "USP\u0027er",
      "description": "Op til 4 korte budskaber i headeren.",
      "fields": [
        {
          "path": "text_1",
          "name": "USP #1 - Tekst",
          "type": "string"
        },
        {
          "path": "icon_1",
          "name": "USP #1 - Ikon",
          "type": "list",
          "values": [
            { "value": "", "name": "(Ingen)" },
            { "value": "truck", "name": "Lastbil" },
            { "value": "check", "name": "Flueben" },
            { "value": "star", "name": "Stjerne" }
          ]
        }
      ]
    },
    {
      "path": "shipping_alert",
      "name": "Forsendelsesalarm",
      "description": "Bestil inden kl. 14 og vi sender i dag.",
      "fields": [
        {
          "path": "enable",
          "name": "Aktivér",
          "type": "bool"
        },
        {
          "path": "time",
          "name": "Lukketid",
          "description": "Klokkeslæt for sidste afsendelse, fx 14:00",
          "type": "string"
        },
        {
          "path": "days",
          "name": "Afsendelsesdage",
          "description": "Ugedagsnumre: 1=Man, 7=Søn. Eks: 1,2,3,4,5",
          "type": "string"
        }
      ]
    },
    {
      "path": "product",
      "name": "Produktside",
      "description": "Lager, varianter, faner m.m.",
      "fields": [
        {
          "path": "show_sku",
          "name": "Vis varenummer (SKU)",
          "type": "bool"
        },
        {
          "path": "show_stock_count",
          "name": "Vis lagerantal",
          "description": "Vis det præcise antal på lager.",
          "type": "bool"
        },
        {
          "path": "enable_omnibus_price",
          "name": "Vis førpris iht. Omnibus-direktivet",
          "description": "Viser laveste pris fra de seneste 30 dage som førpris.",
          "type": "bool"
        }
      ]
    },
    {
      "path": "newsletter",
      "name": "Nyhedsbrev",
      "description": "Tilmeldingsformular i footeren.",
      "fields": [
        {
          "path": "enable",
          "name": "Vis nyhedsbrev",
          "type": "bool"
        },
        {
          "path": "title",
          "name": "Overskrift",
          "description": "Standard: Tilmeld dig vores nyhedsbrev",
          "type": "string"
        },
        {
          "path": "lead",
          "name": "Brødtekst",
          "type": "text"
        }
      ]
    },
    {
      "path": "custom_code",
      "name": "Custom JavaScript",
      "description": "Tilføj egen JavaScript-kode.",
      "fields": [
        {
          "path": "js",
          "name": "Custom JavaScript",
          "description": "Indsættes i bunden af siden.",
          "type": "text"
        }
      ]
    }
  ]
}

Tilgængelige felttyper

Hvert felt i en sektion defineres med en type-egenskab. Her er de tilgængelige felttyper:

• string — Enkelt tekstfelt. Til korte værdier som betalingsmetoder, URL'er eller leveringstider.
• bool — Checkbox (til/fra). Vises som en afkrydsningsboks med label. Værdien gemmes som 0 eller 1.
• color — Farvevælger med hex-input. Understøtter default_value med en nulstil-knap.
• text — Stort tekstfelt (textarea). Til længere tekster, disclaimers eller JavaScript-kode.
• wysiwyg — Rich text-editor. Til formateret HTML-indhold med WYSIWYG-redigering.
• image — Billedupload. Viser det uploadede billede med mulighed for sletning.
• list — Dropdown-menu. Kræver et values-array med objekter der har value og name.

Sådan bruges temaindstillinger i Smarty-templates

Indstillingerne hentes i dine Smarty-templates via $webshop->getThemeSetting()-metoden. Første parameter er sektionens path, anden parameter er feltets path:

<!-- Hent en farveværdi -->
<{$primary = $webshop->getThemeSetting('theme', 'primary')}>

<!-- Brug værdien i inline CSS -->
<div style="color: <{$primary}>">Overskrift</div>

<!-- Tjek en boolean -->
<{if $webshop->getThemeSetting('product', 'show_sku')}>
  <span>Varenr: <{$product->getSku()}></span>
<{/if}>

<!-- Hent et billede (returnerer et Image-objekt) -->
<{$og_image = $webshop->getThemeSetting('open_graph', 'image')}>
<{if $og_image && is_object($og_image)}>
  <meta property="og:image" content="<{$og_image->getSrc(1200, 630, 'fit')}>">
<{/if}>

Tips til en god struktur

Her er nogle anbefalinger til at få mest muligt ud af accordion-layoutet:

• Gruppér logisk — Saml relaterede felter i samme sektion. Fx alle farver under "Tema & Farver" og alle checkout-indstillinger under "Checkout".
• Skriv gode beskrivelser — Både sektioner og felter har en description-egenskab. Brug den til at forklare hvad indstillingen gør og giv eksempler.
• Brug default_value på farver — Farvefelter understøtter default_value, som giver butiksejeren en nulstil-knap, så de altid kan vende tilbage til standardfarven.
• Hold path-navne korte og engelske — Brug snake_case og engelske navne til path-felter (fx shipping_alert, product_card). Brugervenlige navne hører til i name-feltet.
• Brug list-typen for begrænsede valg — I stedet for at bede butiksejeren taste ikonnavn ind, giv dem en dropdown med prædefinerede muligheder.

Opsummering

Accordion-layoutet er den anbefalede måde at organisere temaindstillinger på i nye Shoporama-temaer — især når temaet har mere end en håndfuld sektioner. Det giver butiksejeren et bedre overblik, hurtigere navigation via søgning, og husker brugerens præferencer mellem sessioner. Alt det kræver er en enkelt linje i din theme_settings.json.