A shopping cart with SimpleCart

In many websites, especially ones and of course e-commerce but also other, you can buy products directly online.
This article will show you how you can make a simple shopping cart using the library SimpleCart (js) .
This library is open-source and makes use of Javascript only and does not need to run any server-side language nor the database, to store the selected items in the cart rests solely on cookies.

The use of the library is very simple and with very few parameters and the correct HTML markup you can get a good virtual shopping cart. The library also offers native support for two of the most important methods of payment by credit card such as PayPal and Google Checkout . Among the various features, SimpleCart lets you customize the currency (euro, dollar, etc.), VAT (taxes rates) and shipping.

Configuration

Now let's see how we can develop our shopping cart.
First, we must include the library SimpleCart within our web page:

 



 <script type="text/javascript" src="simpleCart.js"> </ script>

 

Then let us set our configuration parameters, such as:

 <script type="text/javascript">







 simpleCart.checkoutTo = C / / payment method







 simpleCart.email = "tuaemail@tuosito.it" / / PayPal email









 simpleCart.currency = EUR / / currency to use







 simpleCart.taxRate = 0.20; / / taxes







 simpleCart.shippingFlatRate = 10.00; / / shipping costs









 simpleCart.cartHeaders = ["Name", "Size", "Price", "decrement", "Quantity", "increment", "remove", "Total"];







 </ Script>

The parameters seen above allow you to customize the cart to fit our specific needs.

The first parameter that we included is the method of payment: PayPal we set, although in reality it was not necessary because it is the default. In addition you can also select PayPal Google Checkout, but in this case is not expected but rather the inclusion of the email address of your account identifier:

 simpleCart.checkoutTo = GoogleCheckout;







 simpleCart.merchantId = "111111111111111";

Still going over the example, we put to use euros as currency and 20% tax (to symbolize the current VAT in our country).
Another parameter set are the shipping costs in this regard SimpleCart can differ between 3 types of shipping costs:

 simpleCart.shippingFlatRate = 10.00; / / amount for the entire order







 simpleCart.shippingQuantityRate = 3.00; / / amount for each product







 simpleCart.shippingTotalRate = 0.05, / / ​​amount Percentage of total cost

The last parameter included in our sample code, however, the cartHeaders, or an array that allows you to customize the list of the trolley (the products selected by the user, the total cost, etc.).
In our example we have chosen to display the name, size, price, quantity, etc..

• <<
• 1
• 2
• 3
• 4
• >>