tob4biruslide

Add Custom E-mail Checkout Form

Go to Pages > Add Page > Blank Page > write the page title like so " Checkout " (without quotes).

Click HTML > copy below code to the Blogger editor body:-

<div class="simpleCart_items"> </div> 
<div id="cartTotal">  
<div class="total_quantity"> You have <strong><span class="simpleCart_quantity"></span></strong> items in cart.</div>  
<div class="total_amount"> Total Amount in Cart: <strong><span class="simpleCart_total"></span></strong></div>  
</div>  
<div class="clear"> </div> 
 <br />  
<form action="" id="contact" method="post">  
<fieldset>  
<label for="firstname">First Name</label>  
<input id="first_name" name="firstname" placeholder="First Name" title="Enter your First Name" type="text" /> <br /> <br />  
<label for="lastname">Last Name</label>  
<input id="last_name" name="lastname" placeholder="Last Name" title="Enter your Last Name" type="text" /> <br /> <br />  
<label for="email">Your E-mail</label> <input id="email" name="email" placeholder="yourname@domain.com" title="Your e-mail address" type="text" /> <br /> <br />  
<label for="phone">Phone @ H/P</label> <input id="phone" name="phone" placeholder="Preferred mobile number" type="text" /> <br /> <br />  
<label for="delivery_address">Your Delivery Location ?</label> 
<select id="deliveryLocation">  
<option selected="selected" value="Not_Selected"> - Select Delivery Location - </option>  
<option value="5"> Peninsular Malaysia </option>  
<option value="9"> Sabah or Sarawak </option>  
<option value="25"> Others </option> 
</select>  
<br /> <br />  
<label for="address">Delivery Address</label>  
<textarea id="address" name="address" placeholder="Full address please for prompt delivery, include unit number, street, area, state and country."></textarea> <br /> <br />  
<label for="postcode">Postal Code</label>  
<input id="postcode" name="postcode" placeholder="Address postal code" type="text" /> <br /> <br />  
<label for="message">Your Message</label>  
<textarea id="comments" name="message" placeholder="Optional"></textarea> <br /> <br />  
Further details will be sent to you automatically via e-mail. We hope you had a great experience here at our store. We look forward for your next visit. Thank You. <br /> <br /> <span style="float: right; font-size: 85%; margin-left: 2%; width: 48%;"> Please read through on our <a alt="terms and policy" href="http://goirsah.blogspot.com/p/policy.html"><strong>Terms and Policy</strong></a> for purchase orders submission. All details submitted are kept confidential and will not be published. </span>  
<a class="simpleCart_checkout button turquoise" href="javascript:;"><span class="checkout_btn">Send Order</span></a>  
</fieldset>  
</form>

Now click Save and if satisfied click Published.

Custom checkout page

You can check your setting by clicking the checkout link in the shopping cart tab (top right). We have already included for you the correct page links.

Shopping cart features and checkout

If it does not, please check your Page title (as stated above) or in Dashboard pages click view for your checkout page.

A sample link will look ike so:-

http://your>blog_name.blogspot.com/p/checkout.html

If failure, replace the steps above and use a new Blank Page setting.

Customize Your Delivery Charges Options

You can customize your delivery price in the codes above by changing the pieces of codes below:-

<select id="deliveryLocation">  
<option selected="selected" value="Not_Selected"> - Select Delivery Location - </option>  
<option value="5"> Peninsular Malaysia </option>  
<option value="9"> Sabah or Sarawak </option>  
<option value="25"> Others </option>
</select> 

You can set a flat rate base on customer selection during checkout and it will be calculated/added with selected products in shopping cart.

To change the value for a certain delivery charge, change the value="5" (in this theme equals MYR 5) to whatever velue you wish ie value="8", value="12" etc.

You can also change the text displays in the select button just after the value "number" text field.

If a customer select a specific delivery location, the value will be included and calculated with the items selected and also calculated in the e-mail invoice GRAND TOTAL field.

