Page Comparison

Verkkokaupan sivuille lisättävällä erämaksulaskurilla ostaja voi kätevästi vertailla erilaisia maksusuunnitelmia, ja voit näyttää tuotesivulla alkaen-hinnan. Voit myös lisätä erämaksulaskurin ostoskoriin, jolloin ostaja voi suunnitella maksuaikataulua etukäteen ennen maksamiseen siirtymistä.

...

Jos et luo erämaksulaskurin “pohjaa” Extranetissä, niin voit halutessasi käyttää alla olevaa ohjetta erämaksulaskurin luomiseen.

Scriptiin voi määritellä seuraavat arvot (lihavoidut ovat pakollisia), arvojen tulee olla lainausmerkeissä:

• src= host-osoite: "https://payments.maksuturva.fi/tools/partpayment/partPayment.js"

• class="svea-pp-widget-part-payment"

• data-sellerid= ko. verkkokaupan Svea Payments -palvelun seller id

• data-layout= voit määritellä käytettäväksi laskurin miniversion, joka näyttää tarvittavat tiedot pienemmässä tilassa, mutta ei ole brändättävissä omilla väreillä. Jos haluat käyttää miniversiota, aseta tähän arvo “mini”.

• data-price= tuotteen hinta, joka välitetään laskuriin kaupasta.

  • Kentän voi jättää myös tyhjäksi, eli tämä arvo ei ole pakollinen - jos arvoa ei ole annettu, laskuri näyttää hinnan syöttökentän, johon käyttäjä voi syöttää haluamansa summan ja vertailla sille maksuaikoja.

• data-locale= laskurin kieli, vaihtoehdot “fi” (suomi) / “sv” (ruotsi) / “en” (englanti)

• data-border-radius= reunaviivan paksuus pikseleinä, esim. "12px"

• data-active-color= aktiivisen tekstin väri HEX-värikoodina, esim. "#00AECE"

• data-text-color= tekstin väri HEX-värikoodina, esim. "#212121"

• data-highlight-color= korostusväri HEX-värikoodina, esim. "#002C50"

• data-border-color= reunaviivan väri HEX-värikoodina, esim. "#DEE1EC"

• data-campaign-text-fi= kampanjateksti suomeksi, joka näkyy laskurin yläreunassa.

  • Muut kielivaihtoehdot ovat data-campaign-text-sv (ruotsi) / data-campaign-text-en (englanti)

• data-fallback-text-fi= teksti, joka näkyy virhetilanteessa.

  • Muut kielivaihtoehdot ovat data-fallback-text-sv (ruotsi) / data-fallback-text-en (englanti)

• data-threshold-prices= voit määritellä, mikä maksuaika/kampanja näytetään oletusarvoisesti eri hinnoilla.

  • Esimerkiksi asetus "[[500, 6], [1000, 12], [1500, 24]]" tarkoittaa, että yli 500 euron tuotteilla näytetään oletusarvoisesti 6 kk maksuaika, yli 1000 euron tuotteilla 12 kk maksuaika, yli 1500 euron tuotteilla 24 kk maksuaika.

  • Jos haluat että yllä esimerkissä olevat oletusmaksuajat näytetään esimerkiksi 500 euron ja sen yli menevillä tuotteilla, 1000 euron ja sen yli menevillä tuotteilla sekä 1500 euron ja sen yli menevillä tuotteilla, tulee hinnat määritellä näin (eruon pienemmiksi): "[[499, 6], [999, 12], [1499, 24]]"

Svea Part Payment widget

Widget that shows part payment calculator.

...

Updating price and payment plan calculations

...

<!-- // Part Payment Calculator - create element - BEGIN -->
<script>
// Section 1 - Selectors to get: price (from the meta property in the page source)
//                               quantity (from a field)
var price_selector = document.querySelector('meta[property="og:price:amount"]').content;
var qty_selector = document.querySelector('[name="quantity"]');

// Change event listener to calculate total price when quantity is changed
if (qty_selector) {
  qty_selector.addEventListener("change", (e) => {
    var pp_price = "" + calculatePPTotalPrice();
    document.dispatchEvent(new CustomEvent("svea-partpayment-calculator-update-price", { "detail": { "price": pp_price } }));
  }, false);
}

function calculatePPTotalPrice() {
  var pp_price = price_selector.content;
  pp_price = parseFloat(preformatFloat(pp_price));

  // If quantity exists, multiply price with it
  if (qty_selector) {
    var pp_qty = qty_selector.value;
    if (pp_qty)
      pp_price = parseFloat(pp_price * preformatFloat(pp_qty));

  }

  return pp_price;
}

function preformatFloat(e){if(!e)return"";let r=e.indexOf(",");if(-1===r)return e;let t=e.indexOf(".");return -1===t?e.replace(/\,/g,"."):r<t?e.replace(/\,/g,""):e.replace(/\./g,"").replace(",",".")}

function generatePPCalculator() {
  var pp_price = calculatePPTotalPrice();

  // Section 2 - create Part Payment Calculator Script
  const sppScript = document.createElement("script");
  sppScript.src = "https://payments.maksuturva.fi/tools/partpayment/partPayment.js";
  sppScript.setAttribute('class', 'svea-pp-widget-part-payment');
  sppScript.setAttribute('data-sellerid', '<instertsellerid>');
  sppScript.setAttribute('data-price', pp_price);
  sppScript.setAttribute('data-locale', 'fi');
  //sppScript.setAttribute('async', '');
  sppScript.onload = () => {
    document.dispatchEvent(new CustomEvent("svea-partpayment-calculator"));
  };
  
  // Section 3 - Insert Part Payment Calculator - after product-form & before description
  var insertElement = document.getElementsByClassName("product-form")[0];
  insertElement.parentNode.append(sppScript);
}

window.onload = generatePPCalculator();
</script>
<!-- // Part Payment Calculator - create element - END -->

...