Teemaeditori – Kalenteri

Kalenterin asetuspaneeli teemaeditorissa — Teemaeditori > Kalenteri

Kalenteri-paneelissa muokataan saatavuuskalenteria, joka näkyy listaussivuilla vuokrapäivien valintaa varten. Varastotasojen värit kertovat, kuinka paljon varastoa kunakin päivänä on saatavilla, ja määritettävät rajat ohjaavat, milloin kukin väri on käytössä.

Kalenterin varastotasomerkinnät näkyvät vain, kun listaussivun verkkokauppasisällön asetuksissa on käytössä Show stock level. Kun se on pois käytöstä, päiväruudut näkyvät ilman värikoodausta ja varastotasojen selite piilotetaan.

Varastotasojen värit

Jokaisella varastotasolla on oma tausta- ja tekstivärinsä. Tasoja on neljä:

Asetus	Oletus	Kuvaus
Vähäinen, tausta	`#FDA29B`	Niiden päiväruutujen taustaväri, jotka ovat vähäisen varaston rajalla tai sen alle.
Vähäinen, teksti	`#344054`	Vähäisen varaston päiväruutujen tekstin väri.
Rajallinen, tausta	`#F5C771`	Niiden päiväruutujen taustaväri, jotka ovat vähäisen ja rajallisen rajan välissä.
Rajallinen, teksti	`#344054`	Rajallisen varaston päiväruutujen tekstin väri.
Runsas, tausta	`#B4EFD5`	Rajallisen rajan ylittävien päiväruutujen taustaväri.
Runsas, teksti	`#344054`	Runsaan varaston päiväruutujen tekstin väri.
Loppu, tausta	`#E4E6EB`	Niiden päiväruutujen taustaväri, joissa varastoa ei ole saatavilla.
Loppu, teksti	`#6B7280`	Loppuunmyytyjen päiväruutujen tekstin väri.

Varastotasojen rajat

Rajat ohjaavat, milloin kukin väri on käytössä. Ne ovat prosenttiosuuksia saatavilla olevasta varastosta suhteessa sijainnin kokonaisvarastoon.

Asetus	Tyyppi	Oletus	Vaihteluväli	Kuvaus
Vähäinen	Numero	25 %	0–100 %	Päivät, joiden saatavuus on tässä prosentissa tai sen alle, näkyvät vähäisen varaston värillä.
Rajallinen	Numero	60 %	0–100 %	Päivät, joiden saatavuus on vähäisen rajan ja tämän prosentin välissä, näkyvät rajallisen varaston värillä. Tämän prosentin ylittävät päivät näkyvät runsaana.

Vähäisen rajan on oltava pienempi tai yhtä suuri kuin rajallisen raja. Jos asetat vähäisen rajan rajallista suuremmaksi, paneeli säätää rajallisen rajan automaattisesti vastaamaan sitä.

Valittu päivä

Kalenterissa parhaillaan valitun päivän värit.

Asetus	Oletus	Kuvaus
Tausta	`#212121`	Valitun päiväruudun taustaväri.
Teksti	`#FFFFFF`	Valitun päiväruudun tekstin väri.

Päiväruutu

Asetus	Tyyppi	Oletus	Vaihteluväli	Kuvaus
Kulmien pyöristys	Liukusäädin	50 %	0–50 %	Kuinka pyöreä kukin päiväruutu on. 0 % on neliö, 50 % on ympyrä.

Tänään

Asetus	Oletus	Kuvaus
Reuna	`#212121`	Tämän päivän päiväruudun reunan väri.

Reuna

Asetus	Tyyppi	Oletus	Vaihteluväli	Kuvaus
Väri	Väri	`#212121`	—	Kalenterin ympärillä olevan reunan väri.
Paksuus	Liukusäädin	1 px	0–4 px	Kalenterin ympärillä olevan reunan leveys.
Kulmien pyöristys	Liukusäädin	0 px	0–40 px	Kuinka pyöreät kalenterin kulmat ovat.

Säiliö

Asetus	Tyyppi	Oletus	Vaihteluväli	Kuvaus
Sisennys	Liukusäädin	1 px	0–16 px	Sisäinen tyhjä tila kalenterin reunan ja sisällön välissä.

Varastotasojen selite

Kun Show stock level on käytössä, kalenterin alle tulee selite, jossa näkyvät värinäytteet ja tekstit kullekin varastotasolle (loppu, vähäinen, rajallinen, runsas). Näytteen muoto vastaa päiväruudun kulmien pyöristystä, jotta ulkoasu pysyy yhtenäisenä. Voit muokata selitteen tekstejä listaussivun verkkokauppasisällön asetuksissa. Jos teksti jätetään tyhjäksi, kyseinen selitekohta piilotetaan.

CSS-muuttujat

:root {
  /* Stock level colours */
  --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;

  /* Stock level thresholds */
  --storefront-calendar-stock-low-threshold: 25;
  --storefront-calendar-stock-limited-threshold: 60;

  /* Selected date */
  --storefront-calendar-selected-background-color: #212121;
  --storefront-calendar-selected-text-color: #FFFFFF;

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

  /* Day cell */
  --storefront-calendar-day-cell-corner-radius: 50%;

  /* Border */
  --storefront-calendar-border-color: #212121;
  --storefront-calendar-border-width: 1px;
  --storefront-calendar-border-radius: 0px;

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

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

Tervetuloa TWICE-dokumentaatioon

Liikkuminen TWICEssä

Järjestelmän ymmärtäminen

Teemaeditori – Kalenteri

Varastotasojen värit

Varastotasojen rajat

Valittu päivä

Päiväruutu

Tänään

Reuna

Säiliö

Varastotasojen selite

CSS-muuttujat

Aiheeseen liittyvät

Värit

Syöttökentät

​Varastotasojen värit

​Varastotasojen rajat

​Valittu päivä

​Päiväruutu

​Tänään

​Reuna

​Säiliö

​Varastotasojen selite

​CSS-muuttujat

​Aiheeseen liittyvät

Värit

Syöttökentät

Varastotasojen värit

Varastotasojen rajat

Valittu päivä

Päiväruutu

Tänään

Reuna

Säiliö

Varastotasojen selite

CSS-muuttujat

Aiheeseen liittyvät