Strony WWW z SystemFlow: Countdown

SystemFlow 1.0+

0:00Witaj w kolejnej lekcji, której omówimy nasz pierwszy rajd.

0:02Komponent jest to komponent Countdown, czyli odliczanie czasu.

0:06Jest on dostępny w dwóch wersjach.

0:08To jest ten sam komponent, natomiast ma taką wersję inline, gdzie wszystko jest w

0:11jednej linii oraz wersje BIG, gdzie mamy to rozbite na dwie linie.

0:15Natomiast naturalnie struktura jest tak

0:17przygotowana, że jeśli korzystasz z tego komponentu wybieram po prostu na Body

0:22Command, a następnie wklejam to co mam w schowku.

0:25Return czy Enter to w przypadku korzystania z tego

0:29komponentu możesz bardzo łatwo edytować wszystkie te elementy.

0:32Oczywiście pierwsza rzecz to podlinkowanie

0:34tej instancji, czyli wybieramy and link instance.

0:37Ja tutaj jeszcze może ustawię ten komponent centralnie w pionie i może jako

0:44wysokość damy tutaj dla tego komponentu 100 VH czyli vertical height i jeszcze

0:49umieścimy go na środku centralnie, tak żebyśmy dobrze ten komponent widzieli.

0:54Teraz przechodząc do środka zobacz, że znajduje się tutaj szereg

0:58raperów, które po prostu zawierają dni, godziny, minuty, sekundy.

1:02Podstawowe ustawienie tego komponentu jest

1:05na jego głównym elemencie, czyli na S i Countdown.

1:08Tutaj wchodzimy w D, czyli Settings i mamy coś takiego jak atrybuty.

1:13To jest jedyny atrybut, który musimy wyedytować.

1:15Data counter Nie zmieniamy tego atrybutu, a jedynie edytujemy jego wartość value.

1:21I to jest właśnie czas w formacie GMT,

1:24który to czas będzie odliczane do którego czasu będziemy mogli.

1:29Jeśli chcemy odliczać np.

1:31do 2021 roku do końca roku, czyli 12 31. Tutaj możemy np.

1:37zrobić 23 59, ponieważ w systemie 24 godzinnym możemy wpisywać tutaj daty.

1:43No i ważne jest, żeby tutaj uwzględnić jaką strefę czasową chcemy zaadresować.

1:49My jesteśmy w strefie GMT + 1, w związku z tym tutaj mamy właśnie +1.

1:53Gdybyś chciał w innej strefie czasowej odliczać, to po prostu adekwatnie

1:56wpisujesz tutaj godzinę dodane do strefy GMT i wybieramy polecenie save.

2:02To co jest istotne to teraz kamper nie

2:04będzie działał ani tutaj, ani w podglądzie.

2:07Przypominam, że zawsze musimy opublikować stronę z tego powodu, że te skrypty, która

2:13nie są ani w custom kod, ani w kodzie tej strony, a są w kodzie globalnym także te

2:20komponenty działają bez problemu na każdej naszej podstronie.

2:23Teraz jeszcze przyjrzyjmy się tym grom.

2:25Naturalnie możesz tutaj wszystko

2:27pozmieniać, bo mamy zrobiony rapier dla każdej sekcji i mamy tutaj osobno label i

2:34osobno liczbę, więc można naturalnie to przerobić na jakiś polski język przepisać.

2:41To jest super proste w edycji.

2:43No i można też zmienić właściwości.

2:45Ten komponent w zasadzie od tego

2:47poprzedniego czy od jego drugiej wersji różni się tym, że tutaj mamy po prostu

2:50flexa i mamy ustawione te elementy jeden pod drugim.

2:54Ale jeśli chcesz to jest oczywiście web flow.

2:56Możesz tym zarządzić w dowolny sposób, zmienić to, powiększyć itd.

3:01Ja teraz przetestuje działanie naszego

3:03komponentu na gotowo gotowej opublikowanej stronie.

3:06No i mamy jeszcze do końca roku 307 dni.

3:09Jak widzisz działa to bez problemu.

3:11W momencie gdy licznik dojdzie do zera po

3:13prostu przestanie on odliczać i wtedy również zniknie ze strony bez konieczności

3:18przeładowania przez użytkownika, więc tak się zachowa jak rzeczywiście powinien.

3:24No i co jeszcze tutaj możemy zrobić?

3:25Możesz podejrzeć jak jest skonstruowany

3:28technicznie ten komponent, ponieważ on w poszczególnych tych papierach.

3:33Jak widzisz Reaper ma odpowiednią

3:35odpowiedni atrybut base i tutaj jest walił 0.

3:38Czy jakaś dowolna wartość w zasadzie tutaj może być.

3:41Natomiast sam count czyli ten to gdzie to

3:45oblicza ma taki atrybut counter daje walił i też zero tylko po to

3:51żeby coś tutaj się w tym atrybucie znalazło, żeby dało się po prostu

3:55rozpoznać, który komponent zawiera dni, który zawiera godzinę, który minutę.

4:00No i żeby było wiadomo, które pole ma dla nas odliczać.

4:04Ale tych rzeczy nie musisz już nawet dotykać czy edytować.

4:07Wystarczy, że ustawić w tym globalnym atrybucie, w tym globalnym kontenerze

4:11Account ten atrybut data System Center ma odpowiednią datę.

4:15I to tyle z tym.

4:18Z tym komponentem są powiązane też inne komponenty, które mamy w System Flow i

4:22zrobiliśmy parę komponentów zawierających Count i wszystkie możesz znaleźć wpisując

4:26po prostu Countdown w wyszukiwarce Web Flow na Control czy Command.

4:31I tutaj jest alert oraz dwie karty np.

4:34mamy taką kartę, która

4:36zawiera jakiś obrazek, jakiś tekst, pozwala użytkownikowi wpisać adres i np.

4:40zapisać się na jakiś webinar.

4:42Natomiast na dole mamy czas odliczający do tego webinaru albo do końca oferty.

4:47Więc taka prosta karta tutaj też w niej znajduje się

4:50znajdują się override, więc nie trzeba jej w zasadzie od niej kupować.

4:53Natomiast nie ma w override ustalenia tego

4:56czasu, więc tak czy inaczej trzeba będzie od linkować tą instancję.

5:00I wejść sobie w ten component s I can on.

5:03Przypominam główny kontener i tutaj ustawiamy datę do której chcemy odliczać.

5:08Druga karta jest bardzo podobna,

5:10a kolejny komponent to komponent, który jest alergikiem.

5:14To jest taki baner, który możemy wyświetlać np.

5:16na górze strony, która odlicza do zakończenia np.

5:19jakiejś produktowej promocji.

5:20I tutaj też musielibyśmy podlinkować taką instancję lub wejść do edycji symbolu

5:26i w tej edycji symbolu przejść do kontenera.

5:30Sekunda znajduje się tutaj i wyedytować data center na odpowiednią datę.

5:35Zawsze chyba jednak jest od linkować tą instancję i pracować z nią w ten sposób.

5:40No i teraz jest jeszcze jedna rzecz.

5:41Ponieważ center zniknie nam automatycznie

5:44w momencie, gdy dojdzie do zera, czyli tutaj pojawi się pusta przestrzeń.

5:48Tak naprawdę natomiast zależy nam na tym, żeby w przypadku odliczenia do końca

5:53promocji zniknęła cała tabelka, podobnie jak np.

5:57całe tamte karty produktowe, które pokazywałem i to za to odpowiada

6:02kolejne like komponent, który pokażę Ci w następnej lekcji.

6:05A jeśli chodzi o Counter, to wszystko.