I am bit new to magento am facing an issue.i added add to cart button to related product but when cliks on it it open a new page showing a source code of something.am adding a screen shot

![Page shown after clinking add to cart button in related products]1

also when i check cart the product is added really. My add to cart button on home page is working fine

my related.phtml code is as follows

     <ol class="mini-products-list list-inline media-ol products-grid" id="block-related">
    <?php foreach($this->getItems() as $_item): ?>
    <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>" style="min-height: 407px;">
         <!--<?php if(!$_item->isComposite() && $_item->isSaleable()): ?>
                 <?php if (!$_item->getRequiredOptions()): ?>
                     <input type="checkbox" style="position: relative; right: -74px; top: 40px;" class="checkbox related-checkbox" id="related-checkbox<?php echo $_item->getId() ?>" ame="related_products[]" value="<?php echo $_item->getId() ?>" />
                 <?php endif; ?>
             <?php endif; ?>-->
             <div class="product">
                <a href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_item->getName()) ?>" class="product-image">
                <img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(200) ?>"  alt="<?php echo $this->escapeHtml($_item->getName()) ?>" /></a>
                <div class="product-details">
                    <p class="product-name media-pdt"><a style="font-size: 14px; color: #000;" href="<?php echo $_item->getProductUrl() ?>"><?php echo $this->escapeHtml($_item->getName()) ?></a></p>
                    <?php echo $this->getPriceHtml($_item, true, '-related') ?>
                    <!--<?php if ($this->helper('wishlist')->isAllow()) : ?>
                        <a href="<?php echo $this->getAddToWishlistUrl($_item) ?>" class="link-wishlist"><?php  echo $this->__('Add to Wishlist') ?></a>
                    <?php endif; ?><br/>
                    <div class="col-md-12" style="margin-top: 20px;">
                        <form action="<?php echo $this->getAddToCartUrl($_item) ?>" method="post" id="product_addtocart_form_<?php echo $_item->getId()?>"<?php if($_item->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>> 
                            <div class="btn-med-add"><div style="text-align: center;">
                                <a href="<?php echo $this->getUrl('checkout/cart');?>"><button type="submit"  title="<?php echo $buttonTitle ?>" class="btnbtn-success" ><span><span><?php echo $buttonTitle; ?></span></span>Add To Cart</button></a>
   <?php endforeach ?>

Please can any help

My add to cart js file code is as follows

jQuery(document).ready(function() {

   jQuery('.item button').on('click', function () {         //alert('what');
    jQuery('#mini-cart').load(document.URL +  ' #mini-cart');

        var cart = jQuery('#custom-cart');      //alert(this.value);
        var imgtodrag = jQuery(this).parents('.item').find("img").eq(0);

        if (imgtodrag) {
            var imgclone = imgtodrag.clone()
                   top: imgtodrag.offset().top,
                   left: imgtodrag.offset().left
                 'opacity': '0.5',
                 'position': 'absolute',
                 'height': '150px',
                 'width': '150px',
                 'z-index': '100'
                  'top': cart.offset().top + 10,
                  'left': cart.offset().left + 10,
                  'width': 75,
                  'height': 75
                }, 1000, 'easeInOutExpo');

            setTimeout(function () {
                 cart.effect("shake", {
                      times: 2
                 }, 200);
             }, 1500);

                 'width': 0,
                 'height': 0
             }, function () {


2 Answers 2


It seams that you have an extension for adding products to cart via AJAX.
This means your addAction from the cart controller is rewritten.
Either disable the extension or find out the js function that should be called when adding a product to cart and apply it to the related products add to cart button.
That function should handle the AJAX response and update the dom elements related to the cart.
Your code does not work because the selector that triggers the ajax is .item button but your link is an a tag.
Add a class on the link to the cart. let's say add-to-cart like this:

<a href="<?php echo $this->getUrl('checkout/cart');?>"><button type="submit"  title="<?php echo $buttonTitle ?>" class="btnbtn-success add-to-cart" ><span><span><?php echo $buttonTitle; ?></span></span><?php echo $this->__('Add To Cart')?></button></a>

and modify the js making the first line look like this:

jQuery('.item button, .add-to-cart').on('click', function () { 
  • yes i am using extension fly to cart .i disabled it but still receiving same page ..i have updated the js file code above
    – Yousaf Ali
    Sep 21, 2015 at 9:23
  • @YousafAli. see my update.
    – Marius
    Sep 21, 2015 at 11:37
  • i did the changes ,still getting the same error,But my function do calls when i un-comment alert('hello'); then gives alert it means function do call.
    – Yousaf Ali
    Sep 22, 2015 at 6:55

if you are using magento 2, you can try to use this extension to smooth fly effect of product image, after you add product to cart: https://marketplace.magento.com/adam-flytocart.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.