[Resolved] Building a search view inside a grid block

[Author]

Posts

[Luciana]

Dear Jamal,

Thanks for your assistance. I followed your line of thoughts and everything makes sense. However, I've tried applying the CSS and the grid is still not showing…

–

I'm also experiencing another issue: the filter system is actually not working properly.
You can check it out here: hidden link

For instance, I select 'Product type' > 'Sparkling Wines' and the result is 'No items found'. When there is at least one item to display.
Also, when I go from one specific product type to All products, only one is shown, etc. These are just examples, but the are several others.

The issue appears regardless I'm using the search view + results on split columns or the full view as shown in the above url. Should I open another thread for this?

Thanks, Luciana

[Jamal]

Regarding the issues with the filter, they were caused because the year dropdown was set by default to 2008. After adding a placeholder to it, it fixed the issue. Check this screenshot hidden link

Regarding the grid issue inside Elementor, there seems to be a workaround for it. I have created,using blocks, a content template "Content template Results - Product Search View". Then I included it in Elementor using a shortcode:

[wpv-post-body view_template="Content template Results - Product Search View"]

However, the results appears in two columns, like the original view, but the search does not appear. I suggest that you move the form and results out of the columns block in the original view.

I'll remain at your disposal.

[Luciana]

However, the results appears in two columns, like the original view, but the search does not appear. I suggest that you move the form and results out of the columns block in the original view.

I'm afraid I'm not following what you're trying to say with this. I've tried your approach using the content template, but it's loading the search form with it. Is there a shortcode to load only the results from the content template?

I attach a pic of how is loading on my end. The search form is duplicated, but the bright side is that it is actually displaying in columns! 😀

–
As per the functioning, is working now, thanks.

[Jamal]

The view was duplicating the form, because, it was edited inside the content template, where it should be just reused(not edited). When a view is reused, it offers an option to display the search form, the results, or both. But when it is edited, it offers different options. Check these screenshots:
- An edited view: hidden link
- A reused view: hidden link

I removed the view block from the content template, and I tried to reuse it again, like this hidden link
But that revealed a different problem, the background images for the container blocks are not visible anymore. So, this is what I got:
- The form was not duplicated anymore: OK.
- The results were displayed in a grid: OK.
- The container blocks' background images are not visible anymore: NOK.

I assume that you have also encountered this(based on your screenshot), right?
And that's why you have, probably, edited the view inside the content template, right?
Because when I made the content template firsthand, I did not get this issue. I'd like to know what have you done. Maybe we can reproduce that on a clean install and escalate it to the developers.

Let me approach our 2nd Tier about it and get back to you.

[Jamal]

Hello again!

Our 2nd Tier has suggested building the view, in two columns, entirely with blocks, and use it inside Elementor, until we fix the issue with the Elementor widget.

I hope it is a viable solution for you, right now. Please let us know your feedback.

[Luciana]

Hi Jamal,
Well, I've tried this other workaround, too. It seems that the moment I insert it within my Elementor page, the grid columns display gets to 1 for some reason, not 4 as I configured… So, the issue remains.

[Jamal]

My apologies for the late reply. I talked about it with our 2nd Tier to see if that's a separate issue to fix, but he was not able to reproduce the issue. He created a view with blocks. The search form and the results are in separate columns, and the results use the grid layout. Then he used it inside Elementor with the Toolset View widget, and the results were correct.

So, I created a new install here hidden link
I created the view in this content template hidden link
Then I used inside Elementor on this page hidden link
And the issue was not reproduced as you may see here hidden link

So, I installed the OceanWP theme and tested against it too. And the issue was not reproduced.

Can you try to recreate the view again on your website, and reuse it inside Elementor?

[Luciana]

Thanks, Jamal. This is exactly what I need. I have no clue what may be happening on my website, then. I'll try that once more and keep you posted.

[Minesh]

Jamal is on vacation. This is Minesh here and I'll take care of this ticket. I hope that is ok.

Yes, you can keep us posted and if the issue is resolve you are welcome to mark resolve this ticket.