VendiPro beinhaltet eine eigene Funktionalität um mit wenigen Klicks eigene Slideshow bzw. Carousels (basierend auf Flexslider) in den Shop einzubetten. Als erstes hier ein paar kurze Hinweise wie das Einbetten schnell und unkompliziert klappt:
- Das Einbetten erfolgt über den Shortcode [[vp_slider]]. Dieser Shortcode wird dann mit Attributen vervollständigt um einen individuellen Slider einzubetten
- Falls du nicht das Standard Beitrags- bzw. Produktbild nutzen möchtest solltest du für Produkte bzw. Seiten ein Slideshow Artikelbild festlegen (befindet sich im Backend auf der Inhaltsbearbeitungs-Seite direkt unterhalb des Artikel- bzw. Produktbildes).
- Die Standard-Größe für Bilder innerhalb der Slideshow beträgt 1000 x 300 Pixel
Folgende Attribute können verwendet werden um die Slideshow einzubetten:
- query (string s. WordPress Query Posts – Standard: keiner – String um Inhalte für die Slideshow auszuwählen)
- type (product | page – Standard: product – Entweder Produkte oder Seiten darstellen)
- image_size (alle WordPress Standard-Bildgrößen (z.B. thumbnail) und WooCommerce Bildgrößen (z.B. shop_catalog) – Standard: slider)
- slideshow_speed (in ms – Standard: 5000 – Falls slideshow aktiviert ist, ist dies die Länge der Anzeige pro Slide)
- width (in % – Standard: 100 – Breite der Slideshow in Prozent relativ zum Eltern-Element)
- slideshow (boolean – Standard: true – Falls diese Option auf false steht, wechselt das Bild der Slideshow nicht automatisch)
- item_width (in Pixel – Standard: 0 – Sollte nur gesetzt werden, falls ein Carousel gewünscht ist – gibt die Breite jedes Elementes an)
- animation (slide | fade – Standard: slide – Der Effekt um von einem Bild zum anderen zu wechseln)
- item_margin (in Pixel – Standard: 15 – Abstand zwischen den einzelnen Carousel-Elementen)
- control_nav (boolean – Standard: true – Stellt eine Navigation der Slideshow mittels kleinen Kreisen zur Verfügung)
- pause_on_hover (boolean – Standard: true – Pausiert die Slideshow, während der Benuter mit der Maus über das Bild fährt)
- direction_nav (boolean – Standard: true – Fügt links und rechts Pfeile für vor bzw. zurück hinzu)
Nun einige Beispiele um diverse Slideshow- bzw. Carousel-Varianten in den Shop einzubetten:
1. Slideshow ohne automatischen Bildwechsel der letzten 5 Produkte
[vp_slider query="post_type=product&posts_per_page=5" type="product" slideshow="false"]
2. Carousel mit 15 beliebigen Produkten
[vp_slider query="post_type=product&posts_per_page=15&orderby=rand" type="product" item_width="175" image_size="shop_catalog"]
3. Produkte per IDs auswählen
[vp_slider query="post__in=1,3,8,9" type="product" slideshow="false"]
Hier werden die Produkt IDs 1, 3, 8 und 9 in der Slideshow angezeigt. So findest du die Produkt IDs heraus.
4. Produkte bestimmter Produktkategorien anzeigen
[vp_slider terms="hosen,poloshirts" query="posts_per_page=5&orderby=rand" type="product" item_width="175" slideshow="false" image_size="shop_catalog"]
Hier werden nur Produkte der Produktkategorien Hosen und Poloshirts in der Slideshow angezeigt. Unter terms muss jeweils (kommasepariert) der Permalink der Kategorie angegeben werden (den findest du unter Produkte > Kategorien).