[im4] ⭐ Atrybuty jako etykiety⭐

Moduł integracji

Wyświetla konfigurowalne etykiety na podstawie atrybutów produktu. Lista produktów zachowuje zatwierdzony podgląd z realnym środkowym produktem; karta produktu używa neutralnego skeletonu z realnymi wyłącznie etykietami modułu.

Miniatura modułu: [im4] ⭐ Atrybuty jako etykiety⭐

Galeria

Do czego służy moduł?

Moduł wyświetla na produktach etykiety tworzone na podstawie atrybutów produktu. Każda aktywna reguła wskazuje nazwę atrybutu, opcjonalnie wymaganą wartość oraz wygląd etykiety. Reguły mogą działać osobno na liście produktów i na karcie produktu.

Moduł może wyświetlić do 30 aktywnych reguł etykiet. Każda reguła jest sprawdzana niezależnie, dlatego jeden produkt może otrzymać kilka etykiet.

Najważniejsza zasada

Etykieta pojawi się tylko wtedy, gdy produkt ma atrybut o wskazanej nazwie i jego wartość nie jest pusta. Jeżeli włączysz sprawdzanie wartości, wartość produktu musi dodatkowo odpowiadać wartości wpisanej w regule.

Konfiguracja modułu

Standard podglądu kafelka produktu

W trybie Lista produktów podgląd pokazuje trzy duże kafelki bez slidera. Środkowy kafelek prezentuje działanie tego modułu, a dwa pozostałe są uproszczonym kontekstem.

Popover informacji przy etykiecie odwzorowuje pozycję i zachowanie z pliku module.twig: otwiera się bezpośrednio pod etykietą, ma strzałkę i nie może być przycinany przez kafelek.

Ważne zachowanie modułu

Reguła bez nazwy atrybutu nie jest przekazywana do JavaScriptu.
Nieaktywny wpis repeatera nie jest używany.
Atrybut z pustą wartością nigdy nie tworzy etykiety.
Każda pasująca reguła tworzy własną etykietę; kod nie usuwa duplikatów między regułami.
Jeżeli JSON konfiguracji lub danych produktu jest niepoprawny, moduł bezpiecznie zwraca pustą listę i nie renderuje etykiet.
Ikona jest ładowana leniwie i ma pusty ALT, ponieważ pełni funkcję dekoracyjną przy tekście etykiety.
Na mobile popover ogranicza szerokość do szerokości viewportu.

Szybki test po konfiguracji

Wybierz produkt, który ma atrybut o znanej nazwie i niepustej wartości.
Dodaj regułę tylko z nazwą atrybutu i włącz wyświetlanie w miejscu, które testujesz.
Sprawdź, czy etykieta pojawia się bez kontroli wartości.
Włącz kontrolę wartości i podaj wartość zgodną z produktem — etykieta nadal powinna być widoczna.
Zmień wymaganą wartość na inną — etykieta powinna zniknąć.
Sprawdź tekst, kolory i opcjonalną ikonę SVG.
Włącz informację, dodaj treść i sprawdź otwieranie, zamykanie kliknięciem poza etykietą oraz klawiszem Escape.
Jeżeli korzystasz z obu miejsc, wykonaj osobny test na liście produktów i na karcie produktu.

Informacje techniczne

Większość opisów ustawień została przeniesiona bezpośrednio do oznaczeń przy polach konfiguratora. Dzięki temu klient nie musi czytać osobnych tabel przed konfiguracją.

Oznaczenia: niebieskie Konfiguracja ⓘ = ustawienie konfiguracyjne w Shoperze; zielone Live ⓘ = ustawienie, którego efekt można od razu zobaczyć po prawej stronie. Jedno pole ma zawsze tylko jedno oznaczenie. Kliknięcie oznaczenia otwiera pełny opis pola.

Dwa ustawienia nie wpływają obecnie na wynik

Górny margines etykiet i Dolny margines etykiet występują w config.json, ale w przekazanym module.twig nie są używane w żadnej regule CSS. Zmiana tych pól nie powinna więc być opisywana klientowi jako działająca funkcja, dopóki kod nie zostanie uzupełniony.

W eksporcie brakuje kodu tworzącego hooki

Przekazane źródła pokazują, że moduł oczekuje elementów [data-im-product-attribute-badges] z atrybutem data-product-attributes, ale nie zawierają kodu, który te elementy umieszcza na liście i karcie produktu. Dlatego ta instrukcja nie zakłada konkretnego miejsca instalacji hooka. Do udokumentowania tego kroku 1:1 potrzebny jest fragment rzeczywistego HTML/Twig odpowiedzialnego za hook.