8.SET Flat

Sehr simples Widget, dass aus einem Set bis zu 4 Artikel anzeigt. Zum Beispiel für die Integration eines Warenkorb-Layers.
8.SET Flat im Warenkorb-Layer

Widget-Element

<div data-8select-widget-id="sys-acc" data-sku="42" data-include-css="true"></div>

Parameter

data-sku ist die SKU des aktuellen Artikels. Die CSE sucht basierend darauf ein Produktset welches diesen Artikel enthält. Der Wert für data-sku muss dynamisch gesetzt werden und muss eine der im Produktexport übergebenen SKU entsprechen.

data-include-css kann true oder false sein. Wird der Wert weggelassen, entspricht das dem Wert false. Steht der Wert auf true so wird ein Basis CSS für ein CSS-Grid basierend auf https://purecss.io/grids/ ausgeliefert. Außerdem werden CSS Deklarationen für einzelne Elemente ausgeliefert. Kommen neue Elemente hinzu werden diese z.B. über die Deklaration display:none ausgeblendet.

Aussehen anpassen

Mit Hilfe von CSS können Elemente ein- bzw. ausgeblendet werden. Auch das Aussehen von den einzelnen Elementen wird über CSS geändert.

Die einzelnen Klassen können direkt über den Widget-Manager in der MCON angepasst werden.

Standard CSS das ausgeliefert wird

.-eightselect-item-list {
}
.-eightselect-item {
}
.-eightselect-item-image {
}
.-eightselect-item-body {
}
.-eightselect-item-brand {
}
.-eightselect-item-name {
display: none;
}
.-eightselect-item-sales-price {
}
.-eightselect-item-stroke-price {
}

Beispiel für eine Anpassung

Es wurde mit Hilfe von Flex-Box die Position von Streich- und Verkaufspreis getauscht. Außerdem wurden einige Farben und Größen verändert.

.eightselect-item-list {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
}
.-eightselect-item-body {
margin-top: 5px;
}
.-eightselect-item-brand {
display: none;
}
.-eightselect-item-name {
display: block !important;
color: #0d0d0d;
min-height: 2.5rem;
line-height: 1.25rem;
font-size: 0.875rem;
font-weight: 700;
text-decoration: underline;
margin-bottom: 5px;
}
.-eightselect-item-price {
display: -webkit-flex;
display: -moz-flex;
display: flex;
color: #666;
}
.-eightselect-item-sales-price:after,
.-eightselect-item-stroke-price:after {
content: ' € *';
}
.-eightselect-item-sales-price {
order: 1;
}
.-eightselect-item-price-has-stroke-price > .-eightselect-item-sales-price {
color: #e74c3c;
}
.-eightselect-item-stroke-price {
order: 2;
text-decoration: line-through;
margin-left: 10px;
font-size: 0.75rem
}

Beispiel Antwort vom Endpunkt

Das HTML des zurückgelieferten Widgets hat folgende Struktur:

<div class="-eightselect-item-list -eightselect-g">
<div class="-eightselect-item -eightselect-u-1-4">
<a href="https://www.outletcity.com/de-de/shop/style-001123111/?size=42">
<div class="-eightselect-item-image">
<img
src="https://thumbnails.8scdn.io/917961977e3cf12217e86e4845b773130e496f1198f716a2854fc8d6b9c6b186/150x198.jpg"
/>
</div>
<div class="-eightselect-item-body">
<div class="-eightselect-item-brand">ESCADA SPORT</div>
<div class="-eightselect-item-name">Blazer 'Barbados'</div>
<div
class="-eightselect-item-price -eightselect-item-price-has-stroke-price"
>
<div class="-eightselect-item-stroke-price">449,00</div>
<div class="-eightselect-item-sales-price">149,00</div>
</div>
</div>
</a>
</div>
<div class="-eightselect-item -eightselect-u-1-4">
<a href="https://www.outletcity.com/de-de/shop/style-001176130/?size=one size">
<div class="-eightselect-item-image">
<img
src="https://thumbnails.8scdn.io/dcf94b91b6096d7e426428463a8aac623bc0cb09bd59b9768ca1d7f1f6e7df44/150x198.jpg"
/>
</div>
<div class="-eightselect-item-body">
<div class="-eightselect-item-brand">SKAGEN DENMARK</div>
<div class="-eightselect-item-name">Halskette silber</div>
<div
class="-eightselect-item-price -eightselect-item-price-has-stroke-price"
>
<div class="-eightselect-item-stroke-price">69,00</div>
<div class="-eightselect-item-sales-price">47,90</div>
</div>
</div>
</a>
</div>
<div class="-eightselect-item -eightselect-u-1-4">
<a href="https://www.outletcity.com/de-de/shop/style-001162806/?size=one size" >
<div class="-eightselect-item-image">
<img
src="https://thumbnails.8scdn.io/96c4d816b52169e60804abe5966dcca6ddd8af0476c639a88bac3af80a02d939/150x198.jpg"
/>
</div>
<div class="-eightselect-item-body">
<div class="-eightselect-item-brand">LA MARTINA</div>
<div class="-eightselect-item-name">Handtasche 'Sofia' rosa</div>
<div
class="-eightselect-item-price -eightselect-item-price-has-stroke-price"
>
<div class="-eightselect-item-stroke-price">345,00</div>
<div class="-eightselect-item-sales-price">171,90</div>
</div>
</div>
</a>
</div>
<div class="-eightselect-item -eightselect-u-1-4">
<a href="https://www.outletcity.com/de-de/shop/style-001110965/?size=39">
<div class="-eightselect-item-image">
<img
src="https://thumbnails.8scdn.io/e31ed13163474c8d1cc4df57313685befb3000e222f2d64eb9e79cd49f19331c/150x198.jpg"
/>
</div>
<div class="-eightselect-item-body">
<div class="-eightselect-item-brand">TED BAKER</div>
<div class="-eightselect-item-name">Pumps 'Dahrlin' rosa</div>
<div
class="-eightselect-item-price -eightselect-item-price-has-stroke-price"
>
<div class="-eightselect-item-stroke-price">200,00</div>
<div class="-eightselect-item-sales-price">79,90</div>
</div>
</div>
</a>
</div>
</div>

API

Asynchrone Einbindung

Wird ein 8.SET Flat dynamisch erzeugt bzw. asynchron geladen, so kann es passieren, dass das Widget zu spät dem DOM hinzugefügt wird. Um die Funktion des Widgets zu trigger, muss nachdem hinzufügen zum DOM das JS SDK darüber informiert werden.

// failsafe if the JS SDK is not yet injected
if (typeof _8select === "undefined") {
return
}
// activate 8.SET Flat widget
_8select.initCSE();

Callback

Im Erfolgs- bzw. Fehlerfall wird window._eightselect_config['sys-acc'].callback aufgerufen sofern eine Funktion definiert ist.

Beispiel

_eightselect_config = _eightselect_config || {}
_eightselect_config['sys-acc'] = {
callback: function (error, sku, widgetUuid) {
if (error) {
// something went wrong or no set was found for given sku
functionToShowFallbackElement()
return
}
// everything fine and a set was found for given sku
trackAnEventWithYourFavouriteTool()
}
}