[Resolved] Building a search filter and view on two separate areas with Elementor

[Author]

Posts

[Luciana]

Hey there! I'm building a search view with its results. I'd like to show them in 2 separate areas being one for the search-filter form and the other for the results. Results will show in a 3-column view. The entire website is being developed by blending Toolset with Elementor. Unfortunately, Toolset's widget on Elementor that could be used on each area to display each view separately is not working properly. I was informed about this months ago that, and the bug continues.

I've been coming and going with this project for long, you can read the unresolved thread over here https://toolset.com/forums/topic/building-a-search-view-inside-a-grid-block/

I've tried using a shortcode as well but is not loading. (And after all this time, I lost track of why it is still unresolved).

Please, I'd love to hear your words on this.

What is the link to your site?
hidden link

(You'll need access to it)

Thanks a lot for your time and support,
Luciana

[Nigel]

Hi Luciana

I just ran a quick test creating a search View with a grid layout and inserted it using the Elementor View widget, splitting the View so that the search form and search results showed in separate places on the same page.

It worked correctly, except for this known issue: https://toolset.com/errata/elementor-view-widget-for-split-views-doesnt-work-properly-for-block-based-views/

That erratum includes a workaround.

Is there some other problem you are facing?

[Luciana]

Hi Nigel,
Yes, indeed I do. If you followed the thread I mentioned above, you must've seen different workarounds we tried with the guys (including that one).
At the current time, I've decided to do the thing all over again.

The workaround mentioned in the link above for the known issue is not working for me. When I write:

[wpv-view name="Products" view_display="layout"]

nothing is loaded. The page remains blank.

So… I'm in need of assistance to get that loading and showing.

Thanks,
Luciana

[Shane]

Hi Luciana,

Would you mind allowing me to have admin access to the website so that I can have a more detailed look at this for you ?

I've enabled the private fields for your next response.

Thanks,
Shane

[Shane]

Hi Luciana,

I was able to add the view to your page without any issues at all.
hidden link

Thanks,
Shane

[Luciana]

Hi Shane, thanks for your reply. I can see it showing in your test. The code I had written was identical but doesn't show. Any clues why?

With the view you added, however, the styles are not showing as in the original. If you check the view, you'll notice it's split into columns and styled in a way that is not loading here.

Thanks,

PS, by the way, is there a way I could edit the view's style with Elementor instead of having to use the Toolset builder?

[Shane]

Hi Luciana,

It Appears that the css for our view isn't being loaded properly when its inserted onto the page when using elementor.

We can workaround this by using the following custom css.

.js-wpv-loop-wrapper > .tb-grid {
    grid-template-columns: minmax(0, 0.25fr) minmax(0, 0.25fr) minmax(0, 0.25fr) minmax(0, 0.25fr);
    grid-auto-flow: row;
}

This should restore your grid columns.

Thanks,
Shane