Moduł kontenera

Artykuł
05/29/2024

W tym artykule opisano moduły kontenera i sposób ich dodawania do stron witryny w Microsoft Dynamics 365 Commerce.

Moduł kontenerowy to moduł, który obsługuje inne moduły w nim zawarte. Podstawowym celem modułu kontenera jest zdefiniowanie, za pomocą ustawionych dla niego właściwości, układu modułów, które zawiera. Na przykład moduły te mogą pojawiać się obok siebie w układzie dwukolumnowym, trzykolumnowym, czterokolumnowym lub sześciokolumnowym. Mogą być także ograniczone do szerokości kontenera lub mogą wypełniać ekran. Nagłówek można również dodać do każdego modułu kontenerów.

Trzy standardowe typy modułów kontenera to: kontener, kontener z dwoma miejscami i kontener z trzema miejscami. Wewnątrz tych kontenerów można umieszczać moduły dowolnego typu.

Uwaga

Zawsze zaleca się umieszczanie modułów wewnątrz modułu kontenera, tak aby można je było ograniczyć do jego szerokości.

Przykłady modułów kontenerów w e-Commerce

Autor witryny chce mieć trzy kolumny układu, gdzie trzy moduły są wyświetlane obok siebie. W związku z tym autor witryny używa modułu kontenera o typie kontener z trzema gniazdami.
Autor witryny chce mieć sześć kolumny układu, gdzie sześć modułów są wyświetlane obok siebie. Dlatego autor witryny używa kontenera typu zawierającego, który ma w sobie sześć kolumn.
Autor strony chce umieścić moduł na stronie, ale nie chce, aby wypełniał ekran. Dlatego dodaje moduł do modułu kontenera i ustawia właściwość kontenera Szerokość na Dopasuj do kontenera.

Poniższy obraz przedstawia przykład modułu kontenera zawierającego moduł karuzeli w konstruktorze witryn Commerce. W tym przykładzie właściwość Szerokość modułu kontenera jest ustawiona na Wypełnij ekran.

Przykład modułu kontenera.

Właściwości modułu kontenera

Nazwa właściwości	Wartości	opis
Nagłówek	Tekst nagłówka i tag nagłówka (H1, H2, H3, H4, H5 lub H6)	Dla kontenera można podać opcjonalny nagłówek. Domyślnie w nagłówku jest używany tag H2. Jednak znacznik można zmienić, aby spełniał wymagania dotyczące dostępności.
Szerokość	Dopasuj do kontenera lub Wypełnij ekran	Jeśli ta opcja ustawiona jest na domyślną wartość Dopasuj do kontenera, rozmiar modułów wewnątrz kontenera jest ograniczony do szerokości kontenera. Jeśli ma wartość Wypełnij ekran, szerokość modułów nie jest ograniczona przez kontener i mogą one wypełnić ekran.
Liczba kolumn	1, 2, 3, 4, 6 lub 12	Właściwość ta definiuje liczbę kolumn w kontenerze. Kontener może mieć do 12 kolumn.

Kontener z 2 okienkami

Kontener o typie 2-gniazdowym jest zoptymalizowany dla układu o dwóch kolumnach. Ten typ kontenera ma dwa gniazda, w których można włączyć widok obok siebie modułów znajdujących się wewnątrz.

Za pomocą dodatkowych właściwości można zoptymalizować układ dla różnych portów widoku (urządzeń przenośnych, tabletów, komputerów itp.). Dla każdego portu widoku można zdefiniować szerokość każdej kolumny. Dostępne są następujące ustawienia szerokości kolumny:

75%/25%: szerokość kolumny pierwszego modułu wynosi 75%, a drugiego 25%. Dostępna jest również opcja 25%/75%.
50%/50%: oba moduły mają jednakową szerokość kolumny.
67%/33%: szerokość kolumny pierwszego modułu wynosi 67%, a drugiego 33%. Dostępna jest również opcja 33%/67%.
100%: oba moduły mają pełną szerokość kolumny. Z tego względu moduły są ułożone pionowo w jednej kolumnie. Chociaż ten Układ jednokolumnowy jest oparty na kontenerze o typie dwóch gniazd, można go uzyskać w przypadku niektórych portów widoku (np. bardzo małe porty widoku, np. urządzenia przenośne).

Właściwości kontenera z dwoma gniazdami

Nazwa właściwości	Wartości	Opis
Nagłówek	Tekst nagłówka i tag nagłówka	Dla kontenera można podać opcjonalnie nagłówek.
X-Konfiguracja portu małego widoku	25%/75%, 75%/25%, 50%/50%, 67%/33%, 33%/67% lub 100%	Właściwość ta definiuje układ bardzo małych portów widoku.
Konfiguracja portu małego widoku	25%/75%, 75%/25%, 50%/50%, 67%/33%, 33%/67% lub 100%	Właściwość ta definiuje układ bardzo małych portów widoku, takich jak urządzenia mobilne.
Konfiguracja średnich portów widoku	25%/75%, 75%/25%, 50%/50%, 67%/33%, 33%/67% lub 100%	Właściwość ta definiuje układ średnich portów widoku, takich jak tablety.
Konfiguracja dużych portów widoku	25%/75%, 75%/25%, 50%/50%, 67%/33%, 33%/67% lub 100%	Właściwość ta definiuje układ dużych portów widoku, takich jak komputery.