Important, please do not change the classes assign with the form field as it is required for simplecart to work..

A sample view of the e-mail invoice sent via this form will look like so:-

Checkout automated e-mail invoice example

Customizing Your Automated Invoice Sent Data

The codes stored for sending data to e-mail invoice is located at the footer of the theme template.

Go to Template > Edit HTML > scroll down until the bottom of theme template. You will find code snippets like so:-

data.shop_name = "Your Blog Shop Name"; 
data.shop_url = "http://my-blogshop-tool.blogspot.com"; 
data.shop_thankyou = "http://my-blogshop-tool.blogspot.com/p/thank-you.html"; 
data.shop_email = "your_blogshop_email@gmail.com"; 
data.shop_currency = "RM "; 

data.shop_bizname = "Your BlogShop Sdn. Bhd"; 
data.shop_bizaddress = "Kuala Lumpur, Malaysia"; 
data.shop_bizphone1 = "017-361 8321"; 
data.shop_bizphone2 = "013-361 8321"; 
data.shop_bizphone3 = "016-361 8321"; 

data.bank1 = "MYBANK";
data.bank1_acc_no = "1234 1234 1111 22"; 
data.bank1_acc_name = "John Jane"; 
data.bank2 = "Bank Commerce"; 
data.bank2_acc_no = "1234 1234 1111 22"; 
data.bank2_acc_name = "Jane Doe"; 
data.bank3 = "Central Bank"; 
data.bank3_acc_no = "1234 1234 1111 22"; 
data.bank3_acc_name = "John Doe"; 

data.note1 = "Our PAYPAL secured gateway at http://www.your_PAYPAL_secured_link.com"; 
data.note_detail1 = "Our Google Wallet secured payment gateway at http://www.your_GOOGLEWallet_secured_link.com"; 
data.note2 = "Altenative Our merchant MYBANK2PAY at:"; 
data.note_detail2 = "http://www.your_MYBANK2PAY_secured_payment_link.com";

The title is self explanatory You can change the text fields inside the '' '' quotes section to your blocgshop/admin settings. Changes here will automatically displays in the automated e-mail invoicing.

A sample e-mail notifier / invoice will look like below:-

Example customer automated invoice e-mail from Blog Store

E-mail notification settings

To change your blogshop name edit here:-

data.shop_name = "Your Blog Shop Name";

To change your blogshop URl edit here:-

data.shop_url = "http://your_blogshop_URL";

Change  redirect to thank you page edit this line:-

data.shop_thankyou = "http://your_blogshop_URL/p/thank-you.html";

NEW - Auto Redirect to Custom Error Page
Now add this piece of code below the code above:-

data.shop_sendFail = "http://your_blogshop_URL/p/error-page.html";

Now you can change the URL in between the "quotes" to your own created Custom Error Page. Any invalid e-mail entered by user/s will re-direct to this page/URL. An example tutorial is included in theme Tips and Tutorial category..


Change this line for your auto e-mail notification:-

data.shop_email = "your_blogshop_email@gmail.com";

IMPORTANT: Please use a valid e-mail to redirect the mail to you shop mail. Currently we have issues with Yahoo and MSN mail providers for heavy filtering. It is best to use Gmail e-mail accounts.


Change the currency in the e-mail data here:-

data.shop_currency = "RM "; // current setting is RInggit Malaysia

Your Business Particulars

Change your business name here:-

data.shop_bizname = "Your BlogShop Sdn. Bhd"; 

Change your business address here:-

data.shop_bizaddress = "Kuala Lumpur, Malaysia"; 

Change your business telephone number here:-

data.shop_bizphone1 = "017-361 8321"; // Preferred Handphone number  
data.shop_bizphone2 = "013-361 8321"; 
data.shop_bizphone3 = "016-361 8321";

Funds Transfers

There are 3 data that can be included in the e-mail body for your blogshop banking transfers details. A sample will look like so:-

