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.