Implementing shopping cart sharing in a theme

Introduction

In MyCashflow, online store customers can send their shopping carts to others by email and the contents of the shopping cart can be then conveniently purchased directly via link included in the email.

The notification about the shared shopping cart is sent by using a separate template.

This article describes how to use tags for shopping cart sharing and also shows a sample AJAX implementation that does not require page reload.

Sharing form

Tags for shopping cart sharing work globally which means that the sharing functionality can be implemented on any of the online store's pages. However, the function is most often implemented on the shopping cart page.

The sharing form is printed by using the {CartShareForm} tag. The form is often placed in a modal window, which is opened with a separate button. If necessary, it can be implemented e.g. with the Colorbox library.

When the form is submitted, the addressee is sent a message which is formatted with the shopping cart sharing template.

Email message

In the shopping cart sharing template, you can use the following tags that print sharing-related information:

• {CartShareLink}: Prints a link to the shared shopping cart.
• {CartShareSenderEmail}: Prints the sender email address used for sharing the shopping cart.
• {CartShareMessage}: Prints the message left in the form for shopping cart sharing when the cart was shared.

You may also want to add other contents to the message – such as featured products, information about campaigns or products on sale.

Optional JavaScript code

Optionally, you can send the form for shopping cart sharing with an AJAX request to the server, so that the page does not have to be reloaded afterwards.

Below you can see a sample HTML form printed by the {CartShareForm} tag that is sent to the server:

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

The form is sent as a POST request to the address /cart/send, and the same information is used to create a JavaScript request.

$.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;
};

Below you can see a JavaScript code that uses an AJAX request to send a message about a shared shopping cart to the customer and shows a success notification afterwards:

/*
* A request to share a form is sent by pressing the submit button
*/
$(".CartSharing .SubmitButton").on("click", function(event) {
	event.preventDefault();

	/*
	* Elements of the sharing form are saved
	*/
	var $shareForm = $(this).closest("form");

	/*
	* A POST request is sent
	*/
	$.ajax({
		type: "POST",
		url: "/cart/send",

		/*
		* The serializeObject function is used to format the data on the server
		* into processable form.
		*/
		data: $shareForm.serializeObject(),
		success: function(data) {
			/*
			* The message is sent. Here you can display, for example, a notification
			* that the message was sent successfully.
			*/
		}
	});
});