Tässä artikkelissa käydään läpi ostoskorien palauttamisen perusvaatimukset teemalta sekä mahdollisia erilaisia tapoja toteuttaa ominaisuus.

Tutustu myös käyttöoppaassa ostoskorien palauttamiseen.

Ostoskorien palauttamisen toteuttamiseen teemassa liittyy kaksi komponenttia:

  • Ostoskorien muistutusviestin sähköpostipohja – /themes/email/THEME/cart-recovery.html

    Uusi oletussähköpostiteema MyCashflow 2018 sisältää valmiin sähköpostipohjan. Vanhassa sähköpostiteemassa pohjaa ei ole.

    Jos käytät omaa ostoskorin palauttamisen sähköpostipohjaa, varmista että se toimii hyvin mobiilissa.

  • Lomake, jolla pyydetään asiakkaan sähköpostiosoite muistutusviestin lähettämistä varten.

    Ominaisuus toimii verkkokaupassa ilman lomakettakin, mutta vain tietyissä tapauksissa (lue lisää käyttöoppaassa).

    Lomake lisätään teemaan käyttämällä {CartRecoveryNotificationForm}-tagia.

Mahdollisia toteutustapoja

Tässä kappaleessa käydään läpi erilaisia tapoja toteuttaa ostoskorien palauttaminen kaupan teemassa.

Ei sähköpostin keräyslomaketta tai staattinen lomake

Verkkokaupan ei ole pakko kerätä sähköposteja muistutusviestiä varten erikseen, vaan muistutusviesti voidaan lähettää, jos mikä tahansa lähettämisen ehdoista toteutuu:

  • Asiakas on hyväksynyt toimitusehdot ja edennyt maksuun, mutta ostoskori on silti jäänyt kesken. Maksupalvelussa on tällöin voinut tapahtua virhe, eikä asiakkaan ostoskorista saada luotua tilausta.

  • Sisäänkirjautuneella asiakkaalla on markkinointilupa voimassa, ja hän on käynyt kassalla lisättyään tuotteita ostoskoriin.

  • Asiakas on täyttänyt lomakkeen, jolla ostoskorin muistutusviestin voi tilata (lisättävä teemaan erikseen – lue lisää).

Voit myös lisätä lomakkeen staattisena teemaan, esimerkiksi footeriin, kassalle tai ostoskorisivulle. Tämä on häiriötön ratkaisu, mutta kävijät eivät välttämättä motivoidu antamaan sähköpostiosoitetta.

Popup

Kun lisäät sähköpostin kyselylomakkeen popup-ikkunaan (modaaliin), kävijät huomaavat lomakkeen varmemmin. Tässä kappaleessa käydään läpi lomakkeen lisääminen popupiin Barebones-teemassa.

Popupin lisääminen on toteutettu cart-recovery.js-jQuery-pluginin avulla. cart-recovery.js suorittaa halutun funktion asetetun viiveen perusteella. Viive lasketaan siitä, kun on kävijä on käynyt viimeksi kassalla (ja ostoskorissa on tuotteita) tai siitä kun kävijä on viimeksi muuttanut ostoskorin sisältöä.

Tässä kappaleessa käytetään Barebones-teeman työkaluja.

