Woocommerce：我想让购物车在添加到购物车后下拉

Question

我一直在尝试做一些相当简单的事情：在用户将某些东西添加到他们的购物车后让购物车下拉并停留在那里，直到他们点击它为止。

我尝试在我的 childtheme 中通过 functions.php 添加一个 php 函数，添加自定义 javascript 代码，但它没有反应。我似乎无法使用 javascript/jquery 捕获事件。 Woocommerce 在向购物车添加内容后会重新加载页面，因为它是一种变体产品。

这是购物车的 html 代码：

<div id="shoppingcart-dropdown" class="mkd-shopping-cart-dropdown">
                            <ul>
                                                                    <li>
                                        <div class="mkd-item-image-holder">
                                            <a itemprop="url" href="https://gemini-bracelets.com/collection/ladies/musthave-deluxe-vanilla-8mm/">
                                                <img src="//gemini-bracelets.com/wp-content/uploads/2017/06/Musthave-Deluxe-Summer-Night-8mm-300x200.jpg" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" width="300" height="200">                                            </a>
                                        </div>
                                        <div class="mkd-item-info-holder">
                                            <h5 itemprop="name" class="mkd-product-title"><a itemprop="url" href="https://gemini-bracelets.com/collection/ladies/musthave-deluxe-vanilla-8mm/">Musthave Deluxe Summer Night 8mm</a></h5>
                                            <span class="mkd-quantity">2</span>
                                            <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>39,95</span>                                            <a href="https://gemini-bracelets.com/cart/?remove_item=6c2e0a0990dacd72f16b437da82dc6cc&amp;_wpnonce=663fbc7a93" class="remove" title="Remove this item"><span class="icon-arrows-remove"></span></a>                                        </div>
                                    </li>
                                                                    <li>
                                        <div class="mkd-item-image-holder">
                                            <a itemprop="url" href="https://gemini-bracelets.com/collection/ladies/musthave-deluxe-vanilla-8mm/">
                                                <img src="//gemini-bracelets.com/wp-content/uploads/2017/06/Musthave-Deluxe-Summer-Night-8mm-300x200.jpg" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" width="300" height="200">                                            </a>
                                        </div>
                                        <div class="mkd-item-info-holder">
                                            <h5 itemprop="name" class="mkd-product-title"><a itemprop="url" href="https://gemini-bracelets.com/collection/ladies/musthave-deluxe-vanilla-8mm/">Musthave Deluxe Summer Night 8mm</a></h5>
                                            <span class="mkd-quantity">3</span>
                                            <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>39,95</span>                                            <a href="https://gemini-bracelets.com/cart/?remove_item=8ed888de28bd08234d727d879e5f7a36&amp;_wpnonce=663fbc7a93" class="remove" title="Remove this item"><span class="icon-arrows-remove"></span></a>                                        </div>
                                    </li>
                                                                <div class="mkd-cart-bottom">
                                    <div class="mkd-subtotal-holder clearfix">
                                        <span class="mkd-total">TOTAL:</span>
                                        <span class="mkd-total-amount">
                                        <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>199,75</span>                                  </span>
                                    </div>
                                                                        <div class="mkd-btn-holder clearfix">
                                        <a itemprop="url" href="https://gemini-bracelets.com/cart/" class="mkd-view-cart" data-title="VIEW CART"><span>VIEW CART</span></a>
                                    </div>
                                    <div class="mkd-btn-holder clearfix">
                                        <a itemprop="url" href="https://gemini-bracelets.com/checkout/" class="mkd-view-cart" data-title="CHECKOUT"><span>CHECKOUT</span></a>
                                    </div>
                                </div>
                            </ul>
                        </div>

这就是我一直在尝试用 jquery 做的事情：

window.jQuery( document ).ready( function ( $ ) {
    $( 'body' ).on( 'added_to_cart', function ( event, fragments, cart_hash, $button ) {

        $('div#shoppingcart-dropdown').addClass('.after-add');
        $('body').on('click', function(){
            $('#shoppingcart-dropdown').removeClass('.after-add');
        })
    } );
} );

Answer 1

您可以使用 ajax 将自己添加到购物车中。首先，您必须阻止运行默认功能并通过放置以下功能添加购物车。 这个函数在你的脚本文件中。

