Utvidelser fra temaet (temautvidelser)

Hva er tema-utvidelser?

Tema-utvidelser (extensions) er ekstra felt som temaet ditt stiller til rådighet på blant annet produkter, kategorier, landingssider, statiske sider og blogginnlegg. Det er temautvikleren som definerer feltene, og som butikkeier fyller du dem ut direkte i admin, for eksempel på produktets redigeringsside.

Typiske eksempler er et felt for en YouTube-video-ID, et merke med tekst og farge, eller en liste over funksjoner med tittel, beskrivelse og ikon. Feltene vises automatisk i administrasjonspanelet under seksjonen «Utvidelser» for temaet ditt, og dataene du legger inn, brukes av temaet til å vise ekstra innhold i nettbutikken.

For butikkeiere: Slik bruker du utvidelsene

Når du redigerer et produkt, finner du utvidelsene i en akkordionseksjon kalt «Utvidelser fra temaet ditt». Klikk på seksjonen for å utvide den. Her ser du feltene som temaet har definert, gruppert etter kategori (f.eks. «Videoinnstillinger», «Merkeinnstillinger» osv.).

Fyll ut feltene etter behov. Noen felter er enkle tekstfelt, andre er fargevelgere, bildeopplastinger eller avkryssingsfelt. Hvert felt har vanligvis en tittel og eventuelt en beskrivelse som forklarer hva det brukes til.

Når du lagrer produktet, lagres utvidelsesdataene, og temaet bruker dem til å vise det relevante innholdet i nettbutikken. For eksempel vil et utfylt YouTube-ID vanligvis vise en videospiller på produktsiden.

Støttede felttyper

Tema-utvidelser støtter en lang rekke felttyper:

• text – Et enkelt tekstfelt for korte verdier (f.eks. en video-ID eller en badge-tekst).
• richtext – En HTML-editor med formateringsmuligheter for lengre tekster med fet skrift, kursiv, lenker osv.
• longtext – Et stort tekstfelt (textarea) for lengre tekster uten HTML-formatering.
• number – Et tallfelt for numeriske verdier.
• bool – En avkryssingsboks for ja/nei-verdier (f.eks. «Vis merke» eller «Kun henting»).
• color – En fargevelger for å velge farger visuelt (f.eks. bakgrunnsfarge for et merke).
• list – En rullegardinmeny med forhåndsdefinerte valgmuligheter.
• multi – Flere avkryssingsbokser for å velge flere alternativer samtidig.
• image – Last opp et enkelt bilde.
• images – Last opp flere bilder (f.eks. et galleri).
• date – En datovalg.
• datetime – En dato- og tidsvelger.
• repeater – Repetisjonsfelt som gjør det mulig å legge til et dynamisk antall grupper av felt (se eget avsnitt nedenfor).

For temautviklere: Definering av utvidelsesfelt

Utvidelsesfelt defineres i JSON-filer i temaets extensions/ -mappe. Filen har navn etter typen objekt som feltene gjelder for:

• extensions/product.json – Produkter
• extensions/category.json – Kategorier
• extensions/landing_page.json – Landingssider
• extensions/static_page.json – Statiske sider
• extensions/blog_post.json – Blogginnlegg

JSON-filen er en matrise av grupper, der hver gruppe har et navn og en liste over felt. Her er et eksempel:

[
  {
    "name": "Videoinnstillinger",
    "fields": [
      {
        "title": "YouTube-ID",
        "description": "Skriv inn YouTube-video-ID",
        "id": "youtube_id",
        "type": "text"
      }
    ]
  },
  {
    "name": "Badge",
    "fields": [
      {
        "title": "Badge – Tekst",
        "id": "badge",
        "type": "text"
      },
      {
        "title": "Merke – Bakgrunnsfarge",
        "id": "badge-bg",
        "type": "color",
        "default_value": "#fef3c7"
      },
      {
        "title": "Badge - Tekstfarge",
        "id": "badge-color",
        "type": "color",
        "default_value": "#92400e"
      }
    ]
  }
]

Hvert felt støtter følgende egenskaper:

• id (påkrevd) – Unikt ID, brukes til å hente verdien i maler.
• title (påkrevd) – Etikett som vises i admin.
• type (påkrevd) – Felttypen (se listen ovenfor).
• description – Hjelpetekst som vises under feltet.
• placeholder – Plassholdertekst i inndatafeltet.
• default / default_value – Standardverdi.
• options – Valgmuligheter for list- og multi-typer (objekt med nøkkel/verdi-par).

