'Reserve and Collect' functionality

Knowledgebase Articles: 'Reserve and Collect' functionality

Reserve Now form on the Product Details page
For some retailers, a Reserve and Collect form may be useful to utilise on the Product Details pages.  In this article, we advise how to apply a Reserve and Collect form, which will launch an email for the customer to send directly, containing all information the customer has specified.

When a visitor enters their contact details and clicks the 'Reserve' button, their email client is launched displaying a "new email" which will contain the following information, ready to be sent:

FirstName=%entered first name% 
Surname=%entered surname% 
Tel. Number =%entered phone number% 
Email =%entered email address% 
Product =%product SKU value% 
URL =%product URL%
collection=%specified store name%

To display this form on the Product Details page, the following steps should be performed:

1. Login to your Swifty platform site, go to > Website > Edit Website

2. Select the Product Details page in the Website Map tree and switch to the Edit Page tab

3. Click on Page Sections to expand the list of all sections, find a HTML page section, drag it to the Product Details page and place it under the Product Details page section

4. Add the code provided below to the HTML page section

//this function will get the variables and pass them to the hidden form fields
function getinfo()
var string=(document.location.href); // get URL to parse product code
var getit= new Array();
var result=getit[1];
document.getElementById("Sku").value = (result);
document.getElementById("url").value = document.location.href;

<body onLoad="getinfo()">
<div style="float: right; width:270px">
<div style="float: left; text-align: center; color: rgb(255, 239, 25); width: 100px; background-color: rgb(18, 69, 126);"><p style="font-size: 14px;">Reserve Now</p></div><br> <div style="width: 250px; border: 3px solid rgb(15, 71, 130); padding: 5px;"> <br>Please fill in this form to reserve this product. More details on <a href="../shop/page/Reserve+and+Collect">Reserve and Collect</a> <br><br> <form name="reserve" 
onLoad="getinfo()" method="POST" action="mailto:sales@mydomain.com?subject=Reserve" enctype="text/plain" > <table cellpadding="5" cellspacing="2">
    <td> Firstname: </td>
    <input name="FirstName" type="text">
    <td> Surname: </td>
    <input name="Surname" type="text">
    <td> Tel. Number: </td>
    <input name="Tel. Number " type="text">
    <td> E-mail Address: </td>
    <input name="Email " type="text">
<input name="Product " id="Sku" value="" type="hidden"> 
<input name="URL " id="url" value="" type="hidden">
<br> <fieldset width="150px"><legend><strong>Collection Point</strong></legend> <table cellpadding="5" cellspacing="0">
    <label><input name="collection" checked="checked" value="Store #1" type="RADIO">Store #1</label>
    <label><input name="collection" value="Store #2" type="RADIO">Store #2</label> </td></tr></tbody></table> </fieldset> <input value="Reserve" type="Submit"> </form>
<!-- END OF FORM -->


You should review the following data within the code and make changes as applicable for your business:

1. Reserve Now - the title of the form
2. Please fill in this form to reserve this product. More details on <a href="../shop/page/Reserve+and+Collect">Reserve and Collect</a> - the text displayed before the input fields
3. <a href="../shop/page/Reserve+and+Collect">Reserve and Collect</a> - a link to the "Reserve and Collect" site page.  Please note, that you will need to chnage the "href" value if corresponding site page has a different name
sales@domain.com - IMPORTANT! you must update the email address to where all Reserve&Collect requests should be sent
5. Reserve - the subject of the email
6. Firstname:, Surname:, Tel. Number:, E-mail Address: - the names of the input fields
7. Collection Point - the title of the radio-button block 
8. Store #1, Store #2 - the "collect" options
9. Reserve - the name of the submit button

5. Create a new Reserve and Collect page with more information on this service 
6. Save the changes
7. Once you've checked that everything works as expected in the site preview, publish the site for the changes to be applied online

A working example of this functionality can be seen at the following site:  http://www.marowntv.im/engine/shop/index.html


Have more questions? Submit a request


Article is closed for comments.