PSS Teaser

Beispielanwendung für PSS Teaser mit jQuery und Bootstrap

by lemniscus

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container" style="margin:50px;">
  <div class="card">
    <div class="card-body">
      <p class='lead mt-2 mb-4'>Wann ist der nächste Termin bei mir frei?</p>
      <ul id='termine' class="list-group ">
        <!-- Termine werden hier automatisch eingefügt -->
      </ul>
      <p class='lead mt-5'>Direkt online ein Termin buchen?</p>
      <p>
        Ja, Du kannst bei mit Termine direkt online buchen!
        Damit ich mehr Zeit für Dich habe, erfasse ich über die online
        Terminbuchung deine Kontaktdaten und deine Anschrift.
        Oder du rufst einfach an uns sprichst mir auf Band,
        ich melde mich dann bei dir!
      </p>
    </div>
    <div class="card-body">
      <a id="pssLink" class="btn btn-primary" target="_blank">online Termin buchen</a>
    </div>
  </div>
</div>

JavaScript

const token = 'DEIN_PSS_CODE_AUS_DEN_EINSTELLUNGEN';

$('#pssLink').attr('href', 'https://my.lemniscus.de/pss.html?token=' + token);

$.getJSON(
    'https://my.lemniscus.de/mvc/pss/teaser?token=' + token,
    function(res) {
      if (res.errorMessage) {
        $('#termine').append('<p>Oh-oh: ' + res.errorMessage + '</p>');
      } else {
        res.teasers.forEach(function(t) {
          $('#termine').append(
            '<li  class="list-group-item">' + t.title +
            ' am ' + t.formattedDate +
            ' um ' + t.formattedTime +
            ' Uhr</li>'
          );
        });
      }
    }
  )
  .fail(
    function() {
      $('#termine').append('<p>Fehler beim Laden der Termine</p>');
    }
  );