Käyttöönotto

MaksuPaikan käyttöön on kaksi vaihtoehtoista tapaa.

Yksinkertainen

Kun haluat lisätä Tilaa heti -painikkeen yhdelle tai useammalle tuotteelle.

Katso ohjeet

tai

Edistynyt

Kun sinulla on paljon tuotteita tai haluat ottaa käyttöön ostoskori-toiminnon.

Katso ohjeet

Muut ohjeet

Omien tilauslomake-kenttien validointi

Yksinkertainen

Kun haluat lisätä Tilaa heti -painikkeen yhdelle tai useammalle tuotteelle.

1 Syötä tuotetiedot

Kirjaudu sisään maksupaikkaan.

Siirry Products-osioon

Lisää uusi tuote ja syötä vähintään tuotteen nimi ja hinta. Sen jälkeen tallenna tuotetiedot.

2 Luo Tilaa heti -painike

Klikkaa tuoterivin oikeasta reunasta Action-sarakkeesta nuoli-kuvaketta.

Valitse painikkeen tyypiksi Tilaa heti -painike

Syötä painikkeen tai linkin teksti

Valitse tyyli: Joko muotoilematon teksti-linkki tai valmiiksi muotoiltu painike.

3 Lisää Tilaa heti -painike sivustollesi

Laita rasti kohtaan Add Initializion Script

Valitse koko koodi-kentän sisältö ja kopioi se leikepöydällesi.

Siirry verkkosivusto sisällönhallintaan ja avaa sivu jolle haluat osto-painikkeen lisätä muokkaus-tilaan.

Valitse näkymä josta pääset muokkaamaan sisällön lähdekoodia ja siirrä kursori lädekoodikentän loppuun. Liitä koodi leikepöydältä kenttään. Tämän jälkeen voit palata takaisin normaaliin muokkausnäkymään ja siirtää painikkeen haluamaasi kohtaan sisältökenttää.

4 Valmista!

Kun tallennat muutokset, ostopainike pitäisi näkyä sivustolla. Jos koodi ei tule näkyviin, kannattaa varmistaa verkkosivutoimittajaltasi että javascript-upotusten lisäämistä sisältökenttiin ei ole estetty. Jos se on estetty, voit pyytää verkkosivutoimittajasi lisäämään maksupaikan alustuskoodin kiinteästi sivustosi sivupohjaan niin että se on käytössä kaikilla sivuilla.

Eikö onnistu? Maksupaikan avaimet käteen -asennuspalvelu 249 €.

Tilaa tästä!

Edistynyt

Kun sinulla on paljon tuotteita tai haluat ottaa käyttöön ostoskori-toiminnon.

1Lisää sivustollesi MaksuPaikan alustuskoodi

Lisää alustuskoodi jokaiselle sivulle, jossa Maksupaikkaa käytetään. Paras paikka koodille on body-elementin lopussa eli juuri ennen </body>-tagia. Yleensä koodi tarvitsee sijoittaa vain yhteen template-tiedostoon, jota käytetään sivuston jokaisella sivulla. Alustuskoodin saat kopioitua Maksupaikka-palvelun aloitussivulta (Dashboard).

Alla esimerkki alustuskoodista. Huomaa, että koodissa tulee olla oikea customer_id, jotta se toimii.

<!-- Initialization script -->
<script type="text/javascript">
<!--//--><![CDATA[//><!-- var _maksupaikka_conf = {customer_id: "TÄHÄN ASIAKAS_ID"}; (function() { var _mp = document.createElement("script"); _mp.type = "text/javascript"; _mp.async = true; _mp.src = ("https:" == document.location.protocol ? "https://" : "http://") + "cashier.maksupaikka.fi/maksupaikka.js";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_mp, s); })(); //--><!]]>
</script>

2Lisää sivustollesi ostoskori

