Monday, 11 February 2013

How to Integrate jCart into a HTML Page




My research into easy-to-integrate shopping cart plugins is still ongoing. Today, it's led me to jCart, a lightweight PHP shopping cart with AJAX functionality by Doug Whitney.  Here's how it's been for me using it on my Fashion Statement theme .


What's jCart?

According to its creators, jCart is
"a free Ajax shopping cart that’s easy to install and customize".
It's got all the goodness of PHP, that is, reliable backend code that handles such sensitive tasks such as security, data sanitation and checking, cart functionality in case JavaScript is disabled in visitors' browsers, etc., coupled with the responsiveness of jQuery-powered AJAX functionality on the client-side. On top of all this, it's free! At first sight, jCart looks like the ideal package. But, how easy it really is to integrate? I tried out this awesome script on my Fashion Statement theme.

jCart installation process


On the jCart Home page I download the zip folder containing the plugin, jcart-1.3.zip. Next, I create an empty folder inside the www directory of my local WAMP server and name it FashionStatementjcart, where I save a copy of the Fashion Statement theme. Finally, I extract the jCart files inside this same directory.

The second step is to follow the jCart installation instructions, which are extremely clear and simple to implement. Let's see how.

1) Turn HTML into PHP file


For demonstration purposes, I only use the products-list-leftsidebar.html and the checkout.html pages. I save the former as products-list-leftsidebar.php and the latter as checkout.php. At the very top of each document, above the DOCTYPE declaration, I include the following line of PHP code:


<?php
include_once('jcart/jcart.php');
?>


Unfortunately, I soon find out that the server complains about a session having already started. A session is a PHP object used to maintain state in between requests between client and server. Consequently, I change the existing line of code into this one:


<?
include_once('jcart/jcart.php');
if(!isset($_SESSION)) 
{
session_start();
}
?>


This is a simple conditional statement: if a session is not started, then start a new one. I'm no PHP guru, but this seems to pacify my server. Also, I keep getting all sorts of variables not set error messages. Browsing the forum, I find the following remedy. Add a htaccess file to the project with the following line: php_value error_reporting 0.

Finally, I add a reference to the jCart stylesheet, jcart.css, in the head section of each document and a reference to the jCart JavaScript file, jcart.js, at the bottom of the body section, below the reference to the jQuery library, in both documents. Here it is:


<!-- this goes in the head section -->
<link rel="stylesheet" href="jcart/css/jcart.css" />

<!-- this goes at the bottom of the body section, after the reference to jQuery -->
<script src="jcart/js/jcart.js"></script>


The jCart stylesheet contains a few basic rules that can be easily overridden by the theme's stylesheet.

2) The product form


The product information needs to be put inside a form tag with some hidden input fields containing product data to be sent to the checkout page. Here's what the block of HTML markup for the first product in products-list-leftsidebar.php on the Fashion Statement theme looks like:


<div class="thumbnail">
  <form method="POST" action="" class="jcart">

    <input type="hidden" name="my-item-id" value="1" />
    <type="hidden" name="my-item-name" value="Sample Product" />
    <input type="hidden" name="my-item-price" value="348.00" />
    <input type="hidden" name="my-item-url" value="product.html" />

    <!-- more markup with product info omitted here -->

    <!-- input field for quantity -->

    <label for="my-item-qty">Qyt:</label>
    <input type="text" name="my-item-qty" value="1" size="3" />
  </form>
</div>


Notice the class = "jCart" on the form element and the jCart name fields on each of the tags containing key item info to be sent to the cart script. Next, I find the markup for the cart widget at the top of the page, delete the hard-coded cart and add the following line of code to display a dynamic cart widget: <div id="jcart" class="cart-container"><?php $jcart->display_cart();?></div> Finally, I open the file config.php inside the jCart folder.

3) Configuration settings


I check that the configuration settings correspond to the class names in my HTML markup. For example, in config.php, I find something like this: $config['item']['id'] = 'my-item-id';, $config['item']['name'] = 'my-item-name';, etc. I make sure that the hidden input fields in the HTML form markup with the values for my item id and my item name have the class name of my-item-id and my-item-name respectively.

I also change the configuration setting for the PayPal sandbox from false to true, so that I can test the plugin with the PayPal sandbox site.

4) Checkout page


I now open checkout.php and add the code that displays the shopping cart:


<div id="jcart" class="cart-container"><?php $jcart->display_cart();?></div>
<!-- add a link to the products page (optional) -->
<a href="products-list-leftsidebar.php" class="jcart-button">← Continue shopping</a>


