Supportportal

Components

Eine Component ist eine komplexere und funktionale Einheit innerhalb eines Design System. Sie ist eine Kombination aus mehreren Controls, Elementen oder anderen Komponenten, die zusammenarbeiten, um ein bestimmtes Merkmal, einen bestimmten Abschnitt oder eine bestimmte Funktionalität in der Benutzeroberfläche bereitzustellen. Komponenten sind oft umfangreicher und können verschiedene Controls und Stile umfassen.

Zu den Components gehören z.B. Navigation, Header, Table und andere übergeordnete UI-Strukturen, die aus mehreren Controls und möglicherweise zusätzlicher Logik bestehen, um eine kohärente Benutzererfahrung zu bieten.

Dashboard Card

Dashboard Karten müssen Child-Elemente vom Webcomponent tk-dashboard sein. Die Anzahl Calls in der Card data-tk-card-amount wird asynchron über die URL vom Attribut data-tk-url geladen und über das Attribut von data-tk-card-amount gemappt.

Die URL von .dashboard-card__type muss auf das entsprechende Bild im Verzeichnis /assets/img/dashboard/ geändert werden. Die Titel und Beschreibungen sind in der Text Library im Modul DASHBOARD abgelegt.

Default
Dashboard Shape
Icon Dashboard Card

Notfall

Calls mit dem Status Notfall
Dashboard Shape
Icon Dashboard Card

Zugewiesene Calls

Calls sind %COMPANY% zugewiesen

Call Drilldown

Webcomponent für Call Drilldown / Übersicht. Für die Klasse .call-drilldown gibt es den Modifier .call-drilldown--selected. Optional kann ein a tag mit .call-drilldown__link hinzugefügt werden. Dieser sollte das erste Child-Element sein.

Default
Call-Nr.: 000003
niedrig
Pendent Projektleiter
3. Nov, 08:24
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...
erwähnt
Small with link tag
Call-Nr.: 000003
niedrig
Pendent Projektleiter
3. Nov, 08:24
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...
erwähnt
Call-Nr.: 000003
Mittel
Pendent Projektleiter
3. Nov, 08:24
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...
erwähnt

Table

Default
Anrede Name Adresse Funktion E-Mail
Anrede Herr Name Max Mustermann Adresse Musterstrasse 1, 6000 Luzern, Schweiz Funktion - E-Mail maxmustermann@opacc.ch
Anrede Herr Name Max Mustermann Adresse Musterstrasse 1, 6000 Luzern, Schweiz Funktion - E-Mail maxmustermann@opacc.ch
Anrede Herr Name Max Mustermann Adresse Musterstrasse 1, 6000 Luzern, Schweiz Funktion - E-Mail maxmustermann@opacc.ch
Sticky Left Row
Anrede Name Adresse Geburtstag Funktion E-Mail
Anrede Herr Name Max Mustermann Adresse Musterstrasse 1, 6000 Luzern, Schweiz Geburtstag 01.01.1970 Funktion Frontend-Entwickler E-Mail maxmustermann@opacc.ch
Anrede Herr Name Max Mustermann Adresse Musterstrasse 1, 6000 Luzern, Schweiz Geburtstag 01.01.1970 Funktion Frontend-Entwickler E-Mail maxmustermann@opacc.ch
Anrede Herr Name Max Mustermann Adresse Musterstrasse 1, 6000 Luzern, Schweiz Geburtstag 01.01.1970 Funktion Frontend-Entwickler E-Mail maxmustermann@opacc.ch
Sticky Header Row
Anrede Name Adresse E-Mail
Anrede Herr Name Max Mustermann Adresse Musterstrasse 1, 6000 Luzern, Schweiz E-Mail maxmustermann@opacc.ch
Anrede Herr Name Max Mustermann Adresse Musterstrasse 1, 6000 Luzern, Schweiz E-Mail maxmustermann@opacc.ch
Anrede Herr Name Max Mustermann Adresse Musterstrasse 1, 6000 Luzern, Schweiz E-Mail maxmustermann@opacc.ch
Sticky Header und Left Row
Anrede Name Adresse Geburtstag Funktion E-Mail
Anrede Herr Name Max Mustermann Adresse Musterstrasse 1, 6000 Luzern, Schweiz Geburtstag 01.01.1970 Funktion Frontend-Entwickler E-Mail maxmustermann@opacc.ch
Anrede Herr Name Max Mustermann Adresse Musterstrasse 1, 6000 Luzern, Schweiz Geburtstag 01.01.1970 Funktion Frontend-Entwickler E-Mail maxmustermann@opacc.ch
Anrede Herr Name Max Mustermann Adresse Musterstrasse 1, 6000 Luzern, Schweiz Geburtstag 01.01.1970 Funktion Frontend-Entwickler E-Mail maxmustermann@opacc.ch
Table Sort
Nummer Bezeichnung Keyword Dimension Nr. BILD-ID Sortier Nr.
Web Components <tk-table>
Data-Attribut
TypeScript-Type
Default
Beschreibung
data-tk-head-shadow-class-name
string
tk-table__head-shadow

CSS-Klasse für das Header Element, wenn der Head Sticky sein soll.

data-tk-is-sticky-left
Boolean
false

Um die erste Spalte sticky zu setzen.

data-tk-is-sticky-header
Boolean
false

Um den Head sticky zu setzen.

data-tk-grid-template-mobile
string
1fr
grid-template-columns: 1fr;
data-tk-loaded-class-name
string
tk-table--loaded

CSS-Klasse für den Loaded-Zustand

data-tk-sticky-left-class-name
string
tk-table--sticky-left

CSS-Klasse um die erste Spalte sticky zu setzen

data-tk-right-shadow-class-name
string
tk-table__right-shadow

CSS-Klasse für das Shadow Element, dass rechts gesetzt wird, wenn mehrere Spalten existieren

data-tk-sticky-head-class-name
string
tk-table--sticky-head

CSS-Klasse um den Head-Bereich sticky zu setzen

data-tk-col-width
string
auto
grid-template-columns: repeat(ANZAHL_SPALTEN, auto);
data-tk-desktop-min-width
number
992 (px)
Min-Width für Desktopansicht

data-tk-table-sort im <table>

boolean
false

Um die Sortierung zu aktivieren. Das data-Attribut muss auf den <table> Tag gesetzt werden

data-tk-asc-sort-class-name
string
tk-table--sort-asc
CSS-Klasse für ASC Ansicht der Head-Spalte
data-tk-desc-sort-class-name
string
tk-table--sort-desc
CSS-Klasse für DESC Ansicht der Head-Spalte
data-tk-datamaster
string
undefined

Wird genutzt um zum Client-Modus zu wechseln mit dem Wert client. Damit werden alle Einträge client-seitig sortiert. Kein Paging möglich!

Header

Log out
Log in
Back
Warenkorb
Web Components <tk-header>
Modifier's (BEM)
Beschreibung
.tk-header--sticky
Macht den Header Sticky
.tk-header--fullwidth

Sorgt dafür, dass der Header in die volle Breite gestreckt wird. Dabei wird auch das Element .tk-header__inner als Wrapper gebraucht.

Selektoren
Element
[data-tk-to-scroll-with]
Das Element das interagieren soll beim Scrollen.
Data-Attribut
TypeScript-Type
Default
Beschreibung
data-tk-disable-scrolldown-breakpoint
Breakpoint
s
data-tk-scroll-delta-y
Number
1

