title: Why does my "add to cart" button not work?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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).</p>
  
  <pre><code>&lt;form action="includes/cart/add_to_cart.inc.php" method="get" name="addcartform" id="addcartform" onsubmit="return false;"&gt;   
  &lt;!-- Important hidden inputs --&gt;
  &lt;input type="hidden" id="js" name="js" value="false" /&gt;
  &lt;input type="hidden" id="product_id" name="product_id" value="{product:id}" /&gt;
  &lt;a id="add_to_cart" style="display:none;" href="#" onclick="{product:add_to_cart_js}" class="generated_button" title="Add To Cart" &gt;
  &lt;img src="images/icons/cart_add.png" align="absmiddle" /&gt;
  &lt;span&gt; Add To Cart &lt;/span&gt; &lt;/a&gt;
  &lt;noscript&gt;
  &lt;!-- non javascript --&gt;
  &lt;input class="generated_button"  type="submit" value="Add To Cart" name="submit" id="cart_submit" /&gt;
  &lt;/noscript&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>id="product_id" name="product_id" value="{product:id}"
  </code></pre>
  
  <p>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!</p>
  
  <p>Thanks in advance,
  Dan</p>
  
  <p><strong>UPDATE:</strong> 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:</p>
  
  <blockquote>
    <p>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.</p>
    
    <p>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:</p>
  </blockquote>
  
  <pre><code>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!');
  });
  </code></pre>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <pre><code>jQuery(function ($) {
  $('.some-button').on('click', function () {
      Cart.addItem(52);
      return false;
  });
  });
  </code></pre>