Utvidelser fra temaet (temautvidelser)

Hva er temautvidelser?

Temautvidelser er ekstra felt som temaet ditt gjør tilgjengelig på blant annet produkter, kategorier, landingssider, statiske sider og blogginnlegg. Temautvikleren definerer feltene, og som butikkeier fyller du dem ut direkte i administrasjonen, for eksempel på produktredigeringssiden.

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 administratoren under delen Utvidelser fra temaet ditt, og dataene du skriver inn, brukes av temaet til å vise tilleggsinnhold i nettbutikken.

For butikkeiere: Slik bruker du utvidelsene

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

Fyll ut feltene etter behov. Noen felt er enkle tekstfelt, mens andre er fargevelgere, bildeopplastinger eller avmerkingsbokser. 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 relevant innhold i nettbutikken. For eksempel vil en utfylt YouTube-ID vanligvis vise en videospiller på produktsiden.

Felttyper som støttes

Temautvidelser støtter et bredt spekter av felttyper:

• text - Et enkelt tekstfelt for korte verdier (f.eks. en video-ID eller merketekst).
• richtext - En HTML-editor med formateringsalternativer 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 avkrysningsboks 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 alternativer.
• multi - Flere avmerkingsbokser for å velge flere alternativer samtidig.
• image - Last opp ett enkelt bilde.
• images - Laster opp flere bilder (f.eks. et galleri).
• date - En datovelger.
• datetime - En dato- og klokkeslettvelger.
• repeater - Repeater-felt som gjør det mulig å legge til et dynamisk antall grupper av felt (se eget avsnitt nedenfor).

For temautviklere: Definere utvidelsesfelt

Utvidelsesfelt defineres i JSON-filer i temaets extensions/mappe. Filen er oppkalt etter objekttypen 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 med grupper, der hver gruppe har et navn og en liste med felt. Her er et eksempel:

[ { { "name": "Video Settings", "fields": [ { "title": "YouTube Id", "description": "Enter YouTube Video ID", "id": "youtube_id", "type": "text" } ] }, { "name": "Badge", "fields": [ { "title": "Badge - Text", "id": "badge", "type": "text" }, { "title": "Badge - Background color", "id": "badge-bg", "type": "color", "default_value": "#fef3c7" }, { "title": "Badge - Text color", "id": "badge-color", "type": "color", "default_value": "#92400e" } ] } }

Hvert felt støtter disse egenskapene:

• id (obligatorisk) - Unik ID som brukes til å hente verdien i maler.
• title (obligatorisk) - Etikett som vises i admin.
• type (obligatorisk) - Felttypen (se listen ovenfor).
• description - Hjelpetekst som vises under feltet.
• placeholder - Plassholdertekst i inndatafeltet.
• default / default_value - Standardverdi.
• options - Alternativer for liste- og multityper (objekt med nøkkel-/verdipar).

For temautviklere: Bruk av utvidelsesdata i maler

I Smarty-maler hentes utvidelsesdata med metoden getExtensionValue('field_id'). Metoden er tilgjengelig på produkter, kategorier, destinasjonssider, 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}

Enkelt bilde:

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

Gjenta felt (repeater)

Med repeterende felt kan du legge til et dynamisk antall grupper av felt. Dette er nyttig for f.eks. 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":"Features", "id":"features", "type":"repeater", "field_title":"Feature", "description":"Legg til funksjoner i produktet", "fields": [ { "id":"title", "type": "text", "title": "Title", "placeholder": "Ex: Waterproof" }, { "id": "description", "type": "longtext", "title": "Description" }, { "id": "icon", "type": "image", "title": "Icon" } ] } }

Repeater-felt har disse tilleggsegenskapene:

• fields - En matrise med underfelt (støtter tekst, rikstekst, langtekst, tall og bilde).
• field_title - Tittelen som vises for hvert element i administratoren (f.eks. "Feature").

I administratoren vises repeaterfeltene 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 fylle ut underfeltene.

Bruk av repeaterdata 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 objekter som støttes:

• Kategorier - Definert i extensions/category.json. Bruk: $category->getExtensionValue('field_id')
• Landingssider - Definert i extensions/landing_page.json. Bruk: $landing_page->getExtensionValue('field_id')
• Statiske sider - Definert i extensions/static_page.json. Bruk: $page->getExtensionValue('field_id')
• Blogginnlegg - Definert i extensions/blog_post.json. Bruk: $blog_post->getExtensionValue('field_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 at du kan bygge filtre i nettbutikken basert på temaspesifikke felt.

Syntaksen bruker extension. som prefiks i URL-parametrene:

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

Dette gjør det mulig for temautviklere å bygge avanserte filtreringsopplevelser som er skreddersydd til behovene til hver enkelt nettbutikk.

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