Question

以下是我们所在位置的有效示例：http://fpusa.drunk.kiwi/product/ship-your-idea-2/

我试图创建供用户单击的“样本”，而不是更改woocommerce用来捕获变化数据的隐藏选择框的值。

是否有一种特定的方式告诉woocommerce读取选择框的值？

一切正常，但是更改变体ID并准备将所有内容添加到购物车的javascript事件从未发生。

注意：我用d-none隐藏了wc_dropdown，因为我认为这会最小化自定义解决方案。

Variable.php -调用fpusa_product_attribute_button（）;

(?<!\\.)

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; ?>

Functions.js

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;
}

Answer 1

我要做的就是简单地触发<select>上的change事件，将所选选项传递给该事件。

$('#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();
  });

Woocommerce通过JS改变产品变化

1 个答案: