add to cart modal window, works on single page not archive WordPress

Giri comments:

And one more thing you also have multiple cart_btn ids. id parameter should be unique. thats the css rule.

Giri comments:

So here is the idea.

To get unique cart_btn id
Replace the following

echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" id ="cart_btn" class="add_to_cart_button_popup button alt">Buy Now</a>', esc_url( $link['url'] ), esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );

with

echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" id ="cart_btn_%s" class="add_to_cart_button_popup button alt">Buy Now</a>', esc_url( $link['url'] ), esc_attr( $product->id ),esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );


Giri comments:

To get unique popup_content id
Replace the following line

<div id="popup_content" style="display:none;">

with

<div id="popup_content_<?php echo esc_attr( $product->id ); ?>" style="display:none;">

Giri comments:

You could also add an extra parameter like "data-popup_id" to create popup content id in your button.

I mean like this

echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" data-popup_id="popup_content_%s" id ="cart_btn_%s" class="add_to_cart_button_popup button alt">Buy Now</a>', esc_url( $link['url'] ), esc_attr( $product->id ),esc_attr( $product->id ),esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );


The above code will generate link like

<a href="/product-category/hand-tools/?add-to-cart=78" rel="nofollow" data-product_id="78" data-product_sku="244ROUGH" data-popup_id="popup_content_78" id ="cart_btn_78" class="add_to_cart_button_popup button alt">Buy Now</a>

Now in jquery use like this

// Ajax add to cart

