在 WooCommerce 中，直接在当前页面进行实时搜索可能需要使用 JavaScript 来处理搜索事件并更新页面内容。以下是一个示例代码，它可以帮助您实现在当前页进行实时搜索的功能：
|
1 |
<form role=<span class="hljs-string">"search"</span> method=<span class="hljs-string">"get"</span> <span class="hljs-class"><span class="hljs-keyword">class</span>="<span class="hljs-title">woocommerce</span>-<span class="hljs-title">product</span>-<span class="hljs-title">search</span>" <span class="hljs-title">action</span>=""> <<span class="hljs-title">label</span> <span class="hljs-title">class</span>="<span class="hljs-title">screen</span>-<span class="hljs-title">reader</span>-<span class="hljs-title">text</span>" <span class="hljs-title">for</span>="<span class="hljs-title">woocommerce</span>-<span class="hljs-title">product</span>-<span class="hljs-title">search</span>-<span class="hljs-title">field</span>"><?<span class="hljs-title">php</span> <span class="hljs-title">_e</span>( '<span class="hljs-title">Search</span> <span class="hljs-title">for</span>:', '<span class="hljs-title">woocommerce</span>' ); ?></<span class="hljs-title">label</span>> <<span class="hljs-title">input</span> <span class="hljs-title">type</span>="<span class="hljs-title">search</span>" <span class="hljs-title">id</span>="<span class="hljs-title">woocommerce</span>-<span class="hljs-title">product</span>-<span class="hljs-title">search</span>-<span class="hljs-title">field</span>" <span class="hljs-title">class</span>="<span class="hljs-title">search</span>-<span class="hljs-title">field</span>" <span class="hljs-title">placeholder</span>="<?<span class="hljs-title">php</span> <span class="hljs-title">echo</span> <span class="hljs-title">esc_attr__</span>( '<span class="hljs-title">Search</span> <span class="hljs-title">products</span>...', '<span class="hljs-title">woocommerce</span>' ); ?>" <span class="hljs-title">value</span>="<?<span class="hljs-title">php</span> <span class="hljs-title">echo</span> <span class="hljs-title">get_search_query</span>(); ?>" <span class="hljs-title">name</span>="<span class="hljs-title">sp</span>" /> <<span class="hljs-title">input</span> <span class="hljs-title">type</span>="<span class="hljs-title">hidden</span>" <span class="hljs-title">name</span>="<span class="hljs-title">post_type</span>" <span class="hljs-title">value</span>="<span class="hljs-title">product</span>" /> <<span class="hljs-title">button</span> <span class="hljs-title">type</span>="<span class="hljs-title">submit</span>" <span class="hljs-title">value</span>="<?<span class="hljs-title">php</span> <span class="hljs-title">echo</span> <span class="hljs-title">esc_attr_x</span>( '<span class="hljs-title">Search</span>', '<span class="hljs-title">submit</span> <span class="hljs-title">button</span>', '<span class="hljs-title">woocommerce</span>' ); ?>"><?<span class="hljs-title">php</span> <span class="hljs-title">echo</span> <span class="hljs-title">esc_html_x</span>( '<span class="hljs-title">Search</span>', '<span class="hljs-title">submit</span> <span class="hljs-title">button</span>', '<span class="hljs-title">woocommerce</span>' ); ?></<span class="hljs-title">button</span>> </<span class="hljs-title">form</span>> <<span class="hljs-title">div</span> <span class="hljs-title">id</span>="<span class="hljs-title">woocommerce</span>-<span class="hljs-title">product</span>-<span class="hljs-title">search</span>-<span class="hljs-title">results</span>"></<span class="hljs-title">div</span>> <<span class="hljs-title">script</span>> (<span class="hljs-title">function</span>($) </span>{ <span class="hljs-keyword">var</span> <span class="hljs-variable">$searchField</span> = $(<span class="hljs-string">'#woocommerce-product-search-field'</span>); <span class="hljs-keyword">var</span> <span class="hljs-variable">$searchResults</span> = $(<span class="hljs-string">'#woocommerce-product-search-results'</span>); <span class="hljs-variable">$searchField</span>.<span class="hljs-title function_ invoke__">on</span>(<span class="hljs-string">'input'</span>, function() { <span class="hljs-keyword">var</span> searchTerm = <span class="hljs-variable">$searchField</span>.<span class="hljs-title function_ invoke__">val</span>(); <span class="hljs-keyword">if</span> (searchTerm.length >= <span class="hljs-number">3</span>) { $.<span class="hljs-title function_ invoke__">ajax</span>({ <span class="hljs-attr">url</span>: <span class="hljs-string">'<?php echo esc_url( admin_url('</span>admin-ajax.php<span class="hljs-string">') ); ?>'</span>, <span class="hljs-attr">type</span>: <span class="hljs-string">'GET'</span>, <span class="hljs-attr">data</span>: { <span class="hljs-attr">action</span>: <span class="hljs-string">'woocommerce_ajax_product_search'</span>, <span class="hljs-attr">term</span>: searchTerm }, <span class="hljs-attr">success</span>: function(data) { <span class="hljs-variable">$searchResults</span>.<span class="hljs-title function_ invoke__">html</span>(data); } }); } <span class="hljs-keyword">else</span> { <span class="hljs-variable">$searchResults</span>.<span class="hljs-keyword">empty</span>(); } }); })(jQuery); </script> |
请将上述代码添加到archive-product.php文件中，以在当前页面的顶部添加搜索框并实现实时搜索功能。
这段代码通过使用JavaScript和Ajax来监听搜索框的输入，并在输入达到指定长度时（这里设置为3个字符）发起搜索请求。搜索请求将通过Ajax发送到WordPress后端，并返回搜索结果，然后将结果显示在id为"woocommerce-product-search-results"的元素中。
或者不适用js来实现，将以下代码加入到主题的functions.php文件里：
|
1 |
function woo_custom_pre_get_posts_query( $q ) { if ( ! $q->is_main_query() ) return; if ( ! $q->is_post_type_archive() ) return; if ( ! is_admin() && is_shop() && isset($_GET['sp']) && $_GET['sp'] ) { $q->set( 's', $_GET['sp']); } remove_action( 'pre_get_posts', 'custom_pre_get_posts_query' ); } add_action( 'pre_get_posts', 'woo_custom_pre_get_posts_query' ); |
就是在当前页面传一个sp搜索参数来获取搜索结果。
