title: what happens when add to cart button clicks in opencart
body: <p>Can somebody please tell me, which function will execute when we click on 'Add to Cart' button in store front? which code or method will execute when Add to Cart button clicked? I observed that there some calculations takes place.</p>
  
  <p>In view/theme/<em>*</em>/template/product/product.tpl</p>
  
  <pre><code> &lt;input type="hidden" name="product_id" size="2" value="&lt;?php echo $product_id; ?&gt;" /&gt;
            &amp;nbsp;
            &lt;input type="button" value="&lt;?php echo $button_cart; ?&gt;" id="button-cart" class="button" /&gt;
  </code></pre>
  
  <p>in javascript </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;&lt;!--
  $('#button-cart').bind('click', function() {
      $.ajax({
          url: 'index.php?route=checkout/cart/add',
          type: 'post',
          data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
          dataType: 'json',
          success: function(json) {
              $('.success, .warning, .attention, information, .error').remove();
  
              if (json['error']) {
                  if (json['error']['option']) {
                      for (i in json['error']['option']) {
                          $('#option-' + i).after('&lt;span class="error"&gt;' + json['error']['option'][i] + '&lt;/span&gt;');
                      }
                  }
              } 
              alert(json['success']);
              if (json['success']) {
                  $('#notification').html('&lt;div class="success" style="display: none;"&gt;' + json['success'] + '&lt;img src="catalog/view/theme/palioxis/image/close.png" alt="" class="close" /&gt;&lt;/div&gt;');
  
                  $('.success').fadeIn('slow');
  
                  $('#cart-total').html(json['total']);
  
                  $('html, body').animate({ scrollTop: 0 }, 'slow'); 
              }   
          }
      });
  });
  //--&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Can somebody brief what happens here? </p>