problem on adding a new function
Hello,
I am using OpenCart.
I added this code to make image of product fly to cart when user click on add to cart button:
-
$('.buttonm').on('click', function () {
var cart = $('#cart');
var imgtodrag = $(this).parent('.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($('body'))
.animate({
'top': cart.offset().top + 10,
'left': cart.offset().left + 10,
'width': 75,
'height': 75
}, 1000, 'easeInOutExpo');
imgclone.animate({
'width': 0,
'height': 0
}, function () {
$(this).detach()
});
}
});
.
it works correctly but I have one problem.
some of products have options (color, size, etc) that user must first select them. by default when user clicks on add to cart button of product with options, OpenCart redirects him to product page.
This is my problem. now when I click products with options first, image of that product flies to cart and then it redirects to product page. How can I prevent this?
here is a peace of original OpenCart javascript file that can help:
- function addToCart(product_id, quantity) {
quantity = typeof(quantity) != 'undefined' ? quantity : 1;
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: 'product_id=' + product_id + '&quantity=' + quantity,
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, .information, .error').remove();
if (json['redirect']) {
location = json['redirect'];
}
if (json['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#cart-total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
}
});
}
and here is the whole opencart javascript file:
- $(document).ready(function() {
/* Search */
$('.button-search').bind('click', function() {
url = $('base').attr('href') + 'index.php?route=product/search';
var search = $('input[name=\'search\']').attr('value');
if (search) {
url += '&search=' + encodeURIComponent(search);
}
location = url;
});
$('#header input[name=\'search\']').bind('keydown', function(e) {
if (e.keyCode == 13) {
url = $('base').attr('href') + 'index.php?route=product/search';
var search = $('input[name=\'search\']').attr('value');
if (search) {
url += '&search=' + encodeURIComponent(search);
}
location = url;
}
});
/* Ajax Cart */
$('#cart > .heading a').live('click', function() {
$('#cart').addClass('active');
$('#cart').load('index.php?route=module/cart #cart > *');
$('#cart').live('mouseleave', function() {
$(this).removeClass('active');
});
});
/* Mega Menu */
$('#menu ul > li > a + div').each(function(index, element) {
// IE6 & IE7 Fixes
if ($.browser.msie && ($.browser.version == 7 || $.browser.version == 6)) {
var category = $(element).find('a');
var columns = $(element).find('ul').length;
$(element).css('width', (columns * 143) + 'px');
$(element).find('ul').css('float', 'left');
}
var menu = $('#menu').offset();
var dropdown = $(this).parent().offset();
i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#menu').outerWidth());
if (i > 0) {
$(this).css('margin-left', '-' + (i + 5) + 'px');
}
});
// IE6 & IE7 Fixes
if ($.browser.msie) {
if ($.browser.version <= 6) {
$('#column-left + #column-right + #content, #column-left + #content').css('margin-left', '195px');
$('#column-right + #content').css('margin-right', '195px');
$('.box-category ul li a.active + ul').css('display', 'block');
}
if ($.browser.version <= 7) {
$('#menu > ul > li').bind('mouseover', function() {
$(this).addClass('active');
});
$('#menu > ul > li').bind('mouseout', function() {
$(this).removeClass('active');
});
}
}
$('.success img, .warning img, .attention img, .information img').live('click', function() {
$(this).parent().fadeOut('slow', function() {
$(this).remove();
});
});
});
function getURLVar(key) {
var value = [];
var query = String(document.location).split('?');
if (query[1]) {
var part = query[1].split('&');
for (i = 0; i < part.length; i++) {
var data = part[i].split('=');
if (data[0] && data[1]) {
value[data[0]] = data[1];
}
}
if (value[key]) {
return value[key];
} else {
return '';
}
}
}
function addToCart(product_id, quantity) {
quantity = typeof(quantity) != 'undefined' ? quantity : 1;
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: 'product_id=' + product_id + '&quantity=' + quantity,
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, .information, .error').remove();
if (json['redirect']) {
location = json['redirect'];
}
if (json['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#cart-total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
}
});
}
function addToWishList(product_id) {
$.ajax({
url: 'index.php?route=account/wishlist/add',
type: 'post',
data: 'product_id=' + product_id,
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, .information').remove();
if (json['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#wishlist-total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
}
});
}
function addToCompare(product_id) {
$.ajax({
url: 'index.php?route=product/compare/add',
type: 'post',
data: 'product_id=' + product_id,
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, .information').remove();
if (json['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#compare-total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
}
});
}