[Resolved] Incorrect display of views in WooCommerce My Account area

[Author]

Posts

[yannicN]

Dear Toolset Team,
We use Toolset on the entire website of our customer Törnfinder. To display customer-specific objects, we have integrated various pages in the WooCommerce My Account area using the "Iconic WooCommerce Account Pages" plugin and display Toolset views there. Unfortunately, these are not displayed correctly.

We have therefore contacted the support of the "Iconic WooCommerce Account Pages" plugin and asked for help. They have already looked at the problem and made some adjustments. Now the team has asked us to contact Toolset and ask what is missing from the JavaScript errors displayed. I am attaching the message and links to this message. We would be very happy if we could solve the problem.

Message from Iconic WooCommerce Account Pages Support:
"We have received a response from our development team, and according to them, there appears to be a couple of JS errors being generated. Screenshot: hidden link
They've added a snippet to help with some HTML attributes that Account Pages may be stripping out, but this doesn't resolve the issue, as it appears that something is missing that the JS is depending on.
If you can contact WP Views support and ask them what is missing, then we can help them with compatibility."

We have created a test environment for troubleshooting. You can log in with the following access data:

htaccess
URL: hidden link
User: rb
Password: ******

WordPress Login
URL: hidden link
User: admin
Password: ******

Pages that are not displayed correctly
hidden link
hidden link
hidden link
hidden link
hidden link
hidden link
hidden link

Please let me know how I can share the passwords with you privately. Thank you very much for your help. I am always happy to answer any questions you may have.

[Nigel]

Hi there

Let me mark your next reply as private so that we can get those passwords from you—you may want to create a temporary admin user for us to use that you can later delete rather than share details of the existing admin user. And be sure to have a current backup of your site.

[Minesh]

First of all - I see you are using WP-Rocket plugin. Here is the Doc that shows information what files css/Js should not be minified and excluded:
- https://toolset.com/faq/how-to-use-optimization-plugins-with-toolset/

I checked the following page: hidden link

There must be some CSS or JS or custom JS has conflict.

I see you have added the spinner but some script is triggering the spinner added to your view.

So I checked the following view:
- hidden link

And from the section "Custom Search Settings " of your above view I've removed the loader image and save the view. I can see at least page:

 <div class="load-spinner-container">[wpv-filter-spinner spinner="<em><u>hidden link</u></em>" class="load-spinner" alt="Ladesymbol"][/wpv-filter-spinner]</div>

Also on the following content template which you added inside the view's loop template - you added the following shortcodes [borlabs-cookie] that is not even rendering I'm not sure why its happening.
- hidden link

 [borlabs-cookie id="merkliste-btn" type="content-blocker"]<div class="merkliste-btn" id="merkliste-btn">[favorite_button post_id="[wpv-post-id]"]</div>[/borlabs-cookie]

In addition to that - I'm not sure if you checked what plugin/theme causing the issue:
Could you please try to resolve your issue by deactivating all third-party plugins as well as the default theme to check for any possible conflicts with any of the plugins or themes?
- Do you able to spot any plugin that triggers the loader image of view?

As you are using number of third-party-plugins it's hard to find where exactly the conflict arises. The workaround would to be remove the spinner or find the cause which triggers the spinner automatically on that page.

[yannicN]

Dear Minesh,
Thank you very much for your first test.

I have been able to adjust the code so that the Borlabs Cookie shortcode is displayed correctly. I have also deactivated all plugins and could not detect any change. The spinner icon is important for us, as it is the only way to see that the website is loading.

During my test, I noticed that an option in the drop-down menu of the filter options does not filter the results.

I have also removed the custom JavaScript code in the view, but the number of errors is unchanged.

