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>
</div>
</form>
</div>
</div>
</div>
</li>
<?php endforeach ?>
</ol>
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()
.offset({
top: imgtodrag.offset().top,
left: imgtodrag.offset().left
})
.css({
'opacity': '0.5',
'position': 'absolute',
'height': '150px',
'width': '150px',
'z-index': '100'
})
.appendTo(jQuery('body'))
.animate({
'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);
imgclone.animate({
'width': 0,
'height': 0
}, function () {
jQuery(this).detach()
});
}
});
});
Best Answer
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.
[EDIT]
Your code does not work because the selector that triggers the ajax is
.item button
but your link is ana
tag.Add a class on the link to the cart. let's say
add-to-cart
like this:and modify the js making the first line look like this: