라디오 버튼으로서의 WooCommerce의 종류

라디오 버튼으로서의 WooCommerce의 종류

WooCommerce 내에서 플러그인으로 작업할 필요 없이 드롭다운된 바리에이션을 라디오 버튼으로 변경할 수 있습니까?Variations 섹션은 다음과 같이 설정해 주셨으면 합니다.

• 1리터(10€)
• 2리터(20€)
• 3L(25€)

옵션을 선택하면 하단에 있는 가격이 자동으로 변경됩니다.

감사해요.

편집: 추가됨variation_check()@ThomasB 덕분에 JS 변동 체크도 가능!

EDIT2: 확인variation_check()또한 제품을 백오더 할 수 있을 때 선택할 수 있도록 백오더 상태를 확인합니다.

이 작업을 수행하기 위한 최선의 방법은 선택 드롭다운 뒤에 라디오 버튼 마크업을 추가한 후 CSS를 사용하여 선택 드롭다운을 숨기는 것입니다.또한 선택한 라디오 버튼에 따라 가격이 변경되도록 숨겨진 선택 값 변경을 트리거하기 위해 사용자 정의 JS가 필요합니다.

마크업을 추가한 방법은 다음과 같습니다.

function variation_radio_buttons($html, $args) {
  $args = wp_parse_args(apply_filters('woocommerce_dropdown_variation_attribute_options_args', $args), array(
    'options'          => false,
    'attribute'        => false,
    'product'          => false,
    'selected'         => false,
    'name'             => '',
    'id'               => '',
    'class'            => '',
    'show_option_none' => __('Choose an option', 'woocommerce'),
  ));

  if(false === $args['selected'] && $args['attribute'] && $args['product'] instanceof WC_Product) {
    $selected_key     = 'attribute_'.sanitize_title($args['attribute']);
    $args['selected'] = isset($_REQUEST[$selected_key]) ? wc_clean(wp_unslash($_REQUEST[$selected_key])) : $args['product']->get_variation_default_attribute($args['attribute']);
  }

  $options               = $args['options'];
  $product               = $args['product'];
  $attribute             = $args['attribute'];
  $name                  = $args['name'] ? $args['name'] : 'attribute_'.sanitize_title($attribute);
  $id                    = $args['id'] ? $args['id'] : sanitize_title($attribute);
  $class                 = $args['class'];
  $show_option_none      = (bool)$args['show_option_none'];
  $show_option_none_text = $args['show_option_none'] ? $args['show_option_none'] : __('Choose an option', 'woocommerce');

  if(empty($options) && !empty($product) && !empty($attribute)) {
    $attributes = $product->get_variation_attributes();
    $options    = $attributes[$attribute];
  }

  $radios = '<div class="variation-radios">';

  if(!empty($options)) {
    if($product && taxonomy_exists($attribute)) {
      $terms = wc_get_product_terms($product->get_id(), $attribute, array(
        'fields' => 'all',
      ));

      foreach($terms as $term) {
        if(in_array($term->slug, $options, true)) {
          $id = $name.'-'.$term->slug;
          $radios .= '<input type="radio" id="'.esc_attr($id).'" name="'.esc_attr($name).'" value="'.esc_attr($term->slug).'" '.checked(sanitize_title($args['selected']), $term->slug, false).'><label for="'.esc_attr($id).'">'.esc_html(apply_filters('woocommerce_variation_option_name', $term->name)).'</label>';
        }
      }
    } else {
      foreach($options as $option) {
        $id = $name.'-'.$option;
        $checked    = sanitize_title($args['selected']) === $args['selected'] ? checked($args['selected'], sanitize_title($option), false) : checked($args['selected'], $option, false);
        $radios    .= '<input type="radio" id="'.esc_attr($id).'" name="'.esc_attr($name).'" value="'.esc_attr($option).'" id="'.sanitize_title($option).'" '.$checked.'><label for="'.esc_attr($id).'">'.esc_html(apply_filters('woocommerce_variation_option_name', $option)).'</label>';
      }
    }
  }

  $radios .= '</div>';
    
  return $html.$radios;
}
add_filter('woocommerce_dropdown_variation_attribute_options_html', 'variation_radio_buttons', 20, 2);

function variation_check($active, $variation) {
  if(!$variation->is_in_stock() && !$variation->backorders_allowed()) {
    return false;
  }
  return $active;
}
add_filter('woocommerce_variation_is_active', 'variation_check', 10, 2);

다음은 제가 사용한 JS입니다.

$(document).on('change', '.variation-radios input', function() {
  $('.variation-radios input:checked').each(function(index, element) {
    var $el = $(element);
    var thisName = $el.attr('name');
    var thisVal  = $el.attr('value');
    $('select[name="'+thisName+'"]').val(thisVal).trigger('change');
  });
});
$(document).on('woocommerce_update_variation_values', function() {
  $('.variation-radios input').each(function(index, element) {
    var $el = $(element);
    var thisName = $el.attr('name');
    var thisVal  = $el.attr('value');
    $el.removeAttr('disabled');
    if($('select[name="'+thisName+'"] option[value="'+thisVal+'"]').is(':disabled')) {
      $el.prop('disabled', true);
    }
  });
});

플러그인이 없으면 어떻게 해야 할지 모르겠지만, 그 요건을 버리고 Woocommerce Radio Buttons 플러그인을 사용하는 것이 좋습니다.이것은, 고객이 원하는 대로 동작합니다.

Variation Swatchs for WooCommerce 플러그인을 사용할 수 있습니다.그것은 나에게 효과가 있었다.

cfx의 답변 중 JavaScript 부분을 여러 변형 사례를 포함하도록 확장했습니다.이 개념은 선택한 입력을 기반으로 사용 가능한 변형(옵션 버튼)을 숨기고 표시하는 것입니다.

<script>
    jQuery(document).on('change', '.variation-radios input', function() {
      jQuery('.variation-radios input:checked').each(function(index, element) {
        let el = jQuery(element);
        jQuery('select[name="' + el.attr('name') + '"]').val(el.attr('value')).trigger('change');
        recreateRadioInputs();
      });
    });
    
    jQuery(document).on('woocommerce_update_variation_values', function() {
      jQuery('.variation-radios input').each(function(index, element) {
        let el = jQuery(element);
        el.removeAttr('disabled');
        if(jQuery('select[name="' + el.attr('name') + '"] option[value="' + el.attr('value') + '"]').is(':disabled')) {
          $el.prop('disabled', true);
        }
      });
    });
    
    // recreate readio inputs based on the select inputs
    function recreateRadioInputs() {
        jQuery('.variation-radios input, .variation-radios label').hide();
        jQuery('.variations select').each(function() {
            let inputName = jQuery(this).attr('name');
            jQuery(this).find('option').each(function() {
                let inputVal = jQuery(this).val();
                let radioInput = jQuery('.variation-radios input[value="' + inputVal + '"]');
                jQuery('.variation-radios label[for="' + radioInput.attr('id') + '"]').show();
                radioInput.show();
            });
        });
    }
</script>

언급URL : https://stackoverflow.com/questions/36219833/woocommerce-variations-as-radio-buttons