我一直在尝试做一些相当简单的事情：在用户将某些东西添加到购物车并留在那里之后，让购物车下拉，直到他们点击它为止。
我尝试在我的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&_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&_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');
})
} );
} );
答案 0 :(得分：0)
您可以使用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');
}
});
});
函数.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功能为Mini cart创建短代码。您可以将[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;
} );
请试试吧..
答案 1 :(得分：0)
我找到了一种方法来定位成功添加到购物车后的特定时刻。 对于child-template woocoommerce文件夹中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>