Listeneinträge objektabhängig formatieren

26. Okt 2017

Einzelne Listeneinträge können unterschiedlich formatiert dargestellt werden. Dieser Artikel zeigt Ihnen, welche Möglichkeiten Weblication dazu bietet.

Einzelne Listeneinträge können unterschiedlich formatiert dargestellt werden. Dieser Artikel zeigt Ihnen, welche Möglichkeiten Weblication dazu bietet.

Formatierung über Objektvariante

Soll die Darstellung direkt vom Redakteur ausgewählt werden, ist die Festlegung einer Objektvariante über die Pflegemaske am transparentesten für den Redakteur. Die Variante enthält in der Regel bereits die Information, wie das Objekt dargestellt werden soll. So kann die Objektvarianten z.B. "Ausrichtung rechts" oder "Als Angebot hervorheben" lauten.

HTML der spezielle Formatierung über eine Objektvariante

<li class="listEntry ... listEntryObject-shopProduct_var1"

Eine Objektvariante wird als CSS-Klasse im Listeneintrag ergänzt und kann somit zur spezielle  Formatierung genutzt werden

Formatierung über Data-Attribute

Soll die Formatierung hingegen nicht aktiv vom Redakteur festgelegt werden, sondern sich auf beliebige Werte des gepflegten Objektes beziehen, kann das über der Ergänzung von Data-Attribute auf Basis von Objektdaten geschehen.

In dem Fall definieren Sie im CSS, welche Objektdaten in Data-Attribute des Listeneintrags geschrieben werden sollen.

CSS-Defintion in der Listenvariante, um Objektdaten zu ergänzen

-w-option-objectdataAsAttribute:'type,specialOffer,public';

HTML der ergänzten Objektdaten (Data-Attribute werden immer klein geschrieben)

<li data-type="event" data-specialoffer="yes" data-public="no"

Formatierung auf Basis von Data-Attributen

.listEntry[data-type='event'] {color:#ee9999}
.listEntry[data-specialoffer='yes'] {font-weight:bold}
.
listEntry[data-public='no']:before {content:'Geschlossene Gesellschaft'}

Beim Ergänzen von Objektdaten als Data-Attribute sind mehrere Werte über Komma getrennt nutzbar.