Simple Cart

Simple cart is an open source java script cart application that exclusively work on the client side which then connects to a payment gateway like PayPal or Google wallet depending on the developers choice, yes ecommerce in minutes!

“No databases, no programming, no headaches. A simple javascript shopping cart that you can setup in minutes. It’s lightweight, fast, simple to use, and completely customizable. All you need to know is basic HTML.”

I am going to implement Simple cart to build up a simple one page shopping cart application that would allow users to pay via PayPal, the application will comprise of a CSS file, a favicon, an index page and of course a SimpleCart.js

This simple one page can be used as a template and replicated as many times as possible depending on a developers needs, all image files will be hosted externally from other location such as website/FTP server, for this example I am extracting all test images from my Google Drive.

alkathirikhalid

Fig 1: Directory structure without any images

The directory structure as see above is quite simple and unique, the  CSS file will implement the the overall page layout, colour, fonts and CSS background images only while the index page will exclusively be dealing with the products extracted from Google drive.

alkathirikhalid

Fig 2: Extracting image URL from Google drive

As seen above individual URL for each image is randomly generated by Google drive and they differ from the page URL (page URL and image URL). To get the image URL right click the image and select “Copy image URL”, implement this URL into your HTML code for ever image source.

N/B Mind the URL https://docs.google.com once the upgrade takes place to the new URL https://drive.google.com the enhanced security applies and this method won’t work.

alkathirikhalid

There is a another method of which you can extract the image links by making use of Google Sites under Attachments, where you can get individual links to images in the cloud.

alkathirikhalid

Fig 3: Complete application with dummy swappable items 1-8

alkathirikhalid

Fig 4: Adding items to shopping cart

alkathirikhalid

Fig 5: Connecting to PayPal for payment processing

www.alkathirikhalid.com

Thank You.

About alkathirikhalid

"Knowledge without experience is just information."
This entry was posted in Web Developement. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s