This is a Blogger shopping cart code I stumbled upon a while ago, and I thought it would be interesting to experiment with, adding and improving eCommerce features on my site. It would be a nice feature to include in my Allone template, as it aims to support every possible function.
The bloggr cart is a javascript code that makes adding to cart and checkout ecommerce function on a blogger site.
I’m sharing this for reference in case it helps anyone looking to make a Blogger store template.
Originally, I had bookmarked this project with the intention of indulging in it, but over time, I didn’t see an immediate need.
I planned to create a store function leveraging APIs like flutterwave or paystack, but eventually passed on the idea.
However, I might revisit it in the future, possibly integrating it with Flutterwave or Paystack, which both have excellent APIs—I’ve done something similar before via their javascript API and would be nice to see it function more extensively with the Blogrcart Js.
Here’s the core script for the shopping cart setup, which supports PayPal by default. It used to support Google Pay and Amazon, but you can customize the checkout with other payment processors like Flutterwave by using their Merchant APIs.
Irsah Blogrcart setup has a Naira implementation ready for usage.
A widget for sending orders by email is also available, allowing the order details to be sent to the blog owner’s Gmail.
Shopping Cart Setup:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticaly.com/gh/wojodesign/simplecart-js/51a9a38d/simpleCart.min.js"></script>
<script src="https://cdn.staticaly.com/gh/BlogrCart/widget/6b142346/send-form.min.js"></script>
<div id="cart-notify">
Currently cart is empty.
</div>
<div id="cart-widget" class="product-hidden" data-layout="" data-version="0-9-2">
<span class="simpleCart_items"></span>
<div class="cart-summary">
Sub Totals: <span class="simpleCart_total"></span><br>
Tax: <span class="simpleCart_tax"></span><br>
Shipping: <span class="simpleCart_shipping"></span><br>
<b>Grand Total: <span class="simpleCart_grandTotal"></span></b><br>
<a class="cart-buttons simpleCart_empty" href="javascript:;">Empty Cart</a>
<button class="cart-buttons simpleCart_checkout">PayPal</button>
</div>
</div>
Shopping Cart Settings
<script id="js-cart-script">
simpleCart({
currency: 'USD',
checkout: {
type: "PayPal",
email: "[email protected]",
success: "http://blog-name.blogspot.com/p/success.html",
cancel: "http://blog-name.blogspot.com/p/cancel.html"
},
cartStyle: "table",
cartColumns: [
{ view: "remove", label: false, text: "X" },
{ attr: "thumb", view: "image", label: false },
{ attr: "name", label: "Item" },
{ view: "currency", attr: "price", label: "Price" },
{ view: "decrement", label: false },
{ attr: "quantity", label: "Qty" },
{ view: "increment", label: false },
{ view: "currency", attr: "total", label: "Amount" }
]
});
</script>```
There’s a send-orders-by-email option using Blogger's built-in send-mail functions, which extracts all cart items and sends them to the blog owner's Gmail address. Very nice!
Notice: There is nothing to copy and paste here in this post. The code are just there for referencing sake. For more info on setting up a cart, visit Irsah inDesigns Blog - by the original author of the script.
It's better to work on this existing code. Mxm, at least Irish approves of it!
There are also other ways to implement eCommerce on Blogger, like using external programs such as Ecwid and Gumroad, or just using payment links. I talked about it in this post, so feel free to check that out!
happy coding :)
