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

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">
<a href="checkout.php"><input type="button" value="Go To Checkout" id="checkoutbutton" /></a>

<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.

You'll need to post your other code. There has to be some other HTML. You could also create a JS fiddle which would also help. — user1048676, Apr 01 '13 at 21:35
Well for starters, you're ID that you're trying to use is undefined. What exactly are you trying to store in the cart? — user1048676, Apr 01 '13 at 21:41
Well you see people click buttons that add a variable to the cart, which is the item that corresponds to the button — austinstout, Apr 01 '13 at 21:43

score 1 · Answer 1 · edited May 23 '17 at 11:57

1

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?

edited May 23 '17 at 11:57

Community

1
1

answered Apr 01 '13 at 21:51

pevinkinel

391
3
17

So I shouldn't use ajax? I thought it was safe from user prying... because every time I look at the source code on a site the Javascript cannot be edited – austinstout Apr 01 '13 at 21:53
yeah, I edited my answer, it wouldn't work at that point. All of this code runs before users have made any selection. – pevinkinel Apr 01 '13 at 21:56
But heres the thing: if I make a selection it might not update that time, but if I make another selection it should at least have updated the first item into the cart, right? – austinstout Apr 01 '13 at 21:57
Hmm. I saw your edit and I suppose I should add extra security, because this is a user "buying" stuff with virtual coins, each click sends an AJAX request. But, can you explain what they are saying for security? I don't understand it... sorry – austinstout Apr 01 '13 at 22:12

score 1 · Accepted Answer · answered Apr 01 '13 at 22:21

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);

answered Apr 01 '13 at 22:21

user1048676

9,756
26
83
120

Wow great code thanks, but I implemented this in my code and the cart STILL turned out as nothing! What am I missing? Thanks for the code though! – austinstout Apr 01 '13 at 22:32
Make sure you've added the correct jQuery files. Otherwise, I'd copy it directly from the JS fiddle. Only other thing I can think of is if you're using wordpress or something that is noconflict. You can find some information on that here: http://stackoverflow.com/questions/10807200/jquery-uncaught-typeerror-property-of-object-object-window-is-not-a-funct – user1048676 Apr 01 '13 at 22:38
I am using my own site, and I copied it right from the FIDDLE! I have all jquery installed, since everything else works with it. Also, when I click the checkout button NOTHING happens. – austinstout Apr 01 '13 at 22:44
Sorry I'm really bad with coding and I can barely understand your code... I could never code something like that myself. So, what I think you want to know is that there are six little 'buyinfo' divs that should be sending AJAX requests, because when you click them, you are buying an item. Essentially, every time you 'buy' something it should send a request, and then when you click go to checkout button, the new page should have received the data of what was bought and therefore add that into a PHP database, and charge the correct amount of coins to the user. Running out of characters.......... – austinstout Apr 01 '13 at 22:48
You've got a lot of work to do if you're trying to do that. You'll need an identifier for the user, database, mySQL code to update the coin count. The reason why nothing happens when you click the checkout button is because it's trying to call a test.php page which I'm sure doesn't exist. You'll need to receive the variable into that page, update the database, you can optionally return something to a user. Then when you click the button you'd ideally want to select the coin count from the database and display that to the user based on the updates you made from your post command. – user1048676 Apr 01 '13 at 22:56
Try and learn some simple debugging techniques. For example, add an alert when the checkout button is check to see if it actually is working there. You can add some other alerts. If you're using Chrome do an Inspect Element and check the console and see if you're getting any errors. Then post on this website if you have a question. Make sure you tried something first or else people will be less reluctant to help you out. – user1048676 Apr 01 '13 at 23:27

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

2 Answers2