5) Result


At this point I have a fully functional basic shopping cart. I add some styles to make the appearance of the cart blend with the Fashion Statement theme, and this is what the cart widget at the top of the products page looks like when empty:


This is what the cart widget looks like after I've added an item:


Because I used a hidden input field with a url value in my product markup form, the product name that appears in the cart is inside a link to the product details page. Also, notice that outside the dropdown cart widget the subtotal appears next to the cart icon. This is not a jCart default feature. To achieve this, follow the instructions contained in this jCart forum post.

More customization?


There were at least 2 things I wanted to do with my shopping cart. One was to add an image linked to the product details page on the full-blown shopping cart displayed in the checkout page. The other was to configure product variations such as different sizes and colors. I realized doing the latter would require some serious work on the plugin's code. The most useful discussion about this topic can be found here, for anyone who'd like to play with the code. However, the topic is beyond the scope of this post.

Linked product image


If I wanted an image to replace the product name, it'd have been sufficient to use the URL field with the value of the product image file rather than that of the product details page file. However, I wanted both the image and the product name to appear. Besides, I wanted the image linked to the product details page, but only on the checkout page. I could have added a new field to the jCart.php file and adjusted the config.php file accordingly. However, this would not have been a quick job. Therefore I manipulated just the code displaying the cart at about line 518 in the code editor.

The only requirement of this quick fix is that the product image file be named after the product name, like this. For instance, if the product name is Sample Product, then the image file name will have to be SampleProduct.jpg. Here's how I've modified the code from line 518 to line 523 of the original jCart.php file:


//if the url field has a value
if ($item['url']) { 
  //if we are on the checkout page, display the linked image
  if ($isCheckout == true) {
    $itemsrc = $item['name'];
    $itemsrc = str_replace(' ','',$itemsrc);
    echo tab(7) . "<a href='{$item['url']}'><img src='img/{$itemsrc}.jpg' alt='{$item['name']}' /></a>\n";
  }
  else {
    //otherwise we are on a regular page: just display the text link
    echo tab(7) . "<a href='{$item['url']}'>{$item['name']}</a>\n";
  }
}
else {
  //if we have no value for the Url field, just use the product name
  echo tab(7) . $item['name'] . "\n";
}


It's a quick and dirty solution, but it works. Here's what the checkout page looks like after adjusting a few CSS rules:


Conclusion


After having experimented with jCart for a few hours, here's a few final thoughts.
  1. I find jCart very easy to install, quite secure to use, and it's free. Therefore, I'm always grateful to those good developers who generously share their work with the community.
  2. The default options offered by the plugin are basic and not easily customizable. If you want to add a field to the cart, like an image field, or if you'd like to add something quite common in an e-commerce site like product variations such as color and size, then there's no built in method that lets you do so. The only way is to get your hands dirty with the core script and make modifications, tests, etc. This takes some time and skill. Therefore, I'd say that, if you're an experienced developer who can build a shopping cart but doesn't want to do the work from scratch, then jCart is a good solution. Also, if you're a designer looking for simple and basic cart functionality, and an easy to install and style shopping cart, jCart is great. However, if you're a designer looking for a shopping cart plugin that is user-friendly and smooth to customize beyond the CSS stylesheet, then jCart is not ideal.
  3. Lastly, perhaps because the latest version of jCart, 1.3, goes back to something like 2011, or perhaps because there isn't any API for easy functionality customization, there isn't any proper documentation to speak of, except for the installation guide and the jCart forum. Unfortunately, it's really laborious to have to wade through all the spam posts in the forum before one finds some useful piece of information. Furthermore, some of the links to potentially useful info seem to be broken. However, thanks to some posts by the plugin's creator and others, I came across some really helpful code snippets and advice.
My experimentation with shopping cart scripts will go merrily on for some time. What about you, have you tried jCart in any of your sites? What are your thoughts about the product?

2 comments:

  1. Jcart is great, easy to integrate and lightweight as you mention. However the latest version from conceptlogig does have a few stupid bugs.
    There are numerous cases where the script generates warnings because it assumes some vars are set. A simple if (isset)) statement could fix it. It also has some problems with relative paths. Great tool but needs the last 5% of work .

    ReplyDelete
  2. Massively appreciated for the work done on Jcart as I was going to code something like this from scratch so it saved me hours and hours.

    There is some basic coding mishaps but the coding as a whole is very good, one issue thou is when moving its origin folder it seems to create a lot of unnecessary errors. Out of the box not to great, for developing further absolute godsend.

    ReplyDelete