Projektant

To miejsce, w którym możesz zaprojektować szablon karty produktu, korzystając z metody przeciągnij-i-upuść.

Szablon składa się z 3 głównych elementów: Widżety, Sekcje, oraz Atrybuty produktu.

Zastępniki (placeholders) mogą być wyświetlane w 3 różnych stanach w zależności od wykonywanej akcji:

◦ szary – zastępnik jest dostępny ◦ jasnozielony – zastępnik jest gotowy do upuszczenia atrybutu ◦ ciemnozielony – zastępnik jest dostępny, aby zaakceptować zmienione rozmiary atrybutów

Aby ułatwić rozróżnianie typów elementów w rozbudowanych modelach, Designer stosuje kolor tła dla każdego elementu w zależności od jego typu podczas umieszczania lub przeciągania w obszarze roboczym.

Kolory typów elementów: • Sekcje: jasnoniebieski. • Widżety: jasno-pomarańczowy. • Atrybuty: szary.

To usprawnienie jest dostępne tylko w Designerze dla Templates i Sections i ma na celu poprawę czytelności oraz zmniejszenie liczby błędów przy układaniu większych layoutów.

Kolory uzupełniają istniejące stany zastępników, które nadal wskazują dostępność miejsca do umieszczenia i zachowanie przy zmianie rozmiaru.

Na atrybutach można wykonać następujące akcje:

• przesuń – przeciągnij atrybut z listy atrybutów lub z innej pozycji na macierzy i przenieś go nad dostępny zastępnik atrybutu. Podczas najechania na wybrane miejsce, zastępnik rozświetli się na jasnozielono, jeśli możliwe jest upuszczenie. Atrybuty pobrane z listy atrybutów po lewej nie znikają, lecz przygasają do szarości.

• usuń - otwórz menu kebab (trzy kropki) i wybierz „remove”. Na liście atrybutów nazwa atrybutu i kolor ikony powrócą do czarnego.

• zmień rozmiar – chwyć prawy dolny róg atrybutu, aby zmienić jego rozmiar. Dostępne zastępniki atrybutów rozświetlą się na jasnozielono. Zmień rozmiar atrybutu do pożądanego wymiaru i upuść go, aby zakończyć.

Jeśli potrzebujesz więcej miejsca w obszarze projektowania, kliknij + ADD 10 ROWS, a nowe 10 wierszy zostanie dodane na dole obszaru roboczego.

Możliwe jest też dodanie pojedynczego nowego wiersza w konkretnym miejscu — aby to zrobić, kliknij lewym przyciskiem myszy na linię kropkowaną, a + Add row przycisk pojawi się. Kliknij go, aby dodać dodatkowy wiersz pod tą konkretną linią.

Gdy atrybut zostanie umieszczony w obszarze projektanta, można oznaczyć go jako wymagany. Wymagane atrybuty służą do wskazywania postępu, pokazując kompletność szablonu dla wybranego języka. Te atrybuty są oznaczone czerwonym gwiazdkiem.

Gdy sekcja zostanie upuszczona w obszarze projektanta, można przypisać do niej zestaw kompletności .

Aby to zrobić, najedź na sekcję, a w menu trzech kropek kliknij Assign completeness set. Aby to zadziałało, zestaw musi być wcześniej utworzony.

Po kliknięciu pojawi się nowe okno, z którego możesz wybrać przypisanie z listy rozwijanej.

Możesz szybko utworzyć nowy zestaw z tego miejsca, po prostu klikając + Add new completeness set z listy rozwijanej. Następnie nadaj nazwę temu nowemu zestawowi i kliknij ikonę, aby zapisać.

Gdy szablon będzie gotowy, kliknij SAVE CHANGES. Następnie u dołu ekranu pojawi się powiadomienie push.

To menu ma również 2 dodatkowe opcje: Edytuj sekcję która otworzy tę konkretną sekcję w trybie edycji, oraz Usuń aby usunąć ją z obszaru projektanta (to samo można osiągnąć, przeciągając sekcję poza obszar).