Using oc 2.0.2.0 I in common.js manged to remove the scroll to top when a product is added to the cart. The popup still shows on top of the page, but it doesn't scroll.
Because we are a wholesale company often our customers will add a lot of products to their cart before checking out so a scroll to top is very annoying for them. I however do want to make it obvious for our costumers something is added to their cart, wishlist etc.
Is there a easy (preferably free) way to show a popup or let something happen to the button when a item is added to the cart?
I am already using the Popup Add Product extension from valdeir2000 which is beautiful but only works on the product page and not on thee category pages.
Could you provide your site URL so we can take a look at it closer?
http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension
Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme
Extra Positions PRO, Custom JavaScript, Custom CSS and others
Sure, it's www.sieradendirect.nlviethemes wrote:Could you provide your site URL so we can take a look at it closer?
To do that you can open file common.js
find
and replace with
find
Code: Select all
$('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>');Code: Select all
$.ajax({
url: 'index.php?route=common/cart/info',
type: 'html',
success: function(html){
var newHtml = $(html).find('ul').html();
var btnCheckout = $(html).find('p.text-right a:eq(1)').text();
$('#notification .modal-footer #popup_checkout').html(btnCheckout);
$("#notification .modal-body").html('<ul style="list-style: outside none none;margin-left: -3em;">' + newHtml + '</ul>');
$("#notification .modal-body p.text-right").remove();
$("#notification").modal('show');
$("#notification .modal-footer").show();
$('#cart-total').html(json['total']);
$('#notification .btn-danger').click(function(){
$("#notification").modal('hide');
})
}
})http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension
Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme
Extra Positions PRO, Custom JavaScript, Custom CSS and others
The code above looks good, but we recommend you to make a ocmod so you don't loose the modification when using other extensions or updates.
Thanks for the replies. Unfortunately the above solution did not work for me. Using this code the add to cart button on category pages does not show a popup and on some occasions redirects to the product page.
I had a few people work on this website and I know atleast one of them made changes in this file to get the shopping cart working again. I'm far from being an expert but possibly that has something to do with the posted solution not working for me.
Not sure if it's helpful but this is my common.js file
I had a few people work on this website and I know atleast one of them made changes in this file to get the shopping cart working again. I'm far from being an expert but possibly that has something to do with the posted solution not working for me.
Not sure if it's helpful but this is my common.js file
Code: Select all
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 '';
}
}
}
$(document).ready(function() {
// Adding the clear Fix
cols1 = $('#column-right, #column-left').length;
if (cols1 == 2) {
$('#content .product-layout:nth-child(2n+2)').after('<div class="clearfix visible-md visible-sm"></div>');
} else if (cols1 == 1) {
$('#content .product-layout:nth-child(4n+4)').after('<div class="clearfix"></div>');
} else {
$('#content .product-layout:nth-child(4n+4)').after('<div class="clearfix"></div>');
}
// Highlight any found errors
$('.text-danger').each(function() {
var element = $(this).parent().parent();
if (element.hasClass('form-group')) {
element.addClass('has-error');
}
});
// Currency
$('#currency .currency-select').on('click', function(e) {
e.preventDefault();
$('#currency input[name=\'code\']').attr('value', $(this).attr('name'));
$('#currency').submit();
});
// Language
$('#language a').on('click', function(e) {
e.preventDefault();
$('#language input[name=\'code\']').attr('value', $(this).attr('href'));
$('#language').submit();
});
/* Search */
$('#search input[name=\'search\']').parent().find('button').on('click', function() {
url = $('base').attr('href') + 'index.php?route=product/search';
var value = $('header input[name=\'search\']').val();
if (value) {
url += '&search=' + encodeURIComponent(value);
}
location = url;
});
$('#search input[name=\'search\']').on('keydown', function(e) {
if (e.keyCode == 13) {
$('header input[name=\'search\']').parent().find('button').trigger('click');
}
});
// Menu
$('#menu .dropdown-menu').each(function() {
var menu = $('#menu').offset();
var dropdown = $(this).parent().offset();
var i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#menu').outerWidth());
if (i > 0) {
$(this).css('margin-left', '-' + (i + 5) + 'px');
}
});
// Product List
$('#list-view').click(function() {
$('#content .product-layout > .clearfix').remove();
//$('#content .product-layout').attr('class', 'product-layout product-list col-xs-12');
$('#content .row > .product-layout').attr('class', 'product-layout product-list col-xs-12');
localStorage.setItem('display', 'list');
});
// Product Grid
$('#grid-view').click(function() {
$('#content .product-layout > .clearfix').remove();
// What a shame bootstrap does not take into account dynamically loaded columns
cols = $('#column-right, #column-left').length;
if (cols == 2) {
$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');
} else if (cols == 1) {
$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-6');
} else {
$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
}
localStorage.setItem('display', 'grid');
});
if (localStorage.getItem('display') == 'list') {
$('#list-view').trigger('click');
} else {
$('#grid-view').trigger('click');
}
// tooltips on hover
$('[data-toggle=\'tooltip\']').tooltip({container: 'body'});
// Makes tooltips work on ajax generated content
$(document).ajaxStop(function() {
$('[data-toggle=\'tooltip\']').tooltip({container: 'body'});
});
});
// Cart add remove functions
var cart = {
'add': function(product_id, quantity) {
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
dataType: 'json',
beforeSend: function() {
$('#cart > button').button('loading');
},
complete: function() {
$('#cart > button').button('reset');
},
success: function(json) {
$('.alert, .text-danger').remove();
if (json['redirect']) {
location = json['redirect'];
}
if (json['success']) {
$('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>');
// Need to set timeout otherwise it wont update the total
setTimeout(function () {
$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
}, 100);
//$('html, body').animate({ scrollTop: 0 }, 'slow');
$('#cart > ul').load('index.php?route=common/cart/info ul li');
}
}
});
},
'update': function(key, quantity) {
$.ajax({
url: 'index.php?route=checkout/cart/edit',
type: 'post',
data: 'key=' + key + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
dataType: 'json',
beforeSend: function() {
$('#cart > button').button('loading');
},
complete: function() {
$('#cart > button').button('reset');
},
success: function(json) {
// Need to set timeout otherwise it wont update the total
setTimeout(function () {
$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
}, 100);
var pathArray = window.location.pathname.split( '/' );
if (pathArray[1] == 'winkelwagen' || getURLVar('route') == 'checkout/checkout') {
location = 'winkelwagen';
} else {
$('#cart > ul').load('index.php?route=common/cart/info ul li');
}
}
});
},
'remove': function(key) {
$.ajax({
url: 'index.php?route=checkout/cart/remove',
type: 'post',
data: 'key=' + key,
dataType: 'json',
beforeSend: function() {
$('#cart > button').button('loading');
},
complete: function() {
$('#cart > button').button('reset');
},
success: function(json) {
// Need to set timeout otherwise it wont update the total
setTimeout(function () {
$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
}, 100);
var pathArray = window.location.pathname.split( '/' );
if (pathArray[1] == 'winkelwagen' || getURLVar('route') == 'checkout/checkout') {
location = 'winkelwagen';
} else {
$('#cart > ul').load('index.php?route=common/cart/info ul li');
}
}
});
}
}
var voucher = {
'add': function() {
},
'remove': function(key) {
$.ajax({
url: 'index.php?route=checkout/cart/remove',
type: 'post',
data: 'key=' + key,
dataType: 'json',
beforeSend: function() {
$('#cart > button').button('loading');
},
complete: function() {
$('#cart > button').button('reset');
},
success: function(json) {
// Need to set timeout otherwise it wont update the total
setTimeout(function () {
$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
}, 100);
var pathArray = window.location.pathname.split( '/' );
if (pathArray[1] == 'winkelwagen' || getURLVar('route') == 'checkout/checkout') {
location = 'winkelwagen';
} else {
$('#cart > ul').load('index.php?route=common/cart/info ul li');
}
}
});
}
}
var wishlist = {
'add': function(product_id) {
$.ajax({
url: 'index.php?route=account/wishlist/add',
type: 'post',
data: 'product_id=' + product_id,
dataType: 'json',
success: function(json) {
$('.alert').remove();
if (json['success']) {
$('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>');
}
if (json['info']) {
$('#content').parent().before('<div class="alert alert-info"><i class="fa fa-info-circle"></i> ' + json['info'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>');
}
$('#wishlist-total').html(json['total']);
//$('html, body').animate({ scrollTop: 0 }, 'slow');
}
});
},
'remove': function() {
}
}
var compare = {
'add': function(product_id) {
$.ajax({
url: 'index.php?route=product/compare/add',
type: 'post',
data: 'product_id=' + product_id,
dataType: 'json',
success: function(json) {
$('.alert').remove();
if (json['success']) {
$('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>');
$('#compare-total').html(json['total']);
//$('html, body').animate({ scrollTop: 0 }, 'slow');
}
}
});
},
'remove': function() {
}
}
/* Agree to Terms */
$(document).delegate('.agree', 'click', function(e) {
e.preventDefault();
$('#modal-agree').remove();
var element = this;
$.ajax({
url: $(element).attr('href'),
type: 'get',
dataType: 'html',
success: function(data) {
html = '<div id="modal-agree" class="modal">';
html += ' <div class="modal-dialog">';
html += ' <div class="modal-content">';
html += ' <div class="modal-header">';
html += ' <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>';
html += ' <h4 class="modal-title">' + $(element).text() + '</h4>';
html += ' </div>';
html += ' <div class="modal-body">' + data + '</div>';
html += ' </div';
html += ' </div>';
html += '</div>';
$('body').append(html);
$('#modal-agree').modal('show');
}
});
});
// Autocomplete */
(function($) {
$.fn.autocomplete = function(option) {
return this.each(function() {
this.timer = null;
this.items = new Array();
$.extend(this, option);
$(this).attr('autocomplete', 'off');
// Focus
$(this).on('focus', function() {
this.request();
});
// Blur
$(this).on('blur', function() {
setTimeout(function(object) {
object.hide();
}, 200, this);
});
// Keydown
$(this).on('keydown', function(event) {
switch(event.keyCode) {
case 27: // escape
this.hide();
break;
default:
this.request();
break;
}
});
// Click
this.click = function(event) {
event.preventDefault();
value = $(event.target).parent().attr('data-value');
if (value && this.items[value]) {
this.select(this.items[value]);
}
}
// Show
this.show = function() {
var pos = $(this).position();
$(this).siblings('ul.dropdown-menu').css({
top: pos.top + $(this).outerHeight(),
left: pos.left
});
$(this).siblings('ul.dropdown-menu').show();
}
// Hide
this.hide = function() {
$(this).siblings('ul.dropdown-menu').hide();
}
// Request
this.request = function() {
clearTimeout(this.timer);
this.timer = setTimeout(function(object) {
object.source($(object).val(), $.proxy(object.response, object));
}, 200, this);
}
// Response
this.response = function(json) {
html = '';
if (json.length) {
for (i = 0; i < json.length; i++) {
this.items[json[i]['value']] = json[i];
}
for (i = 0; i < json.length; i++) {
if (!json[i]['category']) {
html += '<li data-value="' + json[i]['value'] + '"><a href="#">' + json[i]['label'] + '</a></li>';
}
}
// Get all the ones with a categories
var category = new Array();
for (i = 0; i < json.length; i++) {
if (json[i]['category']) {
if (!category[json[i]['category']]) {
category[json[i]['category']] = new Array();
category[json[i]['category']]['name'] = json[i]['category'];
category[json[i]['category']]['item'] = new Array();
}
category[json[i]['category']]['item'].push(json[i]);
}
}
for (i in category) {
html += '<li class="dropdown-header">' + category[i]['name'] + '</li>';
for (j = 0; j < category[i]['item'].length; j++) {
html += '<li data-value="' + category[i]['item'][j]['value'] + '"><a href="#"> ' + category[i]['item'][j]['label'] + '</a></li>';
}
}
}
if (html) {
this.show();
} else {
this.hide();
}
$(this).siblings('ul.dropdown-menu').html(html);
}
$(this).after('<ul class="dropdown-menu"></ul>');
$(this).siblings('ul.dropdown-menu').delegate('a', 'click', $.proxy(this.click, this));
});
}
})(window.jQuery);Although the post is 2 years old, it is still relevant. I solved it today with the following extension:
https://www.opencart.com/index.php?rout ... n_id=28168
AddToCart ScrollTop is disabled and replaced by nice popup (with or without autofade).
https://www.opencart.com/index.php?rout ... n_id=28168
AddToCart ScrollTop is disabled and replaced by nice popup (with or without autofade).
Who is online
Users browsing this forum: No registered users and 75 guests
