执行JS - Woocommerce的PHP函数

Question

我有一个JS函数，我正试图通过我的functions.php从子主题中执行它。这是我第一次使用PHP，所以如果我的代码很差，我很抱歉。

我的目标是尝试将page_title更改为在下拉筛选器中选择的内容。在此工作之后，我计划将category_name添加到.innerHTML的末尾。只有在选择了下拉列表的情况下，才会发生这种情况。如果它不是，那么只有类别将通过woocommerce的本地处理方式显示。

var machineEl = document.getElementsByClassName('woof_select_pa_machine').firstChild;
var machineValue = machineEl.value;
    
    machineEl.addEventListener('change', function dynamic_page_title() {

        if (machineValue != 'Product Machine') {
            
            document.getElementsByClassName('woocommerce-products-header__title').innerHTML = machineValue;
        }  
    });

这是我尝试在function.php中执行的第一个脚本。

<?php

echo '<script type="text/javascript">',
     'dynamic_page_title_js();',
     '</script>';
?>

或者，我尝试使用下面的代码来完成相同的任务，但目的是仅限于某些页面。虽然不确定我最终是否需要这个。我在我找到的另一个线程中使用了这组代码。

<?php

add_action ( 'wp_enqueue_scripts', 'dynamic_page_title_php');

function dynamic_page_title_php() {

    //$wp_query->get_queried_object()->cat_name;

    global $page_title;

    if( is_page() || is_single() )
    {
        switch($page_title->title_name ) // post_name is the post slug which is more consistent for matching to here
        {
            case 'shop':
                wp_enqueue_script('shop', get_template_directory_uri() . '/js/dynamic_page_title_js.js', array('jquery'), '', false);
                break;
           
        }
    } 
    
}

?>

下面是我试图覆盖的类的html。

<h1 class="woocommerce-products-header__title page-title">Sample Page</h1>

Answer 1

我决定采取一条不同的路线来解决这个问题。我使用了一个js函数在过滤器select上更新page_title。然后，我使用另一个线程(Woocommerce: How to show Product Attribute name on title when in a category page and "filtering" products via '?pa_attribute=' on address bar)中提供的代码来处理function.php文件中的属性部分。php函数在加载时处理页面，将shop替换为属性名，在本例中为机器类型。js更新此属性并在filter select上添加类别。

当用户通过导航栏导航到某个类别时，仍有一些工作要在functions.php上完成，以便将类别名称添加到page_title。我已经发布了一个关于如何解决最后这个部分(Woocommerce: How to show Product Attribute name and Category name on title)的新问题，但是通过独立地利用这两个部分，它或多或少实现了我的预期。

另外，我目前在woof within product-filter插件中执行的JS。它是在Ajax完成后在JS中编写的。但我确实计划将它移到它自己的文件中，并仅从组织的角度调用该函数。

PHP

add_filter( 'woocommerce_page_title', 'custom_woocommerce_page_title', 15, 2 );

function custom_woocommerce_page_title( $page_title ) {
    if ( is_archive() ) {
        $exists_attr = false;

        foreach ( $_GET as $index => $value ) {
            if ( substr( $index, 0, 3 ) === 'pa_' ) {
                $attr_id = wc_attribute_taxonomy_id_by_name( $index );

                if ( $attr_id === 0 && $cat_id ) {
                    continue;
                }

                if ( ! $exists_attr /* && ! $exists_cat */) {
                    $exists_attr = true;

                    $page_title .= ' ';
                } else {
                    $page_title .= ' ';
                }

                $term = get_term_by( 'slug', esc_html( $value ), $index );
                $page_title =  $term->name;                     
                        
            }
        }

    }

    return $page_title;

}

JS

(function() {
  var machineEl = document.getElementsByClassName('woof_select woof_select_pa_machine')[0];
  var processEl = document.getElementsByClassName('woof_select woof_select_pa_processing')[0];
  var optionMachine = machineEl.querySelector("option[selected='selected']");
  var optionProcess = processEl.querySelector("option[selected='selected']");
  var machineValue = optionMachine.innerHTML;
  var processValue = optionProcess.innerHTML;
  var result = document.getElementsByClassName('woocommerce-products-header__title page-title')[0];
  if (machineValue != 'Product Machine' && processValue != 'Product Processing') {
            result.innerHTML = machineValue + " " + processValue;            
  }
  else if (machineValue != 'Product Machine') {
            result.innerHTML = machineValue;            
  }
  else if (processValue != 'Product Processing') {
            result.innerHTML = processValue;            
  }       
})()

一旦我将类别发布到page_title，我将更新此答案。