[Resolved] Views Slider with Custom Field Containing Elementor Template Shortcode

[Author]

Posts

[stuart]

This is so close to working I need just a little push to get all the way.... 🙂

I'm using Elementor Pro Templates to style the data (for ease) - I am NOT currently using Toolset Blocks to do this.

What am I trying to do:

I am trying to create an in Office Dashboard using Toolset Views for Leads, Sales Figures etc.

I have a CPT called 'Dashboards' - with Sales, Inbound, On-boarding as posts within the CPT.

I have a page call "website.com/dashboard" with a View (Dashboard View) that uses a slider to rotate the Sales, Marketing, On-boarding posts.
-- "Pagination enabled with automatic AJAX transition" --

I have created a custom field group assigned to the Dashboards CPT called 'Dashboard Fields' with which I have one single line field called 'Dashboard Designs'.

In each of the 3 posts I use the 'Dashboard Designs' custom field to add a different View for each post, this is to allow me to call a individual view in rotation based on the slider settings... It works ok, apart something odd with the ajax loading of the templates

The three views call data from separate custom posts one for each, Sales, Inbound, On-boarding with their separate data points.
Each of these views I insert an Elementor template in to the main view loop.

The only one setup currently with the viable issue is 'inbound'.

Image of how the view turns out (left and right sections stacked on top of each other):
hidden link

If I change the "Dashboard View" to:
" Pagination enabled with manual transition and page reload " and add some pagination controls to navigate each slide - it displays fine - see image:

hidden link

What do i do to fix that?

I have given access (it is just a TEST site, so you can do what you need).

Cheers

[Nigel]

I can see the problem but can't say why.

When using page reloads for pagination the Elementor stylesheet frontend.min.css is loaded.

That contains the styles for classes such as elementor-col-50 which sets the width of the columns.

But when you use ajax pagination in the View that stylesheet is not included on the page, so there are no style definitions for such classes and the divs are displaying as default block-level items, i.e. at full-width.

I must say this is a very unorthodox way to insert a View, but before dismissing it as an unintended use, I tried on my own test site and I can't get an Elementor template shortcode to work at all when inserted in a View (directly within the loop section, not in a linked template, which for sure will not work).

I need to get some clarification from my colleagues about what is expected to work here, and I'll update you again when I have that.

[stuart]

I appreciate it Nigel, I use Elementor to style views this way (insert a template directly in the view loop) as its so flexible. This is however the first time ive attempted to things this way, but made sense for my application.

I'm an unorthodox human, you have to push the limits 🙂

One thing I noticed, I can insert the view directly in the Dashboards View and it works,
however, if its in a conditional it breaks again? I was going to try and use the seperate dashboard views in conditionals to see if that worked in the same main view.

But during this I noticed by accident, if you leave a view directly and a shortcode that contains the view, they both work (see commented section below)

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
<wpv-loop>[wpv-post-slug]<br>
[wpv-conditional if="( '[wpv-post-slug]' eq 'inbound-leads' )"][wpv-view name="inbound-leads-dashboard"][/wpv-conditional]  
<!-- This renders both: if un commmented correctly [wpv-view name="inbound-leads-dashboard"] -->
</wpv-loop>
	<!-- 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]

[stuart]

Ive gone unorthodox again I am afraid Nigel 🙂

Based on you mentioning about styles not being loaded, I though what if I do this:

I set the loop to be that of the field containing the view, and this time I use and empty Elementor template in the loop (just with a section) to test.

It works perfectly.

Now I know I have pushed the boundaries a little here... so let me know if there is a 'better' way... or if not 🙂

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>[wpv-post-slug]<br>
<!-- the field below contains the view, that contains the elementor template individual dashboard designs -->
[types field='dashboard-designs'][/types]
<!-- the elementor template contains nothing but an empty section -->
[elementor-template id="93781"]
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

[Nigel]

I did some more testing on my site and confirmed why I wasn't getting anything output from the elementor template shortcode inserted into my View output, even though it was used directly within the loop and not in a linked template, which is because the post type itself has a Views content template assigned to display such single posts.

When I removed the content template assigned to the post type, it then worked ok on the front end, including when using ajax pagination, no problems with the missing elementor stylesheet.

So, I would say the problem lies in your unorthodox way of inserting the View, namely by pasting the View shortcode into a Types single line text field and displaying that.

The first thing I would try changing would be to instead only save the slug of the View in the Types field, not the actual Views shortcode, and then where you need to insert the View insert the wpv-view shortcode but use the types shortcode (or maybe the wpv-post-field shortcode) to provide the name attribute of the wpv-view shortcode.

I don't know why I think that might work, it just feels like a more correct way to do this, and when pushing the boundaries a little it's going to require a little suck-it-and-see.

[stuart]

Hey Nigel, thanks for that - unfortunately its the same result:

hidden link

And the main view

<wpv-loop>
<!-- the field below contains the view, that contains the elementor template individual dashboard designs -->  
[wpv-view name="[types field='dashboard-designs'][/types]"]  
  <!-- check output of the field -->  
<br>Name:   [types field='dashboard-designs'][/types]

</wpv-loop>

Still stacked
hidden link

Im trying to rack my brains on any other ways I can achieve this ... I mean I can add a fake elementor template shortcode in to the main view to render the css... but doesn't feel 'right'.

[stuart]

ok, I got a little further with it, still dont understand the 'why' but here it is:
If I explicitly reference the post id of the types field, it works fine?

<wpv-loop>
<!-- the field below contains the view, that contains the elementor template individual dashboard designs -->  
[wpv-view name="[types field='dashboard-designs' id='93706'][/types]"]  
<br>Name:   [types field='dashboard-designs'][/types]
  <!-- the elementor template contains nothing but an empty section -->  
</wpv-loop>

[Nigel]

"If I explicitly reference the post id of the types field, it works fine?"

You are asking me, or telling me?

If it's working, then the problem is you are hard-coding the id, which defeats the purpose.

Have you tried including the id attribute and populating it with [wpv-post-id]?

If that doesn't work, it might need a bigger rethink about how to implement, but let me know first.

[stuart]

I was just testing things to see what effects they had, and yea It defeats the purpose.

I just found it odd that it rendered correctly that way, when it should be the same effect as it should already be referencing the same id in post loop.

And I agree, it may need to be rethought about - if you cant add view in to shortcodes this way. there will be a more elegant solution I am sure.

Happy to have some advice .

thanks

[Nigel]

Thinking of alternatives, can we start with the obvious question.

You have 3 dashboard posts that you show with a slider.

Instead of burying the View you want to display for each dashboard post in a Types custom field, why don't you insert the View directly into the dashboard post content?

[stuart]

My issue is resolved now. Thank you!

I managed to find another work around... thanks

[stuart]

I thought I would add, I just found out the solution to this with the odd formatting...

If you have one post in the rotation that doesnt have an elementor template added it will cause this issue.

Say you have 4 pages you are rotation through in a custom post type, and only three of them have an Elementor template assigned, whether it be in conditionals or on the pages directly it wont work... however if you add the fourth - works perfectly.

[stuart]

My issue is resolved now. Thank you!