Ostoskorin jakamisen toteuttaminen 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:

• {CartShareLink}: Tulostaa linkin jaettuun ostoskoriin.
• {CartShareSenderEmail}: Tulostaa ostoskorin jakamisessa käytetyn lähettäjän sähköpostiosoitteen.
• {CartShareMessage}: Tulostaa viestin joka ostoskorin jakamislomakkeelle on jätetty ostoskoria jakaessa.

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ä.

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.

$.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ä.
			*/
		}
	});
});