Neu Evo-Template: Infomessage beim ersten Aufruf einblenden

[Helge77]

Hallo zusammen,

ich würde gerne ein Infofenster einblenden, was bei mir im Shop alles neu im Januar kommt. Dieses Infofenster soll als Modalwindow eingeblendet werden, wenn der User das erste Mal auf den Shop kommt, also entweder Startseite oder auch andere Einstiegsseiten.
Ist sowas möglich und wenn ja wie und wo im Template-Code?

 

[css-umsetzung]

Weil gestern Weihnachten war

Ich habe zwei Sprachvariablen die du im Shop anlegst.
cssModalInfoHeadline = die Überschrift vom Modalen Hinweis
cssModalInfo = der eigentliche Text vom Hinweis.
die Variable timeoutcssModalInfo bestimmt die Zeit wie lange es dauert bis das Fenster angezeigt wird.

ist die Variable cssModalInfo leer wird kein Hinweis erscheinen, änderst du diesen Text, dann bekommt jeder
User diesen Hinweis neu angezeigt, egal ob er 5 Minuten vorher schon einen Hinweis angezeigt bekommen hatte
Nach einem Monat verfällt der Cookie und der Hinweis würde neu angezeigt werden

Die Stylesheets in meinem Code kannst du dann anpassen und in deinen eigenen Stylesheets einfügen.

Binde das hier in einer der immer geladenen tpl Dateien am Ende ein, footer / header / index.tpl egal, am besten ist es du machst dir eine Extra Datei in snippets und includest die dann einfach nur irgendwo im Child template.

{lang key=cssModalInfoHeadline section=custom assign=cssModalInfoHeadline}
{lang key=cssModalInfo section=custom assign=cssModalInfo}
{assign var='cssMD5ModalInfoHash' value=$cssModalInfo|md5}
{assign var='timeoutcssModalInfo' value=1000}

{if !empty($cssModalInfo) && (empty($smarty.cookies.cssModalInfo) || $smarty.cookies.cssModalInfo!=$cssMD5ModalInfoHash)}
    <div class="modal fade" id="cssModalInfo" role="dialog"  >
      <div class="modal-dialog ">
        <div class="modal-content">
         <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">{$cssModalInfoHeadline}</h4>
          </div>
          <div class="modal-body">
          {$cssModalInfo}
          </div>
        </div>
      </div>
    </div>
<script>

function cssDefer(toWaitFor, method) {
  if (window[toWaitFor] && (typeof $().emulateTransitionEnd == 'function') === true && (typeof $().modal == 'function') === true) {
      method();
  } else {
        if(window[toWaitFor]) {
        }
      setTimeout(function () { cssDefer(toWaitFor, method) }, 300);
  }
}

function waitFor() {
    cssDefer('jQuery', () => {
        startCSSModalPopup();   
  });
}

waitFor();

function startCSSModalPopup() {
    console.log("starte meine Funktionen");
    setTimeout(function () { $("#cssModalInfo").modal('show'); }, {$timeoutcssModalInfo});

}

var exdate=new Date();
exdate.setDate(exdate.getDate() + 30);
document.cookie = 'cssModalInfo={$cssMD5ModalInfoHash}; expires='+exdate.toUTCString()+' ; path=/';


</script>

<style>
@media(min-width:1000px) {
    #cssModalInfo .modal-dialog {
        width:800px;
    }
}

#cssModalInfo.modal {
  text-align: center;
  padding: 0!important;
}
#cssModalInfo.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}
#cssModalInfo .modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
</style>
{/if}