data.bank* = "MYBANK"; // Your Bank  
data.bank*_acc_no = "1234 1234 1111 22"; // your bank account 
data.bank*_acc_name = "John Jane"; // Name stated with account

Change the fields to your preference.

Additional Data

We've also included additional data space for you to include as reference to your customer. To customize, the codes as per below:-

data.note1 = "Include additional data 1"; 
data.note_detail1 = "Include your additional data 2"; 
data.note2 = "Include your additional data 3"; 
data.note_detail2 = "Include your additional data 4";

IMPORTANT

All fields must be filled with relevant data. If you have not fill any part of the data as above, e-mail error will occur ie. lines not rendering, e-mail not sending etc.

To start your test e-mail, the e-mail address you're sending is NOT the same address as your blogshop e-mail. Please provide different e-mail addresses to re-create a Users use.

You can also have your personal reference by sending a false checkout through this theme checkout page here http://my-blogshop-gallery. blogspot.com/p/checkout.html

Make sure you pick a few items > click checkout > and include your own e-mail addresss to retrieve an example e-mail straight to your inbox.

Custom Thank You Page for Auto E-mail Redirects

You can create a personal thank you page by going to Pages > Add Page > Blank Page.

At the title area write " Thank You " (without quotes).

Copy the below pieces of codes in Blogger editing HTML mode:-

<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<div style="text-align: left;">
<h2>
Success Submission!</h2>
</div>
An automated e-mail notification is sent to you for your reference. Please check your e-mail inbox for purchase order details and banking transaction options.</div>
<div>
Thank you again for your purchase and support!.<br />
<br />
Our Malaysian banking and payment merchant partners:<br />
<br />
<div style="text-align: left;">
<table cellpadding="10">
 <tbody>
<tr>
  <td><img border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid9TyIbgKXmciIbXpLA0r_MJIhiTzITue_SaklRMx9-YTOL33RnQyGU2ID49y_kyh4YE_uvseK_z5Kj2tryDEQPT4VW1uD-OQU4xSghyphenhyphenzD-yD7Qwd7q_mtqKfav0uQ00l0t3VqG40Ovj4e/s200/cimb-clicks.jpg" width="200" />
  </td>
  <td><img border="0" height="43" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm9l1ZskFTUhHUArdcXhxJJ7qAxWdlvboMlqxqTRE8C58jim58SY3so9brzo38Ovy_I_Dce2_u89cWfORcQ0w6W0W_8PyCXkpNFL6krGeMemgWF07w0Z7t41YsoKQ_2sQmBq0biWD8RI95/s200/images.jpg" width="200" />
  </td>
  <td><img border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglBEYaEhOQMPtrdWhTZWjRZ4R1JhonloSRR1uBqubYsBfd-MWiFBHS-Wf00jvdL0xBat_iBSX6S29rLfZjYiMzHXzgTZWxJ0J9Z6gHnLjlPYVOuVU9ReGWhI00nWmmdjMX9zmcWu2qPOP1/s200/bank+islam2.png" width="200" />
  </td>
 </tr>
<tr> 
  <td><img border="0" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj1wNUNPCYItsfKFeFBDxPcOV06NYb9erhaFnzGG5J_UE4XkF1NMC9Hy0gqoGPZaNfp7KX2DdStYVA4GoipVlqWdEdk_jum20J6Tr3kbYjNA9jDe6N_hpxzLLqyuAUxs0P0Mzwvv5Hd53d/s200/PayPal-logo-1.png" width="200" />
  </td>
  <td><img border="0" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN6Th54wUhY4oZUM-mvFqQOPJ2G6iNrHF2qUhyphenhyphenxptQW8tAqDUKHD17A-JaMGYWZSxay9FEBYWAzcw8F3TQ4lEAium4k4Oxl1-Tqiq1K6A65ohqqC-qGKzwLJJ00uHU79ip6n3shDpk2T8b/s200/Google-Wallet.png" width="200" />
  </td>
  <td><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib1JCwF5nwQbJ-2uM1CDUD5v_WN3hQJdBXU4gLSLRj1F3xYjOOi44SWILhoA-R9mCOrABJjKPxFLDh0C-Q4dyJ_yEI_Z_HttJZxFrWNa5IEQ3w5bg92CBCYazQAlYXtSo8HsScNmDrWmRi/s200/easy-by-RHB.png" width="200" />
  </td>
 </tr>
