Zmiana wyglądu dodatkowych porcji za pomocą CSS
Artykuł opisuje jak krok po kroku wykorzystać atrybut data-mealtype-id na dodatkowych porcjach, aby nadać spersonalizowany wygląd kafelkom dodatkowych porcji.
Do czego służy ten atrybut?
Pozwala targetować konkretne typy posiłków w CSS — np. w celu nadania im indywidualnego wyglądu.
Możliwe zastosowania:
- background
- background-color
- background-image
- customowe style (border, badge, overlay itd.)
Na widoku Dodatkowe porcje dodany jest specjalny atrybut HTML data-mealtype-id="ID", gdzie ID to unikalny identyfikator typu posiłku, który możemy znaleźć na panelu admina.
Korzystamy z ID zamiast nazwy, aby uniknąć potencjalnych konfliktów (np. gdyby kiedyś pojawiły się typy o tej samej nazwie).
Jak znaleźć id konkretnego typu posiłku?
Najprostszym sposobem jest wejście na Panel Admina w zakładkę Oferta -> Typy posiłków i podejrzenie interesującego nas id:
Znając data-mealtype-id przechodzimy do Panelu Admina do zakładki Konfiguracja marki > Wygląd ogólny > CSS:
Do sekcji CSS dodajemy odpowiednie ostylowanie danego elementu, przykładowo:
[data-mealtype-id="34"] {
background-image: url("/url-grafiki");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
font-size: 18px;
}
Gdzie [data-mealtype-id="34"] jest selektorem konkretnego typu posiłku, a w miejscu "/url-grafiki" znajduje się link do odpowiedniej grafiki.
W rezultacie, przy poprawnie wykonanych krokach, na panelu klienta zobaczymy podobny wygląd jak poniżej 🙂
