Как добавить ссылку для всплывающего окна, когда пользователь выбирает конкретный вариант

Question

Я использую плагин PopupMaker для WordPress для создания всплывающего окна. Это работает с помощью триггера клика на селекторе 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, немного больше значения. Я проверяю атрибут «черного» цвета:

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

}

Вот результат:

Answer 2

Выяснил один из способов ее решения с помощью jQuery и получения идентификатора выпадающего списка (было два разных идентификатора, названных в честь атрибута 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

}