<tr>
  <td><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbThnGafQ4KyQ95kmNPD9NhRDzl7ujJ25zXjPf-aAgCWEujtLipyHWVihgFqVmWHdpX7OtOAR8W9Esz3JuwIKVEpcvmhHQ3u1fOCpqv2p4FU8Fiux12M0glTjWqaMquhPGImOhvPUDyiIa/s320/public-bank-western-union.gif" width="200" />
  </td>
  <td><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwDg5b7MA9xtYAGrtnlqYmdj8pZn5K2xGWHHoZjCtbhnQpd3R_qdQvLsy-LgGBPME5blxACQ4-9wIv_EVlu0qm5zbYgOemQh6LbVLym9rpPWniEfyeWs0vJ6t1lKSFIxSsNi5hlBR3EY8F/s1600/jawatan-kosong-bsn.jpg" width="200" />
  </td>
  <td><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijZZ_xjDcbOPv_L3GDPyLcsiMfBb7RaRUmKdWpvneXfLOuZGNTnwjX_pXEdEC6A035Rqg2SDL4HQIUyX9wJ4q359cR1jvVmI-LLAuIbh6dLP3DbY6VelKKBSC6qwaqfjPyvkODIuFOTPye/s1600/logo+ambank.jpg" width="200" />
  </td>
 </tr>
</tbody>
</table>
</div>
</div>

Customize as you wish as this is just a sample template we are sharing with you to quickly build a personalized thank you page.

BlogrShop redirects to thank you page

Add Featured Homepage Slider

We have already included the nescessary javascript codes for the homepage slider.

Go to layout > find Hompage Slider widget > click Edit > copy blow pieces of codes.

<div class='fp-slider clearfix'>
<div class='fp-slides-container clearfix'>
<div class='fp-slides'>

<!-- Slide 1 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif1jDovmYnRxC879MRebqABr-kjVUd3v78qc6jmmCr5Ez4kVar9CjW57Mw95SVVfLXuKrObi6zSfPhHECH9siokLvwrqh59852JbhfPJgjuVSe0R4l1x_Qs-V23eSQB2jctwi8EDIJO0vM/s1600/sazzy4.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='/'>Place Your Title Here</a>
</h3>
<p>
Slider image courtesy http://sazzyfalak.com.</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 1 Code End -->

<!-- Slide 2 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg73Acx2tq84oBrerx3Jm6vJ7gQTWQWwxA6DaD0xYjWnex_niopa5Ay8aa957QwA4nW_6_xN2vb5BJ3wODxi8iy1S8x4IqK-UeUE8dMcjoae7xqOJ6DDQv4P2d3GPXI-HH0VRj-sdK0jrD3/s1600/sazzy3.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='/'>Place Your Title For Image Two Here</a>
</h3>
<p>
Slider image courtesy http://sazzyfalak.com.</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 2 Code End -->

<!-- Slide 3 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXnsQ0gVHCf4oo2wnQtuNuVAz5p1vHa6sLRryIaEL5tAVQENBvHvi0k411lkWqBxQF_zuFMsb1Ra7_cIbB9ic4I3LZVHcIWGcbhd3VwxovobK30O3BmjIny7CLn7AbRw0DBh7DbcTjnRWN/s1600/sazzy1.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='/'>Place Your Title For Image Three Here</a>
</h3>
<p>
Slider image courtesy http://sazzyfalak.com.
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 3 Code End -->

