应用优惠券时，在WooCommerce结账页面上添加下拉列表

Question

我创建了一个函数，在结账页面的付款信息之前添加一个下拉字段。

当我尝试add_action函数时，以下内容正在工作。

add_action('woocommerce_review_order_before_payment', 'add_store_selection');
function add_store_selection() {

$content .= '<div id="store-pickup-select">';
$content .= '<select><option selected="selected">Choose one</option>';

/* Here i will get a list of option value from another function */

$content .= '</select>';
$content .= '</div>';
echo $content;
} 

但我需要的是，我只想在应用优惠券代码时显示这个下拉列表。我移除add_action('woocommerce_review_order_before_payment', 'add_store_selection');

然后我尝试了这个：

function add_store_list() {
do_action( 'woocommerce_review_order_before_payment');
}
add_action( 'woocommerce_applied_coupon', 'add_store_list');

下拉列表出现在账单详细信息的顶部，而不是woocommerce_review_order_before_payment位置的

当优惠券代码被点击时，我如何使下拉列表出现在付款前部分？

Answer 1

您可以在WooCommerce前端使用checkout JS事件，在本例中为

$( document.body ).trigger( 'applied_coupon_in_checkout' );
$( document.body ).trigger( 'removed_coupon_in_checkout' );

所以你得到了：

function action_woocommerce_review_order_before_payment() {
$content = '<div id="store-pickup-select">';
$content .= '<select>';
$content .= '<option selected="selected">Choose one</option>';
$content .= '<option value="my-option">My option</option>';
$content .= '</select>';
$content .= '</div>';

echo $content;
}
add_action( 'woocommerce_review_order_before_payment', 'action_woocommerce_review_order_before_payment', 10, 0 );
// jQuery code
function action_wp_footer() {
if ( is_checkout() && ! is_wc_endpoint_url() ) {
?>
<script type="text/javascript">
jQuery(function($) {
// Default
$( '#store-pickup-select' ).hide();

$( document.body ).on( 'applied_coupon_in_checkout removed_coupon_in_checkout', function( event ) {
// With no parameters, the .toggle() method simply toggles the visibility of elements:
$( '#store-pickup-select' ).toggle();
});
});
</script>
<?php
}
}
add_action( 'wp_footer', 'action_wp_footer' );