Tutorial: Ein (Corner) Popup in Contao umsetzen

Im heutigen Tutorial zeige ich dir, wie du mit minimalem Aufwand ein Corner Popup (einen Hinweis z. B. unten rechts) in Contao erstellst, das nach dem Schließen für die Dauer der Session oder eine festgelegte Anzahl an Tagen ausgeblendet wird.

Marketing-Menschen wollen sie, Seitenbesucher:innen eher weniger. Gemeint sind die Hinweise, die sich entweder vollflächig über die Website legen (wirklich nervige Popups) oder am Rand der Website (weniger nervig) erscheinen und auf eine Aktion, den Newsletter oder eine Umfrage hinweisen.

Für einen unserer Kunden bekamen wir die Anforderung, einen Hinweis einzubauen, der zur Teilnahme an einer Umfrage motiviert. Da es sich dabei um ein gemeinnütziges Unternehmen handelt, möchte die Unternehmensleitung mehr über die Seitenbesucher:innen, ihre Motivation und ihr Nutzerverhalten erfahren.

Aber auch bei unserem kostenlosen Contao Theme OPTIMIST haben wir einen solchen Hinweis bereits umgesetzt. Und wenn du ebenfalls ein benutzerfreundliches Popup in Contao umsetzen möchtest, dann ist dieses Tutorial genau richtig für dich.

1. Hinweis anlegen

Zunächst legen wir ein Frontend-Modul mit dem Titel „Popup“ vom Typ „Eigener HTML-Code“ an. Für unser Beispiel möchte ich auf die Teilnahme an einer Umfrage hinweisen und verwende folgenden Code: 

<div class="popup">
  <div class="popup__header">
    <div>Helfen Sie uns, besser zu werden!</div>
    <button class="popup__close">✕</button>
  </div>
  <div class="popup__content">
    <p>
      Ihre Meinung ist uns wichtig.<br>Beantworten Sie 5 kurze Fragen.
    </p>
    <div class="popup__button">
      <a href="#" target="_blank">Zur Umfrage</a>
    </div>
  </div>
</div>

2. Popup gestalten

Unser Popup soll auf Smartphones unten über die komplette Breite und auf größeren Bildschirmen in der unteren rechten Ecke angezeigt werden.

Die folgenden SCSS-Anweisungen sind für das LASR Contao Theme optimiert, können aber mit wenigen Anpassungen auch ohne Theme eingesetzt werden.

//
// COMPONENTS/POPUP
// --------------------------------------------------
// animation: von rechts reinfahren
@keyframes slide-in {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

// popup gestaltung
.popup {
  position: fixed;
  z-index: 2;
  background: var(--color-brand-primary);
  inset: auto 0 0 auto;
  color: var(--color-text-inverted, #fff);
  margin: 0;
  max-width: 90%;
  width: 28rem;
  border-radius: var(--base-border-radius, 4px) 0 0 0;
  padding: var(--base-spacing-unit, 1rem);
  display: none;
  animation: slide-in 0.5s forwards;

}

.popup__header {
  font-weight: var(--headings-font-weight, 700);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--base-spacing-unit, 1rem);
}

.popup__close {
  position: absolute;
  top: var(--base-spacing-unit, 1rem);
  right: var(--base-spacing-unit, 1rem);
  color: inherit;
  background: transparent;
  border: none;
  padding: 0;
  outline: none;
}

.popup__content {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gutter);

  p {
    &:last-of-type {
      margin-bottom: 0;
    }
  }

  @include media-query(screen-md) {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.popup__button {
  a {
    --button-color-secondary: #fff;
    
    @extend %button;
    @extend %button--secondary;
  }
}

.popup--visible {
  display: block;
}

3. Pop-Funktionalität über Javascript ergänzen

Im letzten Schritt ergänzen wir noch die Funktionalitäten des Popups. Das Popup soll sich durch das X schließen lassen und entweder bis zum Ende der Session oder für eine bestimmte Zahl von Tagen ausgeblendet werden.

// popup.js
const popup = document.querySelector(".popup");
const closePopupButton = document.querySelector(".popup__close");
const storage = sessionStorage; // sessionStorage = nur solange der Tab offen ist. 
// localStorage = dauerhaft,  bis der Eintrag gelöscht wird;
const timeToDisplay = 5; // Zeit bis zur Einblendung in Sekunden
const daysToHide = 3; // bei localStorage, die Anzahl der Tage bis zum erneuten Einblenden

// Funktion zum Anzeigen des Dialogs
const showPopup = () => {
  setTimeout(() => {
    popup.classList.add("popup--visible");
  }, timeToDisplay * 1000);
};

// Überprüfen, ob das Popup angezeigt werden soll
const shouldShowPopup = () => {
  const statusClosed = storage.getItem("popupClosed");
  if (statusClosed && storage == sessionStorage) {
    return false;
  }
  
  // Prüfen, ob per Link-Klick für X Tage ausgeblendet
  if (statusClosed && storage == localStorage) {
    const now = new Date();
    const closedAt = new Date(statusClosed);
    const daysPassed = (now - closedAt) / (1000 * 60 * 60 * 24);

    if (daysPassed < daysToHide) {
      return false;
    } else {
      // X Tage sind vergangen, localStorage-Eintrag löschen
      storage.removeItem("popupClosed");
    }
  }
  
  return true;
};

// Popup anzeigen, falls erlaubt
if (shouldShowPopup()) {
  showPopup();
}

// Wenn der Benutzer den Close-Button klickt
closePopupButton.addEventListener("click", () => {
  popup.classList.remove("popup--visible");
  storage.setItem("popupClosed", new Date().toISOString());
});

Weitere Optionen könnten sein, dass das Popup auch ausgeblendet wird, wenn die Person den Button zur Teilnahme an der Umfrage klickt oder ein Ausblenden-Effekt, wenn das Popup geschlossen wird.

Hast du Fragen oder Anmerkungen zur Erstellung eines Popups in Contao? Schreib uns gerne eine Nachricht.