jquery - 绑定选择和单选按钮的问题
问题描述
在我看到的工作结束时,我的变体不能正常工作。我做了什么
- 我用单个添加到购物车按钮替换了存档添加到购物车按钮
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart',10 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_add_to_cart', 10);
2.使用 此代码片段,但为每个变体添加了唯一 ID,因为在存档中它们是可重复的
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;
global $product;
$product_id = $product->get_id();
$radios .= '<div class="attr-container"><div class="radio-span" style="background:' . get_term_meta( $term->term_id, 'miniluna_pa_color', true ) . '"><input type="radio" id="'.esc_attr($id). $product_id. '" name="'.esc_attr($name).'" value="'.esc_attr($term->slug).'" '.checked(sanitize_title($args['selected']), $term->slug, false).'><label for="'.esc_attr($id). $product_id.'">'.esc_html(apply_filters('woocommerce_variation_option_name', $term->name)).'</label></div></div>';
}
}
} else {
foreach($options as $option) {
$id = $name.'-'.$option;
global $product;
$product_id = $product->get_id();
$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). $product_id.'" name="'.esc_attr($name).'" value="'.esc_attr($option).'" id="'.sanitize_title($option).'" '.$checked.'><label for="'.esc_attr($id). $product_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 部分,就像在片段中一样。
jQuery(document).on('change', '.variation-radios input', function() {
jQuery('.variation-radios input:checked').each(function(index, element) {
var $el = jQuery(element);
var thisName = $el.attr('name');
var thisVal = $el.attr('value');
jQuery('select[name="'+thisName+'"]').val(thisVal).trigger('change');
});
});
jQuery(document).on('woocommerce_update_variation_values', function() {
jQuery('.variation-radios input').each(function(index, element) {
var $el = jQuery(element);
var thisName = $el.attr('name');
var thisVal = $el.attr('value');
$el.removeAttr('disabled');
if(jQuery('select[name="'+thisName+'"] option[value="'+thisVal+'"]').is(':disabled')) {
$el.prop('disabled', true);
}
});
});
PS.No,一个插件工作正常,但我还是想弄清楚
解决方案
推荐阅读
- php - 附加自定义标签时有效的 json 输出
- spring-boot - Letsencrypt SSL 证书在没有 url 前缀 https:// 的情况下不起作用
- javascript - WebKit userContentController:didReceiveScriptMessage:iOS 13 未调用
- java - 为不同存储库中的源代码和测试代码生成代码覆盖率
- javascript - 如何从用户输入字段中获取数据并在不提交的情况下向用户显示?
- html - CSS - 如何在可调整大小的图像上保持固定点?
- typescript - ts-node 和 tsc 有什么区别
- node.js - 使用 multer 包在 nodejs 中处理每个路由的目的地
- c# - 序列化 xml 中的对象列表如何工作?
- printing - Zebra 打印机 GK420d 呈绿色闪烁一次,但不打印