Dieses Widget ermöglicht es eine Liste von Angebote (zB die günstigsten nach Preis aufsteigend) anzuzeigen. Es eignet sich damit zB für einen Artikel mit den günstigsten „SUV Privatleasing Angeboten“ oder die besten „E-Autos für Privatkunden im Leasing“.
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. Das Widget
Das Widget wird mit folgendem Code eingebunden:
<div class="mvd_offers_by_filter_widget" data-offer-type="vehicle-leasing-offers" data-filter-string="sort=price_asc&makes_models=mercedes-benz,audi&fuel=diesel" data-offer-count="4" data-partner-id="1" data-brand-color="ff0000" data-search-url="https://widgets-doc.mivodo.com/such-widget/" data-brand-color="27a209"></div>
<script src="https://widgets.mivodo.com/widgets/offers-by-filter/widget.js"></script>Dabei wird das Widget in alle Divs mit der class mvd_offers_by_filter_widget gesetzt. Es werden jeweils die data-attributes des divs ausgelesen, um das Widget zu rendern. Wenn dieses div nicht vorhanden ist, wird das Widget nicht ausgegeben.
Das Widget passt sich an das HTML der aktuellen Seite an, womit es Schriftart, Farben usw. übernimmt. Sollte es hier zu Problemen führen, können wir weitere Styles zum überschreiben des Aussehens definieren.
Sollte es zu Darstellungsproblemen kommen, weil bestimmte Styles von uns vor definiert werden sollen im widget, kontaktiere uns.
Konfiguration der Data-Attributes
Jedes data-attribute spielt eine spezifische Rolle in der Funktionsweise des Widgets:
data-offer-type: Gibt die Art des Angebots an (z.B.vehicle-leasing-offers, vehicle-subscription-offers, vehicle-buy-offers)data-filter-string: Hier kann ein freier Filter String eingeben werden zB. makes-models=cupra&fuel=hybrid (Cupra Hybrid Angebote)data-partner-id: Eine eindeutige ID, die den Partner identifiziert, der das Widget verwendet.- data-offer-count: Optional: Default sind 5 Angebote in dem Widget. Hier kann man jedoch frei bis zu 20 anzeigen.
data-search-url: Optional: URL der Suche wohin das Widget verweisen soll (hier linken wir direkt auf die Angebote, wenn url definiert ist unten ein Link zur Suche für weitere Angebote)data-title: Optional: Der Titel des Widgets, der oben im Widget angezeigt wird.data-brand-color:Optional: Hexcode der Akzentfarbe eurer Marke !ohne! # zB 27a209 ohne bleibt das Widget in den Text Grautönen und ist weniger auffällig
Die Filter Strings können aus dem Such Widget gezogen werden: https://widgets.mivodo.com/widget-suche/
