<div data-8select-widget-id="sys-acc" data-sku="42" data-include-css="true"></div>
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.
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.
.-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 {}
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}
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"><imgsrc="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><divclass="-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"><imgsrc="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><divclass="-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"><imgsrc="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><divclass="-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"><imgsrc="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><divclass="-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>
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 triggern, muss nachdem hinzufügen zum DOM das JS SDK darüber informiert werden.
// failsafe if the JS SDK is not yet injectedif (typeof _8select === "undefined") {return}// activate 8.SET Flat widget_8select.initCSE();
Im Erfolgs- bzw. Fehlerfall wird window._eightselect_config['sys-acc'].callback
aufgerufen sofern eine Funktion definiert ist.
_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 skufunctionToShowFallbackElement()return}// everything fine and a set was found for given skutrackAnEventWithYourFavouriteTool()}}