Lisää allaoleva koodi sivurakenteeseen paikkaan, johon haluat ostoskorin sijoittaa. Ostoskori on hyvä olla näkyvissä koko ajan samalla paikalla, jotta käyttäjä löytää sen helposti.

Ostoskorin summa: <span class="maksupaikka-total"></span><br />
<a href="#" class="maksupaikka-checkout maksupaikka-default-button">Siirry maksamaan</a>

Voit muokata ostoskorin tekstejä ja ulkoasua halutessasi. Huomaa, että ensimmäinen rivi, joka tulostaa ostoskorin summan, ei ole toiminnan kannalta välttämätön.

3Syötä tuotetiedot Maksupaikkaan

Lisää myytävät tuotteet Maksupaikan Products-osiossa. Jokaisesta tuotteesta on annettava vähintään tuotteen nimi ja hinta.

4Luo tuotteiden Lisää ostoskoriin -koodit ja lisää ne sivustollesi

Tuotekohtaisen Lisää ostoskoriin -koodin saat Maksupaikan Produts-osiosta. Klikkaa tuoterivin oikeasta reunasta Action-sarakkeesta nuoli-kuvaketta. Valitse linkin tyypiksi "Add to Cart". Syötä linkin teksti ja valitse tavallinen linkki tai painike. Alustuskoodia (Initializion Script) ei tarvita, koska se lisättiin sivustolle kohdassa 1.

Koodi voisi näyttää vaikka tältä:

<!-- Button -->
<a class="maksupaikka-add-to-cart maksupaikka-default-button" href="#" data-maksupaikka-product="c3662b1f-9dea-40eb-8db5-7d7498f75344">Lisää ostoskoriin</a>

Valitse ja kopioi koodikentän sisältö ja lisää koodi sivustollesi kyseessä olevan tuotteen yhteyteen.

5Valmista tuli!

Tarvitsetko apua? Maksupaikan avaimet käteen -asennuspalvelu 249 €.

Tilaa tästä!

Omien tilauslomake-kenttien validointi

Tilauslomakkeen kentät tilauslomakkeella ovat asiakaskohtaisia syötekenttiä, ja niiden validointi täytyy tehdä sen vuoksi sivustolla. Tässä esimerkkinä valmiit validointifunktiot jotka voit lisätä sivustolle esimerkiksi omaan javascript-tiedostoon.

function validointi() {
	   MaksuPaikka.validate("nimi",function(nimi) {
		   if (nimi) {
			   return true;
		   } else {
			   return "Ole hyvä ja täytä Nimi-kenttä.";
		   }
	   });
	   MaksuPaikka.validate("osoite",function(osoite) {
		   if (osoite) {
			   return true;
		   } else {
			   return "Ole hyvä ja täytä Osoite-kenttä.";
		   }
	   });
	   MaksuPaikka.validate("postinumero",function(postinumero) {
		   if (postinumero && parseInt(postinumero, 10) > 0) {
			   return true;
		   } else {
			   return "Ole hyvä ja täytä tai korjaa Postinumero-kenttä.";
		   }
	   });
	   MaksuPaikka.validate("postitoimipaikka",function(postitoimipaikka) {
		   if (postitoimipaikka) {
			   return true;
		   } else {
			   return "Ole hyvä ja täytä Postitoimipaikka-kenttä.";
		   }
	   });
	   MaksuPaikka.validate("puhelinnumero",function(puhelinnumero) {
		   if (puhelinnumero) {
			   return true;
		   } else {
			   return "Ole hyvä ja täytä Puhelinnumero-kenttä.";
		   }
	   });
}

Tämän lisäksi pitää Maksupaikan alustuskoodiin lisätä luodun validointifunktion pyyntö. Tämä tapahtuu lisäämällä _maksupaikka_conf muuttujaan määritys "on_ready: validointi". Esimerkki:

var _maksupaikka_conf = {customer_id: "tässä_oma_customer_id", on_ready: validointi};