{"id":4390,"date":"2024-04-28T00:51:17","date_gmt":"2024-04-27T22:51:17","guid":{"rendered":"https:\/\/www.knowboard.de\/?p=4390"},"modified":"2024-04-28T00:51:20","modified_gmt":"2024-04-27T22:51:20","slug":"optimizing-search-in-total-theme","status":"publish","type":"post","link":"https:\/\/www.knowboard.de\/optimizing-search-in-total-theme\/","title":{"rendered":"Optimizing Search in Total Theme"},"content":{"rendered":"\n
Hi,<\/p>\n\n\n\n
I\u2019m not sure what you mean by \u201dsearch from that page only\u201d.<\/p>\n\n\n\n
If you just want your search bar to search standard posts (so not pages, portfolio, staff\u2026etc) you can simply edit the search bar to set it so it only searches for posts like this: https:\/\/a.cl.ly\/kpue6BY1<\/a><\/p>\n\n\n\n But if you what you really want is to have the search bar search on the same page and return results only found in the grid placed on the page it\u2019s possible with a little code\/<\/p>\n\n\n\n I have an example on this doc page here \u2013 https:\/\/total.wpexplorer.com\/docs\/filters\/<\/a> (second search bar). This works by linking to the same page for the Action URL and passing a custom input parameter \u2013 https:\/\/a.cl.ly\/nOuJ5EBd<\/a> \u2013 in my case I\u2019m using \u201c_search\u201d so when you try searching it will refresh the page with that added parameter.<\/p>\n\n\n\n Then I use a little code to modify the current Query based on if this filter exists:<\/p>\n\n\n\n If you instead want an AJAX search (sorts items without a page refresh). There isn\u2019t any built-in element you can use, but there is a JS API already that can be used with some custom code. I have an example here: https:\/\/gist.github.com\/wpexplorer\/e95f2bc43c82a227787e8ae0d8a87432<\/a><\/p>\n\n\n\n So if you just want a search you could create your own shortcode like such:<\/p>\n\n\n\n Add then use the shortcode like this:<\/p>\n\n\n\n Where \u201cYOUR_GRID_ID\u201d is the unique ID added to the Post Cards element you are trying to filter: https:\/\/a.cl.ly\/P8uw8v9W<\/a><\/p>\n\n\n\n – AJ<\/p>\n\n\n\n ps: I will look into adding a new \u201dSearch\u00a0Parameter\u201d field to the post cards element in the next update so that this can be done without custom code as well as adding the ability to the\u00a0Search\u00a0Bar to be able to\u00a0search\u00a0a Post Cards element. I have a big 6.0 update coming out hopefully early next month and I\u2019ll try and get these 2 things added as well. For the meantime the code above should work well, but if you have any issues or questions let me know!<\/p>\n\n\n\nadd_filter( 'vcex_query_args', function( $args, $atts ) {\n if ( isset( $_GET['_search'] ) ) {\n $args['s'] = sanitize_text_field( $_GET['_search'] );\n }\n return $args;\n}, 10, 2 );\n<\/pre>\n\n\n\n
function plusvision01_ajax_search( $atts ) {\n if ( empty( $atts['target'] ) || ! function_exists( 'totalthemecore_call_non_static' ) ) {\n return;\n }\n\n \/\/ Load ajax scripts.\n totalthemecore_call_non_static( 'Vcex\\Ajax', 'enqueue_scripts' );\n\n \/\/ Get target grid.\n $target = $atts['target'];\n\n \/\/ Render filter HTML.\n ob_start();\n ?>\n <div data-vcex-=\"\">ajax-filter=\"1\" data-vcex-ajax-filter-target=\"#<?php echo esc_attr( str_replace( '#', '', $target ) ); ?>\" data-vcex-ajax-filter-multiple=\"1\" data-vcex-ajax-filter-relation=\"AND\">\n <input type=\"text\" data-vcex-type=\"search\" placeholder=\"search items\">\n <\/div>\n <?php\n return ob_get_clean();\n}\nadd_shortcode( 'plusvision01_ajax_search', 'plusvision01_ajax_search' );\n<\/pre>\n\n\n\n
[plusvision01_ajax_search target=\"YOUR_GRID_ID\"]\n<\/pre>\n\n\n\n