php - woocommerce は、カートに追加するポップアップ div を更新します

Question

woothemes.com テーマ (スーパーストア) を少しカスタマイズして、製品がカートに追加されたときにポップアップ div をロードするようにしました。これにより、顧客はボタンをクリックするだけで買い物を続けるか、チェックアウトできます。 - とても便利です。これは、単一の製品ページでうまく機能します。

しかし....

また、カテゴリ ページを編集して、グリッド/リスト ビューの切り替えを含めました。

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; ?>