Integration Guide Ratenrechner-Plugin via Script

Logo

Kennen Sie schon unsere neuen Web Components? Darüber lassen sich unsere Online Werbemittel wie z.B. der Ratenrechner schnell und unkompliziert ohne Script in Ihren Webshop integrieren.

Genauere Informationen dazu erhalten Sie hier: Ratenrechner einbinden

Die unten beschriebene Integration via Script empfehlen wir nur, falls die Nutzung der Web Components nicht möglich ist.

Stand: 15.09.2022

Vorwort

Mit dem Ratenrechner-Plugin (nachfolgend RR-Plugin) genannt haben Sie die Möglichkeit, den easyCredit-Ratenkauf überall dort zu bewerben, wo Produktpreise abgebildet werden. Damit kommunizieren Sie die Ratenkaufoption genau dort, wo Ihre Kunden ihre Kaufentscheidung treffen. Das RR-Plugin hilft Ihnen die Umsatzpotenziale des easyCredit-Ratenkaufs zu heben.

Die Funktionsweise des RR-Plugins

Das RR-Plugin kann bei jeder Preisdarstellung (Artikelseite, Warenkorb, Produktliste, Sucherergebnisse, etc.) eingebunden werden und kommuniziert eine konkrete, alternative Ratenzahlung. Über einen Link wird der Beispielrechner als iFrame in einer Lightbox geöffnet. Der Kunde kann sich somit direkt am Artikel über die Details eines Ratenkaufs informieren und bereits seine Wunschrate aussuchen.

Funktionsumfang

  • Styles können an Ihren Webshop angepasst werden
  • Individuelle Konfigurationsoption der Darstellung
  • Hoch performant
  • Voll responsive
  • Anzeige wird bei nicht ratenfährigen Preisen unter 200€ automatisch ausgeblendet und kann damit ohne Bedenken an jedem Artikel integriert werden.
  • Rechtssichere Umsetzung durch Pflichtangaben beim Beispielrechner

Beispieldarstellung

Plugin:

Beispieldarstellung des Plugins

Beispielrechner:

Beispieldarstellung des Modellrechners

Einbindung

Schritt 1: Einbindung des RR-Plugins im Webshop

Um das RR-Plugin in einer HTML-Seite einzubinden, muss folgender Script-Tag im HTML-HEAD eingefügt werden.

<!DOCTYPE html>
<html>
 <head>
  <title> <!-- Page Title--></title>
  <script src=https://ratenkauf.easycredit.de/widget/ratenrechner/v2/ratenrechner.js type="text/javascript"></script>
 </head>

 <body>
  <!-- Page content -->
 </body>
</html>

Schritt 2: Platzhalter für die Preisinformation

Das Plugin benötigt eine DIV-Komponente, um die ermittelte Rateninformation anzuzeigen. Dafür ist im <body>-Tag ein <DIV> mit einer ID (im Beispiel "componentID") hinzuzufügen. Bei dem Aufruf des RR-Plugins muss dieselbe ID der DIV-Komponente übergeben werden (s. auch Schritt 3)

<!DOCTYPE html>
<html>
 <head>
  <title> <!-- Page Title--></title>
  <script src=https://ratenkauf.easycredit.de/widget/ratenrechner/v2/ratenrechner.js type="text/javascript"></script>
 </head>

 <body>
 <!-- Page content -->
  <div class="row">
   <div id="componentID"></div>
  </div>
 </body>
</html>

Schritt 3: Aufruf der Plugin-Methode

Nach der Einbindung des RR-Plugins in Schritt 1 wird die globale Variable "rkPlugin" zur Verfügung gestellt, sofern das Laden des RR-Plugins fehlerfrei gelaufen ist.

Um die Anzeige der Preisinformation darzustellen, sollte die Methode "anzeige(id,options") von der globalen Variable aufgerufen werden.

