Passing Over Shop Cart Data... Ajax or PHP Post? - php

Question

So, first, a thanks to a guy named Marcel Gwerder, he wrote the code I am asking a question about. I WOULD write a comment or PM'ed him, but I felt the thread was dead (and people don't just look at old threads right? They can't be bumped either) and I didn't know how to PM People.
Look at this code
// Shop Stuff
var cart = [];
$(document).ready(function(){
var buttonTxt = '';
$(".buyinfo").click(function() {
//Store text and id of the selected element
var txt = $(this).siblings('.shopitemname').text();
var id = $(this).closest('.shopitem').attr('id');
if(!$(this).hasClass('added')) {
buttonTxt = $('.buyinfoname', this).text();
$('#box_item').text(txt);
cart[id] = txt;
//Change text
$('.buyinfoname', this).text('Added to cart - Click to remove');
$(this).addClass('added');
//Show and hide overlay
$('#confirmbox').show('normal').delay(2000).fadeOut();
} else {
delete(cart[id]);
$(this).removeClass('added');
$('.buyinfoname', this).text(buttonTxt);
}
console.log(cart);
alert(cart);
});
});
It is some Javascript.
Now for some HTML which was recommended by a commenter.
<div id="shop">
<input type="button" value="Go To Checkout" id="checkoutbutton" />
<div class="shopitem">
<p class="shopitemname">Orange Background Color</p>
<div class="buyinfo">
<p class="buyinfoname">Buy - 40 Coins</p>
</div>
</div>
<div class="shopitem">
<p class="shopitemname">Black Background Color</p>
<div class="buyinfo">
<p class="buyinfoname">Buy - 40 Coins</p>
</div>
</div>
<div class="shopitem">
<p class="shopitemname">Green Background Color</p>
<div class="buyinfo">
<p class="buyinfoname">Buy - 40 Coins</p>
</div>
</div>
<div class="shopitem">
<p class="shopitemname">Blue Background Color</p>
<div class="buyinfo">
<p class="buyinfoname">Buy - 40 Coins</p>
</div>
</div>
<div class="shopitem">
<p class="shopitemname">Yellow Background Color</p>
<div class="buyinfo">
<p class="buyinfoname">Buy - 40 Coins</p>
</div>
</div>
<div class="shopitem">
<p class="shopitemname">Purple Background Color</p>
<div class="buyinfo">
<p class="buyinfoname">Buy - 40 Coins</p>
</div>
</div>
</div>
</section>
<div id="confirmbox">
<p>The item was successfully added to your cart</p>
</div>
I was wondering how to send over the values in the CART variable to a new page that someone can click called "checkout.php". I was thinking AJAX from jquery or post from PHP but both are hard for me (I'm a noob coder) and I don't want to work hard on something that might not work out in the end.
Also, a question for Marcel (if he sees it) or a question for anyone who understands his code:
Why don't the values get in the cart, I did alert(cart) and it always displays empty alert box when there should be a value in cart.
Please assist me, and have a good day.

Answer 1

You can do this and I created a working JS fiddle example example. This is ONLY on the client side and you'd have to write the back end processing script because I'm not sure what you'd trying to do (save values in a database etc.).
Please look at the following JS fiddle:
http://jsfiddle.net/rDgUD/2/
You can use a .post command in jQuery:
$("#checkoutbutton").click(function () {
$.post("test.php", cart, function (data) {
//this is the reponse back from your PHP processing page that saved the variables in a database or however you were handling that.
alert("Data Loaded: " + data);
});
});
You can see how I handled the saving of the variables to your cart array in the JS fiddle. You add array elements with the .push functionality of jquery:
cart.push(id);
I also removed elements using the following code:
var removeItem = id; // item to remove
cart.splice($.inArray(removeItem, cart), 1);

Answer 2

Javascript runs on the users computer and PHP on the server.
So whilst you might want to use javascript to collect the data, I'm pretty sure you'll want to process the data with PHP, to avoid the user being able to interfere with it too easily.
"Think of your Ajax code as just another client to your server" from Security advice for jquery ajax data post?