javascript - PHP WooCommerce 自定义选项卡功能内容移出所有选项卡内容包装器

Question

我使用 WooCommerce API 和文档制作了自定义选项卡功能以添加自定义选项卡。

这是我的代码：

/**
* Adding custom WooCommerce Tabs
*/
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
    // Array with category ID that doesn't require extra tabs
    $target_products_ids = array(
        18, // Supplies
        43, // Glass
        80, // Education
        15 // Uncat
    );

    // Get the global product object
    global $product;

    // Stores the current product's category ID(s)
    $product_cats_ids = wc_get_product_term_ids( $product->get_id(), 'product_cat' );

    // Comapres both arrays and prints out which element was not found from $target_products_ids in $product_cats_ids
    $difference = array_diff($target_products_ids, $product_cats_ids);

    // As long as one of the elements from $difference is removed, the tabs for the current product should be unset
    if(count($difference) != count($target_products_ids)) return $tabs;

    // Creating global variables to be used within inner-functions (not 'product')
    global $product, $current_meta_data, $indexFeature, $indexFaqs, $indexTechnicalDetails, $indexSupport;
    $id = $product->get_id();

    // Connects to WC Rest API
    $woocommerce = new Client(
        'www.example.com',
        '###',
        '###',
        [
            'wp_api' => true,
            'version' => 'wc/v3',
            'query_string_auth' => true # Force Basic Authentication as query string true and using under HTTPS
        ]
    );  

    $current_product = $woocommerce->get('products/'.$id);
    $current_meta_data = $current_product->meta_data;

    // Retrieves the current meta data for this current product
    $keys = array_column($current_meta_data, 'key');

    // Within that array of meta data, it finds the index of the given string (meta data name)
    $indexFeature = array_search('_features', $keys);
    $indexFaqs = array_search('_faqs', $keys);
    $indexTechnicalDetails = array_search('_technical_details', $keys);
    $indexSupport = array_search('_support', $keys);

    // Will add the tab to the current product if the meta data's content is not empty
    if(!empty( $current_meta_data[$indexFeature]->value )) {
        $tabs['features2'] = array(
            'title'     => __( 'Features', 'woocommerce' ),
            'priority'  => 50,
            'callback'  => function() {
                global $current_meta_data, $indexFeature;
                echo $current_meta_data[$indexFeature]->value;
            }
        );
    }
    if(!empty( $current_meta_data[$indexFaqs]->value )) {
        $tabs['faqs2'] = array(
            'title'     => __( 'FAQs', 'woocommerce' ),
            'priority'  => 51,
            'callback'  => function() {
                global $current_meta_data, $indexFaqs;
                echo $current_meta_data[$indexFaqs]->value;
            }
        );
    }
    if(!empty( $current_meta_data[$indexTechnicalDetails]->value )) {
        $tabs['technical_details2'] = array(
            'title'     => __( 'Technical Details', 'woocommerce' ),
            'priority'  => 52,
            'callback'  => function() {
                global $current_meta_data, $indexTechnicalDetails;
                echo $current_meta_data[$indexTechnicalDetails]->value;
            }
        );
    }
    if(!empty( $current_meta_data[$indexSupport]->value )) {
        $tabs['support2'] = array(
            'title'     => __( 'Support', 'woocommerce' ),
            'priority'  => 53,
            'callback'  => function() {
                global $current_meta_data, $indexSupport;
                echo $current_meta_data[$indexSupport]->value;
            }
        );
    }

    // Returns the changed tabs to this current product
    return $tabs;
}

它与许多其他产品配合得很好，但其中一个决定打破我。就好像该函数运行但不小心将选项卡内容子项留在了父项之外。

整个选项卡容器下方的内容实际上是来自支持选项卡的内容。
有趣的是，如果我单击“支持”选项卡，那么一切都会中断。我将无法单击任何其他选项卡。

无论如何，作为一种解决方法，我使用以下 javascript 将孩子附加回其父母：

var tab_out_range = $("div.v-product-description-row div.et_pb_column > div.et_pb_tab");
  if(tab_out_range.length > 0) {
    console.log(tab_out_range);
    tab_out_range.each(i => {
      $(tab_out_range[i]).detach().appendTo('div.v-product-description-row div.et_pb_all_tabs');
    });
  }

它运作良好......但我想知道是否有更好的选择来解决这个问题。

标签： javascriptphphtmlwoocommercewoocommerce-rest-api