Strony WWW z SystemFlow: Temporal

SystemFlow 1.0+

0:00W poprzedniej lekcji wspomniałem, że gdy licznik dojdzie do zera, warto by było

0:03ukryć nie tylko licznik, ale cały kanban bar, bo to jest informacja o promocji,

0:07która zwyczajnie wygaśnie po zakończeniu odliczania.

0:10Więc przygotowaliśmy specjalny komponent.

0:12W Live Components wystarczy wybrać Show

0:15Hide on Date tak się nazywa ten komponent i pozwala ukryć dowolne elementy Web Flow

0:22po określonej dacie, czyli po upływie określonego czasu w liczniku możemy tą

0:26samą datą spowodować, że cały ten kanban baner zniknie.

0:31Możemy zrobić to na dwa sposoby albo korzystając z dokumentacji możemy

0:34wykorzystać ten komponent gotowy header, upper i wszystkie live.

0:39Komponenty przy okazji są dostępne w

0:41momencie gdy wejdziemy na body, gdy wybierzemy komentarze czy kontrole na

0:46pececie i wpiszemy L C, czyli Live Component, to to są wszystkie komponenty,

0:50z których możemy wybrać i nam zależy teraz na wybraniu komponentu show Hide Reaper.

0:57Ten show hejt Reaper jest pustym komponentem.

1:00Musimy go od linkować.

1:02I w zasadzie jedyne co zawiera to taki

1:04pusty div, ale dodatkowo ma szereg atrybutów.

1:08Teraz naszym zadaniem jest skorzystać z tych atrybutów i ustawić odpowiednie daty.

1:12Ten pierwszy atrybut data is flow

1:14temporary po prostu musi być ustawiony na zero.

1:17Musi mieć jakąś dowolną wartość, ale jego nie ruszamy.

1:20Te, które nas interesują

1:22to są data, flow, Start, temporary start oraz End i są one opcjonalne.

1:28To znaczy, że możemy nie ustawić żadnego ale.

1:30To by było bez sensu, bo byśmy nie mieli

1:31ani momentu, gdy jakiś element się pojawia, ani gdzieś się po prostu znika.

1:37Więc warto jest ustawić przynajmniej albo

1:39start albo end, ale możemy ustawić i start i end, czyli możemy zadecydować, żeby wraz

1:45ze startem promocji o konkretnej godzinie konkretnej dacie pojawiła się nam

1:51zawartość tego rapera i możemy również ustawić end, czyli koniec.

1:56W tym momencie zostanie ukryty ten element.

1:59To działa dokładnie tak jak Counter, który omawiam w poprzedniej lekcji.

2:02Też stosujemy tutaj strefę czasową GMT i 24 godzinny zegar i możemy tutaj wstawić

2:07odpowiednią datę oraz godzinę, a następnie sobie to zapisać.

2:12Oczywiście, żeby to zostało ukryte wewnątrz musi.

2:15Wewnątrz tego musi znaleźć się nasz cały Countdown Bar.

2:18Innymi słowy, jeśli data End zostanie

2:23przekroczona, czyli siedemnasta 45 sekund w roku 2024 5 stycznia,

2:30wtedy automatycznie zostanie ukryta cała zawartość rapera.

2:34A jeśli mamy dodatkowo zdefiniowany

2:36atrybut start, to również dopiero ten pokaże się rok wcześniej,

2:42więc możemy w ten sposób ustawić sobie przyszłe jakieś zdarzenia, przyszłą

2:46promocję i umieścić też rapera i w ten sposób będą one

2:51automatycznie odkrywane i ukrywane na naszej stronie.

2:54Niestety, w przeciwieństwie do tego jak

2:56działa counter, który znika w momencie, gdy do dojdzie do zera bez konieczności

3:01odświeżania, w przypadku tego akurat komponentu będziemy musieli odświeżyć

3:05stronę, czyli zrobić refresh i wtedy zostanie on ukryte.

3:09Wspomniałem też o tym, że jest drugi alternatywny sposób na użycie tego rapera.

3:13W zasadzie polega on na tym, że nie możemy

3:15nie musimy w zasadzie używać tego komponentu Raper po prostu go usunę i na

3:21dowolny element, który chcemy okryć czy ukryć na jakiejś dacie np.

3:25Countdown Baner, po prostu wchodzimy w jego ustawienia i dodajemy atrybuty.

3:29Jeden atrybut obowiązkowy, który musimy dodać to jest ten podstawowy data CSV

3:34Tempora, który w ogóle skojarzy to z tym naszym skryptem.

3:38Ustawiamy zawsze na zero

3:40i teraz możemy w zależności od potrzeby dodać start end albo start oraz end.

3:45Jeśli chcielibyśmy.

3:47Mamy ten element widoczny cały czas i

3:49chcemy, żeby razem z zakończeniem promocji po prostu skończył nam się

3:55ukrył nam się ten cały baner, to po prostu dodajemy end no i wpisujemy tutaj.

3:59Na razie wpiszę 1, wybiorę save i wpiszemy dokładnie to co znajduje się na

4:04Countdown, czyli tą samą datę do której będziemy odliczać.

4:08Chcemy wpisać tutaj temperament po to aby razem z zakończeniem timera

4:15zniknęła cała sekcja Kanban baner, więc można to zrobić samymi atrybutami.

4:20Nie trzeba koniecznie korzystać z gotowego predefiniowane go komponentu.

4:23Tak działa właśnie ukrywanie i odkrywanie

4:26na datę i warto je połączyć właśnie z kamperem.

4:29Do usłyszenia!