samedo-badge v1.1.6

samedo Badge

Das Plugin für den Badge benötigt jQuery.

Installation des Plugins

Der Badge kann mittels verschiedenen Möglichkeiten installiert werden. Neben der klassischen Installation via HTMl gibt es auch die Möglichkeit über github.com und npmjs.com.

Installation via npm:

npm install samedo-badge

Installation via github:

git clone https://github.com/rkruebel/samedo-badge.git

Einbinden des Plugin

Das Plugin binden Sie via html wiefolgt ein:

<script src="https://cdn.samedo.de/samedo-badge.min.js"></script>

Einbindung via typo3

Für die Einbindung bei Typo3 muss folgender Code verwendet werden:

page.includeJSFooter.samedo = https://cdn.samedo.de/samedo-badge.min.js
page.includeJSFooter.samedo.external = 1
page.includeJSFooter.samedo.async = 0

Einbindung via WordPress

Bei Wordpress Instanzen kann man unter der Pfadangabe wp-content/themes/function/functions.php nach dem Bereich

/*-----------------------------------------------------------------------------------*/
/* You can add custom functions below */
/*-----------------------------------------------------------------------------------*/

seine eigenen Funktionen wie im folgenden Code-Beispiel einbinden:

function samedo_badge_js()
{
    wp_enqueue_script(
        'custom-js',
        'https://cdn.samedo.de/samedo-badge.min.js',
        false,
        null,
        true);
}
add_action('wp_enqueue_scripts','samedo_badge_js');

Damit das samedo Badge immer auf dem aktuellen Stand ist, was Updates und die Behebung von Bugs betrifft, ist es erforderlich die EInbindung der Javascript-Datei entsprechend dieser Anleitung vorzunehmen. Bei einer lokalen Kopie des Scriptes kann keine Aktualisierung vorgenommen werden.

Funktionsweise

Das Plugin erstellt im oberen zentralen Bereich des Fensters einen Badge mit dem samedo Logo und dem Link zum Onlineshop. Der Link verweist dabei auf Ihre Landing Page im Onlineshop. Sobald Sie mit der Maus über den Badge fahren wird dieser vergrößert dargestellt und Sie sehen ein Angebot zum Onlineshop. Im rechten Teil unten finden Sie ein X zum Schliessen des Badges und sobald Sie mit der Maus aus dem Angebot heraus sind, zählt im oberen Bereich ein Countdown 3 Sekunden rückwärts bis das Badge automatisch wieder verkleinert wird. Auch wird bei vergrößertem Badge die jeweilige Partnerfirma hinter den Onlineshop-Link angezeigt.

Anpassen des Angebotes

Wenn Sie ein eigenes Produkt über Ihren Badge angezeigt haben möchten, so können Sie mit folgendem Code-Beispiel ihr indiviuelles Produkt aus dem samedo Onlineshop anzeigen lassen. Vorraussetzung ist die Angabe der Artikelnummer beginnend mit SW. Sie finden die Artikelnummer auf der Produktdetailseite des Onlineshops unterhalb des Warenkorb Button.

<script type="text/javascript">
$(function() {
   samedoBadge.setProduct('SW13167'); 
});
</script>

Änderung der Position des Badges

Die Position des Badges wird unter Angabe der position geändert:

<script type="text/javascript">
$(function() {
   samedoBadge.setPosition({position:"top"}); 
});
</script>

Es kann auch folgende Schreibweise verwendet werden:

<script type="text/javascript">
$(function() {
   samedoBadge.setPosition("bottom-right"); 
});
</script>

Mögliche Werte sind top, top-left, top-right, bottom, bottom-left, bottom-right, left oder right. Wenn Sie das Badge ohne diese Angaben einbinden bleibt das Badge standardmäßig auf der Position top. Bei den Positionen left und right wird der Text erst eingeblendet, sobald man mit der Maus über das Icon fährt.

jQuery Konflikt

Sollte es bei der Einbindung zu Problemen in Verbindung mit jQuery kommen, kann man auch folgende Anweisungen anstelle des $-Zeichen verwenden:

<script>
    jQuery(function() {
       // ausgewählter Code für setPosition oder setProduct
    });
</script>