<!DOCTYPE html>
<html>
 <head>
  <title> <!-- Page Title--></title>
  <script src=https://ratenkauf.easycredit.de/widget/ratenrechner/v2/ratenrechner.js type="text/javascript"></script>

  <script type = "text/javascript">

  jQuery_1_11_3(document).ready(function() {
      var options = {
          webshopId : '2.de.9999.9999',
          finanzierungsbetrag: , // hier steht die Variable des übertragenen Betrags
          textVariante: 'KURZ'
      };
      rkPlugin.anzeige('componentID',options);
  });

  </script>
 </head>

 <body>
 <!-- Page content -->
  <div class="row">
   <div id="componentID"></div>
  </div>
 </body>
</html>

Schritt 4: Einbinden der Ratenrechner CSS-Datei

Um die korrekte Darstellung des Widgets und des Beispielrechners zu gewährleisten, fügen Sie bitte noch einen Verweis auf die entsprechende CSS-Datei im <head>-Bereich Ihrer Website ein:

<!DOCTYPE html>
<html>
 <head>
  <title> <!-- Page Title--></title>

  <link rel="stylesheet" type="text/css" href="https://ratenkauf.easycredit.de/ratenkauf/js/ratenrechner/v1/ratenrechner.css">

  <script src=https://ratenkauf.easycredit.de/widget/ratenrechner/v2/ratenrechner.js type="text/javascript"></script>

  <script type = "text/javascript">

  jQuery_1_11_3(document).ready(function() {
      var options = {
          webshopId : '2.de.9999.9999',
          finanzierungsbetrag: , // hier steht die Variable des übertragenen Betrags
          textVariante: 'KURZ'
      };
      rkPlugin.anzeige('componentID',options);
  });

  </script>
 </head>
</html>

Schritt 5: Der Methodenparameter "Options"

Obligatorische Parameter

Die obligatorischen Parameter müssen zwingend befüllt werden.

  • finanzierungsbetrag: Diese Attribut bezieht sich auf den Preis des jeweiligen Produkts / Warenkorbs
  • webshopId: Dieses Attribut bezieht sich auf die WebshopID bzw. -Kennung des Händlers, z.B. 2.de.9999.9999

Individuelle Optionen

Mit den individuellen Optionen können Sie die Darstellung an Ihren Webshop anpassen.

  • euro: Mit der Option euro haben Sie die Möglichkeit die Währungsdarstellung anzupassen.

    • euro = ISO (default)
      Raten werden mit EUR ausgewiesen.

    • euro = SYMBOL
      Raten werden mit € ausgewiesen.

  • textVariante:
    Mit der Option textVariante haben Sie die Möglichkeit den Umfang der Anzeige anzupassen.

    • textVariante = OHNE_RATE (default)
      Es wird nur ein Link zum Beispielrechner angezeigt, in dem der Kunde die Detailinformationen einsehen kann.

    • textVariante = KURZ
      Es wird die Beispielrate und der Link zur Beispielrechnung angezeigt.

    • textVariante = LANG
      Es wird ein vollständiges Finanzierungsangebot mit Laufzeit und Rate, sowie der Link zur Beispielrechnung angezeigt.

Schritt 6: Konfiguration des Styles

Passen Sie das Design des Plugins an Ihren Webshop an. Der Default entspricht der regulären Payment-Page.

Folgende CSS-Variablen sind zu überschreiben:

.styleKurzText /* Darstellung des Texts "oder ab bzw. oder" */
.styleRate /* Darstellung des Texts "Ratenanzahl und Ratenhöhe" */
.styleLink /* Darstellung des Links "auch Ratenkauf möglich / mehr Informationen zum Ratenkauf" */

Beispiel

.styleKurzText { color: orange; } /* Setzt die Farbe orange für Ratenanzahl und Ratenhöhe */
.styleRate { color: #323246;}
.styleLink { text-decoration: underline; } /* Unterstreicht die Links */
Suche
Häufige Begriffe