Dein Warenkorb ist leer

16.03.2022 Custom Drops

Custom Drops Showcase - Podcasts

Für Rum & Co. haben die Kollegen von Elevant ein Custom Drop entwickelt, das die Folgen des eigens produzierten Podcasts auf einer Landingpage zeigt.

Podcast Intro

Podcasts erfreuen sich großer Beliebtheit. Auch ich höre regelmäßig Podcasts zu diversen Themen - sei es zur Unterhaltung oder zum Wissensgewinn. Auch manche Shopbetreiber entdecken das Medium für sich und nutzen es, um Kunden zu binden oder neu zu gewinnen.

Rum & Co. lässt im Podcast Hochprozentig! regelmäßig Gäste zu Wort kommen, die etwas Interessantes rund um Spirituosen zu erzählen haben. Und dieser eigene Podcats sollte nun auch im eigenen JTL-Shop gefeatured werden. Simon von Elevant zur Anforderung:

Wir wollten eine Landingpage für den neu aufgelegten Podcast erstellen, die möglichst selbst [von den Mitarbeitern] gepflegt werden kann. Jede Folge sollte ein Bild, eine Beschreibung und auch die Artikel beinhalten, die in der jeweiligen Folge thematisiert werden. Zudem sollte die Folge direkt auf der Seite abgespielt werden können.

Das alles scheint gelungen, und zwar mit dem Podcast Custom Drop!

Umsetzung mit Standard Eingabeelementen

Zentrales Element des Podcasts Drops ist ein List Control, das wiederrum einzelne Podcast Folgen aufnimmt. Solch ein Control nutzt bspw. auch das Powerslide oder Tabs Drop.

Podcast Übersicht im Backend

Eine Podcast Folge verfügt zunächst über ein Vorschaubild (Upload Control) und eine Beschreibung (HTML Control). Die Beschreibung enthält die (meist recht umfangreichen und mit HTML versehenen) Shownotes zur Folge.

Auch ein Einbettungscode, den die Hostingplatform des Podcasts (hier ein <iframe> von anchor.fm) zur Verfügung stellt, darf nicht fehlen. Damit kann der Podcast direkt auf der Seite abgespielt werden.

Podcast Element im Backend

Passende Produkte dynamisch verlinkt

Über ein Multiselect Control mit Artikel Datasource können zur Folge passenden Spirituosen bzw. Produkte des Shops ausgewählt und angezeigt werden. Hierbei werden keine statischen Inhalte verwendet und verlinkt, sondern die Produkte der Shop-Datenbank.

Ändert sich ein Produkt (oder fällt gar eines heraus), aktualisiert sich der Listeninhalt ebenso. Auch solch ein Control bringt Dropper bereits mit, es kann also leicht in eigenen Drops verwendet werden. Wir nutzen es zum Beispiel im Article Slider Drop.

Eine Podcast Folge auf der Landingpage

Überschaubarer Aufwand

Das gesamte Backend zur Datenpflege kann mit nur wenige Zeilen JSON Code umgesetzt werden. Wer einmal ein Gefühl dafür bekommen möchte, kann gern einen Blick auf unseren Drop Builder werfen und sich dort ein Custom Drop Grundgerüst zusammenklicken. Ansonsten findet ihr Code Beispiele zu den Controls in unserem ausführlichen Entwicklerhandbuch.

Der Fokus der Entwicklung liegt, wie bei fast jedem Custom Drop, in der Darstellung der im Backend erfassten Daten, also in der Erstellung des Templates für das Custom Drop.

Übrigens: die fertige Podcast Landingpage setzt sich zum Großteil aus konfigurierbaren Inhalten des Custom Drops zusammen. Der Intro Banner und Links zu Spotify und Co. werden allerdings statisch im Drop-Template gesetzt, mit entsprechenden Eingabeelementen könnte man aber auch diese Komponenten leicht konfigurierbar gestalten (Upload-, Icon- und Link-Control).

Das brauch ich auch!

Wenn ihr mehr zum Podcast Drop erfahren möchtet oder Hilfe bei der Umsetzung eigener Drops sucht, nehmt gern mit uns Kontakt auf. Oder fragt Elevant direkt!

Elevant Logo
Die Kollegen von Elevant vereinen viele Jahre Erfahrung in der JTL Welt. Für größere JTL-Shops wie rumundco.de oder wowas.de nutzen sie auch gern Dropper und Custom Drops.