how can i search elemntor column while retaining the design of that column?

Forums › Forums › Search & Filter Pro › how can i search elemntor column while retaining the design of that column?

Tagged: ,

Viewing 4 posts – 1 through 4 (of 4 total)
  • Anonymous
    #209717

    HI, I am currently working on a website in there i have a search form, under the form i have a section with 4 column. i will add multiple section later. how can i make the search work so that if i search for eg. column1 it will show the result but with same format and style. please check the image. thanks
    search

    Trevor
    #209720

    Are you able to send me a live link/URL to your search page so I can take a look at what you have made so far?

    Please note that we are closed for the day as it is late here in the UK (gone 5PM). I will get on this tomorrow.

    Anonymous
    #209724

    thanks for reply. here is a live site link

    https://xsculpt.com/beta/men/injectibles/

    Trevor
    #209754

    Did you follow our guide for using the Elementor Post Grid. Our plugin will integrate with this (to show any Post Type) to allow you to show results in a grid. Our guide for Elementor:

    https://searchandfilter.com/documentation/3rd-party/elementor/

    Even if you do not have Masonry enabled (it might not even be an option), use the guide for Masonry & Ajax, but, instead of this code:

    (function ( $ ) {
    	"use strict";
    	
    	// detects when the ajax request has finished and the content has been updated
    	// re-init the layout scripts from Elementor
    	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    		elementorFrontend.init();
    	});
    	
    }(jQuery));

    Use this code:

    (function ( $ ) {
    	"use strict";
    	
    	// detects when the ajax request has finished and the content has been updated
    	// re-init the layout scripts from Elementor
    	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    		elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
    	});
    	
    }(jQuery));

    Note, if you are placing the code inline on the page (in a HTML widget, in the Text view tab), it needs the <script>.....</script> tags around it. You can often place the form shortcode, the linking filter_next_query action shortcode, and the script all in one text module. So, the entire code block might look like this:

    [searchandfilter id="25413"]
    [searchandfilter id="25413" action="filter_next_query"]
    <script>(function ( $ ) {
    	"use strict";
    	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    		elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
    	});
    }(jQuery));</script>
Viewing 4 posts – 1 through 4 (of 4 total)

Search & Filter Support
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

We also use cookies to store items in your cart as well as allowing your to login on the site.

You can adjust all of your cookie settings by navigating the tabs on the left hand side.

By continuing to use this site, you also agree to our Privacy Policy.