AJAX Add to Cart [Support Thread]

[ink]

Congratulations on the new job!
OK, I'll spend some time on it and see it I can add this feature.

This would be decent if it worked on both product_info and product listing pages, I'd help if I could, my php skills are shocking let alone JS.

Is there a paid version available that actually works maybe this, https://www.numinix.com/zen-cart-plu...ax-add-to-cart , or does anybody want to get this together for a fee? Let me know. Maybe it is about time ZC was brought up to date with a bit of Ajax magic in this way.

[ink]

Maybe this https://codecanyon.net/item/pzen-ajx...ncart/19685088

/*
* Pzen AjxCart for Zen Cart.
* WARNING: Do not change this file. Your changes will be lost.
*
* @copyright Copyright 2017 Perfectus Inc.
* Version : Pzen AjxCart 1.7
*/

var popTimer;
$(document).ready(function(){
$("body").on("click","#pzencontinue_shopping, .pzenajx-close",function(){
closePzenAjxPopup();
});
$("body").on("click", "#pzengo_cart",function(){
parent.location.href = pzen_crtpage_url;
});
$('body').on('click','.spplus-minus .sp-plus', function(){
var oldVal = $('.cart-box input[name="cart_quantity"]').val();
var newVal = (parseInt($('.cart-box input[name="cart_quantity"]').val(),10) +1);
$('.cart-box input[name="cart_quantity"]').val(newVal).trigger("keyup");;
});

$('body').on('click','.spplus-minus .sp-minus', function(){
var oldVal = $('.cart-box input[name="cart_quantity"]').val();
var newVal = (parseInt($('.cart-box input[name="cart_quantity"]').val(),10) -1);
if (oldVal > 1) {
var newVal = parseFloat(oldVal) - 1;
} else {
var newVal = 1;
}
$('.cart-box input[name="cart_quantity"]').val(newVal).trigger("keyup");;
});
});
var $ = $.noConflict();
$(function(){
var timer = 0;
if(!$("#pzenajx-wrapper").length){
$('body').append(pzenajx_wrapper);
}

//BOF Qty validation
$('body').on('keydown', 'input[name="cart_quantity"], input[name="cart_quantity[]"]', function (e) {

// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A, Command+A
(e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: home, end, left, right, down, up
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don't do anything
return;
}

// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
$('body').on('blur', 'input[name="cart_quantity"], input[name="cart_quantity[]"]', function (e) {
var cur_val = parseInt($(this).val());
var min_val = parseInt($(this).attr('min'));
var max_val = parseInt($(this).attr('max'));
if(isNaN(cur_val)){
$(this).val(min_val);
}
});
$('body').on('change keyup', 'input[name="cart_quantity"], input[name="cart_quantity[]"]', function (e) {
var cur_val = parseInt($(this).val());
var min_val = parseInt($(this).attr('min'));
var max_val = parseInt($(this).attr('max'));
if(cur_val < min_val){
$(this).val(min_val);
}
if(cur_val > max_val){
$(this).val(max_val);
}
});
//EOF Qty validation

//mobile-ajaxcart
MpzenFlyout('bodyAjxCartClickFn','.ajxcart-container', '.mpzen-ajxcart-action');

// product Listing submit cart action
$('body').on('submit', '#productListing form[name="cart_quantity"]', function(e){
e.preventDefault();
checkPzenFileEmptyStatus(this,'disable');
var data = new FormData(this);
checkPzenFileEmptyStatus(this,'enable');
var attr = getFrmUrlParams($(this).attr('action'));
if((typeof attr!="undefined") && attr!=''){
$.each( attr, function( key, value ) {
if($.inArray( key, [ "products_id", "action"] )){
data.append(key, value);
}
});
}
data.append('qty',($('input[name="cart_quantity"]').val()));
data.append('pzen_action','prodinfo-add');
setPzenAjxAddCart($(this), '', '', '', data);

});

// product info submit action
$('body').on('submit', '#productGeneral form[name="cart_quantity"]', function(e){
e.preventDefault();
checkPzenFileEmptyStatus(this,'disable');
var data = new FormData(this);
var frm_action = 'prodinfo-add';
checkPzenFileEmptyStatus(this,'enable');
var attr = getFrmUrlParams($(this).attr('action'));
if((typeof attr!="undefined") && attr!=''){
$.each( attr, function( key, value ) {
if($.inArray( key, [ "products_id", "action"] )){
data.append(key, value);
}
});
}
data.append('pzen_action', frm_action);
data.append('qty', ($('input[name="cart_quantity"]').val()));
setPzenAjxAddCart($(this), '', frm_action, '', data, 'pinfo');

});

// product Listing Multi add cart
$('form[name="multiple_products_cart_quantity"]').submit(function(event) {
event.preventDefault();
checkPzenFileEmptyStatus(this,'disable');
var data = new FormData(this);
checkPzenFileEmptyStatus(this,'enable');
data.append('pzen_action','multiprod-add');
setPzenAjxAddCart($(this).find("#productListing"), '', '', '', data);

});

// Cart Full Update
$('body').on('submit', '#shoppingCartDefault form[name="cart_quantity"]', function(e){
e.preventDefault();
var data = new FormData(this);
data.append('pzen_action','multicart-update');
setPzenAjxAddCart($("#shoppingCartDefault"), '', action='multicart-update', '', data, 'cartpage');
});

//Cart Single Update
$('body').on('click', '.cartQuantityUpdate input', function(e) {
e.preventDefault();
pid = $(this).siblings('input[name="products_id[]"]').val();
var data = new FormData($('#shoppingCartDefault form[name="cart_quantity"]')[0]);
data.append('suid', pid);
data.append('pzen_action','cart-update');
setPzenAjxAddCart($(this).parent().parent(), pid, action='cart-update', '', data, 'cartpage');
});

// Cart delete action
$('body').on('click', '.cartRemoveItemDisplay a', function(e) {
e.preventDefault();
var pid=getParameterByName('product_id',$(this).attr('href'));
if(pid){
setPzenAjxRemoveCart($(this).parent().parent(), decodeURIComponent(pid), 'cart-remove','', '', 'cartpage');
}
});
});
function getFrmUrlParams(url) {
if(url){
var regex = /([^=&?]+)=([^&#]*)/g, params = {}, parts, key, value;
while((parts = regex.exec(url)) != null) {
key = parts[1], value = parts[2];
var isArray = /\[\]$/.test(key);
if(isArray) {
params[key] = params[key] || [];
params[key].push(value);
}
else {
params[key] = value;
}
}
return params;
}
}
function getParameterByName(sParam, url) {
if (!url) { url = window.location.href; }
var sPageURL =url;
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
function setPzenShowOptions(e, products_id, link){
setPzenAjxloaderClass(e, 'add');
try {
$.ajax({
type : 'POST',
url : link,
dataType : 'HTML',
data : {'pzen_action': 'show','products_id': products_id},
success :function(data){
setPzenAjxQck(e, data, 'qck');
setPzenAjxloaderClass(e, 'remove');
},
error: function(xhr, textStatus, errorThrown) {
setPzenAjxQck(e, "Error: " + xhr.status + ": " + xhr.statusText);
setPzenAjxloaderClass(e, 'remove');
}
});
} catch (e) {
}
return false;
}
function setPzenAjxloaderClass(e, act, t){
var act = act || 'add';
var t = t || false;
if(act=='add'){
$('body').addClass("pzen-ajx-loader");
if(t=='pinfo' ){
e.addClass("pzen-ajxldr");
}else if(t=='cartpage' ){
e.addClass("pzen-tbl-ajxldr");
}else if(t=='rcart'){
$(e).parents(".pzenajx-minicart").addClass("pzen-ajxldr");
$(e).parents("#cartContentsDisplay").addClass("pzen-ajxldr");
}else{
$(e).parents('.product-wrapper').addClass("pzen-ajxldr");
}
}else if(act=='remove'){
$('body').removeClass("pzen-ajx-loader");
if(t=='pinfo' ){
e.removeClass("pzen-ajxldr");
}else if(t=='cartpage' ){
e.removeClass("pzen-tbl-ajxldr");
}else if(t=='rcart'){
$(e).parents("#cartContentsDisplay").removeClass("pzen-ajxldr");
}else{
$(e).parents('.product-wrapper').removeClass("pzen-ajxldr");
}
}
}
//set AjxAddtoCart
function setPzenAjxAddCart(e, products_id, action, qty, d, t){
var action = action || 'add';
var qty = qty || '1';

setPzenAjxloaderClass(e, 'add', t);

if((typeof d!="undefined") && d!=''){
d = d;
}else{
d = new FormData;
d.append('pzen_action', action);
d.append('products_id', products_id);
d.append('qty', qty);
}

try {
$.ajax({
type : 'POST',
url : 'ajax.php?act=ajaxPzenAjxCart&method=ajxCart',
dataType : 'json',
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData:false,
data : d,
success :function(data){
setPzenAjxData(e, data, action);
setPzenAjxloaderClass(e, 'remove', t);
},
error: function(xhr, textStatus, errorThrown) {
setPzenAjxQck(e, "Error: " + xhr.status + ": " + xhr.statusText);
setPzenAjxloaderClass(e, 'remove', t);
}
});
} catch (e) {
}
return false;
}
function setPzenAjxRemoveCart(e, pid, action){
var action = action || 'remove';
setPzenAjxAddCart(e, pid, action, 0, '', 'rcart');
}
function setPzenAjxData(e, data, action){
if(data.msg.status == 'error'){
if($('.msgs-popup').length > 0){
$('.msgs-popup').html(data.popcontent);
}else{
setPzenAjxHandPop(data);
}
}else{
if(data.minicart){
$(".sideboxpzen-cart").replaceWith(data.minicart);
}
if(data.cartcontent){
$("#mpzen-ajxcart-action .cart-count").html(data.cartcontent.cartCount);
$('#cartSubTotal').html(data.cartcontent.subTotal);
$('.cartTotalsDisplay').html(data.cartcontent.mainTotals);
$('.mob-cart .count').html(data.cartcontent.cartCount);
if(data.cartcontent.shippingEstimator){
$('.shippingEstimatorCont').html(data.cartcontent.shippingEstimator);
}
}

if(action == 'prodinfo-add'){
var pcrtup = $(data.popcontent).find(".qty-in-cart").text();
if(typeof pcrtup != "undefined"){
if(pcrtup!=''){
if($('#cartAdd > p').length > 0){
$('#cart-box #cartAdd > p').html(pcrtup);
}else{
$('#cart-box #cartAdd').prepend('<p class="qty-in-cart">'+pcrtup+'</p>');
}
}
}
}

if(action=='multicart-update'){
if(data.cartcontent.cartCount==0){ location.reload();}
if(data.cartuproduct){
$.each( data.cartuproduct, function( key, value ) {
$("#cartContentsDisplay tr").not(".tableHeading").each(function(index){
if(key==index){
$(this).find('.cartQuantity input[name="cart_quantity[]"]').val(value.cartQuantity);
$(this).find(".cartUnitDisplay").html(value.cartUnitDisplay);
$(this).find(".cartTotalDisplay").html(value.cartTotalDisplay);
}
});
});

if(data.msg.status!='success'){
setPzenAjxHandPop(data);
}
}
}else if(action=='cart-update' || action=='cart-remove'){
if(data.cartcontent.cartCount==0){ location.reload();}
if(data.cartuproduct){
$.each( data.cartuproduct, function( key, value ) {
$("#cartContentsDisplay tr").not(".tableHeading").each(function(index){
var cpid = $(this).find('input[name="products_id[]"]').val();
if(cpid==value.cartProductsId){
$(this).find('.cartQuantity input[name="cart_quantity[]"]').val(value.cartQuantity);
$(this).find(".cartUnitDisplay").html(value.cartUnitDisplay);
$(this).find(".cartTotalDisplay").html(value.cartTotalDisplay);
}
});
});
if(data.msg.status!='success'){
setPzenAjxHandPop(data);
}
}
}else if(action=='cart-remove' || action=='remove' ){
// no action
}else{
setPzenAjxHandPop(data);
}
}
//remove cart page products
if(action=='remove' || action=='cart-remove' ){
$('#cartContentsDisplay').find("tr").each(function(){
id=$(this).find('[name="products_id[]"]').val();
if(typeof id !== "undefined"){
if(data.rid==id){
removePzenCartRow($(this), data, action);
}

}
});
}
}
function setPzenAjxHandPop(data){
var popEtimer = 10000;
if (popTimer) clearTimeout(popTimer);
if(data.pop_timer){ popEtimer = data.pop_timer; }
if(data.popcontent){
if($("#pzenajx-wrapper").length){
$("#pzenajx-wrapper").modal('show');
$("#quickViewModal").modal("hide");
$('body').addClass("pzen-ajxmodal-open");
setTimeout(function(){$("#pzenajx-wrapper").removeClass('pzen-qck');},50);
if(data.popcontent){
$("#pzenajx-wrapper .pzenajxinner-content").html(data.popcontent);
}
popTimer = setTimeout(function(){
if (popEtimer == -1) {
clearTimeout(popTimer);
}
closePzenAjxPopup();
}, popEtimer);
}
}
}
function setPzenAjxQck(e, data, action){
var action = action || false;
if($("#pzenajx-wrapper").length){
if(action=='qck'){
$("#pzenajx-wrapper").addClass('pzen-qck');
}
$("#pzenajx-wrapper").modal('show');
if(data){
$("#pzenajx-wrapper .pzenajxinner-content").html(data);
}
}
}
function closePzenAjxPopup(){
clearTimeout(popTimer);
setTimeout(function(){$("#pzenajx-wrapper").removeClass('pzen-qck');},400);
$("#pzenajx-wrapper").modal('hide');
$('body').removeClass("pzen-ajxmodal-open");
}
function removePzenCartRow(e, data, action){
var action = action || false;
var data = data || false;
$("#pzenajx-wrapper").modal('hide');
if(e){e.fadeOut(300, function() { $(this).remove(); });}
if(data){if(data.cartcontent.cartCount==0){ location.reload();} }

closePzenAjxPopup();
}
function closeMpzenmenuPopup(){
clearTimeout(popTimer);
setTimeout(function(){$("#pzenajx-wrapper").removeClass('pzen-qck');},400);
$("#pzenajx-wrapper").fadeOut(300);
$('body').removeClass("pzen-ajxpop-open");
}
function MpzenFlyout(MpzenClickFn, MpzenContainer, MpzenAction){
var eventtype = checkMpzenMobile() ? 'touchstart' : 'click';
var ajaxcart_container = $(MpzenContainer);
var MpzenClickFn = function(event) {
var targetElement = event.target || event.srcElement;
if(!hasMpzenParentClass( targetElement, 'mpzen-flyout-content')) {
resetMpzenFlyout();
document.removeEventListener( eventtype, MpzenClickFn );
}
}
$('body').on('click', MpzenAction, function(e) {
e.preventDefault();
var ajxcart_effect = $(this).attr( 'data-effect' );
if($('html').hasClass('mpzen-flyout-open')) {
$('html').removeClass('mpzen-flyout-open');
$(ajaxcart_container).removeClass(ajxcart_effect);
$(ajaxcart_container).removeClass('mpzen-flyout-active');
} else {
$('html').addClass('mpzen-flyout-open');
$(ajaxcart_container).addClass(ajxcart_effect);
$(ajaxcart_container).addClass('mpzen-flyout-active');
setTimeout(function() {
document.addEventListener( eventtype, MpzenClickFn);
}, 20);
}

});
$('.close-flyout').click(function() {
resetMpzenFlyout();
document.removeEventListener( eventtype, MpzenClickFn );
});
}
function checkMpzenMobile() {
var check = false;
(function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle| lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|wi ndows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg( 13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
function resetMpzenFlyout() {
$('html').removeClass('mpzen-flyout-open');
if($('.mpzen-flyout-container').hasClass('mpzen-flyout-active')){
$('.mpzen-flyout-container').removeClass('mpzen-flyout-active');
}
}
function hasMpzenParentClass(e, classname ) {
if(e === document) return false;
if( classie.has( e, classname ) ) {
return true;
}
return e.parentNode && hasMpzenParentClass( e.parentNode, classname );
}
function compareNew(obj, action) {
$.ajax({type: "POST", dataType : 'json', cache: false, data:{'compare_id': obj, 'com_action': action,'msg':'yes'}, url: "pzen_ajax_compare.php", success: function(data){ setPzenAjxHandPop(data); }
});
}
function checkPzenFileEmptyStatus(obj, action){
var action = action || 'enable';
if(action == 'disable'){
$(obj).find(':input[type="file"]').each(function(){
if ($(this).val() == '' && ($(this).prop('disabled') == false)){
$(this).prop("disabled", true);
$(this).attr('pzenAjxDisabled','true');
}
});
}else{
$(obj).find(':input[type="file"]').each(function(){
if ((typeof $(this).attr('pzenAjxDisabled') != 'undefined') && ($(this).prop('disabled') == true)){
$(this).prop("disabled", false);
$(this).removeAttr('pzenAjxDisabled');
}
});
}
}

[carlwhat]

@ink there is a link at the bottom of the page for BB code. it takes a little bit to learn, but it makes readability much better on posts. especially when posting large chunks of code. you can use the brackets for code. something like:

// your code here --->

in addition, i have this ajax magic working on my sites. perhaps i will look and see the difference between the download version and what i did to make it work better....

i agree that ajax magic makes a site much better and brings it much more current.

although i thought @balilr was reworking it the last time i had some communication with him, which seemed after the feb 7, 2020 date above.

[kernheimer]

@ink there is a link at the bottom of the page for BB code. it takes a little bit to learn, but it makes readability much better on posts. especially when posting large chunks of code. you can use the brackets for code. something like:

// your code here --->

in addition, i have this ajax magic working on my sites. perhaps i will look and see the difference between the download version and what i did to make it work better....

i agree that ajax magic makes a site much better and brings it much more current.

although i thought @balilr was reworking it the last time i had some communication with him, which seemed after the feb 7, 2020 date above.

@blilr is great in support! i can not get though get his module to work. blanks on every time i try
and buying from envato would be a great option, but the comments on that module is also a bit meh..
would love to see if anybody found time to update this one! it sure looks awesome