Hinweisbox bei Aufruf einer Seite / Layer für Aktionen

Veröffentlichungsdatum: 06. April 2020
Änderungsdatum: 07. Juni 2024

weblication cms fancybox hinweisbox layer popup pop-up pop up aufrufe info vorschalten störer popup

Aktionen oder wichtige Ereignisse nach dem Seitenaufruf einer Seite vorschalten.

Aktionen oder wichtige Ereignisse lassen sich z.B. über einen Layer anzeigen, welche nach dem Seitenaufruf (z.B. der Startseite) der eigentlichen Seite "vorgeschaltet" wird.

Tipp

Bei aktuellen BASE Projekten können Sie hierzu auf Standardmittel zurückgreifen, womit Sie direkt unten im entsprechenden Abschnitt starten können.

Allgemein / BASE Classic

Eine Möglichkeit, eine Fancybox beim Aufruf einer Seite anzuzeigen, ist der Einsatz eines ausgeblendeten Links (über display:none), welcher über JavaScript nach dem Laden der Seite (DOM fertig aufgebaut) aufgerufen wird:

Fügen Sie dazu ein Link-Element (oder Bild-Element bzw. HTML Quelltext-Element) in die Seite ein und vergeben für das A-Tag bzw. IMG-Tag einen Namen (z.B. callFancy). Über eine style- bzw. class-Angabe setzen Sie das Element auf nicht sichtbar / unsichtbar. Bedenken Sie beim Einsatz eines Link-Elementes, daß Sie für den Editor die Anzeige aktivieren (z.B.: .weditor .elementLink_var10000     {display:block;} ).

Nachfolgend der Einfachheit halber beispielhaft über ein HTML Quelltext-Element umgesetzt:

Beispiel: Quelltext Element mit Definition eines ausgeblendeten Links

<a style="display: none;" target="fancy" name="callFancy" href="https://www.weblication.de/?viewmode=blank" class="box">Weblication</a>

Nach diesem Element fügen Sie ein "Javascript einbinden" Element ein und setzen z.B. folgenden JavaScript-Code:

Beispiel: JavaScript-Element mit Funktion zum Aufruf des Links als Fancybox

$(document).ready(function () {
  var callFancy = jQuery('a[name="callFancy"]');
  callFancy.hide();
  callFancy.trigger('click');
});

Dieses Beispiel wurde auf Grundlage eines BASE Classic Projektes getestet und nutzt zum Link target- und class-Angaben, welche in der design.js bereits für die Fancybox vorgesehen sind.
Das Beispiel kann individuell für das gewünschte Vorhaben abgeändert werden.
Achten Sie beim Einsatz von Bildern, daß diese ohne lazyload umgesetzt sind und somit sofort geladen werden.

Störer / Hinweis-Seite in Mobile First

Einbindung über eine Inhaltsbox

Mit der Inhaltsbox-Variante 540 ("Hinweis als Infolayer mittig einblenden") erreichen Sie das Ziel mit Standard-Mitteln.

Achten Sie beim Einsatz von Bildern, daß diese ohne lazyload umgesetzt sind und somit sofort geladen werden. Im Bild-Element nutzen Sie hierzu die Untervariante 71 ("Bild nicht erst laden, wenn im Anzeigebereich"), welche Sie ggf. noch installieren müssen.

Einbindung über JavaScript

Möglichkeit 1: JavaScript einbinden Element

In einem aktuellen BASE (Mobile First) Projekt können Sie einfach das "JavaScript einbinden" Element/Weblic® verwenden und darüber folgende JS-Syntax eintragen:

Beispiel: Auszug aus einem JavaScript einbinden Element

jQuery(document).ready(function () {
  var optionsLightbox = {'variant':'box', 'href' :  '/de/hinweis.php'};
  return wLightbox('undefined', typeof(optionsLightbox) != 'undefined' ? optionsLightbox : {});
});

Wichtig:
Im JavaScript-Element sollten Sie über die Auswahlbox "Hier einbinden" wählen.
Zudem sollten Sie das zentrale jquery.js Skript referenzieren, was Sie über das Feld "Pfade der JavaScript Dateien" vornehmen können.

/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/scripts/jquery.js

Pfade sind entsprechend Ihren Projektpfaden anzupassen.

Gekoppelt an einen Bedingten Container können Sie diesen Eintrag auch an eine Zeit koppeln.

Möglichkeit 2: Einbinden über design.js

Eine Möglichkeit der Umsetzung einer Hinweismeldung/-box kann auch der Weg über die design.js sein.

Beispiel: Auszug aus der design.js zum onReady-Event

// ...
jQuery(document).ready(function(){

  // ...
  
  if(!sessionStorage.getItem('preContainerClosed')){

    jQuery('#blockHeader').prepend('<div id="preContainer"><div id="preContainerContent">Rufen Sie uns an!</div><div id="preContainerCloser">x</div></div>');

    jQuery('#preContainerCloser').on('click', function(){jQuery('#preContainer').remove();sessionStorage.setItem('preContainerClosed', true);});

  }
  
});
// ...

Beispiel: Auszug aus additional.scss zu JS-Umsetzung