For temautviklere: Bruk av utvidelsesdata i maler

I Smarty-maler hentes utvidelsesdata ved hjelp av metoden getExtensionValue('felt_id'). Metoden er tilgjengelig for produkter, kategorier, landingssider, statiske sider og blogginnlegg.

Enkel tekstverdi:

<{$product->getExtensionValue('youtube_id')}>

Betinget visning (bool):

<{if $product->getExtensionValue('show_badge')}>
    <span style="background:<{$product->getExtensionValue('badge-bg')}>; color:<{$product->getExtensionValue('badge-color')}>">
        <{$product->getExtensionValue('badge')|escape}>
    </span>
<{/if}>

Enkeltbilde:

<{if $img = $product->getExtensionValue('img')}>
    <img src="<{$img->getSrc(400, 400, 'fit')}>">
<{/if}>

Flere bilder (galleri):

<{foreach $product->getExtensionValue('gallery') as $image}>
    <img src="<{$image->getSrc(200, 200, 'box')}>">
<{/foreach}>

Dato med formatering:

<{$product->getExtensionValue('release_date')|date_format:'%d/%m/%Y'}>

Repeteringsfelt (repeater)

Repeater-felt gir mulighet til å legge til et dynamisk antall grupper av felt. Dette er nyttig for eksempel for en liste over funksjoner, spesifikasjoner eller fordeler ved et produkt, der hvert element kan ha sin egen tittel, beskrivelse og eventuelt et ikon.

JSON-definisjon av et repeater-felt:

{
  "title": "Funksjoner",
  "id": "features",
  "type": "repeater",
  "field_title": "Funksjon",
  "description": "Legg til funksjoner for produktet",
  "fields": [
    { "id": "title", "type": "text", "title": "Tittel", "placeholder": "F.eks.: Vanntett" },
    { "id": "description", "type": "longtext", "title": "Beskrivelse" },
    { "id": "icon", "type": "image", "title": "Ikon" }
  ]
}

Repeater-felt har følgende tilleggsegenskaper:

• fields – En matrise av underfelt (støtter text, richtext, longtext, number og image).
• field_title – Tittelen som vises for hvert element i admin (f.eks. «Funksjon»).

I admin vises repeater-felt som kort som kan legges til, slettes og flyttes ved hjelp av dra-og-slipp. Som butikkeier klikker du på «Legg til»-knappen for å opprette et nytt element og fyller ut underfeltene.

Bruk av repeater-data i maler:

<{foreach $product->getExtensionValue('features') as $feature}>
    <h3><{$feature.title|escape}></h3>
    <p><{$feature.description|escape|nl2br}></p>
    <{if $feature.icon}>
        <img src="<{$feature.icon->getSrc(64, 64, 'fit')}>">
    <{/if}>
<{/foreach}>

Utvidelser for andre objekttyper

Utvidelser fungerer ikke bare på produkter. Temaet kan definere utvidelsesfelt for flere objekttyper. Metoden getExtensionValue() er tilgjengelig på alle støttede objekter:

• Kategorier – Defineres i extensions/category.json. Bruk: $category->getExtensionValue('felt_id')
• Landingssider – Defineres i extensions/landing_page.json. Bruk: $landing_page->getExtensionValue('felt_id')
• Statiske sider – Defineres i extensions/static_page.json. Bruk: $page->getExtensionValue('felt_id')
• Blogginnlegg – Defineres i extensions/blog_post.json. Bruk: $blog_post->getExtensionValue('felt_id')

JSON-strukturen og felttypene er identiske for alle objekttyper.

AJAX-filtrering med utvidelsesfelt

Produkter kan filtreres etter utvidelsesverdier via AJAX-filtrering. Dette gjør det mulig å lage filtre i nettbutikken basert på temaspesifikke felt.

Syntaksen bruker extension. som prefiks i URL-parametrene:

?extension.youtube_id=abc123
?extension.show_badge=1

Dette gir temautviklere muligheten til å lage avanserte filtreringsopplevelser som er skreddersydd til den enkelte nettbutikkens behov.

Har du spørsmål om temautvidelser? Kontakt oss på support@shoporama.dk.