Voit ladata tässä artikkelissa käytetyn cart-recovery.js-pluginin käyttöösi tämän artikkelin lopusta.

  1. Lisää ensin teemaan cart-recovery.js-plugin ja alusta se.

    Katso tarkemmat ohjeet tämän artikkelin lopusta.

  2. Lisää kauppaan sisältösivu, jossa kehotetaan käyttäjää antamaan sähköpostiosoite.
  3. Lisää teemaan helper-tiedosto helpers/modals/cart-recovery.html.

    Ohessa tässä esimerkissä käytetyn tiedoston sisältö:

    <h1>{InfoPageTitle}</h1>
{InfoPageText}
{CartRecoveryNotificationForm}
  4. Hae sisältösivun sisältö modaaliin cart-recovery.js-pluginin alustuksessa.

    showRecovery()-koukkufunktion sisältö suoritetaan, kun pluginille määritelty viiveaika on kulunut. Tässä esimerkissä kävijälle näytetään modaalissa teeman tiedosto helpers/modals/cart-recovery.html, jossa näytetään sisältösivun tietoja (id 12).

    MCF.CartRecovery.init({
	showRecovery: function () {
		$.magnificPopup.open({
			type: 'ajax',
			closeBtnInside: false,
			items: { src: '/interface/Helper?file=helpers/modals/cart-recovery&infopage=12' },
			callbacks: {
				parseAjax: function (mfpResponse) {
					mfpResponse.data = $('<div class="mfp-ajax-content" />').append(mfpResponse.data);
					return mfpResponse;
				}
			}
		});
	}
});

Alla näet esimerkin modaalissa näytettävästä sisältösivusta ja sähköpostilomakkeesta.

Modaalin avaaminen kävijän poistuessa on aggressiivinen strategia, joka voi ärsyttää kävijöitä. Joissain tapauksissa tämä voi toimia, mutta on myös riski että kävijä hylkää sivuston lopullisesti.

Kun käytät teemassa suoraan Magnific Popupin funktioita, niihin ei oletusarvoisesti sovelleta modals.js-pluginin ulkoasutyylejä. Saat tyylit kuitenkin käyttöön lisäämällä modalille wrapperin <div class="mfp-ajax-content">

cart-recovery.js-plugin

Tässä kappaleessa käydään läpi cart-recovery.js-pluginin lisääminen teemaan.

cart-recovery.js suorittaa halutun funktion asetetun viiveen perusteella. Viive lasketaan siitä, kun on kävijä on käynyt viimeksi kassalla (ja ostoskorissa on tuotteita) tai siitä kun kävijä on viimeksi muuttanut ostoskorin sisältöä.

Sijoita skriptitiedosto samaan paikkaan muiden teeman skriptien kanssa. Näin teeman ylläpito helpottuu jatkossa.

