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

Question

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

通过这行代码，我可以在特定产品的单个产品页面上输出其变体。

    add_action( 'woocommerce_before_add_to_cart_quantity', 'dump_attributes' );

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

仅当客户从下拉列表中选择特定变体时，我才需要输出可点击的链接。

我遇到的问题是仅当用户选择变体“鼓”时才生成该链接。

Answer 1

我能够多考虑一下。首先，我们需要为 Woo 通过 JSON 发送的变体数据赋予一点额外的值(value)。我正在检查“黑色”颜色属性:

if( 'black' === strtolower($variation->get_attribute('color')) ){

但是您需要更改以适合您的尺寸属性。

接下来，我将链接定义为

$kia_data['custom_link'] = sprintf( '<a href="google.com">%s</a>', __( 'Your Link', 'your-textdomain' ) );

这只是指向 google 的链接，因此您需要更改它。

接下来，我们添加一个空的 <div>占位符。最后我们在可变产品上加载一些脚本并监听 found_variation事件。当我们得到它时，我们得到 variation从 JSON 数据中，我们可以检查 custom_link我们之前定义并将其转储到空支架中 <div> .

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

/**
 * 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

}

结果如下: