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.
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?
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
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);
https://www.opencart.com/index.php?rout ... n_id=28168
AddToCart ScrollTop is disabled and replaced by nice popup (with or without autofade).
Users browsing this forum: Google [Bot] and 425 guests