$(document).on( 'click', '.add_to_cart_button_popup', function() {

var popup = $(this).attr('data-popup_id');

// popup

$("#" + popup + "").popup(

{

setcookie: false,

selfclose: 0,

centered: true,

floating: false,

popup_div: 'popup',

overlay: true,

opacity_level: 0.6,

popup_appear : 'show',

popup_appear_time : 0,

popup_disappear : 'fadeOut',

popup_disappear_time: 200

});

willcm comments:

ok so I've made the changes to the add to cart button and that seems to be working in terms of outputting individual ids to the button.

The popup isnt showing now though, this is my add to cart js file:


/*---ajax quantity add*/
jQuery(document).ready(function($) {
$(document).on( 'change', '.quantity .qty', function() {
$(this).parent('.quantity').prev('#cart_btn').attr('data-quantity', $(this).val());
});
});

/*---ajax add to cart and popup single product page*/
jQuery(document).ready(function($){
// Ajax add to cart
$(document).on( 'click', '.add_to_cart_button_popup', function() {
var popup = $(this).attr('data-popup_id');

// popup

$("#" + popup + "").popup(

{
setcookie: false,
selfclose: 0,
centered: true,
floating: false,
popup_div: 'popup',
overlay: true,
opacity_level: 0.6,
popup_appear : 'show',
popup_appear_time : 0,
popup_disappear : 'fadeOut',
popup_disappear_time: 200
});

// AJAX add to cart request
var $thisbutton = $(this);

if ($thisbutton.is('.add_to_cart_button_popup')) {

if (!$thisbutton.attr('data-product_id')) return true;

var data = {
action: 'woocommerce_add_to_cart',
product_id: $thisbutton.attr('data-product_id'),
quantity: $thisbutton.attr('data-quantity'),
security: woocommerce_params.add_to_cart_nonce
};

// Trigger event
$('body').trigger( 'adding_to_cart', [ $thisbutton, data ] );

// Ajax action
$.post( woocommerce_params.ajax_url, data, function( response ) {

if ( ! response )
return;

var this_page = window.location.toString();

if ( response.error && response.product_url ) {
window.location = response.product_url;
return;
}

// Redirect to cart option
if ( woocommerce_params.cart_redirect_after_add == 'yes' ) {

window.location = woocommerce_params.cart_url;
return;

} else {

$thisbutton.removeClass('loading');

fragments = response.fragments;
cart_hash = response.cart_hash;

// Block fragments class
if ( fragments ) {
$.each(fragments, function(key, value) {
$(key).addClass('updating');
});
}

// Block widgets and fragments
$('.shop_table.cart, .updating, .cart_totals').fadeTo('400', '0.6').block({message: null, overlayCSS: {background: 'transparent url(' + woocommerce_params.ajax_loader_url + ') no-repeat center', backgroundSize: '16px 16px', opacity: 0.6 } } );

// Replace fragments
if ( fragments ) {
$.each(fragments, function(key, value) {
$(key).replaceWith(value);
});
}

// Unblock
$('.widget_shopping_cart, .updating').stop(true).css('opacity', '1').unblock();

// Cart page elements
$('.shop_table.cart').load( this_page + ' .shop_table.cart:eq(0) > *', function() {

$("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").addClass('buttons_added').append('<input type="button" value="+" id="add1" class="plus" />').prepend('<input type="button" value="-" id="minus1" class="minus" />');

$('.shop_table.cart').stop(true).css('opacity', '1').unblock();

$('body').trigger('cart_page_refreshed');

});

// update the popup cart notice
$("#popup_woocommerce_cart_notice_minimum_amount").html($("#woocommerce_cart_notice_minimum_amount").html());

$('.cart_totals').load( this_page + ' .cart_totals:eq(0) > *', function() {
$('.cart_totals').stop(true).css('opacity', '1').unblock();
});

// Trigger event so themes can refresh other areas
$('body').trigger( 'added_to_cart', [ fragments, cart_hash ] );

}
});

return false;

} else {
return true;
}

});


});



Giri comments:

Are you sure you used this code exactly?

echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" data-popup_id="popup_content_%s" id ="cart_btn_%s" class="add_to_cart_button_popup button alt">Buy Now</a>', esc_url( $link['url'] ), esc_attr( $product->id ),esc_attr( $product->id ),esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );


Because your output still doesn't have some of the tags I specified

Also Did you replace the following

<div id="popup_content" style="display:none;">


with

<div id="popup_content_<?php echo esc_attr( $product->id ); ?>" style="display:none;">

willcm comments:

This works perfectly, thanks so much

Giri comments:

You are welcome

willcm comments:

Going one step further when they add more than one quantity, currently the popup doesnt display that how do I get it to say:

1x "product" has been added to your order

2x "product" has been added to your order

40x "product" has been added to your order

etc I presume its this line:

<p style="display:table-cell; vertical-align:middle; font-size:1.2em; font-weight:700; color:#3C4653">
<?php do_action('woocommerce_product_thumbnails');
echo the_title()." has been added to your order<br />";
?>
</p>

Giri comments:

Try like this

Replace the following

<p style="display:table-cell; vertical-align:middle; font-size:1.2em; font-weight:700; color:#3C4653">

<?php do_action('woocommerce_product_thumbnails');

echo the_title()." has been added to your order<br />";

?>

</p>

with

<p style="display:table-cell; vertical-align:middle; font-size:1.2em; font-weight:700; color:#3C4653">

<?php do_action('woocommerce_product_thumbnails');

echo "<span class="itemcount"></span>".the_title()." has been added to your order<br />";

?>

</p>

Now we have to get the value from dropdown

So lets add jquery

var quantity = $(this).attr('data-quantity');

$('span.itemcount').replaceWith(""+ quantity +"X");


willcm comments:

hmmm, I've done something wrong as I'm getting:

undefinedX".the_title()." has been added to your order

jquery file for add to cart popups is now:

(how do I vote your answer as being correct it's saying I can't?

/*---number added to cart*/
var quantity = $(this).attr('data-quantity');
$('span.itemcount').replaceWith(""+ quantity +"X");


/*---ajax quantity add*/
jQuery(document).ready(function($) {
$(document).on( 'change', '.quantity .qty', function() {
$(this).parent('.quantity').prev('#cart_btn').attr('data-quantity', $(this).val());
});
});

/*---ajax add to cart and popup single product page*/
jQuery(document).ready(function($){
// Ajax add to cart
$(document).on( 'click', '#cart_btn', function() {

// popup
$('#popup_content').popup(
{
setcookie: false,
selfclose: 0,
centered: true,
floating: false,
popup_div: 'popup',
overlay: true,
opacity_level: 0.6,
popup_appear : 'show',
popup_appear_time : 0,
popup_disappear : 'fadeOut',
popup_disappear_time: 200
});

// AJAX add to cart request
var $thisbutton = $(this);

if ($thisbutton.is('.add_to_cart_button_popup')) {

if (!$thisbutton.attr('data-product_id')) return true;

var data = {
action: 'woocommerce_add_to_cart',
product_id: $thisbutton.attr('data-product_id'),
quantity: $thisbutton.attr('data-quantity'),
security: woocommerce_params.add_to_cart_nonce
};

// Trigger event
$('body').trigger( 'adding_to_cart', [ $thisbutton, data ] );

// Ajax action
$.post( woocommerce_params.ajax_url, data, function( response ) {

if ( ! response )
return;

var this_page = window.location.toString();

if ( response.error && response.product_url ) {
window.location = response.product_url;
return;
}

// Redirect to cart option
if ( woocommerce_params.cart_redirect_after_add == 'yes' ) {

window.location = woocommerce_params.cart_url;
return;

} else {

$thisbutton.removeClass('loading');

fragments = response.fragments;
cart_hash = response.cart_hash;

// Block fragments class
if ( fragments ) {
$.each(fragments, function(key, value) {
$(key).addClass('updating');
});
}

// Block widgets and fragments
$('.shop_table.cart, .updating, .cart_totals').fadeTo('400', '0.6').block({message: null, overlayCSS: {background: 'transparent url(' + woocommerce_params.ajax_loader_url + ') no-repeat center', backgroundSize: '16px 16px', opacity: 0.6 } } );

// Replace fragments
if ( fragments ) {
$.each(fragments, function(key, value) {
$(key).replaceWith(value);
});
}

// Unblock
$('.widget_shopping_cart, .updating').stop(true).css('opacity', '1').unblock();

// Cart page elements
$('.shop_table.cart').load( this_page + ' .shop_table.cart:eq(0) > *', function() {

$("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").addClass('buttons_added').append('<input type="button" value="+" id="add1" class="plus" />').prepend('<input type="button" value="-" id="minus1" class="minus" />');

$('.shop_table.cart').stop(true).css('opacity', '1').unblock();

$('body').trigger('cart_page_refreshed');

});

// update the popup cart notice
$("#popup_woocommerce_cart_notice_minimum_amount").html($("#woocommerce_cart_notice_minimum_amount").html());

$('.cart_totals').load( this_page + ' .cart_totals:eq(0) > *', function() {
$('.cart_totals').stop(true).css('opacity', '1').unblock();
});

// Trigger event so themes can refresh other areas
$('body').trigger( 'added_to_cart', [ fragments, cart_hash ] );

}
});

return false;

} else {
return true;
}

});


});

willcm comments:

also had to change the html slightly to ' instead of " wrapping <span class="itemcount"> - though not sure about the double one's in the middle?

<p style="display:table-cell; vertical-align:middle; font-size:1.2em; font-weight:700; color:#3C4653">
<?php do_action('woocommerce_product_thumbnails');
echo '<span class="itemcount"></span>".the_title()." has been added to your order<br />';
?>
</p>

willcm comments:

ok this is now displaying the product title again - changed double quotes to single, but still not showing the quantity - it says "name of product" undefinedX has been added to your order

<p style="display:table-cell; vertical-align:middle; font-size:1.2em; font-weight:700; color:#3C4653">
<?php do_action('woocommerce_product_thumbnails');
echo '<span class="itemcount"></span>'.the_title().' has been added to your order<br />';
?>
</p>

willcm comments:

ah, it's only saying undefined x if there is only one quantity added to the cart, how do I say 1 x in this instance?

Also Currently if you add 2 of a product and then try to add a different amount e.g 5 of the same product immediately afterwards it still says the earlier amount, so that needs to refresh - how do I implement this?

THIS MAY HAVE GOT MISSED EARLIER ON IN MY STREAM OF POSTS!! HOW DO I VOTE YOUR ANSWER AS CORRECT SO YOU GET THE REWARD?

Giri comments:

I think data-quantity tag being added only when you increase the quantity. By default it doesn't have data-quantity value.

So increase the quantity and try again.

Also add a default data-quantity tag in your code.

I mean you have to replace this line

echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" data-popup_id="popup_content_%s" id ="cart_btn_%s" class="add_to_cart_button_popup button alt">Buy Now</a>', esc_url( $link['url'] ), esc_attr( $product->id ),esc_attr( $product->id ),esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );

with

echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" data-popup_id="popup_content_%s" id ="cart_btn_%s" data-quantity="1" class="add_to_cart_button_popup button alt">Buy Now</a>', esc_url( $link['url'] ), esc_attr( $product->id ),esc_attr( $product->id ),esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );

As for the vote check this page..

http://blog.tailormadeanswers.com/2011/04/22/voting-assign-prize-money/

willcm comments:

OK done so by default it now says 1x if you dont add more.

Check here:

http://pbs.transparentwebdesigns.co.uk/shop/hand-saws/bahco-244-fine-cut-saw-22-11-tpi/

add 1 quantity of a product and then try adding 3 quantities of the same product it still says 1x unless you refresh the page...

willcm comments:

I cant find the assign prize money button?

Giri comments:

Try like this to fix the refresh bug

$(this).change(function() {
var quantity = $(this).attr('data-quantity');
$('span.itemcount').replaceWith(""+ quantity +" X");
});

Giri comments:

I think you cannot assign prize money. But you can vote.

Check this link

[[LINK href="http://wpquestions.com/question/pickAWinner/id/8481"]]http://wpquestions.com/question/pickAWinner/id/8481[[/LINK]]

willcm comments:

I've added the code in my custom.js as below and it's not refreshing still?

/*---ajax quantity add*/


/*---quantity in product category*/
jQuery(document).ready(function($) {
$(document).on( 'change', '.quantity .qty', function() {
$(this).parent('.quantity').prev('.add_to_cart_button_popup').attr('data-quantity', $(this).val());
});
});

/*---ajax add to cart and popup single product page*/
jQuery(document).ready(function($){
// Ajax add to cart
$(document).on( 'click', '.add_to_cart_button_popup', function() {
var popup = $(this).attr('data-popup_id');

/*---number added to cart*/
var quantity = $(this).attr('data-quantity');
$('span.itemcount').replaceWith(""+ quantity +" X");

$(this).change(function() {
var quantity = $(this).attr('data-quantity');
$('span.itemcount').replaceWith(""+ quantity +" X");
});

// popup

$("#" + popup + "").popup(

{
setcookie: false,
selfclose: 0,
centered: true,
floating: false,
popup_div: 'popup',
overlay: true,
opacity_level: 0.6,
popup_appear : 'show',
popup_appear_time : 0,
popup_disappear : 'fadeOut',
popup_disappear_time: 200
});

// AJAX add to cart request
var $thisbutton = $(this);

if ($thisbutton.is('.add_to_cart_button_popup')) {

if (!$thisbutton.attr('data-product_id')) return true;

var data = {
action: 'woocommerce_add_to_cart',
product_id: $thisbutton.attr('data-product_id'),
quantity: $thisbutton.attr('data-quantity'),
security: woocommerce_params.add_to_cart_nonce
};

// Trigger event
$('body').trigger( 'adding_to_cart', [ $thisbutton, data ] );

// Ajax action
$.post( woocommerce_params.ajax_url, data, function( response ) {

if ( ! response )
return;

var this_page = window.location.toString();

if ( response.error && response.product_url ) {
window.location = response.product_url;
return;
}

// Redirect to cart option
if ( woocommerce_params.cart_redirect_after_add == 'yes' ) {

window.location = woocommerce_params.cart_url;
return;

} else {

$thisbutton.removeClass('loading');

fragments = response.fragments;
cart_hash = response.cart_hash;

// Block fragments class
if ( fragments ) {
$.each(fragments, function(key, value) {
$(key).addClass('updating');
});
}

// Block widgets and fragments
$('.shop_table.cart, .updating, .cart_totals').fadeTo('400', '0.6').block({message: null, overlayCSS: {background: 'transparent url(' + woocommerce_params.ajax_loader_url + ') no-repeat center', backgroundSize: '16px 16px', opacity: 0.6 } } );

// Replace fragments
if ( fragments ) {
$.each(fragments, function(key, value) {
$(key).replaceWith(value);
});
}

// Unblock
$('.widget_shopping_cart, .updating').stop(true).css('opacity', '1').unblock();

// Cart page elements
$('.shop_table.cart').load( this_page + ' .shop_table.cart:eq(0) > *', function() {

$("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").addClass('buttons_added').append('<input type="button" value="+" id="add1" class="plus" />').prepend('<input type="button" value="-" id="minus1" class="minus" />');

$('.shop_table.cart').stop(true).css('opacity', '1').unblock();

$('body').trigger('cart_page_refreshed');

});

// update the popup cart notice
$("#popup_woocommerce_cart_notice_minimum_amount").html($("#woocommerce_cart_notice_minimum_amount").html());

$('.cart_totals').load( this_page + ' .cart_totals:eq(0) > *', function() {
$('.cart_totals').stop(true).css('opacity', '1').unblock();
});

// Trigger event so themes can refresh other areas
$('body').trigger( 'added_to_cart', [ fragments, cart_hash ] );

}
});

return false;

} else {
return true;
}

});


});

Giri comments:

I meant replace


var quantity = $(this).attr('data-quantity');

$('span.itemcount').replaceWith(""+ quantity +" X");


with


$(this).change(function() {

var quantity = $(this).attr('data-quantity');

$('span.itemcount').replaceWith(""+ quantity +" X");

});


willcm comments:

(FOUND VOTE BUTTON AND CAST MY VOTE FOR YOU)

ok changed to this as your suggestion above and now the span itemcount isn't showing:


/*---ajax quantity add*/


/*---quantity in product category*/
jQuery(document).ready(function($) {
$(document).on( 'change', '.quantity .qty', function() {
$(this).parent('.quantity').prev('.add_to_cart_button_popup').attr('data-quantity', $(this).val());
});
});

/*---ajax add to cart and popup single product page*/
jQuery(document).ready(function($){
// Ajax add to cart
$(document).on( 'click', '.add_to_cart_button_popup', function() {
var popup = $(this).attr('data-popup_id');

/*---number added to cart*/
$(this).change(function() {
var quantity = $(this).attr('data-quantity');
$('span.itemcount').replaceWith(""+ quantity +" X");
});


// popup

$("#" + popup + "").popup(

{
setcookie: false,
selfclose: 0,
centered: true,
floating: false,
popup_div: 'popup',
overlay: true,
opacity_level: 0.6,
popup_appear : 'show',
popup_appear_time : 0,
popup_disappear : 'fadeOut',
popup_disappear_time: 200
});

// AJAX add to cart request
var $thisbutton = $(this);

if ($thisbutton.is('.add_to_cart_button_popup')) {

if (!$thisbutton.attr('data-product_id')) return true;

var data = {
action: 'woocommerce_add_to_cart',
product_id: $thisbutton.attr('data-product_id'),
quantity: $thisbutton.attr('data-quantity'),
security: woocommerce_params.add_to_cart_nonce
};

// Trigger event
$('body').trigger( 'adding_to_cart', [ $thisbutton, data ] );

// Ajax action
$.post( woocommerce_params.ajax_url, data, function( response ) {

if ( ! response )
return;

var this_page = window.location.toString();

if ( response.error && response.product_url ) {
window.location = response.product_url;
return;
}

// Redirect to cart option
if ( woocommerce_params.cart_redirect_after_add == 'yes' ) {

window.location = woocommerce_params.cart_url;
return;

} else {

$thisbutton.removeClass('loading');

fragments = response.fragments;
cart_hash = response.cart_hash;

// Block fragments class
if ( fragments ) {
$.each(fragments, function(key, value) {
$(key).addClass('updating');
});
}

// Block widgets and fragments
$('.shop_table.cart, .updating, .cart_totals').fadeTo('400', '0.6').block({message: null, overlayCSS: {background: 'transparent url(' + woocommerce_params.ajax_loader_url + ') no-repeat center', backgroundSize: '16px 16px', opacity: 0.6 } } );

// Replace fragments
if ( fragments ) {
$.each(fragments, function(key, value) {
$(key).replaceWith(value);
});
}

// Unblock
$('.widget_shopping_cart, .updating').stop(true).css('opacity', '1').unblock();

// Cart page elements
$('.shop_table.cart').load( this_page + ' .shop_table.cart:eq(0) > *', function() {

$("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").addClass('buttons_added').append('<input type="button" value="+" id="add1" class="plus" />').prepend('<input type="button" value="-" id="minus1" class="minus" />');

$('.shop_table.cart').stop(true).css('opacity', '1').unblock();

$('body').trigger('cart_page_refreshed');

});

// update the popup cart notice
$("#popup_woocommerce_cart_notice_minimum_amount").html($("#woocommerce_cart_notice_minimum_amount").html());

$('.cart_totals').load( this_page + ' .cart_totals:eq(0) > *', function() {
$('.cart_totals').stop(true).css('opacity', '1').unblock();
});

// Trigger event so themes can refresh other areas
$('body').trigger( 'added_to_cart', [ fragments, cart_hash ] );

}
});

return false;

} else {
return true;
}

});


});



willcm comments:

Hi,

I've inserted this code as above, and now the span item count isn't showing?

see [[LINK href="http://pbs.transparentwebdesigns.co.uk/product-category/hand-tools/"]]http://pbs.transparentwebdesigns.co.uk/product-category/hand-tools/[[/LINK]]


$(this).change(function() {
var quantity = $(this).attr('data-quantity');
$('span.itemcount').replaceWith(""+ quantity +" X");
});