Ask your WordPress questions! Pay money and get answers fast! (more info)

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

  • SOLVED

I've done a bit of customising to a woothemes.com theme (superstore) so that it now loads a popup div when a product is added to the cart, this enables a customer to either continue shopping or checkout at the click of a button - so pretty useful. This works fine on the single product page e.g - [[LINK href="http://pbs.transparentwebdesigns.co.uk/shop/hand-saws/bahco-244-fine-cut-saw-22-11-tpi/"]]http://pbs.transparentwebdesigns.co.uk/shop/hand-saws/bahco-244-fine-cut-saw-22-11-tpi/[[/LINK]]

BUT....

I've also edited the category pages to include a grid/list view toggle:
[[LINK href="http://pbs.transparentwebdesigns.co.uk/product-category/hand-tools/"]]http://pbs.transparentwebdesigns.co.uk/product-category/hand-tools/[[/LINK]]
on the list view toggle an add to cart button is displayed. This works fine in that if you click the add to cart button the correct item is added to the cart, the issue is that the popup displays the name of the first product that was added. So the first time you add a product the popup displays the correct product name, but if you don't refresh the page and add a different product the popup still shows the first product name - I think this is because the popup div needs refreshing but I'm not sure how to do this, can anyone help?

Feel free to use this code on your own project:

jquery needed:

*---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;
}

});


});


then in themefolder/woocommerce/single-product/add-to-cart:

<?php
/**
* Custom Loop Add to Cart.
*
* Template with quantity and ajax.
*/

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly.

global $product;
?>

<?php if ( ! $product->is_in_stock() ) : ?>

<a href="<?php echo apply_filters( 'out_of_stock_add_to_cart_url', get_permalink( $product->id ) ); ?>" class="button"><?php echo apply_filters( 'out_of_stock_add_to_cart_text', __( 'Read More', 'woocommerce' ) ); ?></a>

<?php else : ?>

<?php
$link = array(
'url' => '',
'label' => '',
'class' => ''
);

switch ( $product->product_type ) {
case "variable" :
$link['url'] = apply_filters( 'variable_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'variable_add_to_cart_text', __( 'Select options', 'woocommerce' ) );
break;
case "grouped" :
$link['url'] = apply_filters( 'grouped_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'grouped_add_to_cart_text', __( 'View options', 'woocommerce' ) );
break;
case "external" :
$link['url'] = apply_filters( 'external_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'external_add_to_cart_text', __( 'Read More', 'woocommerce' ) );
break;
default :
if ( $product->is_purchasable() ) {
$link['url'] = apply_filters( 'add_to_cart_url', esc_url( $product->add_to_cart_url() ) );
$link['label'] = apply_filters( 'add_to_cart_text', __( 'Add to cart', 'woocommerce' ) );
$link['class'] = apply_filters( 'add_to_cart_class', 'add_to_cart_button' );
} else {
$link['url'] = apply_filters( 'not_purchasable_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'not_purchasable_text', __( 'Read More', 'woocommerce' ) );
}
break;
}

// If there is a simple product.
if ( $product->product_type == 'simple' ) {
?>
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart single_product_add_to_trolley" method="post" enctype="multipart/form-data">
<?php
// Display the submit button.
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 );

// Displays the quantity box.
woocommerce_quantity_input();

?>
</form>

<?php
} else {
echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="%s button product_type_%s">%s</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 );
}

?>





</form>
<div id="popup_content" style="display:none;">
<div class="close">
<a href="#" id="baner_close" style="display: block; color:#ffffff; font-weight:700; text-transform:uppercase">x</a>
</div>

<div style="height:60px; margin-bottom:20px; margin-top:20px;">
<span class="added_tick"></span>

<div style="float:left; height:60px;display:table; width:307px;">
<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>
</div>
</div>

<div>

<div class="clear"></div>

<div style="width:390px; text-align:center; margin-bottom:20px;margin-top:40px;">
<div style="width:100%">
<a class="cont-shop-btn" id="baner_close2" href="#">Continue Shopping</a>
<a id="chkout-btn" href="<?php echo $woocommerce->cart->get_cart_url();?>" title="<?php _e('Cart','woothemes') ?>">View Trolley</a>
</div>
</div>

<div class="clear"></div>


<?php if ( ! dynamic_sidebar( 'Add to cart popup' ) ) :?><?php endif;?>


</div>
</div>

<?php do_action('woocommerce_after_add_to_cart_form'); ?>



<?php endif; ?>


And you'll also need a modal window jquery script I used this one:
http://codecanyon.net/item/jquery-flying-popup/175653

Answers (1)

2013-06-09

Giri answers:

Thats because you are not using unique id parameter for popup. Your category page uses same id "popup_content" in every products. That is incorrect. So append the_id() function.

http://codex.wordpress.org/Function_Reference/the_ID

So it will generate ids like popup_content_1, popup_content_2 etc.


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");
});