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

【问题标题】：How to add a link for a popup window when user selects a particular variation当用户选择特定变体时如何为弹出窗口添加链接
【发布时间】：2019-10-21 17:02:11
【问题描述】：

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

使用这行代码，当我在单个产品页面上时，我可以输出特定产品的变体。

    add_action( 'woocommerce_before_add_to_cart_quantity', 'dump_attributes' );

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

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

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

【问题讨论】：

jQuery(document).ready(function ($) { $('#size, #pa_size').change(function(){ $selection = $(this).val(); console.log($selection); $(this).after( '<div>' + ($selection == 'Drum' ? '<a href="#"><div id="add">Freight Restrictions</div></a>' : '') + '</div>' ); }) });
我想出这段代码来做一些我想做的事情，但是如果用户选择不同的选项，链接不会消失。如果用户重新选择“鼓”项目，链接也会重复。

标签： javascript php wordpress woocommerce hook-woocommerce

【解决方案1】：

我可以多考虑一下。首先，我们需要为 Woo 通过 JSON 发送的变化数据提供一点额外的价值。我正在检查“黑色”颜色属性：

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 事件。当我们得到它时，我们从 JSON 数据中得到 variation，我们可以检查我们之前定义的 custom_link 并将其转储到空持有人 <div>。

这可能很清楚，但这是完整的代码 sn-p：

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

}

结果如下：

【讨论】：

谢谢赫尔加。我喜欢这个！今天一直在查看代码。是否总是将脚本添加到 wp_print_footer_scripts 挂钩？还致力于弄清楚当用户选择不同的产品变体时如何隐藏链接。它出现后目前仍保留在 woocommerce_single_variation 部分。我的解决方案也有什么大缺陷吗。
并非总是如此。我主要是懒于不将单独的 .js 文件排入队列。但是，如果您将 wp_enqueue_script() 的页脚参数设置为 true，那么 wp_print_footer_scripts 无论如何都会出现在此处。我已经编辑了答案，希望能隐藏不相关变体的链接。

【解决方案2】：

想出一种方法来使用 jQuery 解决它并获取下拉选择的 ID（有两个不同的 ID 以属性 slug #size 和 #pa_size 命名）。

 add_action( 'woocommerce_before_add_to_cart_quantity', 'add_link_on_selection' );

function add_link_on_selection() {
?>
<script>

jQuery(document).ready(function ($) {
  $('#size, #pa_size').change(function(){
    if($('#add').length) {
        $('#add').remove();
        return;

} else {
  $selection = $(this).val().toLowerCase();
  console.log($selection);
$(this).after(
  '<div>' +
  ($selection == 'drum' ? '<a href="#"><div id="add">Freight Restrictions</div></a>' : '')  +
  '</div>'
);
}
  })
});
</script>
<?php

}

【讨论】：