Why does my "add to cart" button not work? - php

Question

My website uses a private e-commerce system, and unfortunately, while their support team are very helpful, they are not particularly supportive of 'custom code', such the code that I require.
I am trying to configure a "splash" page (which pops up before users complete their order), which offers users the opportunity to buy one of our t-shirts half-price, with an "add to cart" allowing them to add it to their cart from within the splash page.
I have tried copying code from the standard product pages, but unfortunately the button does not work as it should, and instead it simply links through to '#' (which can be seen in the code below).
<form action="includes/cart/add_to_cart.inc.php" method="get" name="addcartform" id="addcartform" onsubmit="return false;">
<!-- Important hidden inputs -->
<input type="hidden" id="js" name="js" value="false" />
<input type="hidden" id="product_id" name="product_id" value="{product:id}" />
<a id="add_to_cart" style="display:none;" href="#" onclick="{product:add_to_cart_js}" class="generated_button" title="Add To Cart" >
<img src="images/icons/cart_add.png" align="absmiddle" />
<span> Add To Cart </span> </a>
<noscript>
<!-- non javascript -->
<input class="generated_button" type="submit" value="Add To Cart" name="submit" id="cart_submit" />
</noscript>
After putting the code in, I change the "display" of the link to "inline-block" (so that it shows), and I also tried putting in the ID of the product that I want users to add to their cart here:
id="product_id" name="product_id" value="{product:id}"
Unfortunately none of this has worked, and as I dont have complete (or easy) access to all of the files I need, I'd really appreciate any help with getting this one resolved!
Thanks in advance,
Dan
UPDATE: The support team behind our eCommerce system have since sent me this piece of code to help, but I'm not entirely sure how to use it:
If you want more control via javascript you can use the core Cart object we make available > in the javascript. Its accessable via the (Private eCommerce System) namespace, and in
fact if you open up the console in an (Private eCommerce System) site and type in (Private > eCommerce System) and hit enter it will return an object to you of what parts of the core > system we make available to you right in the javascript so far, (this will increase in
time too).
The (Private eCommerce System).Cart object has a sub addItem() method/function that can be used here.
You can pass it the product id to add it to cart: (e.g. adding a product with id #52)
Cart.addItem(52);
Or you can pass it these full options like so:
Cart.addItem({
productId: 52,
qty: 1,
options: {},
wishlistId: 0,
extraData: "Some detail i want to show to the user"
}, function () {
console.log('This is the callback for when its complete!');
});
So if they add a button or link, they can use jQuery to set on click of that button to run that code, e.g.
jQuery(function ($) {
$('.some-button').on('click', function () {
Cart.addItem(52);
return false;
});
});

Answer 1

What if you swap out the Javascript button and replace it with the no-script input field?
<form action="includes/cart/add_to_cart.inc.php" method="get" name="addcartform" id="addcartform" onsubmit="return false;">
<!-- Important hidden inputs -->
<input type="hidden" id="js" name="js" value="false" />
<input type="hidden" id="product_id" name="product_id" value="{product:id}" />
<input class="generated_button" type="submit" value="Add To Cart" name="submit" id="cart_submit" />
<img src="images/icons/cart_add.png" align="absmiddle" />
<span> Add To Cart </span>
</form>
You might need to re-style the form fields and the <span> which says "Add to Cart" to get it looking right...
UPDATE:
Given the information the support team have provided, try putting this in your "splash page", instead of the form above.
<div>
<script>
function addTshirtToCart(){
/* Swap out the 34 for the actual product ID of the tshirt you want to
add to the basket */
Cart.addItem(34);
// You might also want some code here to close the "splash page"
return false;
}
</script>
<a href="#" id="add_to_cart" onclick="return addTshirtToCart();">
<img src="images/icons/cart_add.png" align="absmiddle" />
<span> Add To Cart </span>
</a>
</div>
UPDATE 2:
Replace the existing div from my 2nd answer and replaced it with this which works for me:
<form action="includes/cart/add_to_cart.inc.php" method="get" name="addcartform" id="addcartform" onsubmit="return false;">
<input type="hidden" id="js" name="js" value="false">
<input type="hidden" id="product_id" name="product_id" value="1618">
<a id="add_to_cart" style="" href="#" onclick="update_cart_content(); return false;" class="generated_button" title="Add To Cart">
<img src="images/icons/cart_add.png" align="absmiddle">
<span> Add To Cart </span> </a>
<noscript>
<input class="generated_button" type="submit" value="Add To Cart" name="submit" id="cart_submit"/>
</noscript>
</form>
UPDATE 3
To close the popup when adding the t-shirt to the cart, try putting this in the a element above:
onclick="update_cart_content(); spashBox.close(); return false;"