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>
      <p>
        Unsere online Terminbuchung "teasert" die nächsten buchbaren Termine an,
        die wir dann hier automatisch anzeigen. Über die online Terminbuchung bekommst du
        eventuell weitere Vorschläge.
      </p>
      <ul id='termine' class="list-group mb-4 ms-5 me-4">
        <!-- Termine werden hier automatisch eingefügt -->
      </ul>
      <p>
        Neugierig geworden? 
      </p>
      <p>
        Damit ich mehr Zeit für Dich habe, erfasse ich über die online
        Terminbuchung deine Kontaktdaten und deine Anschrift.
        Oder du rufst einfach an und 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">Hier geht es zur online Terminbuchung!</a>
    </div>
  </div>
</div>

JavaScript

const token = 'DEIN_TOKEN_AUS_DEN_EINSTELLUNGEN_HIER_EINFÜGEN';

$('#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) {
         $('<li class="list-group-item"></li>')
        .text(t.title +
            ' am ' + t.formattedDate +
            ' um ' + t.formattedTime +
            ' Uhr'
        
        ).appendTo('#termine'); // append it where you want it
        
        });
      }
    }
  )
  .fail(
    function() {
      $('#termine').append('<p>Fehler beim Laden der Termine</p>');
    }
  );