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

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