Paket teme

Tema je paket fajlova. Određuje izgled obrasca za zakazivanje i sekcija, ali ne i podatke.

Fajlovi

Fajl	Obavezan	Sadržaj
theme.json	da	Podaci o temi
booking.css	da	Izgled obrasca za zakazivanje (stranica i prozor)
blocks.css	da	Izgled sekcija
services.html, team.html, hours.html, contact.html	da	Šabloni četiri sekcije
works.html	ne	Šablon galerije; bez njega radovi koriste standardnu mrežu

theme.json

{
  "id": "atelier-rosa",
  "name": "Atelier Rosa",
  "version": "1.0.0",
  "exclusive": true,
  "description": "Topli tonovi i rukopisni naslovi"
}

• id: mala slova, brojevi i crtica, od 3 do 60 znakova (^[a-z0-9][a-z0-9-]{2,59}$).
• name: do 80 znakova.
• version: x.y.z. Postojeća verzija se ne može ponovo otpremiti.
• ownerCompanyId se upisuje sam kad saradnik otpremi temu za firmu.

Ograničenja

• CSS najviše 100 KB, svaki šablon najviše 20 KB.

CSS

• Dozvoljeno: običan CSS, @media, @keyframes, slike i fontovi kao data: adrese.
• Zabranjeno: @import i spoljne adrese.
• Sistem svaki selektor stavlja pod [data-theme-id="ID"], pa tema ne može da menja ostatak sajta.

Šabloni

Šabloni koriste deo Mustache sintakse:

Zapis	Značenje
{{polje}}	Vrednost, uvek bezbedno escape-ovana
{{#lista}}…{{/lista}}	Ponavlja blok za svaki element
{{^lista}}…{{/lista}}	Prikazuje se kad je lista prazna

Dozvoljeni elementi: div, section, article, header, footer, button, h2–h4, p, span, strong, em, small, ul, ol, li, dl, dt, dd, img, time, br, hr, address, figure, figcaption.

Dozvoljeni atributi: class, role, alt, title, src, datetime, data-*, aria-*. U src sme da stoji samo jedno polje, na primer src="{{photo}}".

Zabranjeno: skripte, on… atributi, linkovi, forme, iframe, javascript:, HTML komentari, <? i <![.

Polja po sekciji

Šablon	Polja
services.html	services[] (id, name, notes, price, location) i locations[] (name, city, services[])
team.html	staff[] (name, initials, location, description, photo)
hours.html	locations[] (name, city, days[] (label, value), exceptions[] (date, value, note), warning)
contact.html	company (name, phone, email) i locations[] (name, city, address, contact)
works.html	Vidite Šablon radova

Primer

<div class="at-grid">
  {{#services}}
  <article class="at-card" data-service-id="{{id}}">
    <h3>{{name}}</h3>
    <p class="at-muted">{{notes}} · {{location}}</p>
    <p class="at-price">{{price}}</p>
  </article>
  {{/services}}
  {{^services}}<p class="at-muted">Nema objavljenih usluga.</p>{{/services}}
</div>

CSS obrasca za zakazivanje se poslužuje sa https://app.tempact.app/public/v1/themes/{themeId}/{version}/booking.css.