Demo Carousel

Dieses Widget ermöglicht es mehrere Offers als Previewcard in einem Carousel darzustellen. Mit einem Klick auf das Offer wird man direkt zum Provider des Offers weitergeleitet.

Demo des Widgets


Hinweise zum Widget. Es wird nativ als JS Widget eingebunden. Damit wird die Farbe der Links und Schriftart von der Seite geerbt wo es eingebunden ist. Bzw. ist die Farbe und Schriftart von AMS ebenfalls im Widget hinterlegt, wenn es als iFrame geladen wird und die Vererbung nicht ordentlich funktioniert.

Das Widget

Das Widget wird mit folgendem Code eingebunden:

Mit diesem Widget sind wir auf eine Identifikation mit Klassennamen gewechselt. Die Klasse mvd_carousel_widget kann auf einer Seite mehrmals verwendet werden, um mehrere Carousels bei Bedarf auszugeben.

<div
    class="mvd_carousel_widget"
    data-title="Carousel Title"
    data-partner-id="4"
    data-brand-color="4B90E2"
    data-offer-type="vehicle-monthly-offers"
    data-search-param-string="makes_models=mercedes-benz,audi&fuel=diesel"
></div>
<script src="https://widgets.mivodo.com/widgets/carousel/widget.js"></script>

Dabei wird das Widget in alle Divs mit der class mvd_carousel_widget gesetzt. Wenn dieses div nicht vorhanden ist, wird das Widget nicht ausgegeben. Außerdem müssen bestimmte unten genannte Data Attribute vorhanden sein.

Widget Daten

Damit das Widget ordnungsgemäß funktioniert müssen bestimmte Data Attributes am div des Platzierung „div“ angehängt werden. Wir haben uns hier bewusst entschieden zukünftig die Widget Daten immer, soweit möglich, lieber in die Data Attributes zuschreiben. Das ermöglicht dann auch mehr Flexibilität wenn man das gleiche Widget eventuell mehrmals auf einer Seite platzieren will.

Wenn es nicht vorhanden ist, kann das Widget nicht gerendert werden. Damit das Widget etwas zurückgeben kann, muss zumindest die data-partner-id und data-search-param-string definiert werden. Folgende Data Attributes gibt es:

  • offer-type: Es kann immer nur eine Offer Gruppe dargestellt werden: vehicle-monthly-offers, vehicle-buy-offers. Wird kein offer-type gegeben, ist der Fallback vehicle-monthly-offers
  • partner-id ist die Partner ID die euch zugewiesen wird.
  • brand-color Farbe in der der Preis dargestellt wird
  • search-param-string Hier kann ein query string definiert werden. Dieser kann einfach von der Entsprechenden Suche auf Mivodo entnommen werden.
    bsp.: https://www.mivodo.com/angebote/?type=vehicle-monthly-offers&sort=popularity&customer_groups=privat hier ist der teil nach dem Fragezeichen der relevante string. Das Fragezeiche kann weggelassen werden.
Optionale Parameter
  • title Ein Titel der über dem Widget erscheint.