-
Search Results
-
Hello there;
I created a used car page using Elementor Pro and ACF.
I want to filter with Search & Filter.
You can review the site at the address below.
https://neskar.radikalmedya.com/ikinci_el/
As you can see, the filter values on the left side appear smoothly.
But when I select any brand, fuel type or region, there is a problem with the search result. It says no results were found.
I’m sure I made a mistake somewhere. But I can’t find my fault.
I would like your help.
If you wish, I can share my manager information with you.
Thank you
Topic: Filter and elementor pro
Hi,
I just bought and installed your plugin v2.5.
I follow your document about elementor integration.There is no “elementor posts / portfolio / products” in the display results option.
Can you please help me to set up the plugin ?
AlexTopic: Elementor Pro Support
Hello,
I have been trying to create search options in Elementor Custom Post Type. I did everything as per new S&F Elementor Pro Plugin. But search function is not working. Kindly help and let me know how can I do it properly.Thanks.
before my loop start I’m define some empty arrray. then when loop start, using array push method i added value on those array.
https://prnt.sc/rysvwt
https://prnt.sc/ryswfeby using this array i run some javascript.
now what heppened when i filter the array will not update. so my script stop working after filter.even though i add this
how to solve this problem?
<?php /* Template Name: Broker list */ get_header(); ?> <?php do_action( 'ocean_before_content_wrap' ); ?> <div id="content-wrap" class="container clr"> <?php do_action( 'ocean_before_primary' ); ?> <div id="primary" class="content-area clr"> <?php do_action( 'ocean_before_content' ); ?> <div id="content" class="site-content clr"> <?php do_action( 'ocean_before_content_inner' ); ?> <!--start my coding--> <?php $ourCurrentPage = get_query_var('paged'); $args = array( 'post_type' => 'broker', 'post_status' => 'publish', 'posts_per_page' => 8, 'paged' => $ourCurrentPage ); $args['search_filter_id'] = 756; $the_query = new WP_Query( $args ); ?> <?php echo do_shortcode('[elementor-template id="655"]'); ?> <div class="main-container"> <span class="flot-filter"><i class="fas fa-sliders-h"></i></span> <div class="filter-wrap"> <div class="filter"> <span class="close"><i class="far fa-times-circle"></i></span> <p>Filters</p> <?php echo do_shortcode('[searchandfilter id="756"]'); ?> </div> </div> <div class="sections"> <?php $items = Array(); $item = Array(); $posts = Array(); if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <?php $cash_back_heading = get_field("cash_back_heading"); $profile_image = get_field("profile_image"); $website_link = get_field('website_link'); $count=0; $counttwo=0; $countthree=0; ?> <?php array_push( $posts, get_the_ID() ) ?> <?php array_push( $items, strtolower(preg_replace('/\s+/', '_', get_the_title("",false))) ) ?> <?php array_push( $item, strtolower(preg_replace('/\s+/', '', get_the_title("",false))) ) ?> <div class="intro"> <div class="flex-container"> <div class="flex-q-1"> <img />' alt="" /> </div> <div class="flex-q-3"> <h4><?php echo the_title(); ?> <span> >> </span> <a>" class="details-button" target="_blank">Details</a></h4> <div class="flex"> <div class='flex-full s<?php echo get_the_ID();?>'> <?php if( have_rows('table') ): ?> <?php while ( have_rows('table') ) : the_row(); ?> <?php if( have_rows('column') ): ?> <?php while ( have_rows('column') ) : the_row(); ?> <?php if( have_rows('table_data') ): ?> <ul class="ac"> <?php while ( have_rows('table_data') ) : the_row();$counttwo++ ?> <?php if( $counttwo == 1): ?> <li class='items <?php echo strtolower(preg_replace('/\s+/', '_', get_the_title("",false))); ?>'><?php the_sub_field('table_cell'); ?></li> <?php else: ?> <li class='item <?php echo strtolower(preg_replace('/\s+/', '', get_the_title("",false))); ?>'><?php the_sub_field('table_cell'); ?></li> <?php endif; ?> <?php endwhile; ?> </ul> <?php endif; ?> <?php break; ?> <?php endwhile; ?> <?php endif; ?> <?php endwhile; ?> <?php endif; ?> <?php if( have_rows('table') ): ?> <ul class="main-flex"> <?php while ( have_rows('table') ) : the_row(); ?> <?php if( have_rows('column') ): ?> <?php while ( have_rows('column') ) : the_row(); ?> <li class="main-flex-child"> <?php if( have_rows('table_data') ): ?> <?php $count++; ?> <?php if($count == 2): ?> <ul class='normal active'> <?php else: ?> <ul class='normal'> <?php endif; ?> <?php while ( have_rows('table_data') ) : the_row();?> <?php if( !$countthree): ?> <li class='items <?php echo strtolower(preg_replace('/\s+/', '_', get_the_title("",false))); ?>'><?php the_sub_field('table_cell'); ?></li> <?php $dropdowns[] = get_sub_field('table_cell'); ?> <?php else: ?> <li class='item <?php echo strtolower(preg_replace('/\s+/', '', get_the_title("",false))); ?>'><?php the_sub_field('table_cell'); ?></li> <?php endif; ?> <?php $countthree++ ?> <?php endwhile; ?> <?php $countthree=0 ?> </ul> <?php endif; ?> </li> <?php endwhile; ?> <?php endif; ?> <?php endwhile; ?> </ul> <?php endif; ?> </div> <p class="sh">more</p> </div> </div> <div class="flex-q-1 last"> <div class='payment <?php echo get_the_ID();?>'> <h4>Payment Options</h4> <?php if( have_rows('payment_options') ): ?> <ul> <?php while ( have_rows('payment_options') ) : the_row(); ?> <li><img src="https://moneybackfx.com/wp-content/uploads/2020/04/check-mark.png" alt="" /><?php the_sub_field('payment'); ?></li> <?php endwhile; ?> </ul> <?php endif; ?> <button id="send" class="send">Get CashBack</button> </div> </div> </div> </div> <?php $dropdowns!=null?$dropdown[]=$dropdowns:null ?> <?php $dropdowns = Array() ?> <?php endwhile; ?> <div class="pagination"> <h2><?php echo paginate_links(array( 'total' => $the_query->max_num_pages )); ?></h2> </div> <?php else : ?> <div class="not-found"> <p><?php _e( 'Sorry, no brokers matched your criteria.'); ?></p> </div> <?php endif; ?> <?php wp_reset_postdata(); ?> </div> </div> <?php echo do_shortcode('[elementor-template id="658"]'); ?> <?php echo do_shortcode('[elementor-template id="661"]'); ?> <!--end of my coding--> <style> select, select:focus { font-size: 16px } body { color: #333 } h1, h2, h3, h4 { font-family: Poppins, Sans-serif; margin-bottom: 10px } p { font-family: Montserrat, Sans-serif; font-weight: 500; line-height: 1.8em } .sh { text-align: center; font-size: 11px; border-bottom: 1px dotted #24eaa4; color: #24eaa4; margin: 0px auto; cursor: pointer; font-weight:700; } .main-container { background: #f7f7f7; padding: 20px 15px } .intro { background: #fff; padding: 30px 20px; box-shadow: 2px 4px 15px rgba(0, 0, 0, .1); border-radius: 5px; margin-bottom: 15px } .intro .flex-q-1 img { max-width: 50%; border-radius: 3px; } .intro .flex-q-1, .intro .flex-q-3 { text-align: center } .intro .flex-q-3 h4 { margin: 15px 0; font-size: 15px; } .payment h4 { margin: 10px 0 7px; font-size: 15px; } .intro .flex-q-3 h4 span, .intro .flex-q-3 h4 a { font-size: 13px; font-weight: 400; } .intro .flex-q-3 h4 a { border-bottom: 1px dotted #8482d6; } .payment ul { list-style: none; margin: 0 0 10px 0; } .payment ul li img { display: inline; } .send { font-weight: 600 !important; border-radius: 31px 31px 31px 31px; box-shadow: 4px 4px 10px 0 rgba(36, 234, 164, .38); padding: 5px 30px 5px 30px; border: none } .send:hover { background: #24eaa4 } .intro .main-flex { list-style: none; margin: 0 } .intro .main-flex ul, .intro ul.ac { list-style: none; margin: 0 } .intro .main-flex .main-flex-child { flex-grow: 1; } .intro .main-flex ul li, .intro ul.ac li { padding: 5px; border: 1px solid #eee; font-weight: 500; font-size: 13px; font-family: Montserrat, Sans-serif; } .payment ul li { font-weight: 500; font-size: 12px; font-family: Montserrat, Sans-serif; } .intro .main-flex ul li:first-child, .intro ul.ac li:first-child { color: #8482d6; font-family: Poppins, Sans-serif; background: rgba(132, 130, 214, .32); font-weight: 500; font-size: 13px; } .intro .flex-full { display: flex; flex-wrap: wrap; width: 100%; } .intro .flex-full .ac, .intro .flex-full .main-flex { flex-grow: 1; max-width: 50% } .intro .flex-full .main-flex-child ul { display: none } .intro .flex-full .main-flex-child ul.active { display: block } .mob { display: none } .intro .flex { display: flex; flex-wrap: wrap } .center-h.h { margin-top: 20px } .paym{ order:1; } .paym p{ font-weight:bold; margin:0 0 10px; } .payment{ display:flex; flex-direction:column; } .payment .send{ order:2; } .paym p span{ position:relative; display:inline-block; border-radius:100%; background:#333; color:#fff; width:18px; height:18px; line-height:18px; font-size:11px; } .paym ul{ position:absolute; list-style:none; margin:0px; padding:15px; border-radius:5px; box-shadow:2px 4px 10px rgba(0,0,0,.17); display:inline; background:#fff; text-align:left; display:none; bottom:41px; left:50%; transform:translatex(-50%); width:300px; transition:.2s; color:#333; } .payment .paym ul,.payment > ul{ display:none; } .paym p span:hover ul{ display:block; bottom:38px; } /************************************search and filter**************************************/ .filter-wrap{ overflow:hidden; position:fixed; z-index:3; width:0%; transition: 0.2s; top:0; left:0; background:rgba(0, 0, 0, .11); } .filter{ background:#fff; box-shadow: 2px 4px 15px rgba(0, 0, 0, .75); border-radius: 5px; margin-bottom:15px; margin-top:85px; } .filter-wrap.open{ padding:0px 15px; width:100%; height:100%; } .filter .close{ float:right; cursor:pointer; font-size:25px; color:#606060; margin-top:0px; margin-right:10px; } .filter p{ background:#ebebeb; color:#606060; padding:10px; margin-bottom:0; border-radius:5px 5px 0 0; } .filter #search-filter-form-756{ padding:15px; } #search-filter-form-756 ul{ display:flex; flex-wrap:wrap; margin:0px; } #search-filter-form-756 ul li{ width:100%; } #search-filter-form-756 ul li input,#search-filter-form-756 ul li label{ display:block; } ::-webkit-input-placeholder { /* Edge */ font-family: "Montserrat", Sans-serif; font-size: 13px; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ font-family: "Montserrat", Sans-serif; font-size: 13px; } ::placeholder { font-family: "Montserrat", Sans-serif; font-size: 13px; } select:focus,select,input,option{ font-size: 13px; font-family: "Montserrat", Sans-serif; border-radius:5px; } form input[type="text"], form input[type="password"], form input[type="email"], form input[type="url"], form input[type="date"], form input[type="month"], form input[type="time"], form input[type="datetime"], form input[type="datetime-local"], form input[type="week"], form input[type="number"], form input[type="search"], form input[type="tel"], form input[type="color"], form select, form textarea{ min-height:30px; line-height:30px; font-size:13px; padding:0px 12px; } .flot-filter{ text-align:center; display:inline-block; background:#121126; border-radius:100%; box-shadow: 4px 4px 10px 0px rgba(36, 234, 164, 0.38); overflow:hidden; position:fixed; top:85px; left:15px; cursor:pointer; width: 50px; height: 50px; border-radius: 100%; z-index:2; } .flot-filter i{ color:#24eaa4; font-size: 28px; line-height: 50px; } /**************************pagination*******************************/ .pagination{ margin:auto; text-align:center; } .pagination h2{ font-weight:500; font-size:15px; padding:7px; background:#fff; box-shadow: 2px 4px 15px rgba(0, 0, 0, .1); display:inline-block; } .page-numbers{ padding:3px; margin:0px 2px; width:31px; display:inline-block; } .page-numbers.current{ background:#24eaa4; border-radius:2px; color:#fff; } .next,.prev{ width:initial; } @media(min-width:768px) { .flot-filter{ display:none; } .intro .flex-q-3 h2 { margin-top: 0 } .filter-wrap{ position:initial; background:none; width:100%; } .filter{ margin-top:0px; box-shadow: 2px 4px 15px rgba(0, 0, 0, .1); } .close{ display:none; } #search-filter-form-756 ul li:nth-child(n+2) { width:48%; } #search-filter-form-756 ul{ justify-content:space-around; } } @media(min-width:992px) { .payment > ul{ display:block; } .payment .paym{ display:none; } .intro .flex-container { display: flex } .intro .flex-q-1 { max-width: 15%; width: 15% } .intro .flex-q-1 img { display: block; max-width: 90% } .intro .flex-q-1 ul li img { display: inline; } .intro .flex-q-3 { text-align: left; align-self: center; width: 65% } .intro .flex-q-1.last { max-width: 20%; width: 20%; align-self: center; } .mob { display: block } .desk { display: none } .intro .flex { display: flex; justify-content: space-between; flex-basis: 1 } select[name="Platform"], .ac { display: none } .intro .flex-full .main-flex-child ul { display: initial } .intro .main-flex { display: flex } .intro .flex-full .ac, .intro .flex-full .main-flex { max-width: initial } .intro .main-flex .main-flex-child { max-width: 40%; } .payment { margin-left: 15px; } .td { display: none; } .filter-wrap{ max-width: 1100px; margin: auto; } #search-filter-form-756 ul li:nth-child(n+2) { width:30%; } .sf-field-sort_order{ margin-left:-10px !important; } } @media(min-width:1200px) { .sections { max-width: 1100px; margin: auto } .intro .flex-full { overflow-x: initial } .intro- { padding-left: 2%; padding-right: 2% } #search-filter-form-756 ul li:nth-child(n+2) { width:15%; } } </style> <script> <?php $js_pid = json_encode($posts); $js_dropdown = json_encode($dropdown); $js_items = json_encode($items); $js_item = json_encode($item); echo "var pID = ". $js_pid . ";\n"; echo "var dropDown = ". $js_dropdown . ";\n"; echo "var items = ". $js_items . ";\n"; echo "var item = ". $js_item . ";\n"; ?> for (t = 0; t < dropDown.length; t++) { var select = jQuery('<select>').prop('name', 'Platform') .prop('class', 'Plat'); for (k = 1; k < dropDown[t].length; k++) { select.append(jQuery("<option>") .prop('value', dropDown[t][k]) .text(dropDown[t][k])); } jQuery('.flex-full:eq(' + [t] + ')').prepend(select); } jQuery('.normal').each(function() { var k = jQuery(this).children('.items:first-child').html().toLowerCase().replace(/[\])}[{(]/g, '').replace(/ /g, "_"); jQuery(this).addClass(k); }); jQuery('.Plat').change(function() { var o = jQuery(this).children("option:selected").val().toLowerCase().replace(/[\])}[{(]/g, '').replace(/ /g, "_"); var q = o.replace(/ /g, "_"); jQuery('.' + q).addClass('active').parents('.main-flex-child').siblings().children('.normal').removeClass('active') }); for (i = 0; i < pID.length; i++) { var v = jQuery('.payment.' + pID[i] + ' ul li').length; var l = '<div class="paym"><p><span>' + v + '</span></p></div>'; jQuery('.payment.' + pID[i]).append(l); } jQuery('.paym').each(function(){ var xt = jQuery(this).closest('.payment').find('ul').html(); jQuery(this).find('p span').append('<ul>'+xt+'</ul>'); }); jQuery('.flot-filter').click(function(){ jQuery('.filter-wrap').addClass('open'); }); jQuery('.close').click(function(){ jQuery('.filter-wrap').removeClass('open'); }); </script> <script> function equalHeights(className) { var findClass = document.getElementsByClassName(className); var tallest = 0; for (i = 0; i < findClass.length; i++) { var ele = findClass[i]; var eleHeight = ele.offsetHeight; tallest = (eleHeight > tallest ? eleHeight : tallest); } for (i = 0; i < findClass.length; i++) { findClass[i].style.height = tallest + "px"; } } for (p = 0; p < items.length; p++) { equalHeights(items[p]); equalHeights(item[p]); } function sH(){ jQuery('ul.ac').each(function() { jQuery('li:gt(2)', this).hide() }); jQuery('ul.normal').each(function() { jQuery('li:gt(2)', this).hide(); var tx = jQuery('li', this).length; if (tx <= 3) { jQuery(this).closest('.flex').find('.sh').hide(); } }); jQuery('.sh').on('click', function(e) { e.preventDefault(); var ql = jQuery(this).closest('.flex').find('ul.normal'); jQuery(this).closest('.flex').find('ul.ac li:gt(2)').slideToggle(); ql.each(function() { jQuery('li:gt(2)', this).slideToggle(); }); }); } sH(); (function($) { "use strict"; jQuery(document).on("sf:ajaxfinish", ".searchandfilter", function() { for (t = 0; t < dropDown.length; t++) { var select = jQuery('<select>').prop('name', 'Platform') .prop('class', 'Plat'); for (k = 1; k < dropDown[t].length; k++) { select.append(jQuery("<option>") .prop('value', dropDown[t][k]) .text(dropDown[t][k])); } jQuery('.flex-full:eq(' + [t] + ')').prepend(select); } jQuery('.normal').each(function() { var k = jQuery(this).children('.items:first-child').html().toLowerCase().replace(/[\])}[{(]/g, '').replace(/ /g, "_"); jQuery(this).addClass(k); }); jQuery('.Plat').change(function() { var o = jQuery(this).children("option:selected").val().toLowerCase().replace(/[\])}[{(]/g, '').replace(/ /g, "_"); var q = o.replace(/ /g, "_"); jQuery('.' + q).addClass('active').parents('.main-flex-child').siblings().children('.normal').removeClass('active') }); for (i = 0; i < pID.length; i++) { var v = jQuery('.payment.' + pID[i] + ' ul li').length; var l = '<div class="paym"><p><span>' + v + '</span></p></div>'; jQuery('.payment.' + pID[i]).append(l); } jQuery('.paym').each(function(){ var xt = jQuery(this).closest('.payment').find('ul').html(); jQuery(this).find('p span').append('<ul>'+xt+'</ul>'); }); sH(); for (p = 0; p < items.length; p++) { equalHeights(items[p]); equalHeights(item[p]); equalHeights('instatorex_markets'); equalHeights('instatorexmarkets'); equalHeights('axitrader_markets'); equalHeights('axitradermarkets'); } }); }(jQuery)); </script> <?php do_action( 'ocean_after_content_inner' ); ?> </div><!-- #content --> <?php do_action( 'ocean_after_content' ); ?> </div><!-- #primary --> <?php do_action( 'ocean_after_primary' ); ?> </div><!-- #content-wrap --> <?php do_action( 'ocean_after_content_wrap' ); ?> <?php get_footer(); ?>
Hi, I have an educational website and we’ve collated a list of references that are sorted by topic on our site. We’re using elementor pro. How can I best implement search and filter pro to search and display the different text links to each resource. Do I have to create a new post for each link (theres over 30 of them) or is there an easier way?
