Ersatzteilshop

Der Ersatzteilshop kann in eine beliebige Seite eingebunden werden.

Folgende Stylesheetes und Scripte müssen (vor)geladen werden:
Am besten im <head>(<body> ist auch möglich):

<link href="https://ets.serviceparts24.com/css/app.css" rel="preload" as="style">
<link href="https://ets.serviceparts24.com/js/app.js" rel="preload" as="script">
<link href="https://ets.serviceparts24.com/css/app.css" rel="stylesheet">

Im <body>, am besten am Ende der Seite:

<script src="https://ets.serviceparts24.com/js/app.js"></script>

Der Ersatzelishop wird im TAG et-store eingebunden:

<et-store token="händler token" logourl="url logo" agburl="url agb" > </et-store>

Innerhalb des et-store Tags, kann beliebiges Markup eingebunden werden, z.B. zur Anzeige eines Loaders. Dieses Markup wird durch den Ersatzteilshop ersetzt, sobald er geladen ist.

<et-store token="händler token" logourl="url logo" agburl="url agb" strWelcome='

optionaler Begrüßungstext' >
   <!-- Das Markup innerhalb des et-store Tags wird ersetzt, sobald der Ersatzteilshop geladen ist.-->
   <div class="d-flex justify-content-center">
      <div class="spinner-border" role="status">
         <span class="sr-only">Loading...</span>
      </div>
   </div>
</et-store>

Parameter im Tag et-store

Parameter
token

Unbedingt erforderlich

Das Token wird von der Hans Sauer GmbH vergeben
logourl

Vollständige URI zu einem Logo ihrer Firma, das auf der Home-Seite angezeigt wird
agburl

Vollständige URI zu den AGB ihrer Firma
strWelcome

optional - Begrüßungstext auf der Home-Seite, kann html Tags enthalten.
Standard: Willkommen im Ersatzteilshop der Firma {Firmenname}

Vorbelegen der Rechnugsadresse:

Zum Vorbelegen der Rechnungsadresse, kann auf ihrer Seite eine JavaScript Funktion eingebunden werden, die ein Objekt mit den Kundendaten zurückgibt. Diese Funktion muss getEtsAddress heißen.

Das zurückgegebene Objekt muss folgende Form haben:

Das Feld Kundennummer ist im Shop nicht veränderbar und wird nur angezeigt, wenn das Feld gefüllt ist.

{
   company: 'Firmenname',
   salutation:'Herr/Frau',
   firstname: 'Vorname',
   lastname: 'Nachname',
   street: 'Strasse',
   street_no: 'Hausnummer',
   postalcode: 'Postleitzahl',
   city: 'Ort',
   country_id: 'DE',
   telephone: 'Telefonnummer',
   telefax: 'Telefax',
   email:'E-Mail-Adressse'
   custno:'Kundennummer'
   invoicing:1|0
}

Beispiel:

function getEtsAddress(){
   return {
      company: 'ETS Firma',
      salutation:'Frau',
      firstname: 'Franziska',
      lastname: 'Fröhlich',
      street: 'Frohstr',
      street_no: '1',
      postalcode: '45678',
      city: 'Frohrath',
      country_id: 'DE',
      telephone: '0123 456789',
      telefax: '0123 456789',
      email:'franz@froh.de'
      custno:'12345-1'
      invoicing:1
   }
}

Kauf auf Rechnung (Abwicklung über den Händler)

Um Kunden den Kauf auf Rechnung zu ermöglichen, kann den Kundendaten, die über getEtsAddress zurückgegeben werden, ein Feld invoicing angehängt werden. Ist der Wert von invoicing === 1 so wird beim Check-Out zusätzlich ein Button 'Kauf auf Rechnug' aktiviert.
Diese Funktion muss für Ihren Zugang von der Hans Sauer GmbH freigeschaltet werden, ansonsten hat das Feld keine Wirkung.

Einbindung des Shops über einen iframe

Die definierten Stylesheets der Seite in den der Shop eingebunden wird, wirken auch auf den Ersatzteilshop. Das kann unter Umständen zu unerwünschten effekten führen.
Um den Shop von der umgenbemden Seite zu isolieren, empfehlen wir in solchen Fällen die Einbindung des Shops übber einen iframe. Die Quelldatei (src) des iframes sollte dann keinerlei Stylesheets des umgebendem CMS / Shopsystems enthalten.

iframe auf der Seite des einbindenden Systems
Beispiel hier: shop_in_iframe.html

<div class='ihr_content_bereich'>
.
.
.
<iframe src='dokument_ohne_css.html' ></iframe>
.
.
.
</div>

(Beispiel) Quellcode der Seite die vom iframe geladen wird
Beispiel hier : iframe_src.html

<!DOCTYPE html>
<html lang="de">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link href="https://ets.serviceparts24.com/css/app.css" rel="preload" as="style">
   <link href="https://ets.serviceparts24.com/js/app.js" rel="preload" as="script">
   <link href="https://ets.serviceparts24.com/css/app.css" rel="stylesheet">
 </head>
 <body>
   <style>
     #app{
       height:100vh;
     }
   </style>
   <et-store
     token="ihr Token"
     logourl="ihre Url"
     agburl="ihre Url"
     strwelcome="Ihr Text"
   >
   </et-store>
   <script type="text/javascript" src="https://ets.serviceparts24.com/js/app.js"></script>
 </body>
</html>

Für Fälle in der das Bereitstellen der Seite, welche das iframe laden soll Probleme bereitet, bieten wir ihnen ein Skript an, das das Laden des iframes übernimmt.

Beispiel:
siehe auch hier: etsIframeLoader.html

<iframe id="ets" style="height:90vh;width:100%"></iframe>
<script type="module">
 import {etsIFrameLoader} from "https://ets.serviceparts24.com/util/etsIFrameLoader.js"
  etsIFrameLoader({
  iFrameID:'ets', //optional default ets
   token:"ihr Token",
   logourl:"ihre Url",
   agburl:"ihre Url",
   strwelcome:"ihr Text",
  })
</script>
ACME Logo