Plugin vaatii jQueryn toimiakseen. Voit lisätä jQueryn teemaan käyttämällä {SupportScripts}-tagia. Oletusteemoihin jQuery on lisätty valmiiksi.

  1. Lisää alla oleva pluginin lähdekoodi teemassa tiedostoon scripts/plugins/modals/cart-recovery.js.
    ;(function ($) {
	'use strict';

	var KEY_PREFIX = 'mcf.cartRecovery.';
	var RECOVERY_SHOWN_KEY = KEY_PREFIX + 'recoveryShown';
	var ITEMS_COUNT_KEY = KEY_PREFIX + 'itemsCount';
	var ITEMS_CHANGED_KEY = KEY_PREFIX + 'itemsChanged';
	var CHECKOUT_VISITED_KEY = KEY_PREFIX + 'checkoutVisited';

	var defaults = {

		/* Sekuntimääräinen aika, jonka jälkeen suoritetaan showRecovery()-funktio */
		maxIdleSeconds: 30,
		showRecovery: function () {},
	};

	var CartRecovery = {
		init: function (options) {
			var config = $.extend({}, defaults, options);

			this._helper = config.helper;
			this._showRecoveryCallback = config.showRecovery;
			this._recoveryShown = this._loadKey(RECOVERY_SHOWN_KEY) || false;
			this._maxIdleSeconds = config.maxIdleSeconds * 1000;

			if (this._recoveryShown) {
				return;
			}

			var self = this;
			this._fetchItemsCount()
				.then(function (newItemsCount) {
					
					var oldItemsCount = self._loadKey(ITEMS_COUNT_KEY);
					var itemsChanged = self._loadKey(ITEMS_CHANGED_KEY);
					
					if (window.location.href.match(/\/checkout\//)) {
						self._saveKey(CHECKOUT_VISITED_KEY, true);
					} else if (self._loadKey(CHECKOUT_VISITED_KEY)) {
						self._showRecovery();
					} else if (itemsChanged) {
						self._startIdleTimer();
						self._saveKey(ITEMS_COUNT_KEY, newItemsCount);
					} else if (newItemsCount && oldItemsCount !== newItemsCount) {
						self._startIdleTimer();
						self._saveKey(ITEMS_COUNT_KEY, newItemsCount);
						self._saveKey(ITEMS_CHANGED_KEY, true);
					}
				});
		},

		_showRecovery: function () {
			this._showRecoveryCallback();
			this._recoveryShown = true;
			this._saveKey(RECOVERY_SHOWN_KEY, true);
		},

		_saveKey: function (key, value) {
			window.sessionStorage.setItem(key, value);
		},

		_loadKey: function (key) {
			return JSON.parse(window.sessionStorage.getItem(key));	
		},

		_fetchItemsCount: function () {
			return $.get('/interface/CartTotalItems')
				.then(function (res) {
					return parseInt(res);
				});
		},

		_startIdleTimer: function () {
			var self = this;
			this._idleTimer = window.setTimeout(function () {
				self._showRecovery();
			}, this._maxIdleSeconds);
		},

		_stopIdleTimer: function () {
			window.clearTimeout(this._idleTimer);
		}
	};

	$.extend(true, window, { MCF: { CartRecovery: CartRecovery }});
})(jQuery);

    defaults-objektissa voit asettaa sekuntimäärän, jonka jälkeen plugin suorittaa haluamasi koodin showRecovery()-funktiossa.

  2. Varmista että plugin ladataan helpers/scripts.html-tiedostossa.
    {MinifyJS(
	mode: 'development',
	support_scripts: 'true',
	files: '
		vendor/jquery/jquery.js|
		vendor/jquery.finger/dist/jquery.finger.js|
		vendor/hc-sticky/jquery.hc-sticky.js|
		vendor/magnific-popup/dist/jquery.magnific-popup.js|
		vendor/slick-carousel/slick/slick.js|
		scripts/locales.js|
		scripts/theme.js|
		scripts/plugins/cart.js|
		scripts/plugins/cart-recovery.js|
		scripts/plugins/checkout.js|
		scripts/plugins/drawers.js|
		scripts/plugins/images.js|
		scripts/plugins/klarna-checkout.js|
		scripts/plugins/loaders.js|
		scripts/plugins/modals.js|
		scripts/plugins/navigations.js|
		scripts/plugins/notifications.js|
		scripts/plugins/search.js|
		scripts/plugins/sliders.js|
		scripts/plugins/spinners.js|
		scripts/plugins/tabs.js|
		scripts/plugins/variations.js|
		scripts/custom.js'
)}
  3. Lopuksi alusta plugin teeman scripts/custom.js-tiedostossa.

    Alustuksessa määritellään koodi, jonka plugin suorittaa showRecovery()-funktiossa viiveajan kuluttua.

    MCF.CartRecovery.init({
	showRecovery: function () {
		$.magnificPopup.open({
			type: 'ajax',
			closeBtnInside: false,
			items: { src: '/interface/Helper?file=helpers/modals/cart-recovery&infopage=12' },
			callbacks: {
				parseAjax: function (mfpResponse) {
					mfpResponse.data = $('<div class="mfp-ajax-content" />').append(mfpResponse.data);
					return mfpResponse;
				}
			}
		});
	}
});

    showRecovery()-koukkufunktion sisältö suoritetaan, kun pluginille määritelty viiveaika on kulunut. Tässä esimerkissä kävijälle näytetään modaalissa teeman tiedosto helpers/modals/cart-recovery.html, jossa näytetään sisältösivun tietoja (id 12).

Aiheeseen liittyviä artikkeleja