woocommerce刷新添加到购物车弹出div

Question

我已经对woothemes.com主题（超市）进行了一些自定义，以便在将产品添加到购物车时加载弹出式div，这样客户就可以通过点击继续购物或结帐一个按钮 - 非常有用。这在单个产品页面上可以正常工作，例如 - http://pbs.transparentwebdesigns.co.uk/shop/hand-saws/bahco-244-rough-cut-saw-22-7-tpi

但....

我还编辑了类别页面以包含网格/列表视图切换：

http://pbs.transparentwebdesigns.co.uk/product-category/hand-tools/

列表视图上的

切换添加到购物车按钮。这样可以正常工作，如果您单击添加到购物车按钮，正确的项目将添加到购物车，问题是弹出窗口显示添加的第一个产品的名称。因此，当您第一次添加产品时，弹出窗口会显示正确的产品名称，但如果您不刷新页面并添加其他产品，弹出窗口仍会显示第一个产品名称 - 我认为这是因为弹出窗口div需要刷新但是我不知道怎么做，有人可以帮忙吗？

随意在您自己的项目中使用此代码：

需要jquery：

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

    });


});

然后在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; ?>