Tässä artikkelissa ohjeistetaan ostoskorin sähköpostiin jakamisen toteuttaminen MyCashflow-teemassa.

Johdanto

MyCashflow'ssa verkkokaupan asiakkaat voivat lähettää toisilleen sähköpostiin itse koostamiaan ostoskoreja, jotka vastaanottaja pääsee halutessaan kätevästi suoraan ostamaan sähköpostilinkin kautta.

Jakoilmoitus lähetetään asiakkaalle käyttämällä omaa sivupohjaansa.

Tässä artikkelissa neuvotaan, kuinka ostoskorin jakamiseen tarkoitettuja tageja käytetään, minkä lisäksi annetaan esimerkki jakamisen AJAX-toteutuksesta, jossa sivua ei tarvitse ladata uudestaan.

Jakolomake

Ostoskorin jakamiseen tarkoitetut tagit toimivat globaalisti, eli käytännössä voit toteuttaa jakotoiminnon millä tahansa verkkokaupan sivulla. Useimmiten toiminto kuitenkin sijoitetaan ostoskorisivulle.

Jakamiseen käytettävä lomake tulostetaan {CartShareForm}-tagilla. Usein lomake sijoitetaan modali-ikkunaan, joka avataan erillisen painikkeen avulla. Tämän voit tarvittaessa toteuttaa esim. Colorbox-kirjaston avulla.

Kun lomake lähetetään, vastaanottajan osoitteeseen lähetetään viesti, joka muotoillaan lähetetyn ostoskorin sivupohjan avulla.

Sähköpostiviesti

Lähetetyn ostoskorin sivupohjassa voit käyttää seuraavia tageja, jotka tulostavat jakamiseen liittyviä tietoja:

Viestiin voi olla hyödyllistä lisätä muutakin sisältöä – esimerkiksi mainostettavia tuotteita, tietoa kampanjoista tai alennustuotteita.

Valinnainen JavaScript-koodi

Halutessasi voit lähettää ostoskorin jakolomakkeen AJAX-pyynnöllä palvelimelle, jolloin sivua ei tarvitse ladata uudestaan lähetyksen yhteydessä.

Tämän artikkelin JavaScript-esimerkeissä käytetään jQuery-kirjaston funktioita. Varmista että jQuery on lisätty sivulle, jos käytät tämän artikkelin skriptejä omassa teemassasi.

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

Ohessa malliksi {CartShareForm}-tagin tulostama HTML-lomake, joka lähetetään palvelimelle:

<div class="CartSharing">
    <form action="/cart/send" method="post">
        <div class="FormItem required">
            <label for="CartShareSenderEmail">Your email</label>
            <input type="text" id="CartShareSenderEmail" name="sender_email" size="27" value="">
        </div>
        <div class="FormItem required">
            <label for="CartShareRecipientEmail">Receiver's email</label>
            <input type="text" id="CartShareRecipientEmail" name="recipient_email" size="27" value="">
        </div>
        <div class="FormItem">
            <label for="CartShareMessage">Message</label>
            <textarea id="CartShareMessage" name="message" rows="5" cols="72"></textarea>
        </div>
        <div class="FormItem FormSubmit">
            <button class="SubmitButton" type="submit">Send</button>
        </div>
    </form>
</div>

Lomake lähetetään POST-pyyntönä osoitteeseen /cart/send, joten näitä tietoja käytetään JavaScript-pyynnön luomiseen.

Esimerkissä käytetään serializeObject()-funktiota muuntamaan lomake muotoon, joka voidaan käsitellä palvelimella. Voit kopioida funktion omiin skripteihisi alta:

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
    	if (o[this.name]) {
    		if (!o[this.name].push) {
    			o[this.name] = [o[this.name]];
    		}
    		o[this.name].push(this.value || '');
    	} else {
    		o[this.name] = this.value || '';
    	}
    });
    return o;
};

Alla on JavaScript-koodi, jolla lähetetään AJAX-pyynnön kautta jakoviesti asiakkaalle ja näytetään onnistuneen lähetyksen jälkeen ilmoitus siitä:

/*
* Lähetetään pyyntö jakolomakkeen lähetyspainikkeen painalluksella
*/
$(".CartSharing .SubmitButton").on("click", function(event) {
	event.preventDefault();

	/*
	* Otetaan talteen jakolomake-elementti
	*/
	var $shareForm = $(this).closest("form");

	/*
	* Lähetetään POST-pyyntö
	*/
	$.ajax({
		type: "POST",
		url: "/cart/send",

		/*
		* Käytetään serializeObject-funktiota muotoilemaan data palvelimella
		* käsiteltävään muotoon.
		*/
		data: $shareForm.serializeObject(),
		success: function(data) {
			/*
			* Nyt viesti on lähetetty. Tässä voit esimerkiksi näyttää ilmoituksen
			* onnistuneesta lähetyksestä.
			*/
		}
	});
});