Javascript 如何在用户选择特定变体时为弹出窗口添加链接

我正在使用wordpress的PopupMaker插件创建弹出窗口。这通过在您选择的css选择器上使用单击触发器来实现

有了这行代码，我可以在单个产品页面上输出特定产品的变体

    add_action( 'woocommerce_before_add_to_cart_quantity', 'dump_attributes' );

function dump_attributes() {
  global $product;
  var_dump($product->get_attribute('size'));
 }

只有当客户从下拉列表中选择某个变量时，我才需要输出可单击的链接

我遇到的问题是，只有当用户选择变体“Drum”时，才会生成该链接

---

找到了一种使用jQuery并获取选择下拉列表ID的方法（有两个不同的ID以属性slug

#size

&

#pa_size

命名）

add_action（'woocommerce_前加_到购物车_数量'，'add_link_上加_选择'）；
函数添加链接到选择上（）{
?>
jQuery（文档）.ready（函数（$）{
$（'#size，#pa#u size'）。更改（函数（）{
如果（$（'#add'）。长度）{
$（'#add'）.remove（）；
返回；
}否则{
$selection=$（this.val（）.toLowerCase（）；
console.log（$selection）；
美元（本）。之后(
'' +
（$selection==“鼓”？“”：“”）+
''
);
}
})
});
我对此有了更多的思考。首先，我们需要为Woo通过JSON发送的变量数据提供一个额外的值。我正在检查“黑色”属性：

