Tillägg från temat (tematillägg)

Vad är tematillägg?

Tematillägg är extra fält som ditt tema gör tillgängliga på bland annat produkter, kategorier, landningssidor, statiska sidor och blogginlägg. Temautvecklaren definierar fälten och som butiksägare fyller du i dem direkt i admin, t.ex. på produktredigeringssidan.

Typiska exempel är ett fält för ett YouTube-video-ID, en badge med text och färg eller en lista över funktioner med titel, beskrivning och ikon. Fälten visas automatiskt i admin under avsnittet Extensions från ditt tema, och de uppgifter du anger används av temat för att visa ytterligare innehåll i webbshoppen.

För butiksägare: Så här använder du tilläggen

När du redigerar en produkt hittar du tilläggen i ett dragspelsavsnitt som heter Extensions, från ditt tema. Klicka på avsnittet för att expandera det. Här ser du de fält som temat har definierat, grupperade efter kategori (t.ex. "Video Settings", "Badge Settings", etc.).

Fyll i fälten efter behov. Vissa fält är enkla textfält, andra är färgväljare, bilduppladdningar eller kryssrutor. Varje fält har vanligtvis en titel och eventuellt en beskrivning som förklarar vad det används till.

När du sparar produkten sparas tilläggsuppgifterna och temat använder dem för att visa relevant innehåll i webbshoppen. Ett ifyllt YouTube-ID kommer t.ex. vanligtvis att visa en videospelare på produktsidan.

Fälttyper som stöds

Tematillägg stöder ett brett utbud av fälttyper:

• text - Ett enkelt textfält för korta värden (t.ex. ett video-ID eller en badge-text).
• richtext - En HTML-redigerare med formateringsalternativ för längre texter med fetstil, kursiv stil, länkar etc.
• longtext - Ett stort textfält (textarea) för längre texter utan HTML-formatering.
• number - Ett nummerfält för numeriska värden.
• bool - En kryssruta för ja/nej-värden (t.ex. "Show badge" eller "Pickup only").
• color - En färgväljare för att välja färger visuellt (t.ex. bakgrundsfärg för en badge).
• list - En rullgardinsmeny med fördefinierade alternativ.
• multi - Flera kryssrutor för att välja flera alternativ samtidigt.
• image - Ladda upp en enda bild.
• images - Ladda upp flera bilder (t.ex. ett galleri).
• date - En datumväljare.
• datetime - En väljare för datum och tid.
• repeater - Repeaterfält som gör att du kan lägga till ett dynamiskt antal grupper av fält (se separat avsnitt nedan).

För temautvecklare: Definiera tilläggsfält

Tilläggsfält definieras i JSON-filer i temats extensions/mapp. Filen namnges efter den typ av objekt som fälten gäller för:

• extensions/product.json - Produkter
• extensions/category.json - Kategorier
• extensions/landing_page. json - Landningssidor
• extensions/static_page.json - Statiska sidor
• extensions/blog_post.json - Blogginlägg

JSON-filen är en array av grupper, där varje grupp har ett namn och en lista med fält. Här är ett exempel:

[ { "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 - Bakgrundsfärg", "id": "badge-bg", "type": "color", "default_value": "#fef3c7" }, { "title": "Badge - Textfärg", "id": "badge-color", "type": "color", "default_value": "#92400e" } ] }

Varje fält stöder följande egenskaper:

• id (krävs) - Unikt ID som används för att hämta värdet i mallar.
• title (required) - Etikett som visas i admin.
• type (required) - Fälttyp (se listan ovan).
• description - Hjälptext som visas under fältet.
• placeholder - Platshållartext i inmatningsfältet.
• default / default_value - Standardvärde.
• options - Alternativ för list- och multityper (objekt med nyckel-/värdepar).

För temautvecklare: Använda tilläggsdata i mallar

I Smarty-mallar hämtas tilläggsdata med metoden getExtensionValue('field_id'). Metoden är tillgänglig för produkter, kategorier, landningssidor, statiska sidor och blogginlägg.

Enkelt textvärde:

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

Villkorlig 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}

Enkel bild:

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

Fler bilder (galleri):

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

Datum med formatering:

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

Upprepade fält (repeater)

Med Repeater-fält kan du lägga till ett dynamiskt antal grupper av fält. Detta är användbart för t.ex. en lista över funktioner, specifikationer eller fördelar med en produkt, där varje objekt kan ha sin egen titel, beskrivning och eventuellt en ikon.

JSON-definition av ett repeater-fält:

{ "title":"Features","id":"features","type":"repeater","field_title":"Feature","description":"Lägg till funktioner i produkten","fields": [ { "id":"title","type": "text","title":"Titel","placeholder":"Ex: Waterproof" }, { "id":"description","type":"longtext","title":"Beskrivning" }, { "id":"icon","type":"image","title":"Ikon" } ] }

Repeater-fält har dessa ytterligare egenskaper:

• fields - En array av underfält (stödjer text, richtext, longtext, nummer och bild).
• field_title - Den titel som visas för varje element i administratören (t.ex. "Feature").

I admin visas repeater-fälten som kort som kan läggas till, tas bort och flyttas med drag-and-drop. Som butiksägare klickar du på knappen "Lägg till" för att skapa ett nytt element och fylla i underfälten.

Använda repeater-data i mallar:

<{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}>

Tillägg för andra objekttyper

Tillägg fungerar inte bara för produkter. Temat kan definiera tilläggsfält för flera objekttyper. Metoden getExtensionValue() är tillgänglig för alla objekt som stöds:

• Kategorier - Definieras i extensions/category.json. Använd: $category->getExtensionValue('field_id')
• Landningssidor - Definieras i extensions/landing_page.json. Använd: $landing_page->getExtensionValue('field_id')
• Statiska sidor - Definieras i extensions/static_page.json. Använd: $page->getExtensionValue('field_id')
• Blogginlägg - Definieras i extensions/blog_post.json. Använd: $blog_post->getExtensionValue('field_id')

JSON-strukturen och fälttyperna är identiska för alla objekttyper.

AJAX-filtrering med tilläggsfält

Produkter kan filtreras efter förlängningsvärden via AJAX-filtrering. Detta gör att du kan bygga filter i webbshoppen baserat på temaspecifika fält.

Syntaxen använder extension. som ett prefix i URL-parametrarna:

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

Detta gör det möjligt för temautvecklare att bygga avancerade filtreringsupplevelser som är skräddarsydda för varje e-handelsbutiks behov.

Har du frågor om tematillägg? Kontakta oss på support@shoporama.dk.