Thank you for sharing these details.
The layout and the functionality that you're trying to achieve are a bit challenging, but, it is possible by using some careful implementation.
1. View "Add new Model":
You'll note that in the "Loop Editor" section, I've removed the extra wrapping containers, because we'll need to nest the child terms views inside the loop of this view too.
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="container wpv-loop js-wpv-loop">
<wpv-loop wrap="1" pad="true">
[wpv-post-body view_template="loop-item-in-add-new-model"]
</wpv-loop>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
When you'll visit the page ( {yourwebsite.com}/model-management-centre/model-manager/add-new-model/ ), you'll not see any difference in the layout and the cards for the parent level terms will be showing, in proper columns.
In the view's loop item content, I've added some conditional blocks:
[wpv-conditional if="( '[wpv-search-term param=level-1]' eq '' )"]
<div class="col-md-4 align-self-center">
<h2 class="text-hide"><a href="./?level-1=[wpv-taxonomy-slug]" class="page-link" style="background-image: url('[types termmeta='logo' size='medium' url='true'][/types]');width:300px;height:300px;background-repeat: no-repeat;background-position: center;">[wpv-taxonomy-title]</a></h2>
</div>
[/wpv-conditional]
[wpv-conditional if="( '[wpv-search-term param=level-1]' eq '[wpv-taxonomy-slug]' )"]
<div class="row align-items-center">
<div class="col-md-4 align-self-center">
<h2 class="text-hide"><a href="./" class="page-link" style="background-image: url('[types termmeta='logo' size='medium' url='true'][/types]');width:300px;height:300px;background-repeat: no-repeat;background-position: center;">[wpv-taxonomy-title]</a></h2>
</div>
</div>
[wpv-view name="add-model-child" limit="-1" offset="0" orderby="taxonomy-field-order" orderby_as="numeric" order="asc"]
[/wpv-conditional]
The first conditional block is shown, when the page loads without any term slug value available in the URL parameter "level-1", which is the default state. In this case, all the parent-level term cards will be shown. The link for each card will open the same page, with the clicked term's slug passed in the URL parameter "level-1".
( for example: {yourwebsite.com}/model-management-centre/model-manager/add-new-model/?level-1=test-company-1 )
When the page will reload, the second conditional block will make sure that only that parent level card is shown, whose term slug matches the value passed in the URL parameter 'level-1'. Within the same conditional block, the shortcode for the next level child terms view "Add Model Child" is also included.
2. View "Add Model Child":
In this view's query filter the option "Parent is the taxonomy selected by the parent Taxonomy View". So when this view will be shown it will only bring in the terms, where the parent term is the same as the term from the current loop item of the parent level view "Add new Model".
You can make similar changes to the loop editor and loop item content of this view and the next level views, to make it work for further levels.
I hope this helps and please let me know if any step or point is not clear.
regards,
Waqar
