Praca z plikami zastępowania CSS

Artykuł
05/28/2024

W tym artykule opisano, dlaczego, kiedy i jak używać plików zastępowania kaskadowych arkuszy stylów (CSS) w aplikacji Microsoft Dynamics 365 Commerce.

Stałe style witryny zazwyczaj powinny być obsługiwane za pośrednictwem motywu witryny. Motywy udostępniają podstawowe ustawienia stylów CSS i ustawienia stylów dla modułów na dowolnej stronie witryny. Motywy są tworzone przy użyciu zestawu Dynamics 365 Commerce SDK (Software Development Kit) w trybie online i są wdrażane w witrynach internetowych za pośrednictwem usług Microsoft Dynamics Lifecycle Services (LCS). Możliwości debugowania modułu i konfiguracje interfejsu modułu w zestawie SDK pomagają deweloperom tworzyć dostosowywalne i spójne pakiety projektów witryny. Gdy te pakiety projektów są wdrażane w witrynie, autorzy witryn mogą skupić się na tworzeniu, edytowaniu i publikowaniu zawartości, a nie na programowaniu witryny.

Biorąc pod uwagę zwykły cykl życia motywu, zależność od tego, aby deweloperzy zmienili styl za pomocą zestawu SDK i potoku wdrażania usługi LCS może stanowić element zaporowy w niektórych scenariuszach. Prototypy lub poprawki witryny mogą wydawać się kłopotliwe, jeśli zestaw SDK nie jest skonfigurowany lub jeśli nie masz czasu na oczekiwanie na wdrożenie usługi LCS.

W tych scenariuszach mogą pomóc pliki zastępowania CSS. W narzędziach autorskich usługi Commerce uwierzytelnieni użytkownicy mogą przekazać plik CSS, wyświetlić jego podgląd, a następnie aktywować go w celu zastąpienia motywu witryny. Obciążenie związane z wdrożeniem zestawu SDK lub usługi LCS nie jest wymagane. Zastąpienia, które są określone w pliku zastępowania CSS, mogą być tak małe, jak zmiana stylu pojedynczego tekstu, lub szeroko zakrojone, na przykład kompletna przebudowa marki.

Przed użyciem plików zastępowania CSS pamiętać o następujących ograniczeniach:

Tylko jeden plik zastępowania CSS może być aktywny w danej witrynie w danym momencie. W związku z tym wszystkie aktywne zastąpienia muszą być obecne w pojedynczym pliku zastępowania.
Chociaż podgląd zastąpień można wyświetlać w narzędziach autorskich usługi Commerce, nie ma żadnych dedykowanych funkcji debugowania, które pomogą zidentyfikować błędy wprowadzane przez zastąpienia. Innymi słowy, jeśli używasz plików zastępowania CSS, nie masz tego samego zestawu narzędzi, który zawiera zestaw SDK do weryfikowania modułu i procesu tworzenia.

Niemniej jednak pliki zastępowania CSS oferują szybki sposób tworzenia prototypu projektu lub implementowania poprawki, zanim zostanie opracowana i zaimplementowana pełna aktualizacja motywu.

Tworzenie pliku zastępowania CSS

Aby utworzyć plik zastępowania CSS, można użyć dowolnego zintegrowanego środowiska projektowego (IDE), edytora tekstów lub edytora kodu źródłowego. Typowym podejściem jest użycie standardowych debugerów internetowych w przeglądarce do identyfikowania selektorów stylów, właściwości i wartości w istniejącej witrynie. Większość przeglądarek umożliwia zmienianie wartości i wyświetlanie ich podglądu w debugerze. Po zidentyfikowaniu zmian, które chcesz wprowadzić, można zapisać je we własnym pliku CSS.

Przekazywanie pliku zastępowania CSS

Aby przekazać plik CSS do witryny w usłudze Commerce, wykonaj następujące kroki.

