基于属性值选择更改可变woocommerce产品的标题 [英] change title of variable woocommerce product based on attribute value selection
问题描述
我想在有人选择变量时更改 Woocommerce 变量产品标题.我想将选定的变体添加到标题.我已经使用了这个 根据变化更改 WooCommerce 变量产品标题代码它非常适用于从 product->attributes 添加的属性.但我希望它适用于我们在添加产品时添加的自定义产品属性.</p>
我尝试了上面链接中提供的代码,但它不适用于自定义产品属性.它返回一个空值.colorr 是我使用自定义产品属性添加的属性名称这是我的代码.任何帮助都将受到高度评价
add_filter('wp_footer','custom_product_title_script');函数 custom_product_title_script(){全球 $post;//只有单个产品页面如果(!is_product())返回;//获取 WC_Product 对象的实例$product = wc_get_product($post->ID);//仅适用于可变产品if(!$product->is_type('variable')) 返回;//在此数组中设置您的特定产品属性(逗号分隔):$attributes = array('colorr');//变体 ID 的第一个循环foreach($product->get_visible_children() 作为 $variation_id ) {//属性/值的第二个循环foreach($product->get_available_variation( $variation_id )['attributes'] as $key => $value_id ){$taxonomy = str_replace('attribute_', '', $key);//获取产品属性的分类//仅用于定义的属性if( in_array( $taxonomy, $attributes) ){//在数组中设置和结构化数据(变体 ID => 产品属性 => 术语名称)$data[ $variation_id ][$taxonomy] = get_term_by( 'slug', $value_id, $taxonomy )->name;}}}?><script type="text/javascript">(功能($){//变量初始化varvariationsData = <?php echo json_encode($data);?>,productTitle = $('.product_title').text(),颜色 = '着色器';控制台日志(变量数据);//获取所选变体并更改标题的函数函数 update_the_title(productTitle,variationsData,color){$.each(variationsData, function( index, value ){if( index == $('input.variation_id').val() ){$('.product_title').text(productTitle+' - '+value[color]);console.log('标题更新');返回假;} 别的 {$('.product_title').text(productTitle);}});}//一旦全部加载设置超时(功能(){update_the_title(productTitle,variationsData,color);}, 300);//在实时事件中:选择字段$('选择').blur(函数(){update_the_title(productTitle,variationsData,color);});})(jQuery);<?php}
不知道你为什么使用 php,这完全是前端任务 - 所以应该用前端 js 来完成.
请将此 js 添加到外部 javascript 文件(注入 js 内联 的做法很不好,尤其是 jquery - 它会阻止 延迟优化)工作原理:
- 获取默认标题文本到 var
- 收集所有选择的变体并添加到默认标题文本
- 为标题设置新文本
jQuery( document ).ready( function( $ ) {var title_text = $( '.product-type-variable .product_title' ).text();//获取默认标题函数 add_variation_txt_to_title() {var new_title_text = '';$( '.variations select' ).each( function() {new_title_text += ' ' + $( this ).find( ':selected' ).val();//收集所有选择的变体<options>})$('.product-type-variable.product_title').text(title_text + new_title_text);//设置新标题}add_variation_txt_to_title();//加载时调用$( '.variations select' ).change( function() {//调用 <select >changeadd_variation_txt_to_titl();})})
在默认的 27 个主题上测试的解决方案.
I want to change the Woocommerce variable product title when someone selects the varient. I want to add the selected variant to title. I have used this Change WooCommerce variable product title based on variation code It's working perfectly for attributes that are added from product->attributes .But i want that to work for custom product attributes which we add when adding product.
I tried the code provided in above link for that but it's not working for custom product attributes.It returns a null value. colorr is the name of attribue i added using custom product attributes Here is my code.Any help will be highly appriciated
add_filter( 'wp_footer','custom_product_title_script' );
function custom_product_title_script(){
global $post;
// Only single product pages
if( ! is_product() ) return;
// get an instance of the WC_Product Object
$product = wc_get_product($post->ID);
// Only for variable products
if( ! $product->is_type( 'variable' ) ) return;
// Here set your specific product attributes in this array (coma separated):
$attributes = array('colorr');
// The 1st loop for variations IDs
foreach($product->get_visible_children( ) as $variation_id ) {
// The 2nd loop for attribute(s)/value
foreach($product->get_available_variation( $variation_id )['attributes'] as $key => $value_id ){
$taxonomy = str_replace( 'attribute_', '', $key ); // Get the taxonomy of the product attribute
// Just for defined attributes
if( in_array( $taxonomy, $attributes) ){
// Set and structure data in an array( variation ID => product attribute => term name )
$data[ $variation_id ][$taxonomy] = get_term_by( 'slug', $value_id, $taxonomy )->name;
}
}
}
?>
<script type="text/javascript">
(function($){
// variables initialization
var variationsData = <?php echo json_encode($data); ?>,
productTitle = $('.product_title').text(),
color = 'colorr';
console.log(variationsData);
// function that get the selected variation and change title
function update_the_title( productTitle, variationsData, color ){
$.each( variationsData, function( index, value ){
if( index == $('input.variation_id').val() ){
$('.product_title').text(productTitle+' - '+value[color]);
console.log('TITLE UPDATED');
return false;
} else {
$('.product_title').text(productTitle);
}
});
}
// Once all loaded
setTimeout(function(){
update_the_title( productTitle, variationsData, color );
}, 300);
// On live event: select fields
$('select').blur( function(){
update_the_title( productTitle, variationsData, color );
});
})(jQuery);
</script>
<?php
}
Not sure why you used php, that's totally front task - so should be done with front js.
Please add this js to external javascript file (it so bad practice to inject js inline, especially jquery - it will block defer optimization)
How it works:
- get default title text to var
- collect all variation selected and add to default title text
- set new text to title
jQuery( document ).ready( function( $ ) {
var title_text = $( '.product-type-variable .product_title' ).text(); // get default title
function add_variation_txt_to_title() {
var new_title_text = '';
$( '.variations select' ).each( function() {
new_title_text += ' ' + $( this ).find( ':selected' ).val(); // collect all variation selected <options>
})
$( '.product-type-variable .product_title' ).text( title_text + new_title_text ); // set new title
}
add_variation_txt_to_title(); // call on load
$( '.variations select' ).change( function() { // call on <select >change
add_variation_txt_to_titl();
})
})
Solution tested on default twentyseventeen theme.
这篇关于基于属性值选择更改可变woocommerce产品的标题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!