有没有办法在单击单选按钮时显示弹出窗口？

问题描述

enter image description here

这是woo-commerce网站的购物车页面。如您所见，点击取货是一种运输方式。作为 javascript 开发人员，显示弹出窗口非常容易。但是，我不太确定如何为 wordpress 网站做到这一点。这是cart-shippping.PHP 上单选按钮的一些代码：

                                if ( 1 < count( $available_methods ) ) {
                                    printf( '<input type="radio" name="shipping_method[%1$d]" data-index="%1$d" id="shipping_method_%1$d_%2$s" value="%3$s" class="shipping_method" %4$s />',$index,esc_attr( sanitize_title( $method->id ) ),esc_attr( $method->id ),checked( $method->id,$chosen_method,false ) ); // WPCS: XSS ok.
                                } else {
                                    printf( '<input type="hidden" name="shipping_method[%1$d]" data-index="%1$d" id="shipping_method_%1$d_%2$s" value="%3$s" class="shipping_method" />',esc_attr( $method->id ) ); // WPCS: XSS ok.
                                }
                                printf( '<label class="shipping__list_label" style="color: black;" for="shipping_method_%1$s_%2$s">%3$s%4$s</label>',wc_cart_totals_shipping_method_label( $method ),$extratext ); // WPCS: XSS ok.
                                do_action( 'woocommerce_after_shipping_rate',$method,$index );

 

解决方法

在php中添加带有附加运输信息的hmtl窗口，然后触发单选按钮上的点击事件，用javascript/css打开窗口。

我已经调整了您的初始 if 语句，并在输入字段中添加了一个额外的类来充当 js 选择器，但您需要确定点击和收集方法的 ID 是什么或以某种方式定位该特定选项,最简单的方法是检查 html。

// set method ID for click and collect
$click_and_collect_id = 0;

printf( '<input type="radio" name="shipping_method[%1$d]" data-index="%1$d" id="shipping_method_%1$d_%2$s" value="%3$s" class="shipping_method %4$s" %5$s />',$index,esc_attr( sanitize_title( $method->id ) ),esc_attr( $method->id ),$method->id == $click_and_collect_id ? 'click_and collect' : null,1 < count( $available_methods ) ? checked( $method->id,$chosen_method,false ) : null
); // WPCS: XSS ok.

// add modal with extra info if id's match
if ( $method->id == $click_and_collect_id ) {
    echo '<div id="click_and_collect_info" class="poup-modal">...</div>';
}

printf( '<label class="shipping__list_label" style="color: black;" for="shipping_method_%1$s_%2$s">%3$s%4$s</label>',wc_cart_totals_shipping_method_label( $method ),$extratext ); // WPCS: XSS ok.
do_action( 'woocommerce_after_shipping_rate',$method,$index );`