W narzędziach autorskich przejdź do swojej witryny.
W okienku nawigacji po lewej stronie wybierz pozycję Projekt.

Banknot

W zależności od wersji narzędzi autorskich usługi Commerce, których używasz, być może trzeba rozwinąć pozycję Ustawienia w okienku nawigacji, aby można było wybrać pozycję Projekt.
W górnej części głównego okienka projektu wybierz kartę Zastępowanie CSS, jeśli nie jest jeszcze wybrana.
W obszarze Dostępne zastąpienia CSS wybierz pozycję Przekaż plik CSS. Zostanie wyświetlone okno Eksploratora plików.
W Eksploratorze plików przejdź do pliku CSS i zaznacz go, a następnie wybierz pozycję Otwórz. Przekazany plik CSS pojawi się teraz w obszarze Dostępne zastąpienia CSS.

Wyświetlanie podglądu pliku zastępowania CSS

Aby wyświetlić podgląd pliku zastępowania CSS przed uaktywnieniem go w aktywnej witrynie, wykonaj następujące kroki.

W okienku nawigacji po lewej stronie wybierz pozycję Projekt, a następnie na karcie Zastępowanie CSS w obszarze Dostępne zastąpienia CSS znajdź plik CSS, którego podgląd chcesz wyświetlić.
Obok nazwy pliku CSS wybierz opcję Podgląd witryny.
W oknie dialogowym Wybieranie adresu URL wybierz adres URL witryny, dla której chcesz zobaczyć zastosowane zastąpienie, a następnie wybierz przycisk OK.
Jeśli istnieje wiele wariantów wybranego adresu URL, wybierz żądany wariant w wyświetlonym oknie dialogowym Podgląd wariantów.

Zostanie otwarta nowa karta lub okno przeglądarki, w którym możesz zweryfikować zastąpienia stylu względem witryny. Następnie możesz udostępnić adres URL innym uwierzytelnionym użytkownikom usługi Commerce w celu przejrzenia i przesłania opinii.

Aktywowanie pliku zastępowania CSS w aktywnej witrynie

Po wyświetleniu podglądu i zatwierdzeniu pliku zastępowania CSS można go aktywować w aktywnej witrynie.

Banknot

Tylko jeden plik zastępowania CSS może być aktywny w Twojej witrynie w danym momencie. Jeśli uaktywnisz nowy plik zastępowania, poprzedni plik zastępowania zostanie wyłączony. W związku z tym upewnij się, że wszystkie wymagane zastąpienia są obecne w pojedynczym pliku zastępowania CSS.

Aby aktywować pliki zastępowania CSS, wykonaj następujące kroki.

W okienku nawigacji po lewej stronie wybierz pozycję Projekt, a następnie na karcie Zastępowanie CSS w obszarze Dostępne zastąpienia CSS znajdź plik CSS, który chcesz aktywować.
W obszarze nazwy pliku CSS wybierz pozycję Aktywuj. Plik zastępowania natychmiast uaktywni się w Twojej aktywnej witrynie.

Dezaktywowanie pliku zastępowania CSS w aktywnej witrynie

Aby dezaktywować plik zastępowania CSS w witrynie, wykonaj następujące kroki.

W okienku nawigacji po lewej stronie wybierz pozycję Projekt, a następnie na karcie Zastępowanie CSS w obszarze Dostępne zastąpienia CSS znajdź plik CSS, który chcesz dezaktywować.
W obszarze nazwy pliku CSS wybierz pozycję Dezaktywuj. Plik zastępowania natychmiast zostanie wyłączony w Twojej aktywnej witrynie.

Wskazówka

Aby uzyskać dostęp do dodatkowych opcji plików zastępowania CSS, wybierz wielokropek (...) obok nazwy pliku CSS. Opcje pobierania, zmieniania nazwy i zastępowania są przydatne w przypadku szybkich zmian w istniejącym pliku zastępowania CSS.