Kontener z 3 okienkami

Kontener o typie modułu 3-gniazdowym jest zoptymalizowany dla układu o trzech kolumnach.

Za pomocą dodatkowych właściwości można zoptymalizować układ dla różnych portów widoku. Dla każdego portu widoku można zdefiniować szerokość każdej kolumny. Dostępne są następujące ustawienia szerokości kolumny:

33%/33%/33%: wszystkie trzy moduły mają jednakową szerokość kolumny.
50%/25%/25%: szerokość kolumny pierwszego modułu wynosi 50%, a każdego z pozostałych dwóch modułów 25%. Dostępne są także opcje 25%/50%/25% i 25%/25%/50%.
16%/16%/67%: szerokość kolumny dwóch pierwszych modułów wynosi 16%, a trzeciego 67%. Dostępne są także opcje 16%/67%/16% i 67%/16%/16%.

Właściwości kontenera z trzema gniazdami

Nazwa właściwości	Wartości	Opis
Nagłówek	Tekst nagłówka i tag nagłówka	Dla kontenera można dodać opcjonalny nagłówek.
X-Konfiguracja portu małego widoku	33%/33%/33%, 50%/25%/25%, 25%/50%/25%, 25%/25%/50%, 16%/16%/67%, 16%/67%/16% lub 67%/16%/16%	Właściwość ta definiuje układ bardzo małych portów widoku.
Konfiguracja portu małego widoku	33%/33%/33%, 50%/25%/25%, 25%/50%/25%, 25%/25%/50%, 16%/16%/67%, 16%/67%/16% lub 67%/16%/16%	Właściwość ta definiuje układ bardzo małych portów widoku, takich jak urządzenia mobilne.
Konfiguracja średnich portów widoku	33%/33%/33%, 50%/25%/25%, 25%/50%/25%, 25%/25%/50%, 16%/16%/67%, 16%/67%/16% lub 67%/16%/16%	Właściwość ta definiuje układ średnich portów widoku, takich jak tablety.
Konfiguracja dużych portów widoku	33%/33%/33%, 50%/25%/25%, 25%/50%/25%, 25%/25%/50%, 16%/16%/67%, 16%/67%/16% lub 67%/16%/16%	Właściwość ta definiuje układ dużych portów widoku, takich jak komputery.

Dodawanie modułu kontenera do strony

Aby dodać moduł kontenera do nowej strony i ustawić wymagane właściwości, wykonaj następujące kroki.

Przejdź do Szablony, a następnie wybierz Nowy, aby utworzyć nowy szablon.
W oknie dialogowym Nowy szablon, w obszarze Nazwa szablonu wprowadź Szablon kontenera, a następnie wybierz OK.
W polu Treść wybierz wielokropek (...), a następnie wybierz Dodaj moduł.
W oknie dialogowym Wybierz moduły wybierz moduł Strona domyślna, a następnie OK.
Wybierz Zapisz i Zakończ edycję, aby przesłać szablon, a następnie Publikuj, aby go opublikować.
Przejdź do Strony i wybierz Nowy, aby utworzyć nową stronę.
W oknie dialogowym Utwórz nowa stronę, w obszarze Nazwa strony wprowadź Strona kontenera, a następnie Dalej.
W sekcji Wybierz szablon wybierz utworzony wcześniej Szablon kontenera, a następnie Dalej.
W sekcji Wybierz układ wybierz układ strony (na przykład Dynamiczny układ), a następnie Dalej.
W sekcji Przegląd i zakończenie przejrzyj konfigurację strony. Jeśli chcesz edytować informacje na stronie, wybierz pozycję Wstecz. Jeśli informacje na stronie są poprawne, wybierz pozycję Utwórz stronę.
Na nowej stronie wybierz gniazdo Główne, następnie wybierz wielokropek (...), a następnie wybierz pozycję Dodaj moduł.
W oknie dialogowym Wybierz moduły wybierz moduł Kontener i OK.
W okienku właściwości modułu kontenera, ustaw właściwość Liczba kolumn na 1, a Szerokość na Wypełnij kontener.
W polu Kontener wybierz wielokropek (...), a następnie Dodaj moduł.
W oknie dialogowym Wybierz moduły wybierz moduł Blok zawartości, a następnie OK.
W okienku właściwości modułu bloku zawartości skonfiguruj nagłówek, obraz i układ.
Wybierz Zapisz, a następnie Podgląd, aby wyświetlić podgląd strony. Powinien być widoczny jeden moduł funkcji, który mieści się w szerokości modułu kontenera.
W okienku właściwości modułu kontenera zmień wartość właściwości Liczba kolumn na 3.
Dodaj dwa dodatkowe moduły bloku zawartości do modułu kontenera i skonfiguruj je.
Wybierz Zapisz, a następnie Podgląd, aby wyświetlić podgląd strony. Teraz powinny być widoczne trzy moduły bloku zawartości widoczne obok siebie.
Po uzyskaniu żądanego układu wybierz Zakończ edycję, aby przesłać stronę, a następnie Publikuj, aby ją opublikować.