[Resolved] The hero banner section on this website doesn't display properly

[Author]

Posts

[HOP]

I am trying to: get the hero banner to go back to displaying properly. it's been a while since it hasn't been showing properly. Basically it should go through the different numbers on the right and show different text and headings on the left hand side to coincide with the make of car graphic shown on the right hand side. However, it only shows for the first bullet point of Audi and then doesn't do it for any other make. By placing the cursor of the area where the text should appear, it alters to a text selecting cursor, which suggests the text is there somewhere or somehow but is of a lower Z index perhaps? I'm not sure. Nothing has been altered or changed with regards to this in the backend so I don't get why it's stopped showing properly all of a sudden.

Link to a page where the issue can be seen: hidden link

I expected to see: each bullet point, car graphic and associated text and headings to load and display together

Instead, I got: However, it only shows for the first bullet point of Audi and then doesn't do it for any other make. By placing the cursor of the area where the text should appear, it alters to a text selecting cursor, which suggests the text is there somewhere or somehow but is of a lower Z index perhaps? I'm not sure. Nothing has been altered or changed with regards to this in the backend so I don't get why it's stopped showing properly all of a sudden.

Also, I can't find the duplicator files you asked for. My hosting is with Siteground, but it's not clear which installer/.php file you need. Possible for us to jump on a Zoom/Teams call?

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

I see a number of script errors in the browser's console, both on the front-end and the back-end. My first recommendation would be to make sure that WordPress, active theme and all plugins are updated to the latest versions.

In case the issue with the slider persists, let me know and with your permission I'll download the website's clone and investigate this further, on a different server, without affecting the actual website.

regards,
Waqar

[HOP]

Hi Waqar,

Thank you for your response!

As this is us a a custom coded WordPress website, I was told to be careful when updating plugins or the theme or WordPress for that matter in case it causes incompatibility issues.

My initial guess was that perhaps something automatically updating and that’s why this issue occurred all of a sudden. Is that not what you think might have happened?

Would you still recommend I update everything? I just don’t want plug-ins to fail and have inter plug-in compatibility issues.

I am fine with you doing what you suggested with the clone etc.. you have my permission.

[HOP]

Hi Waqar, can I have an update on my message above please?

[Waqar]

Thanks for writing back.

> As this is us a a custom coded WordPress website, I was told to be careful when updating plugins or the theme or WordPress for that matter in case it causes incompatibility issues.

- Yes, the recommended approach is to make a complete backup copy of the website, before proceeding with plugins, WordPress, and theme updates, in case of custom-coded websites (that is where fair amount of code customizations are involved).

> My initial guess was that perhaps something automatically updating and that’s why this issue occurred all of a sudden. Is that not what you think might have happened?

- Reviewing the website, it seems like the WordPress automatically updated, but the active theme 'Astra' and the plugins were not. This would explain the script errors since script libraries are jointly loaded and used by WordPress, themes, and plugins. This means that either all of them should be updated over time or none of them.

> Would you still recommend I update everything? I just don’t want plug-ins to fail and have inter plug-in compatibility issues.

- Yes, here are the steps that I'll recommend, to make sure that updates are safely applied, without affecting the actual website:

1). Make a complete backup copy of the website and download the clone:

Officially we use and recommend the following two plugins:

a). Duplicator – WordPress Migration Plugin
https://wordpress.org/plugins/duplicator/

b). All-in-One WP Migration
https://wordpress.org/plugins/all-in-one-wp-migration/

2). You can deploy this clone to any online or local host server.

3). Apply the updates on this clone, to see the effects and test if any compatibility issues arise.

4). If everything works normally, you can then apply the updates to the live/production website too.

I hope this helps and let me know how it goes.

[HOP]

Hi Waqar,

Thanks for your response.

Have you done this below?

In case the issue with the slider persists, let me know and with your permission I'll download the website's clone and investigate this further, on a different server, without affecting the actual website.

Can I just create a staging site within my website hosting provider?

