woocommerce 사이트의 제품 목록에 있는 빠른 편집 옵션에 사용자 지정 제품 필드 추가
woocommerce 스토어 제품 리스트의 빠른 편집 화면에 커스텀 제품 필드를 추가하려면 어떻게 해야 하나요?
이게 최선인지는 잘 모르겠지만, 나한테는 아주 효과가 있어.
기본적으로 제품의 커스텀 필드를 추가하는 것이 일반적인 목표입니다.이러한 편리한 툴에 의해, (1개의 제품 페이지에 커스텀 필드를 추가하는 것)에 성공했습니다.
http://www.remicorson.com/mastering-woocommerce-products-custom-fields/ http://www.remicorson.com/woocommerce-custom-fields-for-variations/
진행하기 전에 먼저 해당 링크를 확인하는 것이 좋습니다.
이제 이 커스텀필드를 제품 리스트의 빠른 추가 옵션에 추가하려고 합니다.
거기서 자원이 부족해집니다.
기본적으로는 이렇게 했어요.
빠른 편집 옵션에 사용자 정의 필드(html 양식)를 추가합니다.이를 위해 'woocommerce_product_quick_edit_end' 액션에 접속했습니다.이 후크는 woocommerce->includes->admin->views->html-quick-edit-product에 있습니다.195행의 php
사용자 정의 필드를 저장합니다.이를 위해 'woocommerce_product_quick_edit_save' 액션에 접속했습니다.이 후크는 woocommerce->includes->admin-wc-admin-post-type에 있습니다.php는 929행의 'quick_edit_save' 함수 내에 있습니다.
앞의 2단계에서는 값이 유지되지만 빠른 편집 옵션을 사용하여 커스텀필드를 갱신하면 데이터는 백엔드에 유지되지만 UI의 커스텀필드에 입력되지 않습니다.그래서 세 번째 스텝이 필요해요.
- 제품 목록 열에 사용자 지정 필드 메타 데이터를 추가한 다음 js를 사용하여 메타데이터를 추출한 후 사용자 지정 필드에 채웁니다.
커스텀 필드 메타데이터를 보유하기 위해 커스텀 HTML 태그(div 등)를 추가하는 'manage_product_posts_custom_column' 액션에 접속했습니다.
그런 다음 javascript를 사용하여 메타데이터에서 데이터를 추출하여 커스텀 필드에 입력했습니다.
3단계는 WooCommerce가 이 프로세스를 수행하는 방법을 모방한 것입니다.
참고로 woocommerce->includes->admin->class-wc-admin-post-types의 함수 'render_product_columns'를 참조하십시오.php
woocommerce-> assets-> js-> admin에 있는 quick-edit.js도 참조해 주세요.
코드 예: 아래 코드는 일러스트와 가이드의 목적으로 사용되고 있습니다.실제 코드는 매우 길고 복잡합니다.
순서 1:
add_action( 'woocommerce_product_quick_edit_end', function(){
/*
Notes:
Take a look at the name of the text field, '_custom_field_demo', that is the name of the custom field, basically its just a post meta
The value of the text field is blank, it is intentional
*/
?>
<div class="custom_field_demo">
<label class="alignleft">
<div class="title"><?php _e('Custom Field Demo', 'woocommerce' ); ?></div>
<input type="text" name="_custom_field_demo" class="text" placeholder="<?php _e( 'Custom Field Demo', 'woocommerce' ); ?>" value="">
</label>
</div>
<?php
} );
순서 2:
add_action('woocommerce_product_quick_edit_save', function($product){
/*
Notes:
$_REQUEST['_custom_field_demo'] -> the custom field we added above
Only save custom fields on quick edit option on appropriate product types (simple, etc..)
Custom fields are just post meta
*/
if ( $product->is_type('simple') || $product->is_type('external') ) {
$post_id = $product->id;
if ( isset( $_REQUEST['_custom_field_demo'] ) ) {
$customFieldDemo = trim(esc_attr( $_REQUEST['_custom_field_demo'] ));
// Do sanitation and Validation here
update_post_meta( $post_id, '_custom_field_demo', wc_clean( $customFieldDemo ) );
}
}
}, 10, 1);
순서 3:
add_action( 'manage_product_posts_custom_column', function($column,$post_id){
/*
Notes:
The 99 is just my OCD in action, I just want to make sure this callback gets executed after WooCommerce's
*/
switch ( $column ) {
case 'name' :
?>
<div class="hidden custom_field_demo_inline" id="custom_field_demo_inline_<?php echo $post_id; ?>">
<div id="_custom_field_demo"><?php echo get_post_meta($post_id,'_custom_field_demo',true); ?></div>
</div>
<?php
break;
default :
break;
}
}, 99, 2);
JS 파트
jQuery(function(){
jQuery('#the-list').on('click', '.editinline', function(){
/**
* Extract metadata and put it as the value for the custom field form
*/
inlineEditPost.revert();
var post_id = jQuery(this).closest('tr').attr('id');
post_id = post_id.replace("post-", "");
var $cfd_inline_data = jQuery('#custom_field_demo_inline_' + post_id),
$wc_inline_data = jQuery('#woocommerce_inline_' + post_id );
jQuery('input[name="_custom_field_demo"]', '.inline-edit-row').val($cfd_inline_data.find("#_custom_field_demo").text());
/**
* Only show custom field for appropriate types of products (simple)
*/
var product_type = $wc_inline_data.find('.product_type').text();
if (product_type=='simple' || product_type=='external') {
jQuery('.custom_field_demo', '.inline-edit-row').show();
} else {
jQuery('.custom_field_demo', '.inline-edit-row').hide();
}
});
});
스크립트를 큐에 넣어야 합니다.
이것이 누군가에게 도움이 되기를 바랍니다.이것이 최선의 방법인지는 잘 모르겠습니다만, WooCommerce 소스를 조사했을 때, WooCommerce는 이 작업을 쉽게 수행할 수 있는 편리한 후크를 제공하지 않는 것 같습니다(적어도 아직까지는).
이것보다 더 좋은 방법이 있다면 공유해 주세요.
언급URL : https://stackoverflow.com/questions/27262032/add-custom-product-field-on-quick-edit-option-on-the-product-listing-of-a-woocom
'programing' 카테고리의 다른 글
| Python Flask, TypeError: 'dict' 개체를 호출할 수 없습니다. (0) | 2023.03.31 |
|---|---|
| Woocommerce 업데이트 카트 버튼 작업 후 실행 중인 후크 (0) | 2023.03.26 |
| 키 값 쌍의 유형 스크립트 맵을 정의하는 방법.여기서 key는 숫자이고 value는 개체의 배열입니다. (0) | 2023.03.26 |
| 헤더에 위젯을 추가하는 방법.wordpress로 php? (0) | 2023.03.26 |
| j스크롤에 추가 데이터 로드 쿼리 (0) | 2023.03.26 |