Mit diesem Wert data-tk-scroll-delta-y hat man die Möglichkeit, dass das Scrollen auf Mobile nicht direkt ausgeführt wird. Bei jeder Berührung des Displays kann es sein, dass der Scroll-Event ausgelöst werden kann.

Footer

Default
Modifier's (BEM)
Beschreibung
.tk-footer--fullwidth

Sorgt dafür, dass der Footer in die volle Breite gestreckt wird. Dabei wird auch das Element .tk-footer__inner als Wrapper gebraucht.
Floating
Modifier's (BEM)
Beschreibung
.tk-footer--sticky
Macht den Footer Sticky
.tk-footer--fullwidth

Sorgt dafür, dass der Footer in die volle Breite gestreckt wird. Dabei wird auch das Element .tk-footer__inner als Wrapper gebraucht.

Bestellwert CHF 26.00

Navigation

Breadcrumb
Breadcrumb Item
Modifier's (BEM) Beschreibung
Modifier's (BEM) .tk-breadcrumb-item--active Beschreibung

Wechselt den Block zum Active-Zustand.
Status
default default
  • Level 1
    • active active
  • Level 1
    • Burger Header
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-nav-burger-header--selected Beschreibung

    Wechselt den Block zum Selected-Zustand.
    Status
    default default
    hover hover
    pressed pressed
    selected selected
    Burger Item
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-nav-burger-item--selected Beschreibung

    Wechselt den Block zum Selected-Zustand.
    Status
    default default Level 1
    hover hover Level 1
    pressed pressed Level 1
    selected selected Level 1
    Burger List
    Elements (BEM) Beschreibung
    Elements (BEM) .tk-nav-burgerlist__title Beschreibung

    Wird als Übertitel genutzt und ist ausserhalb der Navigation.
    Elements (BEM) .tk-nav-burgerlist__pages Beschreibung

    Dieses Element beinhaltet die Pages, um im Scrollsnap zu wechseln bzw. scrollen.
    Elements (BEM) .tk-nav-burgerlist__page Beschreibung

    Dieses Element repräsentiert eine Page.
    Sortiment
    Weitere
    Gesamtsortiment
    Level 1
    Navigation Meta
    Navigation Meta Item
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-nav-meta-item--selected Beschreibung

    Wechselt den Block zum Selected-Zustand.
    Status
    default default Level 1
    hover hover Level 1
    pressed pressed Level 1
    selected selected Level 1
    Segmented Navigation
    Navigation Infinity Scroll
    Navigation Infinity Scroll Item
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-nav-infinity-scroll-item--active Beschreibung

    Wechselt den Block zum Active-Zustand.
    Status
    default default
    active active
    Navigation Sidebar
    Elements (BEM) Beschreibung
    Elements (BEM) .tk-nav-sidebar__overview Beschreibung

    Dieses Element behinhaltet das Dropdown Menü um auf die vorgängigen Levels zu springen.
    Elements (BEM) .tk-nav-sidebar__wrapper Beschreibung

    Der Wrapper um die Navigation zwischen Desktop und Mobile zu wechseln.
    Sortiment
    Sortiment
    Level 1
    Sortiment
    Level 1
    Level 2
    Sortiment
    Level 1
    Level 2
    Navigation Sidebar Item
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-nav-sidebar-item--selected Beschreibung

    Wechselt den Block zum Selected-Zustand.
    Modifier's (BEM) .tk-nav-sidebar--level-$level Beschreibung

    Ändert die Darstellung beim angegebenen Level $code.
    Maximal Level: 4
    Modifier's (BEM) .tk-nav-sidebar--list Beschreibung

    Ändert die Darstellung in die Listen-Ansicht. Wird für das Dropdown Menü gebraucht für
    das Erreichen der Children eines Navigation-Elements.
    Status Level 1 Level 2 Level 3 Level 4 List
    default default Level 1 default Level 2 default Level 3 default Level 4 default List
    hover hover Level 1 hover Level 2 hover Level 3 hover Level 4 hover List
    pressed pressed Level 1 pressed Level 2 pressed Level 3 pressed Level 4 pressed List
    selected selected Level 1 selected Level 2 selected Level 3 selected Level 4
    selected/hover selected/hover Level 1 selected/hover Level 2 selected/hover Level 3
    Web Components <tk-nav-sidebar>
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-header--sticky Beschreibung

    Macht den Header Sticky
    Modifier's (BEM) .tk-header--fullwidth Beschreibung

    Sorgt dafür, dass der Header in die volle Breite gestreckt wird.
    Dabei wird auch das Element .tk-header__inner als Wrapper gebraucht.

    Selektoren Beschreibung
    Selektoren [data-tk-nav-wrapper] Beschreibung

    Das Root Element für die Navigation, wird genutzt um in der Mobileansicht zu öffnen und schliessen.
    Selektoren [data-tk-wrapper] Beschreibung

    Der Wrapper des Desktop-Inhalts der Navigation. Damit kann man einfach zwischen Desktop und Mobile wechseln.

    Selektoren [data-tk-nav-open="$ID"] Beschreibung

    Der Button zum Öffnen der Navigation. Die Id ist immer die Menu-ID die man der G-Funktion übergibt.
    Somit hat man die Möglichkeit mehrere Navigationen nutzen.

    Selektoren [data-tk-nav-close="$ID"] Beschreibung

    Der Button zum Schliessen der Navigation. Die Id ist immer die Menu-ID die man der G-Funktion übergibt.
    Somit hat man die Möglichkeit mehrere Navigationen nutzen.

    Data-Attribut TypeScript-Type Default Beschreibung
    Data-Attribut data-tk-open-class-name TypeScript-Type

    string

    		 Default viewport__navigation--open Beschreibung

    Der Modifier um die Navigation zu öffnen.

    Data-Attribut data-tk-current-menu-id TypeScript-Type

    string

    		 Default undefined Beschreibung

    Die aktuelle Menu-ID. Wird gebraucht um für die Mobileansicht, den ersten Request zu tätigen.

    Data-Attribut data-tk-has-children-class-name TypeScript-Type

    string

    		 Default tk-nav-burger-item--has-children Beschreibung

    Um zu prüfen ob gewisse Elemente noch Untermenüs besitzen. Wird für die Mobileansicht gebraucht.

    Data-Attribut data-tk-nav-async-template-name TypeScript-Type

    string

    		 Default tk-navigation-burgerlist Beschreibung

    Das Template für den Asynchronen Request für die Mobileansicht.

    Data-Attribut data-tk-desktop-min-width TypeScript-Type

    number

    		 Default 1200 Beschreibung

    Ab welcher Viewport-Breite sollte zu der Desktopansicht gewechselt werden.

    Search

    Typeahead
    default default
    Artikel
    image
    Marke Artikel-Titel
    Info/Detail
    CHF 80.00
    image
    Marke Artikel-Titel
    Info/Detail
    CHF 80.00
    Weitere Ergebnisse
    Kategorien
    Weitere Ergebnisse
    		default
    Artikel
    image
    Marke Artikel-Titel
    Info/Detail
    CHF 80.00
    image
    Marke Artikel-Titel
    Info/Detail
    CHF 80.00
    Weitere Ergebnisse
    Kategorien
    Weitere Ergebnisse
    loading default
    		default
    Info default
    Für eine Suche sind mind. %1 Zeichen notwendig
    		default
    Für eine Suche sind mind. %1 Zeichen notwendig
    No Results default
    Mit dem Suchbegriff "" konnten leider keine Treffer gefunden werden.
    		default
    Mit dem Suchbegriff "" konnten leider keine Treffer gefunden werden.
    Grösse L
    default
    selected
    Artikel
    Aktion
    Marke Artikel-Titel
    Info / Details
    CHF 80.00 CHF 75.00
    Aktion
    Marke Artikel-Titel
    Info / Details
    CHF 80.00 CHF 75.00
    Kategorien
    Artikel
    Aktion
    Marke Artikel-Titel
    Info / Details
    CHF 80.00 CHF 75.00
    Aktion
    Marke Artikel-Titel
    Info / Details
    CHF 80.00 CHF 75.00
    Kategorien
    Grösse S
    default
    selected
    Artikel
    Aktion
    Marke Artikel-Titel
    Info / Details
    CHF 80.00 CHF 75.00
    Aktion
    Marke Artikel-Titel
    Info / Details
    CHF 80.00 CHF 75.00
    Kategorien
    Artikel
    Aktion
    Marke Artikel-Titel
    Info / Details
    CHF 80.00 CHF 75.00
    Aktion
    Marke Artikel-Titel
    Info / Details
    CHF 80.00 CHF 75.00
    Kategorien
    Web Component <tk-search>
    Blöcke (BEM)
    Beschreibung
    .tk-search__button-dropdown

    Anzeige der Filterkategorien innerhalb des Suchfeldes anzeigen. Dabei wird auch der Modifier .tk-search__actions--suffix als Wrapper benötigt.

    Modifier's (BEM)
    Beschreibung
    .tk-search--active

    Wird gesetzt wenn die Direktsuche offen ist / den Fokus erhält.

    .tk-search__button--back

    CSS-Klasse für die Darstellung des Zurück-Buttons. Dabei wird auch der Modifier .tk-search__actions--prefix als Wrapper benötigt.

    .tk-search__button--reset

    CSS-Klasse für die Darstellung des Reset-Buttons. Dabei wird auch der Modifier .tk-search__actions--suffix als Wrapper benötigt.

    .tk-search__button--submit

    CSS-Klasse für die Darstellung des Submit-Buttons. Dabei wird auch der Modifier .tk-search__actions--suffix als Wrapper benötigt.

    .tk-search--has-data

    Wird für die korrekte Darstellung der Suchresultate abhängig der Bildschirmauflösung angezeigt.

    .tk-search__result--section[1..6]

    CSS-Klasse für die Kennzeichnung / Visualisierung der konfigurierten Sections der Direktsuche.

    Selektoren
    Beschreibung
    [data-tk-search]

    Initialisierung des Suchformulares & Interaktionen

    [data-tk-search-back]

    Selektor für den zurück Button.

    [data-tk-search-reset]

    Selektor für den reset Button.

    [data-tk-search-submit]

    Selektor für den senden Button.

    [data-tk-search-filter]

    Ausprägung für das Filterkriterium innerhalb des Suchfeldes.

    [data-tk-search-result]

    Das Suchresultat der Direktsuche wird als Kindelement dieses Selektors dargestellt.

    Data-Attribut
    Beschreibung
    data-tk-search-min-input-length

    Definition der Anzahl Zeichen bis der asynchrone Request ausgeführt wird.

    data-tk-search-filter-attribute

    OXAS Attribut für die Filterdefinition.

    List

    Default
    Title
    • Label
    • Label
    • Label
    • Label
    Elemente (BEM) Beschreibung
    Elemente (BEM) .tk-list__titles Beschreibung Wrapper für Titel sowie Untertitel.
    Definitionlist
    Main Title
    Subtitle
    Title Definitionlist

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat ipsam ullam quasi eos modi atque harum officia itaque, dignissimos corrupti iste molestiae cupiditate consequuntur quam excepturi nisi provident voluptatum quisquam?

    Title Definitionlist

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat ipsam ullam quasi eos modi atque harum officia itaque, dignissimos corrupti iste molestiae cupiditate consequuntur quam excepturi nisi provident voluptatum quisquam?

    Title Definitionlist

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat ipsam ullam quasi eos modi atque harum officia itaque, dignissimos corrupti iste molestiae cupiditate consequuntur quam excepturi nisi provident voluptatum quisquam?

    Elemente (BEM) Beschreibung
    Elemente (BEM) .tk-list__dl Beschreibung Wrapper für das Styling einer Definitions-Liste.
    Elemente (BEM) .tk-list__titles Beschreibung Wrapper für Titel sowie Untertitel.
    Unorderedlist
    Title
    • Label
      • Label
        • Label
    • Label
    • Label
      • Label
    • Label
    Elemente (BEM) Beschreibung
    Elemente (BEM) .tk-list__ul Beschreibung Wrapper für das Styling einer ul-Liste.
    Elemente (BEM) .tk-list__titles Beschreibung Wrapper für Titel sowie Untertitel.
    Orderedlist
    Title
    1. Label
    2. Label
      1. Label
      2. Label
        1. Label
        2. Label
    3. Label
    Elemente (BEM) Beschreibung
    Elemente (BEM) .tk-list__ol Beschreibung Wrapper für das Styling einer ol-Liste.
    Elemente (BEM) .tk-list__titles Beschreibung Wrapper für Titel sowie Untertitel.

    Flags

    Flags
    Label Icon & Label Icon
    Neu Label - Neu
    Neu
    		Icon & Label - Neu
    Neu
    		Icon - Neu
    Neu
    Aktion Label - Aktion
    Aktion
    		Icon & Label - Aktion
    Aktion
    		Icon - Aktion
    Aktion
    Topseller Label - Topseller
    Topseller
    		Icon & Label - Topseller
    Topseller
    		Icon - Topseller
    Topseller
    2 Flags Label - 2 Flags
    Neu
    Aktion
    		Icon & Label - 2 Flags
    Neu
    Aktion
    		Icon - 2 Flags
    Neu
    Aktion
    3 Flags Label - 3 Flags
    Topseller
    Neu
    Aktion
    		Icon & Label - 3 Flags
    Topseller
    Neu
    Aktion
    		Icon - 3 Flags
    Topseller
    Neu
    Aktion
    Web Component <tk-flags>
    Elemente (BEM) Beschreibung
    Elemente (BEM) .tk-flag__item Beschreibung

    Einzelnes Flag-Item
    Elemente (BEM) .tk-flag__icon Beschreibung

    Wrapper für Flag-Icon.
    Elemente (BEM) .tk-flag__label Beschreibung

    Wrapper für Label.
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-flag--only-label Beschreibung Anzeige der Flags nur mit Label.
    Modifier's (BEM) .tk-flag--only-icon Beschreibung Anzeige der Flags nur mit Icon.
    Modifier's (BEM) .tk-flag__item--summarized Beschreibung Wird für die zusammengesetzten Flags verwendet. (+1 / +2)
    Selektoren Beschreibung
    Selektoren [data-tk-flag-item] Beschreibung Query-Selektor für die Flag Nodelist.
    Selektoren [data-tk-flag-icon] Beschreibung Mit diesem Selektor wird das Icon für die Tooltips ausgelesen
    Selektoren [data-tk-flag-label] Beschreibung Mit diesem Selektor wird das Label für die Tooltips ausgelesen
    Selektoren [data-tk-flag-merged] Beschreibung Selektor für das Template-Element des Tooltips innerhalb der Flags
    Code Code

    Tooltips

    Tooltip
    Position
    top top

    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    right right

    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    bottom bottom

    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    left left

    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    Web Component <tk-tooltip>
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-tooltip--hide-marker Beschreibung Markierung für den Tooltiptext unterdrücken.
    Data-Attribut TypeScript-Type Default Beschreibung
    Data-Attribut data-tk-tooltip-content TypeScript-Type

    string

    		 Default

    -

    		 Beschreibung

    Inhalt des Tooltips. HTML-Content ist erlaubt.
    Data-Attribut data-tk-tooltip-options TypeScript-Type

    string

    		 Default

    -

    		 Beschreibung

    Projektspezifische Optionen für das Tooltip.

    JSON-String für alle möglichen Properties zur Individualisierung sind auf Github dokumentiert.
    Code Code

    Status

    Status
    Icon & Label Icon
    # bezahlt Icon & Label - bezahlt
    Bezahlt
    		Icon - bezahlt
    # offen Icon & Label - offen
    Offen
    		Icon - offen
    Elemente (BEM) Beschreibung
    Elemente (BEM) .tk-status__icon Beschreibung

    Wrapper für Icon.
    Elemente (BEM) .tk-status__label Beschreibung

    Wrapper für Label.
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-status--paid Beschreibung Sorgt dafür, dass das Icon mit einem grünen Hintergrund dargestellt wird.
    Die Schrift ist weiss.
    Modifier's (BEM) .tk-status--unpaid Beschreibung Sorgt dafür, dass das Icon mit einem gelben Hintergrund dargestellt wird.
    Die Schrift ist schwarz.
    Code
    Label Icon & Label - Code
    Icon only Icon - Code

    Stock

    Stock
    Icon & Label Icon
    # default (on-stock) Icon & Label - default (on-stock)
    Verfügbar
    		Icon - default (on-stock)
    # less (less-stock) Icon & Label - less (less-stock)
    Wenig verfügbar
    		Icon - less (less-stock)
    # empty (out-stock) Icon & Label - empty (out-stock)
    Nicht verfügbar
    		Icon - empty (out-stock)
    # not available (na-stock) Icon & Label - not available (na-stock)
    Keine Lagerinformationen
    		Icon - not available (na-stock)
    # call (call-stock) Icon & Label - call (call-stock)
    Auf Anfrage
    		Icon - call (call-stock)
    Elemente (BEM) Beschreibung
    Elemente (BEM) .tk-stock__icon Beschreibung

    Wrapper für Icon.
    Elemente (BEM) .tk-stock__label Beschreibung

    Wrapper für Label.
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-stock--on-stock Beschreibung Sorgt dafür, dass das Icon mit einem grünen Hintergrund dargestellt wird.
    Die Schrift ist weiss.
    Modifier's (BEM) .tk-stock--less-stock Beschreibung Sorgt dafür, dass das Icon mit einem gelben Hintergrund dargestellt wird.
    Die Schrift ist schwarz.
    Modifier's (BEM) .tk-stock--out-stock Beschreibung Sorgt dafür, dass das Icon mit einem rotem Hintergrund dargestellt wird.
    Die Schrift ist weiss.
    Modifier's (BEM) .tk-stock--na-stock Beschreibung Sorgt dafür, dass das Icon mit einem rotem Hintergrund dargestellt wird.
    Die Schrift ist weiss.
    Modifier's (BEM) .tk-stock--call-stock Beschreibung Sorgt dafür, dass das Icon mit einem blauen Hintergrund dargestellt wird.
    Die Schrift ist weiss.
    Code
    Icon & Label Icon & Label - Code
    Icon only Icon - Code

    Progress

    Progress-Bar
    Elemente (BEM) Beschreibung
    Elemente (BEM) .tk-progress__bar Beschreibung

    Fortschritt-Leiste
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-progress--infinite Beschreibung Animation der Fortschrittsleiste in einer Endlosschleife.
    Modifier's (BEM) .tk-progress--breakout Beschreibung Ladeanimation ignoriert die Grid-Definition und nimmt den maximal verfügbaren Platz ein.
    Code
    Infinite Infinite - Code

    Carousel

    Carousel / Slider
    Data-Attribut TypeScript-Type Default Beschreibung
    Data-Attribut data-tk-carousel-options TypeScript-Type

    string

    		 Default

    -

    		 Beschreibung

    Die Optionen, welche dem Carousel mitgegeben werden können.

    Option TypeScript-Type Default Beschreibung
    Option [3rd-Party Option] TypeScript-Type

    -

    		 Default

    -

    		 Beschreibung

    Die Optionen sind auf der 3rd-Party-Seite von splidejs.com dokumentiert.
    Option hasOverlayPagination TypeScript-Type

    boolean

    		 Default

    false

    		 Beschreibung

    Falls die Carousel-Navigation als Overlay dargestellt werden soll, muss diese Option auf true gesetzt werden
    Data-Attribut data-tk-overlay-class-name TypeScript-Type

    string

    		 Default tk-carousel__arrows--overlay Beschreibung

    CSS-Klasse für die Overlay Variante des Paging
    Selektoren Beschreibung
    Selektoren [data-tk-carousel-origin] Beschreibung Das Wrapper-Element, welches die einzelnen Slides umschliesst.
    Selektoren [data-tk-carousel-title] Beschreibung Optionales Titel-Element. Wenn vorhanden, wird dieses Element 1:1 vor dem Carousel gerendert.
    Selektoren [data-tk-carousel-slide] Beschreibung Selektor für die identifizierung einer einzelnen Slide.
    Selektoren [data-tk-slider-template] Beschreibung Selektor für das Template, welches als Basis für das Carousel verwendet wird.
    Selektoren [data-tk-carousel] Beschreibung Auf diesem Selektor wird das Binding sowie das Error-Handling für das Carousel initialisiert.
    Selektoren [data-tk-slider-list] Beschreibung Wrapper-Element für die einzelnen Items des Carousels.
    Elemente (BEM) Beschreibung
    Elemente (BEM) .tk-carousel__track Beschreibung Container für das Carousel
    Elemente (BEM) .tk-carousel__arrows Beschreibung Wrapper-Element für die Pfeil-Navigation
    Elemente (BEM) .tk-carousel__arrow Beschreibung Pfeil-Element
    Elemente (BEM) .tk-carousel__pagination Beschreibung Wrapper-Element für die Punkt-Navigation
    Elemente (BEM) .tk-carousel__pagination-page Beschreibung Style-Class für einzelnes Page-Element (Punkt)
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-carousel__arrows--overlay Beschreibung Paging des Carousel als Overlay darstellen
    Modifier's (BEM) .tk-carousel__arrow--prev Beschreibung Pfeil "zurück"
    Modifier's (BEM) .tk-carousel__arrow--next Beschreibung Pfeil "vorwärts"

    Brand

    Brand
    Logo Link disabled
    # default default default
    # hover hover hover
    # pressed pressed pressed
    # Code
    Elemente (BEM) Beschreibung
    Elemente (BEM) .tk-brand__logo Beschreibung

    CSS-Klasse für den Logo-Wrapper.
    Elemente (BEM) .tk-brand__Label Beschreibung

    Wrapper für Label.
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-brand--only-logo Beschreibung Sorgt dafür, Dass das Label nicht angezeigt wird.
    Modifier's (BEM) .tk-brand--link-disabled Beschreibung Deaktivierung des Link auf dem Anker - Tag.
    Brand-Slider

    Beliebte Marken

    alle anzeigen

    Dialog

    Example
    Web Components <tk-dialog>
    Selektoren Beschreibung
    Selektoren [data-tk-dialog-content] Beschreibung

    Das Wrapper-Element, indem der Inhalt asynchron reingeladen wird.
    Selektoren [data-tk-dialog-close] Beschreibung

    Das Element, dass das Dialog schliesst.
    Selektoren [data-tk-dialog-jump-forward] Beschreibung

    Das Element, dass das nächste Dialog öffnet. Braucht zusätzlich data-tk-url um den Inhalt zu holen des OC's.

    Selektoren [data-tk-dialog-jump-backward] Beschreibung

    Das Element, dass das vorherige Dialog öffnet.

    Selektoren [data-tk-switch-to-next] Beschreibung

    Dieses Attribut wird am HTMLFormElement angebunden. Durch das action Attribut wird der nächste OC geholt.

    Data-Attribut TypeScript-Type Default Beschreibung
    Data-Attribut data-tk-url TypeScript-Type

    string

    		 Default

    -

    		 Beschreibung

    Hier kann die URL die per gCreateURL generiert wird und auf das gewünschte OC zeigt angeben.
    Data-Attribut data-tk-open TypeScript-Type

    boolean

    		 Default

    false

    		 Beschreibung

    Wenn dieses Data-Attribut gesetzt wird, dann öffnet sich das Dialog automatisch.
    Data-Attribut data-tk-dialog-class-name TypeScript-Type

    string

    		 Default

    tk-dialog

    		 Beschreibung

    Der Block des Dialogs.
    Data-Attribut data-tk-dialog-inner-class-name TypeScript-Type

    string

    		 Default

    tk-dialog__inner

    		 Beschreibung

    Der Wrapper für den Dialog-Inhalt.
    Data-Attribut data-tk-dialog-close-class-name TypeScript-Type

    string

    		 Default

    tk-button tk-button--tertiary tk-button--only-icon tk-dialog__close

    		Beschreibung

    Die Styling-Klassen des Close Buttons, dass immer mit generiert wird.

    Asset

    Asset Gallery Item
    Status more
    default default
    Dummy
    		default
    hover hover
    Dummy
    		hover
    pressed pressed
    Dummy
    		pressed
    disabled disabled
    Dummy
    		disabled
    selected selected
    Dummy
    Asset Gallery
    Dummy
    Dummy
    Dummy
    Dummy
    Dummy
    Dummy
    Dummy
    • Dummy
    • Dummy
    • Dummy
    • Dummy
    • Dummy
    • Dummy
    • Dummy
    Web Components <tk-asset-gallery>
    Modifier's (BEM)
    Beschreibung
    .tk-header--fullscreen
    Wechselt zur Fullscreen Ansicht
    Selektoren
    Element
    [data-tk-close-fullscreen]
    Das Element, dass beim Klicken die Fullscreen Ansicht schliesst.
    [data-tk-asset-preview]
    Der Wrapper, der Preview-Bilder.
    [data-tk-asset-thumbnails]
    Die Auflistung der Thumbnails.
    [data-tk-iframe-template]
    Das Template für das iFrame, falls Videos genutzt werden.
    Data-Attribut
    TypeScript-Type
    Default
    Beschreibung
    data-tk-overlay-class-name
    string
    .tk-asset-gallery.tk-asset-gallery--fullscreen

    Das Overlay für die Fullscreen-Ansicht. Wird ausserhalb der Viewports gesetzt.

    data-tk-max-showing-thumbnails

    MaxShowingThumbnails
    ('auto' | number)

    auto

    Mit diesem Wert bestimmt man wieviele Thumbnails angezeigt werden sollen. Wenn man den Default-Wert auto lässt, wird ständig nach dem Optimum je nach Container-Grösse angepasst.

    data-tk-video-url
    string
    undefined

    Kann auf dem jeweiligen li-Item gesetzt werden im Preview-Wrapper. Siehe Beispiel oben.

    Article

    Artikelkachel
    Elemente (BEM) Beschreibung
    Elemente (BEM) .tk-article__flags Beschreibung

    Wrapper für die Anzeige der Flags
    Elemente (BEM) .tk-article__media Beschreibung

    Wrapper für die Anzeige der Medien. Im Wrapper wird der Image-Tag eingebunden.
    Elemente (BEM) .tk-article__title Beschreibung

    Wrapper für die Anzeige des Titels.
    Elemente (BEM) .tk-article__stock Beschreibung

    Wrapper für die Anzeige der Verfügbarkeit
    Elemente (BEM) .tk-article__actions Beschreibung

    Wrapper für die Anzeige aller Aktionen, wie der Warenkorb-Button, Favorite-Button, Compare-Button usw.
    Der Action Wrapper wird als Grid dargestellt und behinhaltet andere Elemente (more, basket, prices, ...).
    Elemente (BEM) .tk-article__additional Beschreibung

    Wrapper für die Anzeige des Input-Field. Wird in der G-Funktion {gGetBasketButton()} genutzt und ausgegeben.
    Elemente (BEM) .tk-article__prices Beschreibung

    Wrapper für die Anzeige des Preises.
    Elemente (BEM) .tk-article__more Beschreibung

    Wrapper für die Anzeige des Favorite und Compare-Buttons.
    Elemente (BEM) .tk-article__basket Beschreibung

    Wrapper-Element der G-Funktion {gGetBasketButton()}.
    Elemente (BEM) .tk-article__basket-button Beschreibung

    Button-Element des Basket Button der G-Funktion {gGetBasketButton()}.
    Elemente (BEM) .tk-article__remove Beschreibung

    Wrapper-Element des Basket Button der G-Funktion {gGetBasketButton(remove)}.
    Elemente (BEM) .tk-article__link Beschreibung

    Das Anchor-Element. Wird als erstes Child im Block .tk-article eingesetzt.
    Der Link wird als position: absolute; auf die ganze Breite und Höhe dargestellt.
    Mit den verschiedenen Z-Indizes wird damit verhindert, das die Button und Input-Elemente vor dem Link dargestellt werden.
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-article--multi-dim Beschreibung Ändert die Artikelkachel zur Ansicht für die Multidimensionen. Es wird keine additional-Area angezeigt.
    Modifier's (BEM) .tk-article--modal Beschreibung Ändert die Artikelkachel zur Ansicht für die Modal-Anzeige. Alle Pseudo-Klassen werden unterdrückt.
    Modifier's (BEM) .tk-article__media--with-padding Beschreibung Sorgt dafür, dass um das Artikelbild ein padding eingeblendet wird.
    Artikelkachel - Mehrere Dimensionen
    Status
    default default
    Topseller
    Neu
    Aktion
    image
    Marke Artikel Titel
    Verfügbar
    CHF 18'000 CHF 15'000
    hover hover
    Topseller
    Neu
    Aktion
    image
    Marke Artikel Titel
    Verfügbar
    CHF 18'000 CHF 15'000
    pressed pressed
    Topseller
    Neu
    Aktion
    image
    Marke Artikel Titel
    Verfügbar
    CHF 18'000 CHF 15'000
    Artikelkachel - Eindimensional
    Status
    default default
    Neu
    image
    Marke Artikel Titel
    Verfügbar
    CHF 18'000 CHF 15'000
    hover hover
    Neu
    image
    Marke Artikel Titel
    Verfügbar
    CHF 18'000 CHF 15'000
    pressed pressed
    Neu
    image
    Marke Artikel Titel
    Verfügbar
    CHF 18'000 CHF 15'000
    Artikelliste - Mehrere Dimensionen
    Status
    default default
    Topseller
    Neu
    Aktion
    image
    Marke Artikel Titel
    Verfügbar
    CHF 18'000 CHF 15'000
    hover hover
    Topseller
    Neu
    Aktion
    image
    Marke Artikel Titel
    Verfügbar
    CHF 18'000 CHF 15'000
    pressed pressed
    Topseller
    Neu
    Aktion
    image
    Marke Artikel Titel
    Verfügbar
    CHF 18'000 CHF 15'000
    Artikelliste - Eindimensional
    Status
    default default
    Neu
    image
    Marke Artikel Titel
    Verfügbar
    CHF 18'000 CHF 15'000
    hover hover
    Neu
    image
    Marke Artikel Titel
    Verfügbar
    CHF 18'000 CHF 15'000
    pressed pressed
    Neu
    image
    Marke Artikel Titel
    Verfügbar
    CHF 18'000 CHF 15'000
    Artikelliste
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-article-list--row Beschreibung Ändert die Artikelliste von der Kachelansicht zur Listenansicht (Row).
    34 Artikel
    Artikelslider

    Neue Artikel

    Alle anzeigen
    Warenkorbliste
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-article--basket-tile Beschreibung Wandelt die Artikelkachel zu einer Basket-Kachel. Der Modifier wird auf der Artikel-Kachel getan.
    Status
    default default
    image
    Marke Artikel Titel
    CHF 18'000 CHF 15'000
    Stück
    hover hover
    image
    Marke Artikel Titel
    CHF 18'000 CHF 15'000
    Stück
    pressed pressed
    image
    Marke Artikel Titel
    CHF 18'000 CHF 15'000
    Stück
    Minibasket
    Status
    default default
    image
    Elco Ordner Versandbox (30cm x 18cm)
    70.00 Stk.
    120.00
    hover hover
    image
    Elco Ordner Versandbox (30cm x 18cm)
    70.00 Stk.
    120.00
    pressed pressed
    image
    Elco Ordner Versandbox (30cm x 18cm)
    70.00 Stk.
    120.00
    Status
    empty empty
    Warenkorb
    Es sind keine Artikel vorhanden.
    Zum Warenkorb
    items items
    Warenkorb
      image
      Elco Ordner Versandbox (30cm x 18cm)
      70.00 Stk.
      120.00
    Total CHF 120.00
    Zum Warenkorb
    prototype prototype
    Warenkorb
    Zum Warenkorb
    Web Components <tk-minibasket>
    Selektoren Beschreibung
    Selektoren [data-tk-header-button] Beschreibung

    Der Button um den Minibasket zu öffnen.
    Selektoren [data-tk-minibasket-overlay] Beschreibung

    Der Wrapper des Dropdown-Menüs.
    Selektoren [data-tk-minibasket-items] Beschreibung

    Der Wrapper der Items. In diesem Wrapper werden alle Items der API reingeladen.
    Selektoren [data-tk-minibasket-amount] Beschreibung

    Auf diesem Element wird der Gesamtpreis reingeladen.
    Custom Events Beschreibung
    Custom Event tk-minibasket-opened Beschreibung

    Dieser Event wird ausgelöst wenn, der Minibasket geöffnet wurde.
    Custom Event tk-minibasket-update Beschreibung

    Dieser Event wird ausgelöst wenn, der Minibasket aktualisiert wurde.
    Custom Event tk-minibasket-closed Beschreibung

    Dieser Event wird ausgelöst wenn, der Minibasket geschlossen wurde.

    Diese Events können mittels addEventListener() auf diese Web-Component subscribed werden.

    Data-Attribut TypeScript-Type Default Beschreibung
    Data-Attribut data-tk-count-items-request-url TypeScript-Type

    string

    		 Default

    -

    		 Beschreibung

    Hier kann die URL die per gCreateURL generiert wird und auf die gewünschte API gezeigt werden. Default: (API.lc - Level 1) (Output: JSON)
    Beispiel Resultat: {"quantity": 0}

    Data-Attribut data-tk-get-content-request-url TypeScript-Type

    string

    		 Default

    -

    		 Beschreibung

    Hier kann die URL die per gCreateURL generiert wird und auf die gewünschte API gezeigt werden. Default: (API.lc - Level 2) (Output: HTML)
    Es wird das Markup erwartet der gewünschten Items.

    Data-Attribut data-tk-header-button-empty-class-name TypeScript-Type

    string

    		 Default

    tk-button__header--empty

    		 Beschreibung

    Die Klasse die auf den Header-Button gesetzt wird, wenn keine Items im Warenkorb existieren.

    Data-Attribut data-tk-minibasket-offset TypeScript-Type

    number

    		 Default

    4

    		 Beschreibung

    Der Offset (Y-Achse) zwischen Header-Button und Overlay, der beim Öffnen des Minibasket gesetzt wird.

    Data-Attribut data-tk-open-class-name TypeScript-Type

    string

    		 Default

    tk-minibasket--open

    		 Beschreibung

    Die Klasse die gesetzt wird, beim Öffnen des Minibasket.

    Data-Attribut data-tk-event-opened-name TypeScript-Type

    string

    		 Default

    tk-minibasket-opened

    		 Beschreibung

    -
    Data-Attribut data-tk-event-update-name TypeScript-Type

    string

    		 Default

    tk-minibasket-update

    		 Beschreibung

    -
    Data-Attribut data-tk-event-closed-name TypeScript-Type

    string

    		 Default

    tk-minibasket-closed

    		 Beschreibung

    -

    Product

    Produktkachel
    Elemente (BEM) Beschreibung
    Elemente (BEM) .tk-article__flags Beschreibung

    Wrapper für die Anzeige der Flags
    Elemente (BEM) .tk-article__media Beschreibung

    Wrapper für die Anzeige des Bildes. Im Wrapper wird der Image-Tag eingebunden.
    Elemente (BEM) .tk-article__title Beschreibung

    Wrapper für die Anzeige des Titels.
    Elemente (BEM) .tk-article__stock Beschreibung

    Wrapper für die Anzeige der Verfügbarkeit
    Elemente (BEM) .tk-article__actions Beschreibung

    Wrapper für die Anzeige aller Aktionen, wie der Warenkorb-Button, Favorite-Button, Compare-Button usw.
    Der Action Wrapper wird als Grid dargestellt und behinhaltet andere Elemente (more, basket, prices, ...).
    Elemente (BEM) .tk-article__additional Beschreibung

    Wrapper für die Anzeige des Input-Field. Wird in der G-Funktion {gGetBasketButton()} genutzt und ausgegeben.
    Elemente (BEM) .tk-article__prices Beschreibung

    Wrapper für die Anzeige des Preises.
    Elemente (BEM) .tk-article__more Beschreibung

    Wrapper für die Anzeige des Favorite und Compare-Buttons.
    Elemente (BEM) .tk-article__basket Beschreibung

    Wrapper-Element der G-Funktion {gGetBasketButton()}.
    Elemente (BEM) .tk-article__basket-button Beschreibung

    Button-Element des Basket Button der G-Funktion {gGetBasketButton()}.
    Elemente (BEM) .tk-article__remove Beschreibung

    Wrapper-Element des Basket Button der G-Funktion {gGetBasketButton(remove)}.
    Elemente (BEM) .tk-article__link Beschreibung

    Das Anchor-Element. Wird als erstes Child im Block .tk-article eingesetzt.
    Der Link wird als position: absolute; auf die ganze Breite und Höhe dargestellt.
    Mit den verschiedenen Z-Indizes wird damit verhindert, das die Button und Input-Elemente vor dem Link dargestellt werden.
    Elemente (BEM) .tk-article__product-special-wrapper Beschreibung

    Zusätzlicher Wrapper für das Element mit der Klasse .tk-article__product-special.
    Dieser Wrapper sorgt dafür, dass auf grossen Displays für das Dropdown eine max-width gesetzt wird.
    Ebenfalls wird damit sichergestellt, dass sich das Dropdown am rechten Rand seiner Grid-Area ausrichtet.

    Elemente (BEM) .tk-article__product-special Beschreibung

    Produktspezifisches Element zur Anzeige von zusätzlichen Informationen wie die Anzahl
    Produktvarianten oder Auswahl weiterer Produktvarianten.
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-article--product Beschreibung Ändert die Produktekachel zur Ansicht eines Produktes.
    Der Warenkorbbutton startet in dieser Ansicht den Produkt-Varianten-Auswahl-Flow.
    Modifier's (BEM) .tk-article--product-art Beschreibung Ändert die Produktekachel zur Ansicht eines einzelnen Produktartikels.
    Diese erscheint in dem Produkt-Varianten-Auswahl-Flow nach der Auswahl einer Produkt-Variante.
    Modifier's (BEM) .tk-article--product-art-single-dim Beschreibung Ändert die Produktkachel zur Ansicht einer Produktkachel mit Produkartikel-Daten und einer Dimension.
    Die Auswahl einzelner Produkt-Varianten werden in einer Select-Box dargestellt.
    Modifier's (BEM) .tk-article--product-art-multi-dim Beschreibung Ändert die Produktkachel zur Ansicht einer Produktkachel mit Produkartikel-Daten und mehreren Dimension.
    Modifier's (BEM) .tk-article--product-variant Beschreibung Ändert die Produktkachel zur Ansicht einer Produkt-Variante mit definierten Differenzierungsattributen. Diese Ansicht erscheint im Produkte-Varianten-Auswahl-Flow
    Modifier's (BEM) .tk-article__media--with-padding Beschreibung Sorgt dafür, dass um das Artikelbild ein padding eingeblendet wird.
    Produktkachel (Simple)
    Status
    default default
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Topseller
    Neu
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    hover hover
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Topseller
    Neu
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    pressed pressed
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Topseller
    Neu
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Produktkachel mit Produktartikel-Daten und mehreren Dimensionen
    Status
    default default
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    hover hover
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    pressed pressed
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Produktkachel mit Produkartikel-Daten und einer Dimension
    Status
    default default
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    hover hover
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    pressed pressed
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    Produkteliste (Simpel)
    Status
    default default
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Topseller
    Neu
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    hover hover
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Topseller
    Neu
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    pressed pressed
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Topseller
    Neu
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    default default
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Topseller
    Neu
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    hover hover
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Topseller
    Neu
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    pressed pressed
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Topseller
    Neu
    Aktion
    [MultiDimProductVariant.CatItem.Brand] [MultiDimProductVariant.CatItem.ArtName1]
    20 Varianten erhältlich
    ab CHF 18'000
    Produkteliste mit Produktartikel-Daten und mehreren Dimensionen
    Status
    default default
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    hover hover
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    pressed pressed
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    default default
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    hover hover
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    pressed pressed
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantMultiDim.ProdArt_CatItem.Brand] [CanonicalProductVariantMultiDim.ProdArt_CatItem.ArtName1]
    20 Varianten erhältlich
    CHF 18'000 CHF 15'000
    Produkteliste mit Produkartikel-Daten und einer Dimension
    Status
    default default
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    Stück
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    Stück
    hover hover
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    Stück
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    Stück
    pressed pressed
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    Stück
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    Stück
    default default
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    Stück
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    Stück
    hover hover
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    Stück
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    Stück
    pressed pressed
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    Stück
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    Topseller
    Neu
    Aktion
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    Verfügbar
    CHF 18'000 CHF 15'000
    Stück
    Produkteliste
    34 Artikel
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000


    34 Artikel
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
    CHF 18'000 CHF 15'000
    Stück
    Produkteslider

    Neue Artikel

    Alle anzeigen
    • [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
      CHF 18'000 CHF 15'000
    • [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
      CHF 18'000 CHF 15'000
    • [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
      CHF 18'000 CHF 15'000
    • [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
      CHF 18'000 CHF 15'000
    • [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
      CHF 18'000 CHF 15'000
    • [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
      CHF 18'000 CHF 15'000
    • [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
      CHF 18'000 CHF 15'000
    • [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
      CHF 18'000 CHF 15'000
    • [CanonicalProductVariantSingleDim.ProdArt_CatItem.Brand] [CanonicalProductVariantSingleDim.ProdArt_CatItem.ArtName1]
      CHF 18'000 CHF 15'000
    Web Components <tk-product-tile>
    Selektoren Beschreibung
    Selektoren [data-tk-product-tile-switch-variant] Beschreibung

    Selct-Box mit Auswahl von Artikeln zum Produkt. Beim ändern wird ein neues Product-Tile geladen.
    Data-Attribut TypeScript-Type Default Beschreibung
    Data-Attribut data-tk-product-tile-switch-variant TypeScript-Type

    string

    		 Default

    -

    		 Beschreibung

    Hier kann die URL die per gCreateURL generiert wird und ddas gewünschte Product-Tile ermittelt.

    Web Components <tk-product-variants>
    Selektoren Beschreibung
    Selektoren [data-tk-product-variant] Beschreibung

    Wrapper der gesamten Produkt-Variante in der Auswahlliste.
    Selektoren [data-tk-product-variant-filter] Beschreibung

    Wrapper eines Differenzierungsattributes zum Filtern der Auswahlliste
    Selektoren [data-tk-product-variant-list] Beschreibung

    Wrapper der Produkt-Varianten Liste.
    Data-Attribut TypeScript-Type Default Beschreibung
    Data-Attribut data-tk-product-variant-none TypeScript-Type

    string

    		 Default

    NONE

    		 Beschreibung

    Product-Variant Value falls nach dem Filtern keine Produkt-Varianten vorhanden sind.

    Data-Attribut data-tk-product-variant TypeScript-Type

    string

    		 Default

    -

    		 Beschreibung

    Wert der ID der Produkt-Variante.

    Data-Attribut data-tk-product-variant-filter TypeScript-Type

    string

    		 Default

    -

    		 Beschreibung

    Name des Differenzierungsattributes zum Filtern der Produkt-Varianten Liste

    Data-Attribut data-tk-product-variant-attribute TypeScript-Type

    string

    		 Default

    -

    		 Beschreibung

    Name des Differenzierungsattributes innerhalb der Produkt-Variante.

    Data-Attribut data-tk-product-variant-value TypeScript-Type

    string

    		 Default

    -

    		 Beschreibung

    Wert des Differenzierungsattributes innerhalb der Produkt-Variante.

    Messages

    Messages
    # Success Success
    Die Email wurde versendet
    # Error Error
    Die Email wurde nicht versendet
    # Info Info
    Die Email wurde versendet
    # Warning Warning
    Die Email wurde versendet
    Elemente (BEM) Beschreibung
    Elemente (BEM) .tk-message__icon Beschreibung

    Wrapper für Icon.
    Elemente (BEM) .tk-message__label Beschreibung

    Wrapper für Label.
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-message--success Beschreibung Sorgt dafür, dass die Meldung mit einem grünen Hintergrund dargestellt wird.
    Die Schrift ist weiss.
    Modifier's (BEM) .tk-message--error Beschreibung Sorgt dafür, dass die Meldung mit einem roten Hintergrund dargestellt wird.
    Die Schrift ist weiss.
    Modifier's (BEM) .tk-message--info Beschreibung Sorgt dafür, dass die Meldung mit einem blauen Hintergrund dargestellt wird.
    Die Schrift ist weiss.
    Modifier's (BEM) .tk-status--warning Beschreibung Sorgt dafür, dass die Meldung mit einem gelben Hintergrund dargestellt wird.
    Die Schrift ist schwarz.
    Modifier's (BEM) .tk-status--fullwidth Beschreibung Sorgt dafür, dass die Meldung den maximal verfügbaren Platz einnimmt.
    Modifier's (BEM) .tk-status--breakout Beschreibung Sorgt dafür, dass die Meldung aus der Grid-Definition ausbricht und den maximal verfügbaren Platz einnimmt.

    Filter

    Filter Result (Block)
    Filter 1
    Filter 2
    Filter 3
    Filter 4
    Filter Button (Drilldown)
    Filter not active Filter active
    default default default
    		default
    hover hover hover
    		hover
    pressed pressed pressed
    		pressed
    disabled disabled disabled
    		disabled
    Filter Chip
    default default default
    hover hover hover
    pressed pressed pressed
    disabled disabled disabled
    Filter Group
    Filter Dropdown
    Mit Suche Mit Suche Mit Suche
    Ohne Suche Ohne Suche Ohne Suche
    Filter Select (Single)
    Mit Suche Mit Suche Mit Suche
    Ohne Suche Ohne Suche Ohne Suche
    Filter Select (Multi)
    Mit Suche Mit Suche Mit Suche
    Ohne Suche Ohne Suche Ohne Suche
    Filter Select (Farben)
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-filter-select--has-colors Beschreibung

    Wechselt die Reihenfolge des Formfield und zeigt einen Platzhalter an für die Farbe.
    Dieser Modifier wird automatisch im Razor-Template gesetzt, sobald der Value einen gültigen Hexcode hat.

    Mit Suche Mit Suche Mit Suche
    Ohne Suche Ohne Suche
    Filter Variant (Slider)
    Slider Slider Slider
    cm
    cm
    Filter Variant (Date-Range)
    Date Range Date Range Date Range
    Filter Variant (Input)
    Input Input Input
    Web Components <tk-filter>

    Diese Klasse ermöglicht das Hinzufügen, Löschen und Verwalten von Filterelementen.

    Event Beschreibung
    Event STARTED Beschreibung

    Schiesst, wenn der TK-Filter im DOM geladen wurde.
    Event SENDED Beschreibung

    Schiesst, wenn ein post() ausgelöst wurde.
    Event REFRESHED Beschreibung

    Schiesst, wenn die Artikel-Liste erfolgreich neu geladen wurde.
    Event RESETTED Beschreibung

    Schiesst, wenn alle selektierten Filter zurückgesetzt wurden.
    Event ENDED Beschreibung

    Schiesst, wenn der TK-Filter aus dem DOM gelöscht wurde.
    Data-Attribut TypeScript-Type Default Beschreibung
    Data-Attribut data-tk-filter-type TypeScript-Type

    FilterType

    		 Default FilterType.URL_PARAM_FILTER Beschreibung

    Hier kann der gewünschte FilterType eingestellt werden.

    Data-Attribut data-tk-filter-group-id TypeScript-Type

    string

    		 Default cat Beschreibung

    Hier kann die Group-ID bestimmt werden. Wird für RD-Filter gebraucht.

    Data-Attribut data-tk-page-layout TypeScript-Type

    string

    		 Default asyn Beschreibung

    Hier kann das Page Layout gesetzt werden. Wird für den Simple Filter genutzt.

    Data-Attribut data-tk-allow-url-params-prefix TypeScript-Type

    string

    		 Default cf- Beschreibung

    Hier werden alle URL Param Prefix's aufgelistet (Komma-Getrennt).
    Wird genutzt um alle URL Params die mit der GroupId oder mit diesem Prefix
    beginnen, isoliert werden von anderen URL Params, somit kann man paging und
    andere URL Params frei nutzen.

    Web Components <tk-filter-drilldown-button>
    Selektor Beschreibung
    Selektor [data-tk-filter-drilldown-button-count] Beschreibung

    Das Counter Element um die aktiver Filteranzahl einzutragen.

    Data-Attribut TypeScript-Type Default Beschreibung
    Data-Attribut data-tk-filter-drilldown-open-class TypeScript-Type

    string

    		 Default tk-filter-group-wrapper--drilldown Beschreibung

    Die Klasse stellt den Filter in die Drilldown Ansicht um. Wird auf dem <tk-filter-group-wrapper> gesetzt.

    Data-Attribut data-tk-filter-drilldown-active-class TypeScript-Type

    string

    		 Default tk-filter-drilldown-button--active Beschreibung

    Setzt den Drilldown Button auf Active um.

    Show More

    Show More

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

    Web Component <tk-show-more>
    Elemente (BEM) Beschreibung
    Elemente (BEM) .tk-show-more__content Beschreibung

    Der Wrapper für den Content
    Elemente (BEM) .tk-flag__actions Beschreibung

    Der Wrapper für die Aktionen wie Buttons
    Elemente (BEM) .tk-flag__expand Beschreibung

    Der Button der zum Erweitern zuständig ist.
    Elemente (BEM) .tk-flag__fold Beschreibung

    Der Button der zum Minimieren zuständig ist.
    Modifier's (BEM) Beschreibung
    Modifier's (BEM) .tk-flag--open Beschreibung Öffnen des Contents
    Modifier's (BEM) .tk-flag--disable Beschreibung Anzeige des Contents ohne Action Area.
    Selektoren Beschreibung
    Selektoren [data-tk-content] Beschreibung Dieser Selektor bestimmt den Wrapper des Content.
    Selektoren [data-tk-expand-button] Beschreibung Dieser Selektor bestimmt den Button für das Öffnen des Content.
    Selektoren [data-tk-fold-button] Beschreibung Dieser Selektor bestimmt den Button für das Schliessen des Content.
    Data-Attribut TypeScript-Type Default Beschreibung
    Data-Attribut data-tk-showing-elements TypeScript-Type

    number

    		 Default

    1

    		 Beschreibung

    Hier kann man die Anzahl Elemente einstellen die bei Initialisierung angezeigt werden sollen. Falls der Content die Anzahl nicht erreicht, werden die Button's nicht angezeigt.