• › Ohjeet ja tuki
  • Ylläpitäjän ohjeet
  • Suunnittelijan ohjeet
  • Integraatio-opas
  • Perusteet
  • Sivupohjat
  • Tagit
  • Ohjeet
  • Barebones-teema
Näytä sivukartta
  • Oletusteeman CSS-gridi
  • Oletusteeman JavaScript-pluginit
  • Värivariaatiot
  • Typografia
  • Kielitiedosto
  • Ilmoitukset
  • Latausanimaatiot
  • Modaali-ikkunat
  • Drawer-elementit
  • Slider-elementit
  • Välilehdet (tabs)
  • Lomakkeet
  • Haku
  • Tuoteryhmänavigaatio
  • Tuotelistat
  • Tuotekuvat
  • Ostoskori
  • Yhden sivun kassa

Latausanimaatiot

/Barebones-teema/Latausanimaatiot

Voit näyttää Barebones-teeman työkalujen avulla latausanimaatioita, jotka ovat erityisen hyödyllisiä AJAX-toimintojen suorittamisen aikana. Tässä artikkelissa ohjeistetaan latausanimaatioiden käyttäminen.

Latausanimaatioiden esittämiseen käytetään oletusteeman loaders.js-pluginia. Plugin on erityisen hyödyllinen AJAX-toimintojen yhteydessä, jolloin voit näyttää latausanimaation, kun AJAX-pyyntöä suoritetaan.

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

Oletusteemaan jQuery on lisätty valmiiksi.

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

Loaderien ulkoasu määritellään tiedostossa /styles/scss/modules/_loaders.scss ja niiden HTML-merkkaus pluginin JavaScript-tiedostossa.

Loader lisää tarvittavan elementin päälle overlay-elementin. Kun haluttu toiminto on suoritettu, overlay voidaan poistaa elementin päältä.

Esimerkiksi kun muutat ostoskorin sisältöä cart.js-pluginin avulla, on usein hyödyllistä käyttää AJAX-kutsujen aikana latausanimaatiota:

MCF.Cart.init({
	beforeAddProduct: function ($buyForm) {
		MCF.Loaders.show($(".MiniCart"));
	},
	afterAddProduct: function ($buyForm) {
		MCF.Cart.updateCart($(".MiniCart"));
		MCF.Loaders.hide($(".MiniCart"));
	}
});

Esimerkissä sijoitetaan ennen pluginin show()-funktion avulla overlay ostoskorin esikatselun päälle, ennen kuin tuote lisätään ostoskoriin. Kun tuote on lisätty, päivitetään ostoskorin sisältö ja poistetaan overlay sen päältä hide()-funktion avulla.

Pääaihe: Barebones-teema

Aiheeseen liittyviä sivuja

  • Haku
  • Yhden sivun kassa
  • Latausanimaatiot
  • Modaali-ikkunat
  • Verkkokaupan perustaminen
  • Ominaisuudet
  • Palvelut
  • Ulkoasu
  • Hinnasto ja avaus
  • Referenssit
  • Kumppanit
  • Tietoturva
  • Ohjeet ja tuki
  • Usein kysytyt kysymykset
  • MyCashflow blogi
  • Tilaa uutiskirje

info@mycashflow.fi
0600 16101
(1,92 €/min sis. alv)
Tarkemmat yhteystiedot

© Pulse247 Oy / MyCashflow | Palvelun käyttöehdot | Rekisteriseloste | Tietoa evästeiden käytöstä | Status