Maybe this is helpful: Iconic Support has added additional code under the following link: hidden link
I have also noticed that, for example, inline CSS is deleted (e.g. <div style="display: none">.

Can you answer where the JavaScript error messages come from or what JavaScript is missing to be able to execute the code correctly? I could then forward this again to Iconic Support.

[Minesh]

As per our support policy - It's beyond the scope of our support policy to debug the third-party custom code or plugin.

If you agree - Here is a sandbox site and you can auto-login to it using the following link:
- hidden link

Can you try to reproduce the issue with only Toolset plugins active? if no, can you try to add the add-on plugin "WooCommerce Account Pages" and again try to run a test and see if you able to reproduce the issue. This will help us to eliminate any custom code or plugins conflict.

Please share your findings with us.

[yannicN]

Dear Minesh,

I have installed everything in your sandbox and integrated a view with filter, sorting and loading icon under the page "My Account" on the subpage "Test View" in the WooCommerce My Account menu. It's like on our development environment that filter, sorting and loading icon doesn't work.

I have also added a subpage "Test Form" in the same My Account menu. This seems to be fine so far, but here, as in our development environment, the div "#wpt-form-message-45" is always displayed and is not automatically shown and hidden. I cannot say exactly what other problems this can lead to.

It would be great if you could check this. Thank you very much.

[Minesh]

Can you please check now: hidden link

I've added the following lines to the code that is added by "Iconic Support" under the following link:
- hidden link

/// added by toolset
	
	$allowed_tags['div']['data-pagination'] = true;
	$allowed_tags['div']['data-viewnumber'] = true;
	$allowed_tags['div']['data-permalink'] = true;

	
	
	/////

So the code looks like now is:

function iconic_wap_wpviews_compat( $allowed_tags ) {

// Form.
$allowed_tags['form']['data-viewnumber'] = true;
$allowed_tags['form']['data-viewid'] = true;
$allowed_tags['form']['data-viewhash'] = true;
$allowed_tags['form']['data-viewwidgetid'] = true;
$allowed_tags['form']['data-orderby'] = true;
$allowed_tags['form']['data-order'] = true;
$allowed_tags['form']['data-orderbyas'] = true;
$allowed_tags['form']['data-orderbysecond'] = true;
$allowed_tags['form']['data-ordersecond'] = true;
$allowed_tags['form']['data-parametric'] = true;
$allowed_tags['form']['data-attributes'] = true;
$allowed_tags['form']['data-environment'] = true;

/// added by toolset

$allowed_tags['div']['data-pagination'] = true;
$allowed_tags['div']['data-viewnumber'] = true;
$allowed_tags['div']['data-permalink'] = true;

/////

// Input
$allowed_tags['input']['data-action'] = true;
$allowed_tags['input']['data-page'] = true;
$allowed_tags['input']['data-ajax'] = true;
$allowed_tags['input']['data-effect'] = true;
$allowed_tags['input']['data-maxpages'] = true;
$allowed_tags['input']['data-ajaxprebefore'] = true;
$allowed_tags['input']['data-ajaxbefore'] = true;
$allowed_tags['input']['data-ajaxafter'] = true;

// Select.
$allowed_tags['select']['data-viewnumber'] = true;

// Option.
$allowed_tags['option']['data-orderbyas'] = true;
$allowed_tags['option']['data-forceorder'] = true;

return $allowed_tags;
}
add_filter( 'iconic_wap_content_kses_allowed_tags', 'iconic_wap_wpviews_compat', 20 );

Can you please confirm it's working as expected now.

[yannicN]

Dear Minesh,

thank you very much. The filtering, sorting and loading icon now work correctly.

It is also possible to delete the element using the "Löschen" button. Unfortunately this does not work yet. In the form under hidden link the message box is also permanently displayed, which was not the case before. Is it necessary to add more tags to the allowed list?

[Minesh]

I suggest you should check by deactivating the "Iconic WooCommerce Account Pages" plugin and check the HTML generated and and then activate the " "Iconic WooCommerce Account Pages" plugin and again compare the HTML generated and see what data attributes are stripped off by "Iconic WooCommerce Account Pages" plugin and add those tags with attributes to the filter

add_filter( 'iconic_wap_content_kses_allowed_tags', 'iconic_wap_wpviews_compat', 20 );

In addition to that - as per our support policy, we entertain only one question per ticket. This will help other users searching on the forum as well as help us to write correct problem resolution summery.

May I kindly ask you to open a new ticket with every new question you may have and mark resolve this ticket.

[yannicN]

Thank you for your feedback. There are a very large number of tags. There are several tags in each HTML element. We cannot rule out the possibility that one is missing somewhere. We are checking with the other support team whether the checking of these tags can generally be deactivated.

[Waqar]

Hi,

Thank you for sharing this update and glad that Minesh was able to help narrow down the issue.

I'll be following up on this ticket while Minesh is away on vacation, so let me know if you need any further assistance from the Toolset side.

regards,
Waqar