[Resolved] Toolset views conflicting with theme

[Author]

Posts

[jelle-jacobd]

I am trying to:
Activate Toolset views and create a search function (Ajax)
Link to a page where the issue can be seen:
hidden link

A search can be done but not with Ajax. As the inspector shows it gives an error or conflict with my theme. What should I do? This only happens after activating Toolset views.

Uncaught TypeError: Cannot read property 'carousel_settings' of undefined
at $us.WGrid.init (us.core.min.js?ver=7.1:226)
at new $us.WGrid (us.core.min.js?ver=7.1:224)
at HTMLDivElement.<anonymous> (us.core.min.js?ver=7.1:265)
at Function.each (jquery.js?ver=1.12.4-wp:2)
at a.fn.init.each (jquery.js?ver=1.12.4-wp:2)
at a.fn.init.$.fn.wGrid (us.core.min.js?ver=7.1:265)
at HTMLDocument.<anonymous> (us.core.min.js?ver=7.1:265)
at i (jquery.js?ver=1.12.4-wp:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
at Function.ready (jquery.js?ver=1.12.4-wp:2)

Thanks Jelle

[Nigel]

You can confirm that this doesn't happen if you switch theme to, say, twentytwenty?

Does it happen only with the child theme, or also the parent theme?

Could you make a zip file of the parent theme and share it here via dropbox or similar and I will test.

It happens on any page where you try to add an ajax search? No other special content is required on the same page?

[jelle-jacobd]

Hi Nigel,

Thanks for getting back at me.

Yes, I can confirm this doesn't happen with the default theme.

The issue happens with the parent theme and child theme.

I have created a zip and shared the files.

hidden link

Yes it happens on any page as far as I can see.

Thanks!

[Nigel]

I installed the theme and did see some errors, but they disappeared when I also installed the UpSolution Core plugin, which seems to be required.

What else do I need to do to reproduce the errors?

If you disable WPBakery do you still see the errors, or do the errors require it to be used? Are you designing the output of the View with WPBakery?

The error message you shared refers to "carousel_settings". Does your page and/or View require some particular content (e.g. a carousel) to trigger the error?

[jelle-jacobd]

Correct the Upsolution plugin is required for this theme.

WPBakery needs to be active as well in order to reproduce my setup. I'm not designing the view with WPBakery, just some html and css from the theme. General pages are designed using WPBakery.

Although a carrousel is custom theme WPBakery page element, I'm not using it on this particular page.

The only thing I need to do is deactivate my theme in order to get things working.

[Nigel]

I can't reproduce the problem, I have a page made with WP Bakery where I inserted a View with custom search that updates via ajax, using the theme you provided, and it works as expected.

It seems to be something more specific, and I'll need a copy of your site to investigate further, if you could please create a duplicate: hidden link

[jelle-jacobd]

Hi Nigel,

That's really strange. No sure what I'm doing wrong then.

I have created a duplicator package for you to access by the following link:

hidden link

Thanks in advance.

[Nigel]

I installed the copy of your site locally and I was able to see a problem with JS errors, though not the same one you report (see screenshot).

I see those errors after disabling all plugins except Types and Views and the Upsolution Core plugin required by the theme.

But I haven't been able to identify what's triggering the error.

I made a new View, a basic custom search View to show vacature posts much like your own but without any modifications, just a vanilla search View.

I then did the same as you and inserted just the View results into a new page, and used the sidebar widget to add the search form.

This new View worked without problem.

If I edit your vacature page and delete the View results (but the widget is still there) I get no errors.

So there appears to be something specific to this View causing the problem.

It would be helpful if on your own site you created a new vanilla search View for vacatures and replaced the existing View on that page with this new View to confirm that it works without errors.

Then begin customising that View in the same way you did with the original View, testing regularly so that you can identify what if anything breaks it.

If you find something, please let me know the details and I can then try to reproduce the same on my copy of your site.

[jelle-jacobd]

Hi Nigel,

I created a new view like you suggested and you're wright, that works. I also located the part of the code (div) that seems to cause the issue, but I'm still not sure what to do.. I delete the code below from the loop editor everything works fine again.

<div class="w-grid type_grid layout_23937 overflow_hidden" id="us_grid_1">

Loop editor section before removal of the code.

[wpv-layout-start]
<div class="w-grid type_grid layout_23937 overflow_hidden" id="us_grid_1">
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-post-body view_template="loop-item-in-vacaturen-zoeken"]
</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]
</div>
[wpv-layout-end]

[Nigel]

The problem specifically arises with the w-grid class.

I'm guessing this is related to your theme (you presumably understand why you are adding it) where some expected resources are not properly enqueued, but I don't know much about it.

What I did do was to simply insert the same on an otherwise blank test page:

<div class="w-grid type_grid layout_23937 overflow_hidden" id="us_grid_1">
<p>Something inside the w-grid</p>
</div>

Nothing to do with Toolset here, just a static WordPress page.

And I got the same errors I've been seeing, shown in the screenshot.

I suggest you contact your theme support about it.

[jelle-jacobd]

Yes it is. Thanks. Oke, I will contact my theme author and get back to you if needed.

What is needed for them to get Toolset supported in full? Would be nice.

Thanks again.

[Nigel]

I'm not sure that anything is required specifically for Toolset.

If it doesn't work on a normal WordPress page then it's either a problem with their code (or a problem with what you are trying to do with it).

If they can tell you what's required for it to work on a static WordPress page, then you can test it again in a View.

If it then doesn't work (in a View, but does on a non-Toolset page) then we have something to investigate to determine why not and who needs to do what...

[jelle-jacobd]

Hi Nigel,

Things are clear now. The grid layout used in my theme is not supported or doesn't support Toolset. I have added a feature request with Upsolution as well. Below the responding message from the team.

///
It won't work in this manner, you need to create your own markup and manually stylize it. Because all grid CSS classes reserved by Zephyr's JavaScript code.

Sorry for the inconvenience!
///

[Nigel]

Well, if you received details from them about what that markup should look like, what classes it uses (and—probably—information about any assets that need enqueuing on the page) then it may be possible to implement, because Toolset lets you add markup or generate it dynamically with a View.

You may like to know that the latest release of Blocks added our own grid system (using CSS grid). See the announcement for details: https://toolset.com/2020/02/toolset-blocks-1-1-beautiful-responsive-design-made-easy/

[jelle-jacobd]

yes you're right. I have managed to get things working with my own mark-up en CSS and it's fine for now. Thank you for your help and pointing me in the right direction. The result is at: hidden link

I do have some minor issues I need some help with. All of them are related to the Google maps filter:

1. The Google maps filter should show only results form the Netherlands, is that possible?
2. The icon on the button "Use my location" shows an square box and no icon when I change the font-face?
3. The unit for distance in Holland is km, so there's no need voor MI to be available in the dropdown. Can I turn this of? Or should I just hide it with CSS?

Thanks, Jelle