if（'black'==strtolower（$variation->get_属性（'color'））{

但您需要更改以适应您的大小属性

接下来，我将链接定义为

$kia_data['custom_link']=sprintf（'''Your link'，'Your textdomain'）；

这只是谷歌的一个链接，所以你需要改变它

接下来，我们添加一个空的
占位符。最后，我们在变量产品上加载一些脚本，并侦听
发现的变量
事件。当我们得到它时，我们从JSON数据中得到
变量
，我们可以检查前面定义的
自定义链接
，并将其转储到空的持有者

这可能很清楚，但下面是完整的代码片段：

/**
 * Add data to json encoded variation form.
 *
 * @param  array $data - this is the variation's json data
 * @param  object $product
 * @param  object $variation
 * @return array
 */
function kia_available_variation( $data, $product, $variation ){
    if( 'black' === strtolower($variation->get_attribute('color')) ){
        $kia_data['custom_link'] = sprintf( '<a href="google.com">%s</a>', __( 'Your Link', 'your-textdomain' ) );
    } else {
        $kia_data['custom_link'] = false;
    }

    return array_merge( $data, $kia_data );

}
add_filter( 'woocommerce_available_variation', 'kia_available_variation', 10, 3 );

/**
 * holder for display link
 */
function kia_custom_varition_link() {
    echo '<div class="woocommerce-variation-link"></div>';
}
add_action( 'woocommerce_single_variation', 'kia_custom_varition_link', 5 );


/**
 * Add scripts to variable products.
 */
function kia_on_found_template_for_variable_add_to_cart() {
    add_action( 'wp_print_footer_scripts', 'kia_variable_footer_scripts' );
}
add_action( 'woocommerce_variable_add_to_cart', 'kia_on_found_template_for_variable_add_to_cart', 30 );


function kia_variable_footer_scripts() {
    ?>
    <script type="text/javascript">
        jQuery( document ).ready(function($) {
            $('form.cart')
.on('found_variation', function( event, variation ) {
    if ( variation.custom_link ) {
        $link_html = variation.custom_link;
        $(this).find( '.woocommerce-variation-link' ).html( $link_html ).show();
    } else {
        $(this).find( '.woocommerce-variation-link' ).html('').hide();
    }

 }).on('reset_variation', function( event, variation ) {
    $(this).find( '.woocommerce-variation-link' ).html('').hide();
 });
        });
    </script>
<?php

}

/**
*将数据添加到json编码的变体表单中。
*
*@param array$data-这是变体的json数据
*@param object$product
*@param object$variation
*@return数组
*/
功能起亚可用变化（$data、$product、$VARIANCE）{
if（'black'==strtolower（$variation->get_属性（'color'））{
$kia_data['custom_link']=sprintf（''''Your link'，'Your textdomain'）；
}否则{
$kia_数据['custom_link']=false；
}
返回数组\u merge（$data，$kia\u data）；
}
添加过滤器（'woocommerce\u available\u variation'、'kia\u available\u variation'，10,3）；
/**
*显示链接的支架
*/
功能kia_自定义_变量_链接（）{
回声'；
}
添加操作（'woocommerce\u single\u variation'、'kia\u custom\u variation\u link'，5）；
/**
*向可变产品添加脚本。
*/
函数kia\u on\u找到了\u变量的模板\u添加到\u购物车（）{
添加操作（'wp\u print\u footer\u scripts'、'kia\u variable\u footer\u scripts'）；
}
添加操作（'woocommerce\u variable\u add\u to\u cart'、'kia\u on\u found\u模板\u for\u variable\u add\u to\u cart'，30）；
函数kia_变量_页脚_脚本（）{
?>
jQuery（文档）.ready（函数（$）{
$（'form.cart'）
.on（'found_variation'，函数（事件、变量）{
if（variation.custom_链接）{
$link\u html=variation.custom\u link；
$（this.find（'.woocommerce variation link'）.html（$link_html）.show（）；
}否则{
$（this.find（'.woodcommerce变体链接'）.html（'.hide（）；
}
}).on（'reset_variation'）功能（事件、变化）{
$（this.find（'.woodcommerce变体链接'）.html（'.hide（）；
});
});
jQuery（document）.ready（函数（$）{$（'#size，#pa#size'）.change（函数（）{$selection=$（this.val（）；console.log（$selection）；$（this）.after（''+（$selection='Drum'？''''）+''）}）
我想这段代码可以做一些我想做的事情，但是如果用户选择不同的选项，链接不会消失。如果用户重新选择“鼓”项目，链接也会重复。谢谢你，海尔加。我喜欢这段代码！今天一直在查看代码。是否总是将脚本添加到wp\u print\u footer\u scripts hook？也在计算了解当用户选择不同的产品变体时如何隐藏链接。它出现后，当前仍保留在woocommerce\u single\u variation部分。我的解决方案也有任何大的缺陷。不总是这样。我主要是懒于不将单独的.js文件排队。但是如果将
wp\u排队的footer参数设置为true_script（）
然后
wp\u print\u footer\u scripts
就是它的结局。我编辑了答案，希望能隐藏不相关变体的链接。
/**
 * Add data to json encoded variation form.
 *
 * @param  array $data - this is the variation's json data
 * @param  object $product
 * @param  object $variation
 * @return array
 */
function kia_available_variation( $data, $product, $variation ){
    if( 'black' === strtolower($variation->get_attribute('color')) ){
        $kia_data['custom_link'] = sprintf( '<a href="google.com">%s</a>', __( 'Your Link', 'your-textdomain' ) );
    } else {
        $kia_data['custom_link'] = false;
    }

    return array_merge( $data, $kia_data );

}
add_filter( 'woocommerce_available_variation', 'kia_available_variation', 10, 3 );

/**
 * holder for display link
 */
function kia_custom_varition_link() {
    echo '<div class="woocommerce-variation-link"></div>';
}
add_action( 'woocommerce_single_variation', 'kia_custom_varition_link', 5 );


/**
 * Add scripts to variable products.
 */
function kia_on_found_template_for_variable_add_to_cart() {
    add_action( 'wp_print_footer_scripts', 'kia_variable_footer_scripts' );
}
add_action( 'woocommerce_variable_add_to_cart', 'kia_on_found_template_for_variable_add_to_cart', 30 );


function kia_variable_footer_scripts() {
    ?>
    <script type="text/javascript">
        jQuery( document ).ready(function($) {
            $('form.cart')
.on('found_variation', function( event, variation ) {
    if ( variation.custom_link ) {
        $link_html = variation.custom_link;
        $(this).find( '.woocommerce-variation-link' ).html( $link_html ).show();
    } else {
        $(this).find( '.woocommerce-variation-link' ).html('').hide();
    }

 }).on('reset_variation', function( event, variation ) {
    $(this).find( '.woocommerce-variation-link' ).html('').hide();
 });
        });
    </script>
<?php

}