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

Vad är tematillägg?

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

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 Tillägg för ditt tema, och de uppgifter du anger används av temat för att visa extra innehåll i webbutiken.

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

När du redigerar en produkt hittar du tilläggen i ett utdragbart avsnitt som heter Tillägg från ditt tema. Klicka på sektionen för att fälla ut den. Här ser du de fält som temat har definierat, grupperade efter kategori (t.ex. ”Videoinställningar”, ”Badge-inställningar” osv.).

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äggsdata, och temat använder dem för att visa relevant innehåll i webbutiken. Till exempel kommer ett ifyllt YouTube-ID vanligtvis att visa en videospelare på produktsidan.

Stödda fälttyper

Tematillägg stöder en lång rad 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 formateringsmöjligheter för längre texter med fetstil, kursiv stil, länkar m.m.
• longtext – Ett stort textfält (textarea) för längre texter utan HTML-formatering.
• number – Ett talfält för numeriska värden.
• bool – En kryssruta för ja/nej-värden (t.ex. ”Visa badge” eller ”Endast avhämtning”).
• 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 – Uppladdning av en enskild bild.
• images – Uppladdning av flera bilder (t.ex. ett galleri).
• date – En datumväljare.
• datetime – En datum- och tidsväljare.
• repeater – Upprepningsfält som gör det möjligt att lägga till ett dynamiskt antal grupper av fält (se separat avsnitt nedan).

För temautvecklare: Definition av utökningsfält

Utökningsfält definieras i JSON-filer i temats mapp extensions/. Filen namnges efter den objekttyp 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": "Videoinställningar",
    "fields": [
      {
        "title": "YouTube-ID",
        "description": "Ange 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 (obligatoriskt) – Unikt ID, används för att hämta värdet i mallar.
• title (obligatoriskt) – Etikett som visas i admin.
• type (obligatoriskt) – Fältetyp (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 multi-typer (objekt med nyckel/värde-par).

För temautvecklare: Användning av tilläggsdata i mallar

I Smarty-mallar hämtas utvidgningsdata med metoden getExtensionValue('fält_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}>

Flera 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'}>

Repeteringsfält (repeater)

Repeater-fält gör det möjligt att lägga till ett dynamiskt antal grupper av fält. Det är användbart för exempelvis en lista över funktioner, specifikationer eller fördelar med en produkt, där varje element kan ha sin egen titel, beskrivning och eventuellt en ikon.

JSON-definition av ett repeater-fält:

{
  "title": "Funktioner",
  "id": "features",
  "type": "repeater",
  "field_title": "Funktion",
  "description": "Lägg till funktioner till produkten",
  "fields": [
    { "id": "title", "type": "text", "title": "Titel", "placeholder": "T.ex.: Vattentät" },
    { "id": "description", "type": "longtext", "title": "Beskrivning" },
    { "id": "icon", "type": "image", "title": "Ikon" }
  ]
}

Repeater-fält har följande ytterligare egenskaper:

• fields – En array av underfält (stöder text, richtext, longtext, number och image).
• field_title – Titeln som visas för varje element i admin (t.ex. "Feature").

I admin visas repeater-fält som kort som kan läggas till, tas bort och flyttas med dra-och-släpp. Som butiksägare klickar du på knappen ”Lägg till” för att skapa ett nytt element och fyller i underfälten.

Användning av 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ändning: $category->getExtensionValue('fält_id')
• Landningssidor – Definieras i extensions/landing_page.json. Användning: $landing_page->getExtensionValue('fält_id')
• Statiska sidor – Definieras i extensions/static_page.json. Användning: $page->getExtensionValue('fält_id')
• Blogginlägg – Definieras i extensions/blog_post.json. Användning: $blog_post->getExtensionValue('fält_id')

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

AJAX-filtrering med tilläggsfält

Produkter kan filtreras efter tilläggsvärden via AJAX-filtrering. Detta gör det möjligt att skapa filter i webbutiken baserade på temaspecifika fält.

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

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

Detta ger temautvecklare möjlighet att skapa avancerade filtreringsupplevelser som är skräddarsydda efter varje enskild webbutiks behov.

Har du frågor om temautvidgningar? Kontakta oss på support@shoporama.dk.