Woocommerce изменить вариант продукта через JS

Question

Вот рабочий пример того, где мы находимся: http://fpusa.drunk.kiwi/product/ship-your-idea-2/

Я пытаюсь создать «образцы», по которым пользователь может щелкнуть, что изменило бы значение скрытого поля выбора, которое woocommerce использует для захватаданные варианта.

Есть ли конкретный способ сообщить woocommerce, чтобы он считывал значение поля выбора?

Все работает, как и ожидалось, но событие javascript, которое изменяет идентификатор варианта ивсе готово для добавления в корзину никогда не происходит.

Примечание: Я скрываю wc_dropdown с d-none, потому что я думал, что это минимизирует пользовательское решение.

Variable.php - Вызывает fpusa_product_attribute_button ();

<?php foreach ( $attributes as $attribute_name => $options ) : ?>

  <tr class="">
    <td class="label"><label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute_label( $attribute_name ); // WPCS: XSS ok. ?></label></td>
        <td class="value">
            <?php
              fpusa_product_attribute_button( $options, $attribute_name, $product );

              wc_dropdown_variation_attribute_options( array(
                'options'   => $options,
                'attribute' => $attribute_name,
                'product'   => $product,
                'class'         => 'd-none',
              ));

            echo end( $attribute_keys ) === $attribute_name ? wp_kses_post( apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . esc_html__( 'Clear', 'woocommerce' ) . '</a>' ) ) : '';

            ?>
        </td>
    </tr>

<?php endforeach; ?>

fpusa_product_attribute_button ()

function fpusa_product_attribute_button( $options, $attribute_name, $product ){
    if( ! empty( $options ) ) : ?>
        <div id="var_btn" class="d-flex">
            <?php foreach( $options as $option ): ?>
                <button type="button" class="d-flex btn justify-content-center align-items-center border mx-1" data-key="<?php echo $attribute_name ?>" data-value="<? echo $option ?>">
                    <?php echo $option; ?>
                </button>
            <?php endforeach; ?>
        </div> <?php
    endif;
}

Functions.js

$('#var_btn button').click(function(){
   let attribute = $(this).attr('data-key');
   let option = $(this).attr('data-value');
   console.log( attribute, option );
   $('#' + attribute).val( option );
});

Answer 1

Все, что мне нужно было сделать, это просто вызвать событие изменения на <select>, передающем выбранную опцию.

$('#var_btn button').click(function(){
    let attribute = $(this).attr('data-key');
    let option = $(this).attr('data-value');
    console.log( attribute, option );
    $('#' + attribute).val( option ).change();
  });