<!-- Slide 4 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioJ-1c38OMTbgGDU9NjkJGhysAHAoEuon7IspFiEn7sdDA-VCJsY1JXziaxAqNNsSVMfjEmcJW6rY4Q2A9jWqBU-ilygl13gkqLc0OeQNcEYcbfGiqExMwiBfeT6MMfy2E90mCUt8LOlEk/s1600/sazzy2.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='/'>Place Your Title For Image Four Here</a>
</h3>
<p>
Slider image courtesy http://sazzyfalak.com.</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 4 Code End -->

</div>
<div class='fp-nav'>
<span class='fp-pager'/>
</span></div>
</div>
</div>
<div style='clear:both;'/></div>

We have indicated the codes per slider image. To change the Url to link to for the slider, edit this code:-

<a href='/'>

Please include a full url for your links to work.


To change an image find this code:-

<a href='/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioJ-1c38OMTbgGDU9NjkJGhysAHAoEuon7IspFiEn7sdDA-VCJsY1JXziaxAqNNsSVMfjEmcJW6rY4Q2A9jWqBU-ilygl13gkqLc0OeQNcEYcbfGiqExMwiBfeT6MMfy2E90mCUt8LOlEk/s1600/sazzy2.jpg'/></a>

Change the " img src "  to your prefered uploaded image. For this template it is preferred an image with 1300px in width and 380px in height.


To change the title and link to for the image captions, find this code:-

<h3 class='fp-title'>
<a href='/'>Place Your Title For Image Four Here</a>
</h3>

Replace the " href='insert your URL here'  " and the custom title right after but before the </a> tags.


To change the slider image caption description, find these codes

<p>
Slider image courtesy http://sazzyfalak.com.</p>

Change the text to your liking.

After you're done, click Save Widget > Save Arrangement > click Preview to preview your edits.

> Insert Your Password Here <

Detailed Blogger template auto e-mail invoice customization available

End of BlogrShop responsive Blogger store general installation guide. Feel free to ask for any questions.

Wait there's more. Edit the built in responsive social bookmark links for BlogerShop Blogger template. Here's the link to the tutorial to easily edit your social media profile pages http://blog.irsah.com/2013/05/blogrshop-template-custom-social.html

AUGUST 2013 UPDATE

At the bottom of BlogrShop Responsive free e-commerce template codes, find these line of code like below:-

<script type='text/javascript'>
//<![CDATA[
simpleCart({
    checkout: {
      type: 'SendForm',
      //url: 'http://blogshop-cart.net76.net/sendcart.php',
      method: 'POST',
      currency: 'MYR',
      extra_data: {
        first_name: document.getElementById('first_name').value,
        last_name: document.getElementById('last_name').value,
        email: document.getElementById('email').value,
        phone: document.getElementById('phone').value,
        deliveryLocation: document.getElementById('deliveryLocation').value,
        address: document.getElementById('address').value,
        postcode: document.getElementById('postcode').value,
        comments: document.getElementById('comments').value
        }
     }
});
//]]>
</script> 

Now change to the UPDATED CODES as below:-

<script type='text/javascript'>
//<![CDATA[
simpleCart({
    checkout: {
// Simplecart checkout type
      type: 'SendForm',
// Shopping cart plug-in e-mail invoice validation / sending processor
     url: 'http://www.irsah.com/phpmail/checkout.php',
// Shopping cart plug-in data transfer method
      method: 'POST',
// Shopping cart currency checkout setting
      currency: 'MYR',
      extra_data: {
        first_name: document.getElementById('first_name').value,
        last_name: document.getElementById('last_name').value,
        email: document.getElementById('email').value,
        phone: document.getElementById('phone').value,
        deliveryLocation: document.getElementById('deliveryLocation').value,
        address: document.getElementById('address').value,
        postcode: document.getElementById('postcode').value,
        comments: document.getElementById('comments').value
        }
     }
});
//]]>
</script>