1.0 Download &Install TemplateDownload FREE Version here Download FREEMIUM VERSION
Download PRO version here Download PRO VERSION [FULL]
UNZIP & upload using Blogger dashboard > Template > Backup/Restore > at Upload a template from a file on your hard drive. > click the Choose File button. Once success, preview your new template.
To allow this theme display correctly in mobile screens, turn off Blogger default mobile theme by going to Settings, Mobile section, click the Gear button & select No. Show desktop template on mobile devices. , Then click Save.
More options (PRO Themes) to allow responsive image gallery pop over toggling turn off Blogger default zoom at Settings > Basic > Turn Off/Don't Show image zoom.
2.0 Install Pre-made PagesFor BlogrCart Closet PRO users, the template files comes with license, template file & theme Pages. PRO users can build quickly sample Product Pages including the Send Order page, Success page & Error handling Page. In addition this tutorial is also included for references & future usages.
Upload the file title BlogrCart-Closet-PAGES-MASTER-V-1-0.xml at Settings, Other & Import Blog link, find the file in your computer & upload accordingly making sure the Automatically publish all imported posts and pages is ticked/selected.
3.0 Install Pages3.1 Send Order PagePRO users can skip this section.
Go to Pages > Add a Page and at the Title field type in Send Order & click Save. Then click the HTML tab (far left at editor) and copy paste below codes to the editor body.
<div class="row">
<div class="col-sm-4 col-md-push-8">
<div class="panel panel-default" id="summary">
<div class="panel-heading">
<h4>Order Summary</h4>
</div>
<div class="panel-body">
<small>Below is your order summary & totals.</small>
</div>
<div class="table-responsive">
<table class="table">
<tbody>
<tr><th>Description</th><th>Amount</th></tr>
<tr><td>Quantity in Cart</td><td><span class="simpleCart_quantity"></span></td></tr>
<tr><td>Amount</td><td><span class="simpleCart_total"></span></td></tr>
<tr><td>Tax</td><td><span class="simpleCart_tax"></span></td></tr>
<tr><td>Shipping/Delivery</td><td><span class="simpleCart_shipping"></span></td></tr>
</tbody>
</table>
</div>
<div class="panel-footer">
Total Orders for Today: <strong><span class="simpleCart_grandTotal"></span></strong>
</div>
</div>
</div> <!-- //end col-sm-4 -->
<div class="col-sm-8 col-md-pull-4">
<form action="" id="contact" method="post" name="contact" role="form">
<div class="panel panel-default">
<div class="panel-heading">
<a class="btn btn-default pull-right" data-target="#blogrcart-view-modal" data-toggle="modal" href="javascript:;"><i class="fa fa-shopping-cart"></i> View Shopping Cart</a>
<h3 style="margin: 0;">Send in Orders</h3>
<small>Details submitted here will not be published.</small>
</div>
<div class="panel-body">
<div class="form-group ">
<label for="first_name">First Name</label>
<input class="form-control" id="first_name" name="first_name" placeholder="Required" type="text" /> </div>
<div class="form-group">
<label for="last_name">Last Name</label>
<input class="form-control" id="last_name" name="last_name" placeholder="Required" type="text" />
</div>
<div class="form-group">
<label for="email">Your E-mail</label>
<input class="form-control" id="email" name="email" placeholder="Required" type="email" />
</div>
<div class="form-group">
<label for="phone">Phone @ H/P</label>
<input class="form-control" id="phone" name="phone" placeholder="Required" type="tel" /> </div>
<div class="form-group">
<label for="address">Delivery Address</label>
<textarea class="form-control" id="address" name="address" placeholder="Required" rows="5"></textarea>
</div>
<div class="form-group">
<label for="postcode">Postal Code</label>
<input class="form-control" id="postcode" name="postcode" type="text" />
</div>
<div class="form-group">
<label for="message">Your Message</label>
<textarea class="form-control" id="message" name="message" placeholder="Optional" rows="5"></textarea>
<span class="helper-block text-info small">Please include additional messages to us here.</span>
</div>
<div class="well well-sm">
A copy of your order details will be sent to you via e-mail. Please check your email inbox upon success submissions. Thank You.
</div>
</div>
<div class="panel-footer text-center">
<button class="btn btn-default" id="send-order" type="submit">Send Order</button>
</div>
</div>
</form> <!-- //end form -->
</div> <!-- //end col-sm-8 -->
<div class="clearfix"></div>
</div> <!-- //end row -->
Click the Compose tab and click Save. At the Compose page editor this page will display awkwardly, but since it is using Bootstrap classes & styles, automatically the form fields & texts will align accordingly like at the demo page.
Once satisfied, click the Publish Page button. View this page by clicking the View link underneath this Page link. Grab the full URL of this page at your browser bar. An example would look like so:-
http://YOUR-BLOG-NAME.blogspot.com/p/send-order.html
Save this URL at your favourite text editor for template settings further below.
3.1 Install Success PagePRO users can skip this section
Go to Pages > Add a Page and at the Title field type in Success & click Save. Edit the page body as this page will be the return page from success orders using the send order form functionality checkout. Click Publish Page & view this page full URL at your browser bar by clicking the View link. An example URL will look like so:-
http://YOUR-BLOG-NAME.blogspot.com/p/success.html
Save this URL at your favourite text editor.
3.2 Install Error PagePRO users can skip this section
Go to Pages > click Add a Page & at the Title field type in Error & click Save. Edit the page body as this page will be the error handling page upon users non delivered orders using the send order form functionality checkout. Click Publish Page & view this page full URL at your browser bar by clicking the View link. An example URL will look like so:-
http://YOUR-BLOG-NAME.blogspot.com/p/success.html
Save this URL at your favourite text editor.
4.0 Install Auto Post TemplatePRO users can skip this section. Advance Auto Product Post Template included in theme download. Use & install.
A fully customised auto post template comes pre-included with BlogrCart template. This is important as most of the shopping cart functionalities & also how the product displays depends on this template.
At Blogger Dashboard > Settings > Post & Comments > Post Template > click the Add link to insert the codes below:-
<table border="1" cellpadding="5" class="product-description" rules="all"><tbody>
<tr class="label-description">
<td class="item_description">This is the short description for any product post. Write a short description for the product here in not less than 300 words. This will create a unique content for your product hence giving the extra boost from search engine results. Edit this table for short description section only. Use Blogger "Remove Formatting" functions to remove copied & paste texts alignment, fonts, text colours & text styles.<br />
<br />
Use table #1 for product Main Image.<br />
Use table #2 for product Thumbnail Images.<br />
Use table #3 for product details & other specifications.<br />
Use "Jump Break" AFTER table #1 to prevent Auto Pagination. By default the "Jump Break has been assigned.<br />
<br />
Edit & remove sample texts if not in use.<br />
Option size & colour only available on PRO versions. Get 1 now!</td>
</tr>
<tr>
<td class="item_price">$ 45.00</td>
</tr>
<tr>
<td class="label-quantity"><input class="form-control item_quantity" size="2" type="text" value="1" />
<a class="btn btn-default item_add btn-lg" href="javascript:;">Add to Cart</a></td>
</tr>
</tbody></table>
<table border="1" cellpadding="5" class="product-image" rules="all"> <tbody>
<tr>
<td class="thumb_image"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1yt6X8Y2YDShx4Z4aTsDslQicCWCvY7cR5fyXKyXusxnRYoL6MGp3IGuY7Tor_ZuEobeH-ajzVXmI5c24iVXPasj090jHNUNF-xxbMH39zIdqhrdHwJmVYedwlxr4FpdGCiPm9wxmfWc/s1600/GrassGreen_W_F.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1yt6X8Y2YDShx4Z4aTsDslQicCWCvY7cR5fyXKyXusxnRYoL6MGp3IGuY7Tor_ZuEobeH-ajzVXmI5c24iVXPasj090jHNUNF-xxbMH39zIdqhrdHwJmVYedwlxr4FpdGCiPm9wxmfWc/s1600/GrassGreen_W_F.jpg" height="320" width="197" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</td></tr>
</tbody></table>
<!--more--><div class="product-detail product-tabs">
<ul class="nav nav-tabs text-center">
<li class="active" role="presentation"><a href="javascript:;" role="tab">
Product Details</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane in active">
<table border="1" cellpadding="5" class="product-thumbnail" rules="all"><tbody>
<tr><td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg" height="125" width="125" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg" height="125" width="125" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg" height="125" width="125" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCUh9P_iJz99aaZ4q4ZaJAfP2np2zeH01io0H8jn9W_nqzDpgGvaCDHv4OP34fZF45FJkWmSuYgYLQ-aIYyhEpwfmOiqnVVUf1Z-1ad5-BRHSYF-N3UIGKDPJPyd1S6s-ibF9siPQBH7E/s1600/GrassGreen_W_B.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCUh9P_iJz99aaZ4q4ZaJAfP2np2zeH01io0H8jn9W_nqzDpgGvaCDHv4OP34fZF45FJkWmSuYgYLQ-aIYyhEpwfmOiqnVVUf1Z-1ad5-BRHSYF-N3UIGKDPJPyd1S6s-ibF9siPQBH7E/s1600/GrassGreen_W_B.jpg" height="200" width="112" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg" height="125" width="125" /></a></div>
</td></tr>
</tbody></table>
<table border="1" cellpadding="5" class="product-detail-section" rules="all"><tbody>
<tr>
<td>This is a <code>tab-section</code> Edit the text within this box/table in Blogger editor easily & this panel automatically displays & styled automatically. Use Blogger "Remove Formatting" functions to remove copied & paste texts alignment, fonts, text colours & text styles.<br />
<br />
This section is very useful in providing informational details for a particular product. Use this as your standard/repeated product size & dimensions section. Adding a table within this section is not semantic & will break the product display layout styles.</td>
</tr>
</tbody></table>
</div>
</div>
</div>
The auto template comes with a price field, a product thumbnail field, supporting product image field, a description section & a detail section to insert relevant contents for your Product Post. Edit the contents during posting your product. Example product images & thumbnail images are included for reference. Please use as your guide.
Note: The tab functionalities, select by colour, select by size is included in PRO template file download. PRO users have the full codes with custom functions used with the advance auto post template.
Click Save Settings. Preview the example Auto Post Template by clicking the Pancil icon to start a Post.
5.0 Customising Shopping Cart FunctionsPlug-in LocationAll shopping cart functionalities is located at HTML99 widget unless otherwise stated. Expand by clicking the small black triangle arrow next to the relevant codes required to view the detail settings.
5.1 Shopping Cart CurrencyExpand <b:includable id='cart-currency-settings'> & view the detail settings. Information has been included in template for reference.
Use short codes (highlighted) for available pre-set currencies provided with shopping cart plug-in. Below are the example codes:-
<script>
//<![CDATA[
simpleCart.currency('USD');
/*
* Available pre-set currencies
* Currencies supported by Paypal
* Ref: https://developer.paypal.com/docs/classic/api/currency_codes/
code: "USD" "US Dollar",
code: "AUD", "Australian Dollar",
code: "BRL", "Brazilian Real",
code: "CAD", "Canadian Dollar",
code: "CZK", "Czech Koruna",
code: "DKK", "Danish Krone",
code: "EUR", "Euro",
code: "HKD", "Hong Kong Dollar",
code: "HUF", "Hungarian Forint",
code: "ILS", "Israeli New Sheqel",
code: "JPY", "Japanese Yen",
code: "MYR", "Ringgit Malaysia",
code: "MXN", "Mexican Peso",
code: "NOK", "Norwegian Krone",
code: "NZD", "New Zealand Dollar",
code: "PHP", "Philipine Peso",
code: "PLN", "Polish Zloty",
code: "GBP", "Pound Sterling",
code: "RUB", "Russian Ruble",
code: "SGD", "Singapore Dollar",
code: "SEK", "Swedish Krona",
code: "CHF", "Swiss Franc",
code: "TWD", "Taiwan New Dolar",
code: "THB", "Thai Baht",
code: "TUR", "Turkish Lira",
*
* Currencies not supported by Paypal but included as pre-sets
*
code: "BTC", "Bitcoin",
code: "INR", "India Rupee",
code: "IDR", "Indonesia Rupiah",
code: "NGN", "Nigeria Naira",
code: "VND", "Vietnam Dong",
code: "PKR", "Pakistan Rupee",
********************************
//]]>
</script>
If the currency of choice is not listed as pre-sets, or blogger store owners require currency customizations, replace the short codes above and use the built-in currency customisations as follows.:-
<script>
//<![CDATA[
simpleCart.currency({
code: "USD",
name: "US Dollar",
symbol: "$ ",
delimiter: ",",
decimal: ".",
after: false,
accuracy: 2
});
//]]>
</script>
The example above is to set USD as currency code along with the currency detail preferences.
5.2 Shopping Cart Email SettingsImportant: The saved URL from Section 3.2, Section 3.3 is required here. Insert the URL's based on the default settings provided. Leave/remove the http:// pattern when editing.
Expand <b:includable id='cart-email-settings'> & view the detail settings.
Information & guides has been included for your customization. Follow the exact default "pattern" in order to make the send order functions work properly.
5.3 Shopping Cart Paypal SettingsExpand <b:includable id='cart-paypal-settings'> & view the detail settings.
Information & guides has been included for references. Follow the exact default patterns for customizations.
5.4 Shopping Cart Shipping SettingsExpand <b:includable id='cart-shipping-settings'> & view the detail settings.
Information & guides has been included for references. In addition, users can set the shipping settings chich will be calculated by:-
Shipping/delivery based on percentage of items in cartShipping/delivery based on quantity of items in cartA fixed shipping/delivery per item in cart.
By default, a fixed shipping/delivery price is activated at USD5/item
5.5 Shopping Cart Tax SettingsExpand <b:includable id='cart-tax-settings'> & view the detail settings.
Information & guides has been included for references. The tax rate is calculated based on the items & delivery charges applies.
Set the percentage of the tax here. By default the template is using 5% or 0.05 percent from shopping cart totals.
6.0 Additional Set UpThis template comes with responsive modal pop-up to view the cart summary. The shopping cart can be viewed & accessed in any page using the link located at the floating/fixed main navigation bar.
To edit the Send Order button to your Send Order page at HTML99 widget find <b:includable id='modal-cart'> & expand the code to view the mark-up.
Find below codes to edit to your Send Order page
<a class='btn btn-danger small text-center' href='http://YOUR-BLOG-NAME.blogspot.com/p/send-order.html'>
<i class='fa fa-envelope'/> Send Order
</a>
Change http://YOUR-BLOG-NAME.blogspot.com/p/send-order.html to the Send Order page URL you have saved in Section 3.1. Click Save Template & test your changes.
End of Tutorial
Find all about theme customisations, code snippets here at demo pages. |
Không có nhận xét nào
Đăng nhận xét