Oletusteemassa on mahdollista näyttää kävijälle ilmoituksia eri tapahtumien yhteydessä.

Perusteet

Ilmoituksia luodaan oletusteeman notifications.js-pluginin avulla.

Plugin vaatii jQueryn toimiakseen. Voit lisätä jQueryn teemaan käyttämällä {SupportScripts}-tagia.

Oletusteemoihin jQuery on lisätty valmiiksi.

Löydät pluginin oletusteeman tiedostosta /scripts/plugins/notifications.js.

Ilmoitusten ulkoasu taas määritellään tiedostossa /styles/scss/common/_notifications.scss.

Ilmoituspluginin avulla ei näytetä {Notifications}-tagin tuottamia ilmoituksia, joten et voi jättää tätä pakollista tagia pois teemasta.

Plugin pyrkii lisäämään ilmoitukset .NotificationCenter-elementtiin. Jos elementtiä ei ole, plugin lisää sen dokumentin loppuun ja tulostaa ilmoitukset siihen.

Ilmoituksien HTML-merkkaus määritellään pluginin JavaScript-tiedostossa.

Ilmoitukset näytetään oletusarvoisesti 5 sekunnin ajan, minkä jälkeen ne poistuvat automaattisesti. Voit säätää tätä aikaa, kun alustat pluginin.

Alla esimerkki pluginin alustamisesta ja ilmoituksien elinajan asettamisesta:

MCF.Notifications.init({
	timeToLive: 500
});

Ilmoitustyypit

Pluginiin kuuluu kolme erilaista ilmoitusfunktiota, joiden tuottamalle merkkaukselle voidaan määritellä yksilölliset ulkoasut:

  • message(html) (neutraali ilmoitus)
  • success(html)
  • error(html)
  • loading(html)

html-parametrin arvoksi annetaan teksti tai HTML-merkkaus, joka ilmoituksessa halutaan näyttää. Lue lisää seuraavasta kappaleesta.

Ilmoituksien näyttäminen

Kun plugin on alustettu, sen avulla julkaistaan ilmoitus antamalla halutulle ilmoitusfunktiolle parametrina julkaistava teksti tai HTML-merkkaus:

MCF.Notifications.success("<strong>Great success!</strong>");

Voit myös hakea tekstin ilmoitukseen teeman kielitiedostosta:

MCF.Notifications.success("<strong>" +
	MCF.Locales.get("greatSuccessText")
+ "</strong>");

Tällöin ilmoituksen teksti näytetään asiakkaan valitseman version kielellä (jos se on lisätty kielitiedostoon kyseisellä kielellä).