2012-09-11 64 views
1

我無法轉換的變化下拉菜單爲單選按鈕woocommerce啓用站點。我試着找到答案,但here我似乎無法使這種解決方案的工作。我也嘗試編輯variable.php文件中的代碼。轉換宇商務部的下拉列表中爲單選按鈕

迄今爲止最成功的是第二種方法,編輯variable.php代碼,並改變標籤的標籤。問題是單擊單選按鈕時不會觸發自然的jQuery事件。

如果你們知道的下拉菜單轉換爲無線電設備,或者乾脆讓jQuery的事件火一個簡單的方法,它會非常感激。

相關的代碼,我可以得到我的手:

<?php $loop = 0; foreach ($attributes as $name => $options) : $loop++; ?> 

<tr> 

<td class="label"><label for="<?php echo sanitize_title($name); ?>"><?php echo $woocommerce->attribute_label($name); ?></label></td> 

<td class="value"><select id="<?php echo esc_attr(sanitize_title($name)); ?>" name="attribute_<?php echo sanitize_title($name); ?>"> 

<option value=""><?php echo __('Choose an option', 'woocommerce') ?>&hellip;</option> 

<?php 

    if (is_array($options)) { 

     if (empty($_POST)) 

      $selected_value = (isset($selected_attributes[ sanitize_title($name) ])) ? $selected_attributes[ sanitize_title($name) ] : ''; 

     else 

      $selected_value = isset($_POST[ 'attribute_' . sanitize_title($name) ]) ? $_POST[ 'attribute_' . sanitize_title($name) ] : ''; 

     // Get terms if this is a taxonomy - ordered 

     if (taxonomy_exists(sanitize_title($name))) { 

      $terms = get_terms(sanitize_title($name), array('menu_order' => 'ASC')); 

      foreach ($terms as $term) { 

       if (! in_array($term->slug, $options)) continue; 

       echo '<option value="' . $term->slug . '" ' . selected($selected_value, $term->slug) . '>' . apply_filters('woocommerce_variation_option_name', $term->name) . '</option>'; 

      } 

     } else { 

      foreach ($options as $option) 

       echo '<option value="' . $option . '" ' . selected($selected_value, $option) . '>' . apply_filters('woocommerce_variation_option_name', $option) . '</option>'; 

     } 

    } 

?> 

相關的JavaScript。我改變'選擇'元素ot'input:radio',但它仍然不起作用。

