将 Woo Commerce 下拉菜单转换为单选按钮 [英] Converting Woo Commerce dropdowns into Radio Buttons
本文介绍了将 Woo Commerce 下拉菜单转换为单选按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法将变体下拉菜单转换为启用 woocommerce 的网站的单选按钮.我已经尝试了 here 找到的答案但我似乎无法使这个解决方案发挥作用.我也尝试过编辑 variable.php 文件中的代码.
到目前为止，最成功的是第二种方法，编辑 variable.php 代码并将标签更改为标签.问题是单击单选按钮时不会触发自然的 jQuery 事件.
如果你们中有人知道将下拉菜单转换为收音机的更简单方法，或者只是让 jQuery 事件触发，我们将不胜感激.
我可以得到的相关代码:
slug, $options ) ) 继续；echo '<option value="' . $term->slug . '" ' .选定($selected_value，$term->slug).'>'.apply_filters('woocommerce_variation_option_name', $term->name) .'</选项>';}} 别的 {foreach ( $options 作为 $option )echo '<option value="' . $option . '" ' .选定($selected_value，$option).'>'.apply_filters('woocommerce_variation_option_name', $option) .'</选项>';}}?>相关的 Javascript.我将 'select' 元素更改为 'input:radio' 但它仍然不起作用.
jQuery(document).ready(function($) {
/*** 变化形式处理*/$('form.variations_form')//点击重置变化按钮.on('点击'，'.reset_variations'，函数(事件){$(this).closest('form.variations_form').find('.variations select').val('').change();返回假；})//更改选项时.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();}})//获得焦点后.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 ]);})//检查变化.on('check_variations'，函数(事件，排除，焦点){var all_set = true;var any_set = false;var 显示变量 = 假；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 = 假；} 别的 {any_set = true;}if ( 排除 && $(this).attr('name') == exclude ) {all_set = 假；current_settings[$(this).attr('name')] = '';} 别的 {//编码实体价值 = $(this).val().replace(/&/g, '&').replace(/"/g, '"').replace(/'/g, ''').replace(/ 解决方案
几年后，官方repo中有一个解决方案:http://wordpress.org/plugins/woocommerce-radio-buttons/p>
缺少的部分是插件 dequeue 的 WooCommerce add-to-cart-variation.js 脚本并加载自己的脚本，以便通过更改单选按钮输入来触发正确的事件.
I'm having trouble converting the variation dropdowns into radio buttons a woocommerce enabled site. I've tried the answer found here but I can't seem to make this solution work. I've also tried editing the code in the variable.php file.
So far the most success is the second approach, editing the variable.php code and changing the tags to tags. The problem is the natural jQuery event isn't triggered when the radio buttons are clicked.
If any of you know a simpler way to convert the dropdowns to radios, or simply make the jQuery event fire, it'd be much appreciated.
Relevant code I could get my hands on:
<?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') ?>…</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>';
}
}
?>
Relevant Javascript. I change the 'select' elements ot 'input:radio' but it still doesn't work.
jQuery(document).ready(function($) {
/**
* 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, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>');
// 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;
}
});
解决方案
A few years later and there is a solution in the official repo: http://wordpress.org/plugins/woocommerce-radio-buttons/
The missing piece is that the plugin dequeue's the WooCommerce add-to-cart-variation.js script and loads its own in order to trigger the right events via changes to the radio button inputs.
这篇关于将 Woo Commerce 下拉菜单转换为单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
