Template opbygning

Hver af Hostedshops templates er opbygget efter en standard fil-struktur. Denne struktur danner grundlag for, at templatet virker, som det skal. Den fulde fil-struktur kan enten ses via Design Manager > Redigér filer. Eller via Design Manager > For udviklere > Kopier filer til FTP.

Nedarvning og vedligeholdelse

Hostedshops templates bygger på et nedarvnings-princip, hvor der skelnes mellem filer på serveren, og filer lokalt. Minimumskravet, for at et template er installeret lokalt, er, at filen meta.json er installeret i template mappen /upload_dir/templates/[template]/. Det sker automatisk, når man installerer en template via design modulet.

Når templaten er installeret, vil den pege på en template på serveren gennem sin "PARENT" i meta.json. Finder den en parent på serveren, vil følgende regler for nedarvning være gældende:

1. Tjek efter fil lokalt
2. Tjek efter fil på server

Filer der ikke ligger lokalt, vil derved blive hentet og vedligeholdt automatisk på serveren. Det kan f.eks. være, at man ønsker at ændre i templatens udseende, men ikke ønsker at ændre eller vedligeholde moduler. Så ændrer man kun de filer, som vedrører dette.
Det betyder samtidig også, at for dem, der ønsker en 100 % uafhængig template, bør man hente alle filer ned på løsningen, og slette "PARENT" i meta.json. På den måde bliver templaten uafhængig af dem, der ligger på serveren.

Det er muligt at lave flere parent templates lokalt, men vi anbefaler det ikke af hensyn til overskuelighed for brugeren. Et niveau mere vil betyde:

1. Tjek efter fil lokalt
2. Tjek efter fil på server
3. Tjek efter fil på parent template lokalt
4. Tjek efter fil på parent template på server

Som en note kan siges. At når du kigger i design manageren under Ret filer, er lokale filer vist med et (c) efter filnavnet. Det er med andre ord en custom fil.

Side typer

Når et link loades, vurderer Hostedshop hvilken side og sidetype det hører til (Page type). Ud fra sidetypen, hentes den relevante modul-fil fra /modules/[modul]/. F.eks. vil en blog-side med linket /blog/, pege videre på filerne i /modules/blog/.Ændres en fil i denne mappe, vil alle blog-moduler blive ændret. Ønsker man specifikke regler for den enkelte side, skal man lave et tjek på side-id.Bemærk at controllers på de enkelte moduler, automatisk benytter sidens data, ved at sætte primary=true. Læs mere herom under controllers.

Filstruktur

Fil-strukturen gennemgåes nedenfor.

Roden

Mappen indeholder:

• index.tpl - indeks filen for websitet.
• index.closed.tpl - indeks filen for websitet, hvis det er lukket.
• meta.json - indeholder stamdata på templaten, som genereres ud fra "Ret design" i design-modulet. Det er bl.a.:
  • TEMPLATE_NAME - templatens navn
  • PARENT - peger på et evt. overliggende template.
• gruntfile - grunt projektfil.
• package.json - note projektfil til Grunt.
• mb_settings.json - indeholder data om de bokse, der er placeret via struktur fanebladet.

Assets mappen

Assets mappen indeholder de versioner af javascript og CSS, som websitet benytter. Derudover en image mappe.

Det er komprimerede versioner af filerne, som er bygget sammen for at opnå den bedste hastighed.

Modules mappen

Modules mappen indeholder alle modul-template filer, som f.eks. blog. Der er en mappe for hver side-type i systemet. F.eks. repræsenterer mappen "blog" en Blog-side og "product" en produktkatalog-side.

Alle moduler er opbygget med et modul-template, som inkluderer sub-templates for lister eller entiteter. Modulet kan så have en undermappe med assets (f.eks. javascript) og partials (template filer).

Eksempel for blog:

• blog.tpl - den overordnede styring af blog-modulet, som håndterer, om det er en liste eller et indlæg.
• blog-list.tpl - en liste af blog indlæg.
• blog-entity.tpl - et blog indlæg.
• blog.js - javascript til brug i blog modulet.

Bemærk at produktkataloget har en template for Angular produktliste, samt en template til søgemaskiner og Internet Explorer 7.
To mapper indeholder særlige filer:

• column - kolonne bokse som styres via Struktur i design modulet.
• widgets - elementer som kan genbruges i en template, f.eks. nyhedsbrevstilmelding og menuer.

Partials mappen

Partials mappen indeholder del-elementer af templaten, som body, top og bund. Disse elementer er inkluderet af index.tpl. Det er typisk disse elementer, man vælger at ændre for at skifte design.

Source mappen

Source mappen indeholder de originale versioner af CSS, Javascript mv. De kan bygges med Sass og Grunt ind i assets mappen, som benyttes på websitet.

Derudover indeholder source mappen /settings/settings.json, der indeholder de indstillinger, som "Ret design" læser ind. Ved gem i "Ret design" gemmes settings_values.json.

Reseller logo
Hvis du ønsker dit logo vist i admin, kan du uploade det via filhåndtering her til:

/upload_dir/templates/resellerlogo.png