$('.add_to_cart_button').click(function(e){
    e.preventDefault();

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

    $.post(ajaxhandle,{'action':'add_foobar','product_id':product_id},function(response){

        if(response==0){
        console.log('error');   
        }
      else{
            console.log('success');
        }
    });

});

functions.php中的这个函数

add_action( 'wp_ajax_add_foobar', 'prefix_ajax_add_foobar' );
add_action( 'wp_ajax_nopriv_add_foobar', 'prefix_ajax_add_foobar' );

function prefix_ajax_add_foobar() {
$product_id  = $_POST['product_id'];

// add code the add the product to your cart
global $woocommerce;
$woocommerce->cart->add_to_cart( $product_id );
die();
}

Bellow 函数为迷你购物车创建短代码。你可以把这个[custom-mini-cart] 短代码放在任何你想要的地方..

// you can change the display as per your wish
function custom_mini_cart() {
//don't want total means you can remove this
echo '<a href="#" class="dropdown-back" data-toggle="dropdown"> ';
    echo '<i class="fa fa-shopping-cart" aria-hidden="true"></i>';
    echo '<div class="basket-item-count" style="display: inline;">';
        echo '<span class="cart-items-count count">';
            echo WC()->cart->get_cart_contents_count();
        echo ' items -'; 
        echo WC()->cart->get_cart_total();
        echo  '</span>';
    echo '</div>';
echo '</a>';
echo '<ul class="dropdown-menu dropdown-menu-mini-cart">';
        echo '<li> <div class="widget_shopping_cart_content">';
                  woocommerce_mini_cart();
            echo '</div></li></ul>';

}
add_shortcode( 'custom-mini-cart', 'custom_mini_cart' );

此功能用于自动刷新迷你购物车。

//you have to change according to above mini cart shortcode function.

add_filter( 'woocommerce_add_to_cart_fragments', function($fragments) {

ob_start();
?>

<a href="#" class="dropdown-back" data-toggle="dropdown"> 
    <i class="fa fa-shopping-cart" aria-hidden="true"></i>
    <div class="basket-item-count" style="display: inline;">
        <span class="cart-items-count count">
            <?php echo WC()->cart->get_cart_contents_count(); ?>
        items -
        <?php echo WC()->cart->get_cart_total(); ?>
        </span>
    </div>
</a>

<?php $fragments['a.dropdown-back'] = ob_get_clean();

return $fragments;

} );

add_filter( 'woocommerce_add_to_cart_fragments', function($fragments) {

ob_start();
?>

<ul class="dropdown-menu dropdown-menu-mini-cart">
       <li> <div class="widget_shopping_cart_content">
                  <?php woocommerce_mini_cart(); ?>
            </div></li></ul>

<?php $fragments['ul.dropdown-menu'] = ob_get_clean();

return $fragments;

} );

请尝试一下..

Answer 2

我找到了一种方法来定位成功添加到购物车后的特定时刻。 在子模板 woocommerce 文件夹中的 notices 目录中的 success.php 文件中，我添加了一个带有我自己的 JavaScript 代码的脚本标签。

woocommerce通知目录中的success.php：

<?php
/**
 * Show messages
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/notices/success.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see         https://docs.woocommerce.com/document/template-structure/
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     1.6.4
 */

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

if ( ! $messages ) {
    return;
}

?>

<?php foreach ( $messages as $message ) : ?>
    <div class="woocommerce-message"><?php echo wp_kses_post( $message ); ?></div>
<?php endforeach; ?>

//here is where I added my jquery/javascript code and this time it does target everything correctly. 
<script>
    jQuery(document).ready(function($){

        //added specific hover class that I can remove the hover-css from.
        $("#cart-holder-div").removeClass("has-hover");

        //adding specific class so that I can add my own css. 
        $('#shoppingcart-dropdown').addClass("after-add-cart");

        //once the customer clicks anywhere, the removed and added classes are undone.
        $(document).click(function(){

            $("#cart-holder-div").addClass("has-hover");
            $('#shoppingcart-dropdown').removeClass("after-add-cart");
            $("#shoppingcart-dropdown").hide();
        });

        //to make sure the previous click event doesn't target the actual shopping cart
        $("#shoppingcart-dropdown").click(function(e){
            e.stopPropagation();
        });


    });
</script>