#preContainer {
  width:100%;
  border:1px solid orange;
  background-color:tomato;
  color:#FFFFCC;
  padding:12px;
  margin:0 auto;
  text-align:center;
  
  #preContainerContent {
    display:inline-block;
    text-align:center;
    width:50%;
  }
  #preContainerCloser {
    display:inline-block;
    float:right;
    margin:0 0 0 12px;
  }
}
Weblic: HTML Quelltext
Weblic: JavaScript Quelltext
FAQs
Was ist eine Hinweisbox bzw. ein Layer für Aktionen nach dem Seitenaufruf?
Eine Hinweisbox oder ein Layer für Aktionen zeigt nach dem Seitenaufruf (z. B. direkt nach dem Laden der Startseite) zusätzliche Aktionen oder wichtige Ereignisse an. Technisch wird dabei häufig ein Layer „vorgeschaltet“, der auf die eigentliche Seite geladen wird.
Wie kann ich eine Fancybox beim Seitenaufruf anzeigen (BASE Classic)?
Eine Möglichkeit ist, einen ausgeblendeten Link (z. B. per display:none) in die Seite einzufügen und ihn nach dem Laden der Seite per JavaScript zu triggern. Dazu wird ein Element (A-Tag/IMG-Tag/Quelltext-Element) mit einem eindeutigen Namen versehen, per CSS unsichtbar gemacht und nach DOM-Fertigstellung per jQuery ein Klick-Event ausgelöst.
Welche Schritte sind erforderlich, um den ausgeblendeten Fancybox-Link korrekt zu nutzen?
1) Fügen Sie ein Link-Element (oder Bild-/HTML-Quelltext-Element) ein. 2) Vergeben Sie für das A-Tag bzw. IMG-Tag einen Namen (z. B. „callFancy“). 3) Setzen Sie das Element auf nicht sichtbar (z. B. style="display: none;"). 4) Bedenken Sie beim Einsatz eines Link-Elements: Für den Editor muss die Anzeige ggf. aktiviert werden (z. B. per *.weditor .elementLink_var... {display:block;}*). 5) Triggern Sie den Link nach document ready per JavaScript.
Welche JavaScript-Logik wird im Beispiel verwendet, um die Fancybox auszulösen?
Im Beispiel wird in jQuery(document).ready() das Element über seinen Namen gesucht und per Klick-Trigger aktiviert. Zusätzlich wird es per hide() vorbereitet und anschließend per trigger('click') ausgelöst, damit die Fancybox-Funktion greift.
Worauf sollte ich beim Einsatz von Bildern achten (z. B. bei Hinweisboxen oder Layern)?
Die Beispiele empfehlen, Bilder ohne lazyload umzusetzen, damit sie sofort geladen werden. Im Bild-Element wird dazu die Untervariante „Bild nicht erst laden, wenn im Anzeigebereich“ genutzt (ggf. muss diese Variante erst installiert werden).
Wie erreiche ich das Ziel „Hinweis als Infolayer mittig einblenden“ mit Standardmitteln?
Nutzen Sie in der Inhaltsbox-Variante 540 („Hinweis als Infolayer mittig einblenden“). Das ist eine Standard-Variante, um die Hinweisbox als Infolayer mittig einzublenden.
Wie kann ich eine Hinweis-Seite in „Mobile First“ über JavaScript einbinden?
In einem aktuellen Projekt können Sie das „JavaScript einbinden“-Element/Weblic® verwenden und darüber eine wLightbox-Logik starten. Beispielhaft wird dabei eine Options-Variable für den Typ (z. B. 'variant':'box') und den Ziel-Link (href) gesetzt und anschließend wLightbox aufgerufen.
Welche wichtigen Einstellungen muss ich im „JavaScript einbinden“-Element beachten?
Im JavaScript-Element sollten Sie über die Auswahlbox „Hier einbinden“ wählen. Außerdem müssen Sie das zentrale jquery.js Skript referenzieren, was über das Feld „Pfade der JavaScript Dateien“ erfolgt. Der Pfad muss entsprechend Ihrem Layout-/Projektpfad angepasst werden.
Kann ich die Einbindung zusätzlich an einen Zeitpunkt bzw. Bedingung koppeln?
Ja. Der zentrale Eintrag kann laut Hinweis auch an einen bedingten Container gekoppelt werden, wodurch sich der Eintrag ggf. zusätzlich an eine Zeit koppeln lässt.
Wie kann ich eine Hinweismeldung/-box alternativ über die design.js umsetzen?
Eine alternative Umsetzung ist der Weg über die design.js. Dabei wird im onReady-Event (jQuery(document).ready(function(){ ... })) z. B. geprüft, ob der Hinweis bereits geschlossen wurde, und anschließend wird der Hinweis-HTML-Block in das DOM eingefügt. Beim Klick auf den „Closer“ wird der Block entfernt und eine Session-Storage-Variable gesetzt.
Wozu wird sessionStorage in der design.js-Beispielumsetzung verwendet?
sessionStorage wird genutzt, um zu merken, ob der Nutzer den Pre-Container/Hinweis bereits geschlossen hat. Wenn der Eintrag nicht vorhanden ist, wird der Hinweis eingefügt; nach dem Schließen wird ein Wert gesetzt, sodass der Hinweis beim nächsten Seitenaufruf nicht erneut erscheint.