[Resolved] View that relates to the post where is shown through many-to many relationship.
This support ticket is created 5 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.
I'd like to create a view that relates to the post where is shown through many-to many relationship.
I have Accomodations that is related to Locations by a many to one relationship.
I have Activities that relates to Locations by many-to many relationship.
I need to create a view in Activities single that shows related Accomodations.
...and you want to display related Accommodation posts when on an Activity post.
You'll need to create two Views.
The first will be to query Location posts which are related to the current activity (add a Query Filter that specifies the parent Activity is set by the post where the View is displayed).
In the output section of the View you won't output any fields, you will instead insert a second View (between the wpv-loop tags).
This second View will query Accommodation posts and you will add a relationship Query Filter that specifies you want Accommodation posts linked to the current post in a View (which is a Location post in the outer View).
In the output section you can then output the fields of the Accommodation posts as normal.
Unfortunately it seems not to work. It outputs nothing (no items to show). hidden link - look at the pre-footer area, there is where the connected accomodation posts should appear. And i can only add the view as shortcode to elementor, if I add it as view module it freezes the browser. Do you remember our chat yesterday about the archive in astra + elementor? This is a single page I'm trying to design.
Could you have a look at my admin? I don't see where I can add the the admin credentials...
I thought that now I understand the logic and I created a similar setup for the Accomodations, and I wanted to list connected activities based on the location. But it shows nothing... Could you look at that too to see what I understood wrong?
Ok, I solved that now, I played a little with the query settings but in the final everything stayed the same but it's working though I don't understand why....
BUT.... Back to the first parent-child view. Please look at this output: hidden link
It seems that it puts every location on the same row but creates a separate row for every location. It's logical, because I query for locations but in the content I show Accomodations related to that location. And that's a problem. How could that be corrected? On, not separate row but creates a separate loop for every Location.
I want to show only max. 4 related Accomodation, randomly. I set this in the child view, the parent view or both?
Because you are traversing relationships which requires you to use nested Views to display the related content then you cannot specify a limit of 4 random accommodation posts.
Your starting point is an activity.
You have a View to query the connected locations. You can add settings for the order and number of location posts that are returned by the query, but those settings relate to the connected locations, not the accommodation posts.
For every matching location post, we then get the connected accommodation posts using a nested View. Again, you could add settings for ordering and limit to this View, but it would relate to the accommodation posts for each location, e.g. show a maximum of four accommodation posts connected to this current location.
If you want to be able to show "4 random related accommodation posts" then you need to rethink how your data is structured so that you can use a single View to query the accommodation posts, which would mean connecting the accommodation posts directly to the activities.
If you persist with the current setup, then you need to understand how you iterate over the locations and for each one iterate over the accommodations, so that your View markup doesn't create new rows. The row should wrap the outer View, and neither the outer View nor the inner View can create a new row because of the unpredictability of how many results will be returned for each location.
OK, I understand though the last part was a little unclear. Theoretically this logic would be the correct I set up. Because Activities always happen in Locations (cities, villages etc.) not Accomodations. This way my client has to connect those Locations that are close to a given Activity. If I would connect Accomodations to Activities he should make a lot more connections...
Can you help me find a way to show those result somehow visually corectly in one row, not in different rows? I can remove the post limit and have a pagination. And the locations can be ordered alphabetically or by date not necesarrily randomly. But I cannot have a grid so disordered...
You can use random order, but you can't add pagination, for the same reason you can't limit the number, because you don't know how many accommodations may be returned for each location.
For styling in rows, the problem with trying to implement this with the Bootstrap grid would be that it works with a fixed number of elements per row, and you can't predict how many results each location View is going to return etc. for the reasons described above.
So you really need to create your own grid system where you can add as many or as few elements within a single container, without having to know ahead of time how many results will be in each row. One container, with an unknown number of child elements, which flow into a responsive grid.
I've prepared a demo of such a flexbox-based grid before, and one side effect is that it is easy with CSS to omit any given result and for the rest to re-flow to fill in the gap as if it were never there in the first place. Now that I think of it, that gives me the idea to hide any extra results that are returned using CSS.
Take a look at this demo: hidden link
The markup is very simple, the grid has a .ts-grid wrapper element and then .ts-grid-element child elements. That's the markup you need to reproduce.
The CSS is a little complex but hopefully you can follow it.
Creating a new grid is cool with me, thank you for the example. Before I used Divi, and there I could not use bootstrap. I would already have done it with flexbox but please look at the code in this page hidden link. it creates not only three rows but three different loops too. The rows are wrapped in a div similar to this
You can set the option in both Views to disable the wrapper div, and then the only markup that gets output will be the markup that you explicitly add.
The outer View doesn't need to output anything at all, it's just a holder for the inner View which outputs the actual accommodation posts.
You need to add the wrapper div somewhere, which could either be outside where you insert the outer div (so put the wrapper div around the views shorcode) or you could include it in the outer div, but outside of the wpv-loop tags, so that it is only added once.
(And make sure you insert the inner View directly within the wpv-loop tags of the outer View, don't use a content template for this.)
