Sivu joka korvaa tavallisen kassasivun, kun tilauksen maksutavaksi on valittu Klarna Checkout.
Kuvaus
Klarna Checkoutin sivupohjat eivät ole käytössä uudessa Klarna Checkout v3:ssa.
Voit kuitenkin räätälöidä uutta Klarna Checkout -kassaa värien osalta.
Klarna Checkout on päivitetty uuteen v3-versioon kaikissa MyCashflow-verkkokaupoissa 15.12.2020.
Sivulta on hyvä löytyä ainakin seuraavat elementit:
- Toimitustavan valintalista (oma ratkaisu Klarnan kassaa varten)
- Esikatselu ostoskorin sisällöstä (käytä tarvittavia ostoskorien tageja)
- Kuponkikoodin syöttölomake
- Tilauksen kommenttikenttä
- Maksutapojen valintalista (jos käytössä muita maksutapoja).
Tältä sivulta kävijä ohjataan Klarna Checkout -kiitossivulle.
Sivupohjan ominaisuudet
- Sivupohjan sijainti
- themes/shop/THEME/checkout/klarna-checkout.html
- Sivupohjan URL
- /checkout/klarna/
- Asetettu näkyvyys
Toteutus oletusteemassa
{Helper(
file: 'checkout/header',
or: '<h1>Header not found. Add header to "/checkout/header.html"</h1>'
)}
<div id="MultiPageCheckout" class="clearfix BlockForm">
<div id="KlarnaCheckoutWrapper">
<fieldset id="KlarnaCheckoutShippingInformation">
{KlarnaCheckoutShippingInformation(
before: '
<h2><span class="KlarnaStages">1. </span>{%CheckoutChooseShippingMethod}</h2>
<p>{%KlarnaCheckoutShippingHelp}</p>'
)}
</fieldset>
<h2><span class="KlarnaStages">2. </span>{%CheckoutPreviewOrder}</h2>
<div id="PreviewContent">
{Helper(file:'helpers/klarna-preview')}
</div>
<div id="SubmitCampaignCode" data-helper="klarna-preview" data-view="checkout">
{CampaignCode(
mode: 'auto',
action: 'checkout',
notifications: 'true',
ajax: 'true'
)}
</div>
<p id="CommentFieldReveal"><a href="#comment">{%KlarnaCheckoutAddComments}</a></p>
<div class="FormItem" id="SubmitOrderComment">
<label for="OrderComments">{%AddComment}</label>
<textarea name="details" id="OrderComments" rows="5" cols="72">{CartComment}</textarea>
</div>
<h2><span class="KlarnaStages">3. </span>{%KlarnaCheckoutFinishAndPay}</h2>
{CheckoutPaymentMethods(
exclude: 'current',
before: '
<ul id="KlarnaOtherPaymentMethods" class="clearfix">
<li class="Current"><a href="#KlarnaCheckoutTab">{CartPaymentMethod}</a></li>
<li><a href="#SelectOtherPaymentMethodTab">{%KlarnaCheckoutChooseOtherPaymentMethod}</a></li>
</ul>
<div id="SelectOtherPaymentMethodTab" class="PaymentTab">
<form action="/checkout/" method="post">
<fieldset id="CheckoutPaymentMethods">
<p>{%KlarnaCheckoutOtherPaymentMethodIntro}</p>
',
after: '
</fieldset>
<div class="FormItem FormSubmit">
<button type="submit" class="SubmitButton">{%KlarnaCheckoutChangePaymentMethod}</button>
</div>
</form>
</div>
<div id="KlarnaCheckoutTab" class="PaymentTab">
<p>{CheckoutPaymentMethodDescription}</p>
{KlarnaCheckout}
</div>
',
or: '
<p>{CheckoutPaymentMethodDescription}</p>
{KlarnaCheckout}
'
)}
</div>
</div>
<script type="text/javascript">
// Making the Klarna Checkout more plug and play.
// Adding of essential scripts and dictionary variables.
(function() {
function contentLoaded(win, fn) {
/*!
* contentloaded.js
*
* Author: Diego Perini (diego.perini at gmail.com)
* Summary: cross-browser wrapper for DOMContentLoaded
* Updated: 20101020
* License: MIT
* Version: 1.2
*
* URL:
* http://javascript.nwbox.com/ContentLoaded/
* http://javascript.nwbox.com/ContentLoaded/MIT-LICENSE
*
*/
// @win window reference
// @fn function reference
var done = false, top = true,
doc = win.document,
root = doc.documentElement,
modern = doc.addEventListener,
add = modern ? 'addEventListener' : 'attachEvent',
rem = modern ? 'removeEventListener' : 'detachEvent',
pre = modern ? '' : 'on',
init = function(e) {
if (e.type == 'readystatechange' && doc.readyState != 'complete') return;
(e.type == 'load' ? win : doc)[rem](pre + e.type, init, false);
if (!done && (done = true)) fn.call(win, e.type || e);
},
poll = function() {
try { root.doScroll('left'); } catch(e) { setTimeout(poll, 50); return; }
init('poll');
};
if (doc.readyState == 'complete') fn.call(win, 'lazy');
else {
if (!modern && root.doScroll) {
try { top = !win.frameElement; } catch(e) { }
if (top) poll();
}
doc[add](pre + 'DOMContentLoaded', init, false);
doc[add](pre + 'readystatechange', init, false);
win[add](pre + 'load', init, false);
}
}
var MIN_JQUERY_VERSION = 1.7;
function loadScript(scriptSrc, callback) {
var script = document.createElement('script');
script.src = scriptSrc;
script.async = false;
script.onload = script.onreadystatechange = function() {
if (typeof jQuery === 'undefined') {
// Polling for IE7.
var timer = null;
var timeout = setTimeout(function () {
clearInterval(timer);
}, 10000);
timer = setInterval(function () {
if (typeof jQuery === 'function') {
clearTimeout(timeout);
clearInterval(timer);
callback && callback();
}
}, 250);
} else {
callback && callback();
}
};
document.getElementsByTagName('head')[0].appendChild(script);
};
// Loads jQuery on demand.
function loadJqueryDeps() {
var mcf = window.mcf || {};
mcf.Lang = mcf.Lang || {};
mcf.Lang.CommentSaved = '{\%CheckoutSuccessCommentSaved}';
var jqueryDefined = (typeof jQuery !== 'undefined');
if (!jqueryDefined || parseFloat(jQuery.fn.jquery) < MIN_JQUERY_VERSION) {
// Load jQuery first, then load Klarna.
loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', loadKlarnaDeps);
} else {
// Load Klarna.
loadKlarnaDeps();
}
}
// Loads Klarna plugin on demand.
function loadKlarnaDeps() {
if (typeof mcf.initKlarnaCheckout !== 'function') {
loadScript('{ThemeUrl}/js/mcf.klarnacheckout.js', function() {
mcf.initKlarnaCheckout();
});
} else {
mcf.initKlarnaCheckout();
}
}
contentLoaded(window, loadJqueryDeps);
})();
</script>
{Helper(
file:'checkout/footer',
or: '<h1>Footer not found. Add footer to "/checkout/footer.html"</h1>'
)}