jCart adding multiple items to cart at once not working

[Cl2000]

Hi there,

 

 I have setup jCart on my Wordpress site.  I have not used the jCart wordpress plugin, but used the normal install jCart version.

 

I would like to add multiple items to the shopping cart at the click of one single button.  However, nothing is happening.

 

As I am placing this code into a wordpress template file the php and html looks like this:

<?php
/**
  * Template Name: Step 6-1 test Order Overview
 */
?>
<?php  

echo 'this is the jcartToken : ' . $_SESSION['jcartToken'];
start_session();
 get_template_part('inc/theme-header1'); ?>
<div id="main">


 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="looping.js"></script>

<?php
      foreach( $wpdb->get_results("SELECT * FROM smtb_child_info WHERE order_id = '$order_id';") as $key => $row)
    {
        // each column in your row will be accessible like this
        $child_first_name = $row->child_first_name;
        $childs_surname = $row->childs_surname;
        $temp_name   = $row->temp_name;
        $temp_address   = $row->temp_address;
        $child_id   = $row->child_id;
         
        
        echo "<form method='post' action='' class='jcart'>
        <span> Item #1 </span>
        <input type='hidden' name='jcartToken' value='872fb5a3ce5b17ed4b8efbcc113cbbdd' />
        <input type='hidden' name='my-item-price' value='1.00' />
        <input type='hidden' name='my-item-id' value='0123' />
        <input type='hidden' name='my-item-name' value='item 1' />
        <input type='hidden' name='my-item-qty' value='1' />
        <input type='hidden' name='my-item-url' value='http://conceptlogic.com/jcart/graphics/jcart-logo.jpg' />
        <input type='hidden' name='my-add-button' value='add to cart' class='button' />
    </form>   
    <form method='post' action='' class='jcart'>
        <span> Item #2 </span>
        <input type='hidden' name='jcartToken' value='872fb5a3ce5b17ed4b8efbcc113cbbdd' />
        <input type='hidden' name='my-item-price' value='5.00' />
        <input type='hidden' name='my-item-id' value='4567' />
        <input type='hidden' name='my-item-name' value='item 2' />
        <input type='hidden' name='my-item-qty' value='1' />
        <input type='hidden' name='my-item-url' value='http://conceptlogic.com/jcart/graphics/jcart-logo.jpg' />
        <input type='hidden' name='my-add-button' value='add to cart' class='button' />
    </form>   
    <form method='post' action='' class='jcart'>
        <span> Item #3 </span>
        <input type='hidden' name='jcartToken' value='872fb5a3ce5b17ed4b8efbcc113cbbdd' />
        <input type='hidden' name='my-item-price' value='10.00' />
        <input type='hidden' name='my-item-id' value='8910' />
        <input type='hidden' name='my-item-name' value='item 3' />
        <input type='hidden' name='my-item-qty' value='1' />
        <input type='hidden' name='my-item-url' value='http://conceptlogic.com/jcart/graphics/jcart-logo.jpg' />
        <input type='hidden' name='my-add-button' value='add to cart' class='button' />
    </form>";
    
    
    }

    ?>
 <button id="addToCart">Add To Cart</button>
    <button id="checkout">Checkout</button>

There is also a javascript file that I have linked to at the top of the above file called looping.js, which has the code to loop through all of the forms that have been generated and it is supposed to display these items on the checkout page when you hit checkout.

<script type="text/javascript">>
$(document).ready(function() {
	
		//document.write('<div>Th looping file is connected</div>');

        // loop over each form element on a page
        // post array to another page via ajax
        
        $('#addToCart').on("click",function(event) {  //event handler for addToCart button

            $("form").each(function(index){  //loop through each form element, and then...

                var cartData = $(this).serializeArray(); //serialize $(this).form's data, and then...

                $.post('jcart/relay.php', cartData, function(cartData) { // .post this form's data to jcart/relay.php, and then...

                    // do something or nothing... maybe update the DOM?

                    console.log("submitted form #" + index); //debug - comment out or remove for production

                }); //end post

              event.preventDefault(); // prevent following of default action

            }); // end each

        }); //end addToCart

        $('#checkout').on("click",function(event) {  //go to checkout page when 'checkout' button clicked
              window.location = "checkout.php";
        });

      }); // document.ready
      
      </script>

However, when you click on the checkout button it does not work.

 

I have tried placing the link to the looping.js file, into my header.php file for wordpress, however this does not work.

 

Any help would really be appreciated.