Editor storefrontu - Kalendář

Panel nastavení kalendáře v editoru storefrontu — Editor storefrontu > Kalendář

Panel Kalendář přizpůsobuje widget kalendáře dostupnosti, který se zobrazuje na stránkách nabídek pro výběr data pronájmu. Barvy úrovně zásob ukazují, kolik zásob je dostupných na dané datum, a nastavitelné prahy určují, kdy se použije jaké barevné pásmo.

Indikátory úrovně zásob v kalendáři jsou viditelné pouze tehdy, když je v nastavení obsahu storefrontu pro stránku nabídky zapnutá možnost Show stock level. Když je vypnutá, buňky dat se vykreslují bez barevného rozlišení a legenda úrovně zásob je skrytá.

Barvy úrovně zásob

Každá úroveň zásob má samostatnou barvu pozadí a textu. K dispozici jsou čtyři úrovně:

Nastavení	Výchozí	Popis
Pozadí nízkého stavu	`#FDA29B`	Barva pozadí buněk dat na úrovni prahu Nízký nebo pod ním.
Text pro nízký stav	`#344054`	Barva textu uvnitř buněk dat s nízkým stavem zásob.
Pozadí omezeného stavu	`#F5C771`	Barva pozadí buněk dat mezi prahy Nízký a Omezený.
Text pro omezený stav	`#344054`	Barva textu uvnitř buněk dat s omezeným stavem zásob.
Pozadí vysokého stavu	`#B4EFD5`	Barva pozadí buněk dat nad prahem Omezený.
Text pro vysoký stav	`#344054`	Barva textu uvnitř buněk dat s vysokým stavem zásob.
Pozadí stavu vyprodáno	`#E4E6EB`	Barva pozadí buněk dat bez dostupných zásob.
Text stavu vyprodáno	`#6B7280`	Barva textu uvnitř buněk dat bez dostupných zásob.

Prahy úrovně zásob

Prahy určují, kdy se použije které barevné pásmo. Jsou to procenta dostupných zásob vůči celkovým zásobám na dané lokalitě.

Nastavení	Typ	Výchozí	Rozsah	Popis
Nízký	Číslo	25 %	0–100 %	Data s dostupností na této úrovni nebo pod ní zobrazují barvu Nízký.
Omezený	Číslo	60 %	0–100 %	Data s dostupností mezi prahem Nízký a touto úrovní zobrazují barvu Omezený. Data nad touto úrovní zobrazují Vysoký.

Práh Nízký musí být menší nebo roven prahu Omezený. Pokud nastavíte Nízký nad Omezený, panel automaticky upraví Omezený tak, aby odpovídal.

Vybrané datum

Barvy pro aktuálně vybrané datum v kalendáři.

Nastavení	Výchozí	Popis
Pozadí	`#212121`	Barva pozadí buňky vybraného data.
Text	`#FFFFFF`	Barva textu buňky vybraného data.

Buňka dne

Nastavení	Typ	Výchozí	Rozsah	Popis
Poloměr rohu	Posuvník	50 %	0–50 %	Jak zaoblená je každá buňka dne. 0 % je čtvercová, 50 % je kruhová.

Dnes

Nastavení	Výchozí	Popis
Rámeček	`#212121`	Barva rámečku buňky dnešního data.

Rámeček

Nastavení	Typ	Výchozí	Rozsah	Popis
Barva	Barva	`#212121`	-	Barva rámečku kolem widgetu kalendáře.
Tloušťka	Posuvník	1 px	0–4 px	Šířka rámečku kolem widgetu kalendáře.
Poloměr rohu	Posuvník	0 px	0–40 px	Jak zaoblené jsou rohy kalendáře.

Kontejner

Nastavení	Typ	Výchozí	Rozsah	Popis
Odsazení	Posuvník	1 px	0–16 px	Vnitřní odsazení mezi rámečkem kalendáře a jeho obsahem.

Legenda úrovně zásob

Když je zapnutá možnost Show stock level, pod kalendářem se zobrazí legenda s barevnými vzorky a popisky pro každou úroveň zásob (Vyprodáno, Nízký, Omezený, Vysoký). Tvar vzorku odpovídá poloměru rohu buňky dne pro vizuální konzistenci. Popisky legendy si můžete přizpůsobit v nastavení obsahu storefrontu pro stránku nabídky. Pokud ponecháte popisek prázdný, daná položka legendy se skryje.

CSS proměnné

:root {
  /* Barvy úrovně zásob */
  --storefront-calendar-stock-low-color: #FDA29B;
  --storefront-calendar-stock-low-text-color: #344054;
  --storefront-calendar-stock-limited-color: #F5C771;
  --storefront-calendar-stock-limited-text-color: #344054;
  --storefront-calendar-stock-high-color: #B4EFD5;
  --storefront-calendar-stock-high-text-color: #344054;
  --storefront-calendar-stock-out-background-color: #E4E6EB;
  --storefront-calendar-stock-out-text-color: #6B7280;

  /* Prahy úrovně zásob */
  --storefront-calendar-stock-low-threshold: 25;
  --storefront-calendar-stock-limited-threshold: 60;

  /* Vybrané datum */
  --storefront-calendar-selected-background-color: #212121;
  --storefront-calendar-selected-text-color: #FFFFFF;

  /* Dnes */
  --storefront-calendar-today-border-color: #212121;

  /* Buňka dne */
  --storefront-calendar-day-cell-corner-radius: 50%;

  /* Rámeček */
  --storefront-calendar-border-color: #212121;
  --storefront-calendar-border-width: 1px;
  --storefront-calendar-border-radius: 0px;

  /* Kontejner */
  --storefront-calendar-container-padding: 1px;

  /* Ostatní */
  --storefront-calendar-accent-color: #212121;
  --storefront-calendar-background-color: #FFFFFF;
}

Vítejte v dokumentaci TWICE

Orientace v TWICE

Jak systém funguje

Editor storefrontu - Kalendář

Barvy úrovně zásob

Prahy úrovně zásob

Vybrané datum

Buňka dne

Dnes

Rámeček

Kontejner

Legenda úrovně zásob

CSS proměnné

Související články

Barvy

Vstupy

​Barvy úrovně zásob

​Prahy úrovně zásob

​Vybrané datum

​Buňka dne

​Dnes

​Rámeček

​Kontejner

​Legenda úrovně zásob

​CSS proměnné

​Související články

Barvy

Vstupy

Barvy úrovně zásob

Prahy úrovně zásob

Vybrané datum

Buňka dne

Dnes

Rámeček

Kontejner

Legenda úrovně zásob

CSS proměnné

Související články