jQuery的(文件)。就緒(函數($){

/** 
* Variations form handling 
*/ 
$('form.variations_form') 

    // On clicking the reset variation button 
    .on('click', '.reset_variations', function(event) { 

     $(this).closest('form.variations_form').find('.variations select').val('').change(); 

     return false; 
    }) 

    // Upon changing an option 
    .on('change', '.variations select', function(event) { 

     $variation_form = $(this).closest('form.variations_form'); 
     $variation_form.find('input[name=variation_id]').val('').change(); 

     $variation_form 
      .trigger('woocommerce_variation_select_change') 
      .trigger('check_variations', [ '', false ]); 

     $(this).blur(); 

     if($().uniform && $.isFunction($.uniform.update)) { 
      $.uniform.update(); 
     } 

    }) 

    // Upon gaining focus 
    .on('focusin', '.variations select', function(event) { 

     $variation_form = $(this).closest('form.variations_form'); 

     $variation_form 
      .trigger('woocommerce_variation_select_focusin') 
      .trigger('check_variations', [ $(this).attr('name'), true ]); 

    }) 

    // Check variations 
    .on('check_variations', function(event, exclude, focus) { 
     var all_set    = true; 
     var any_set    = false; 
     var showing_variation = false; 
     var current_settings = {}; 
     var $variation_form  = $(this); 
     var $reset_variations = $variation_form.find('.reset_variations'); 

     $variation_form.find('.variations select').each(function() { 

      if ($(this).val().length == 0) { 
       all_set = false; 
      } else { 
       any_set = true; 
      } 

      if (exclude && $(this).attr('name') == exclude) { 

       all_set = false; 
       current_settings[$(this).attr('name')] = ''; 

      } else { 

       // Encode entities 
       value = $(this).val() 
        .replace(/&/g, '&amp;') 
        .replace(/"/g, '&quot;') 
        .replace(/'/g, '&#039;') 
        .replace(/</g, '&lt;') 
        .replace(/>/g, '&gt;'); 

       // Add to settings array 
       current_settings[ $(this).attr('name') ] = value; 
      } 

     }); 

     var product_id   = parseInt($variation_form.attr('data-product_id')); 
     var all_variations  = window[ "product_variations_" + product_id ]; 

     // Fallback 
     if (! all_variations) 
      all_variations = window[ "product_variations" ]; 

     var matching_variations = find_matching_variations(all_variations, current_settings); 

     if (all_set) { 

      var variation = matching_variations.pop(); 

      if (variation) { 

       // Found - set ID 
       $variation_form 
        .find('input[name=variation_id]') 
        .val(variation.variation_id) 
        .change(); 

       $variation_form.trigger('found_variation', [ variation ]); 

      } else { 

       // Nothing found - reset fields 
       $variation_form.find('.variations select').val(''); 

       if (! focus) 
        $variation_form.trigger('reset_image'); 

      } 

     } else { 

      $variation_form.trigger('update_variation_values', [ matching_variations ]); 

      if (! focus) 
       $variation_form.trigger('reset_image'); 

      if (! exclude) { 
       $variation_form.find('.single_variation_wrap').slideUp('200'); 
      } 

     } 

     if (any_set) { 

      if ($reset_variations.css('visibility') == 'hidden') 
       $reset_variations.css('visibility','visible').hide().fadeIn(); 

     } else { 

      $reset_variations.css('visibility','hidden'); 

     } 

    }) 

    // Reset product image 
    .on('reset_image', function(event) { 

     var $product  = $(this).closest('.product'); 
     var $product_img = $product.find('div.images img:eq(0)'); 
     var $product_link = $product.find('div.images a.zoom:eq(0)'); 
     var o_src   = $product_img.attr('data-o_src'); 
     var o_title   = $product_img.attr('data-o_title'); 
     var o_href   = $product_link.attr('data-o_href'); 

     if (o_src && o_href && o_title) { 
      $product_img 
       .attr('src', o_src) 
       .attr('alt', o_title) 
       .attr('title', o_title); 
      $product_link 
       .attr('href', o_href); 
     } 

    }) 

    // Disable option fields that are unavaiable for current set of attributes 
    .on('update_variation_values', function(event, variations) { 

     $variation_form = $(this).closest('form.variations_form'); 

     // Loop through selects and disable/enable options based on selections 
     $variation_form.find('.variations select').each(function(index, el){ 

      current_attr_select = $(el); 

      // Disable all 
      current_attr_select.find('option:gt(0)').attr('disabled', 'disabled'); 

      // Get name 
      var current_attr_name = current_attr_select.attr('name'); 

      // Loop through variations 
      for (num in variations) { 

       var attributes = variations[ num ].attributes; 

       for (attr_name in attributes) { 

        var attr_val = attributes[ attr_name ]; 

        if (attr_name == current_attr_name) { 

         if (attr_val) { 

          // Decode entities 
          attr_val = $("<div/>").html(attr_val).text(); 

          // Add slashes 
          attr_val = attr_val.replace(/'/g, "\\'"); 
          attr_val = attr_val.replace(/"/g, "\\\""); 

          // Compare the meercat 
          current_attr_select.find('option[value="' + attr_val + '"]').removeAttr('disabled'); 

         } else { 
          current_attr_select.find('option').removeAttr('disabled'); 
         } 

        } 

       } 

      } 

     }); 

     // Custom event for when variations have been updated 
     $variation_form.trigger('woocommerce_update_variation_values'); 

    }) 

    // Show single variation details (price, stock, image) 
    .on('found_variation', function(event, variation) { 
     var $variation_form = $(this); 

     var $product  = $(this).closest('.product'); 
     var $product_img = $product.find('div.images img:eq(0)'); 
     var $product_link = $product.find('div.images a.zoom:eq(0)'); 

     var o_src   = $product_img.attr('data-o_src'); 
     var o_title   = $product_img.attr('data-o_title'); 
     var o_href   = $product_link.attr('data-o_href'); 

     var variation_image = variation.image_src; 
     var variation_link = variation.image_link; 
     var variation_title = variation.image_title; 

     $variation_form.find('.variations_button').show(); 
     $variation_form.find('.single_variation').html(variation.price_html + variation.availability_html); 

     if (! o_src) { 
      o_src = (! $product_img.attr('src')) ? '' : $product_img.attr('src'); 
      $product_img.attr('data-o_src', o_src); 
     } 

     if (! o_href) { 
      o_href = (! $product_link.attr('href')) ? '' : $product_link.attr('href'); 
      $product_link.attr('data-o_href', o_href); 
     } 

     if (! o_title) { 
      o_title = (! $product_img.attr('title')) ? '' : $product_img.attr('title'); 
      $product_img.attr('data-o_title', o_title); 
     } 

     if (variation_image && variation_image.length > 1) { 
      $product_img 
       .attr('src', variation_image) 
       .attr('alt', variation_title) 
       .attr('title', variation_title); 
      $product_link 
       .attr('href', variation_link); 
     } else { 
      $product_img 
       .attr('src', o_src) 
       .attr('alt', o_title) 
       .attr('title', o_title); 
      $product_link 
       .attr('href', o_href); 
     } 

     var $single_variation_wrap = $variation_form.find('.single_variation_wrap'); 

     if (variation.sku) 
      $product.find('.product_meta').find('.sku').text(variation.sku); 
     else 
      $product.find('.product_meta').find('.sku').text(''); 

     $single_variation_wrap.find('.quantity').show(); 

     if (! variation.is_in_stock && ! variation.backorders_allowed) { 
      $variation_form.find('.variations_button').hide(); 
     } 

     if (variation.min_qty) 
      $single_variation_wrap.find('input[name=quantity]').attr('data-min', variation.min_qty).val(variation.min_qty); 
     else 
      $single_variation_wrap.find('input[name=quantity]').removeAttr('data-min'); 

     if (variation.max_qty) 
      $single_variation_wrap.find('input[name=quantity]').attr('data-max', variation.max_qty); 
     else 
      $single_variation_wrap.find('input[name=quantity]').removeAttr('data-max'); 

     if (variation.is_sold_individually == 'yes') { 
      $single_variation_wrap.find('input[name=quantity]').val('1'); 
      $single_variation_wrap.find('.quantity').hide(); 
     } 

     $single_variation_wrap.slideDown('200').trigger('show_variation', [ variation ]); 

    }); 

/** 
* Initial states and loading 
*/ 
$('form.variations_form .variations select').change(); 


/** 
* Helper functions for variations 
*/ 

// Search for matching variations for given set of attributes 
function find_matching_variations(product_variations, settings) { 
    var matching = []; 

    for (var i = 0; i < product_variations.length; i++) { 
     var variation = product_variations[i]; 
     var variation_id = variation.variation_id; 

     if (variations_match(variation.attributes, settings)) { 
      matching.push(variation); 
     } 
    } 
    return matching; 
} 

// Check if two arrays of attributes match 
function variations_match(attrs1, attrs2) { 
    var match = true; 
    for (attr_name in attrs1) { 
     var val1 = attrs1[ attr_name ]; 
     var val2 = attrs2[ attr_name ]; 
     if (val1 !== undefined && val2 !== undefined && val1.length != 0 && val2.length != 0 && val1 != val2) { 
      match = false; 
     } 
    } 
    return match; 
} 

});

+0

那麼如何: 1.替換'<選項...'在'<無線電...';' 2.刪除''中的行的端部; 3.刪除'select'標籤; 4.利潤? – StasGrin

+0

我試過那個傢伙。問題在於,jQuery事件不再被解僱。當您從下拉列表中選擇時,「添加到購物車」按鈕的價格會更新。如果我手動將它們切換到''jQuery事件不再起作用。 –

+0

所以在更改之後,您必須更改一些JS代碼。向我們展示您的代碼以供選擇,並且可能我們可以使其通過無線電運行。問題在於'select'和'radio'獲得不同的值。 – StasGrin

回答

3

這裏是如何做到這一點的帖子:幾年後http://designloud.com/how-to-add-radio-buttons-to-woocommerce-variations/

+0

在堆棧溢出中包含外部引用以瞭解有效文檔的源代碼,但重要的是在您的回答中包含來自外部源的最重要/相關代碼段,並提供有關如何回答該問題的上下文,因爲如果該鏈接發生死了(服務器停機等),那麼你的答案變得毫無用處。 – mbinette

+0

德里克的職位是需要的代碼的一個很好的例子。但請記住,他的方法並不是修改WooCommerce的'安全'方式,因爲您正在編輯核心文件。因此,請閱讀評論並尋找這篇文章的未來更新。 – Stephen

相關問題