8select CSE - Integrations Dokumentation
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 triggern, 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()
  }
}
Last updated 4 weeks ago