JS를 통한 우커머스 변경 상품 변경

JS를 통한 우커머스 변경 상품 변경

여기 우리가 있는 곳의 작동 예가 있습니다: http://fpusa.drunk.kiwi/제품/배송-your-idea-2/

저는 사용자가 클릭할 '스왓치'를 만들려고 하는데, 이는 우커머스가 변형 데이터를 잡기 위해 사용하는 숨겨진 선택 상자의 값을 변경하는 것입니다.

우커머스에게 선택 상자의 값을 읽으라고 하는 특정한 방법이 있습니까?

모든 것이 예상대로 작동하지만 변형 id를 변경하고 카트에 추가할 준비를 하는 자바스크립트 이벤트는 절대 일어나지 않습니다.

참고: wc_dropdown이 custom solution을 최소화할 것 같아서 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_상품_attribute_버튼

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

함수.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 );
});

제가 해야 할 일은 단순히 에 있는 변경 이벤트를 트리거하는 것입니다.<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();
  });

언급URL : https://stackoverflow.com/questions/54829471/woocommerce-change-product-variation-via-js