Install jCart
First grab a copy of jCart v1.1 from Google Project Hosting, then extract the files and copy to your server. Now visit your site and open store.php in your web browser to view a working demonstration.
Next, learn how to integrate jCart with your website.
1 - Edit jcart-config.php
To accept items from your store jCart needs to know the field names used in your item forms. Open jcart-config.php and fill in each variable with the HTML name attribute from the corresponding input element.
If your item form looks like this:
<form method="post" action="">
<fieldset>
<input type="hidden" name="my-item-id" value="1" />
<input type="hidden" name="my-item-name" value="Soccer Ball" />
<input type="hidden" name="my-item-price" value="25.00" />
<ul>
<li><strong>Soccer Ball</strong></li>
<li>Price: $25.00</li>
<li>
<label>Qty: <input type="text" name="my-item-qty" value="1" size="3" /></label>
</li>
</ul>
<input type="submit" name="my-add-button" value="add to cart" class="button" />
</fieldset>
</form>
Your config file should look like this:
<?php
///////////////////////////////////////////////////////////////////////
// REQUIRED SETTINGS
// THE HTML NAME ATTRIBUTES USED IN YOUR ADD-TO-CART FORM
$jcart["item_id"] = "my-item-id"; // ITEM ID
$jcart["item_name"] = "my-item-name"; // ITEM NAME
$jcart["item_price"] = "my-item-price"; // ITEM PRICE
$jcart["item_qty"] = "my-item-qty"; // ITEM QTY
$jcart["item_add"] = "my-add-button"; // ADD-TO-CART BUTTON
// YOUR PAYPAL SECURE MERCHANT ACCOUNT ID
$jcart["paypal_id"] = "123456ABCDEFG";
// PATH TO THE DIRECTORY CONTAINING JCART FILES
$jcart["path"] = "jcart/";
// THE PATH AND FILENAME WHERE SHOPPING CART CONTENTS SHOULD BE POSTED WHEN A VISITOR CLICKS THE CHECKOUT BUTTON
// USED AS THE ACTION ATTRIBUTE FOR THE SHOPPING CART FORM
$jcart["form_action"] = "checkout.php";
...
PayPal integration
To enable PayPal integration, set your secure merchant ID as the value of the $jcart["paypal_id"] variable. Your PayPal profile must also use the following settings:
- PayPal Account Optional is turned on
- Shipping Calculations have been set up
- Auto Return is turned off
Visit PayPal for more info on your profile settings.
If not using PayPal integration, view the source of jcart-gateway.php for an example of how to pass the cart contents to your checkout script or payment processor.
Additional config variables
$jcart["path"] Edit as needed if using a different directory structure.
$jcart["form_action"] This variable specifies where the cart contents should be posted when a visitor clicks the checkout button.
While editing the config file you can override the default wording used in the cart display by setting your own values, and also use your own image buttons if you’d like.
2 - Initialize
Include the following block of PHP code at the beginning of each page that will display the shopping cart. Again, be sure to set the correct include path if using a different directory structure.
<?php
// INCLUDE JCART BEFORE SESSION START
include "jcart/jcart.php";
// START SESSION
session_start();
// INITIALIZE JCART AFTER SESSION START
$cart =& $_SESSION["jcart"]; if(!is_object($cart)) $cart = new jcart();
?>
Note that in v1.1 the PHP classname and session variable have changed from jCart to jcart (all lower case) for consistency with the rest of the script.
3 - Display the cart
Add the following PHP code to each page where you want to display the cart, such as inside a <div> element in your sidebar.
<?php $cart->display_cart($jcart);?>
At this point the basic cart is fully functional, so feel free to skip the remaining steps if you just want an unstyled shopping cart without Ajax. But how much fun would that be?
4 - Add CSS & javascript
Add the CSS and javascript files to your HTML header.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jCart - Free Ajax/PHP shopping cart</title>
<link rel="stylesheet" type="text/css" media="screen, projection" href="style.css" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="jcart/jcart.css" />
<script type="text/javascript" src="jcart/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jcart/jcart-javascript.min.php"></script>
<body>
You can use the copy of jQuery provided in the download (or your existing copy) but I like Google’s Ajax libraries API for production use. This post at Ajaxian.com introduces a few of the benefits.
Ideally, the scripts should be placed at the bottom of your page, but they’ll work fine as shown in the example above.
5 - Add class="jcart" to your item forms
Whether your items are drawn from a database or hard-coded, simply add the CSS class jcart to your item forms as shown. This step enables Ajax by telling jCart which form submissions to process.
<form method="post" action="" class="jcart">
<fieldset>
<input type="hidden" name="my-item-id" value="1" />
<input type="hidden" name="my-item-name" value="Soccer Ball" />
<input type="hidden" name="my-item-price" value="25.00" />
<ul>
<li><strong>Soccer Ball</strong></li>
<li>Price: $25.00</li>
<li>
<label>Qty: <input type="text" name="my-item-qty" value="1" size="3" /></label>
</li>
</ul>
<input type="submit" name="my-add-button" value="add to cart" class="button" />
</fieldset>
</form>
6 - Customize jcart.css
jCart comes with minimal styling for easy customization. Open jcart.css to edit the default styles and see some of the available selectors. Of course, using jQuery the options for further customization are wide open.
Congratulations! You should now have a sexy new Ajax shopping cart.