Are the steps above something you can help with doing, if I give you access to my hosting?

[Waqar]

> Have you done this below?
> In case the issue with the slider persists, let me know and with your permission I'll download the website's clone and investigate this further, on a different server, without affecting the actual website.

- Yes, I have downloaded the website's clone and will be performing some tests to troubleshoot the slider view used on the homepage. Will share the findings, as soon as this testing completes.

> Can I just create a staging site within my website hosting provider?
> Are the steps above something you can help with doing, if I give you access to my hosting?

- The suggested steps from my last message are related to a general good practice of maintaining a staging website. This staging website can be on the same server as your actual production website or on a different server, as convenient for you.

The goal of that staging website is that you'll be able to use it in the future to test WordPress, theme, and plugin updates first on the staging website and then on production.

We over the support forum can assist you with investigating specific issues related to Toolset components, like I'm doing in this case for the Toolset view for the slider. However, the management of staging websites and testing for future updates is something that you'll be managing on your own.

[Waqar]

Just wanted to let you know that I'm still working on this. Will share the next update as soon as I have more information about the slider.

[HOP]

Hi there, so I've done the all of the following and the issue still persists. Also, I have liaised with my hosting provider at length and they have said it really is something to do with the Toolset block and it's something Toolset should help with fixing, especially as I've tried all of your steps (for which I am helpful for you providing):

Update all the plugins
Disable all the plugins
Renable it one by one
Update theme
Update WP

The hosting provider also said that they could see some potential issues within the Toolset code.

I have also created a staging site to test all of the above on. If I can give you the logins to it, can you please log in and fix this? It's causing a lot of headache and a lot of time being wasted.

Kind regards,

[HOP]

Hi there, can I get an answer on the below asap please??? It’s really frustrating not being able to get this to work and I’ve been patiently waiting. I just need this fixing already.

[Waqar]

I apologize for the delay in getting back on this, as we had an unusually busy forum queue after the weekend.

I'm working on this and will share the findings with you within the next few hours.

[Waqar]

Thank you for waiting.

After troubleshooting, I was able to confirm that the slider's text content is not showing for the subsequent slides, due to the limitation of the third-party plugin "Animated Blocks on Scroll".

The plugin applies the animation styles to the content on the page load. However, if some content is updated through AJAX (i.e. without reloading the page), then its animation function is not re-initialized.

Since, the slider view also uses the automatic pagination feature with AJAX, the animated text content shows on the first slide on page load, but not for the paginated slides.
( To confirm this, you can temporarily change the pagination setting of the view for the slider to the 'Pagination enabled with manual transition and page reload' option. You'll see that the content will show properly for all the slides )

As a quick fix, you can remove the 'Animated Block' blocks from the slider view.

To make this work with this animation block, you can get in touch with the "Animated Blocks on Scroll" plugin's author, to see if they can share a script of function, to re-initiate the animation feature, after the AJAX operation has been completed.

Toolset Views offers events that can be used in the custom script to reinitialize other scripts. Here is a quick example:

$( document ).on( 'ready js_event_wpv_pagination_completed js_event_wpv_parametric_search_form_updated js_event_wpv_parametric_search_results_updated', function( event, data ) {
    // code to reinitialize script after AJAX operation
});

I hope this helps and please let me know if you need further assistance.

[HOP]

Thanks, what do I do with this code? Where do I paste it? Or am I suppose to give it to the author of that Animated Blocks on Scroll plugin?

Also, I can share the logins for the staging site with you of that helps?

[Waqar]

You're welcome.

> what do I do with this code? Where do I paste it? Or am I suppose to give it to the author of that Animated Blocks on Scroll plugin?

- Yes, you can share this with the plugin author and they'll know how to use it. Likewise, if they share any code or function name with you, do let me know about it.

> Also, I can share the logins for the staging site with you of that helps?

- The staging website won't be needed because it is something that the relevant plugin's author will be able to assist with.