I am trying to:
Use Kadence (Pro) Blocks and custom CSS and JS to style my product archive page. Unfortunately, not all of my styling (at random) works. I integrated my custom page header into the archive, including a menu that appears on hover. Some of my custom CSS for the navigation menu works, whether it's in the WordPress Customizer or in the Toolset archive's custom CSS/JS section (I've tried both, seemingly with no difference). But some of it doesn't.
Some of the icon blocks I added to the pseudo header, in the right div, disappear after admin-ajax.php is fully loaded on the page. The custom JS used to make the navigation menu appear on hover stops working when admin-ajax.php loads too. So it will work on page load, but will revert as soon as admin-ajax.php is loaded. I've tried turning off some AJAX related features in the Toolset archive, but that made no difference.
Some of the Kadence Blocks' native styling appears to stop working as well.
Link to a page where the issue can be seen: hidden link
I expected to see:
My custom header working and looking much like it does on the home page, here (ithout any of the icons disappearing):
Adding JS can be a problem when you have ajax updates, depending on how much of the page content is replaced by the ajax update, because whatever the JS was originally attached to might have been destroyed by the ajax update, and even if it is replaced by markup that looks the same, the new content will not have the JS that was attached to the original elements. Here I'm typically talking about event handlers added to elements, but there is the related issue that if you run some code based on a DOM ready event, that may not fire again when elements are replaced by an ajax update.
If the problem relates to lost event listeners you will need to re-attach them, or if code ran on the DOM ready event and it needs to be re-run on content that was inserted via an ajax event you would also need to run the code again.
How you do that rather depends on what these ajax events are, and what triggers them.
Views includes some custom events for scenarios like these, specifically for after View results have been replaced via ajax following a pagination event or a custom search, but neither of these look relevant on your taxonomy archive page.
Do you have more details about what the ajax actions are, and what triggers them?
I'm not a developer and kinda learned to make this site as I went. So, I'm not sure what sort of AJAX events may be happening in the background, as initiated by plugins. All I know is, I don't think that my header code has anything to do with that. However, you can see this code for yourself here:
hidden link
I just temporarily disabled this code and cleared my cache, but it made no difference to the problem I'm describing here.
Other than that, I have these following (I believe) AJAX events activated in the Toolset archive:
- Update the URL of the page when paginating the View
- Preload images before transition
- Pre-load the next and previous pages - avoids loading delays when users move between pages
- Pagination enabled with automatic AJAX transition
Turning these features off did not get rid of the issue, though.
However, this doesn't just affect the aforementioned custom JS, but also some Kadence Blocks (like the icons in the top right that disappear after admin-ajax.php loads). That said, as I previously mentioned: a bunch of custom CSS ALSO does not appear to work on my Toolset-designed archive page. Compare the product search bar on the right in the psuedo-headder, to the product search bar on the home page.
During troubleshooting the product category archive, I noticed two script errors in the browser's console.
One of them was fixed by removing the opening and closing script tags ( <script type="text/javascript" id="menu-nav-header"> ... </script> ) from the custom script in the 'Products' archive's 'JS editor'.
The scripts added in Toolset's JS editor for views and archives, are automatically enclosed in the opening and closing 'script' tags.
There is still the error related to the custom JS code that you've included:
Uncaught ReferenceError: openNavigationMobile is not defined
This code calls the function 'openNavigationMobile'. Is it a fully custom-developed script or coming from the theme or a third-party plugin?
I'll recommend temporarily removing this code and seeing if it has any effect on the loading of styles, before and after the AJAX request has been completed.
It would also be a good idea to temporarily disable all cache and code optimization plugins until this issue with the styles is sorted out.
The script error in the console is fixed now, thank you.
I've compared the overall styles of the header and the page, between the archive and the homepage but couldn't exactly find the difference. That's probably because the styles and icons that you're referring to have already disappeared when the page loading completes.
Due to the nature of these issues, I'll request to share a quick screencast/video, that highlights exactly which styles and icons are missing. This will help in better understanding the issues and suggest the next steps accordingly.
The the styling of the product search on 'header homepage.png' compared to the other two headers, it's totally different unfortunately. 'header homepage.png' is what it's supposed to look. The other two from the archives page are buggy.
Secondly, on 'Header Archive Before Admin-AJAX' you can see the icons that are gone on 'Header Archive After Admin-AJAX'.
Thank you for sharing these screenshots and I understand now what is happening.
When the AJAX request for the archive is completed the SVG icons from the header are stripped out.
Is there any specific reason for making the header part of the archive? The challenge with this approach is that you'll have to make Kandece re-initialize its scripts and styles every time the AJAX is performed to update the results, not just the page load. That also includes pagination and search criteria changes.
There is a global footer included through WP Admin -> Appearance -> Kadence -> Elements. Have you considered including the header the same way?
The reason I incorporated the header into the page itself is for stylistic reasons: less white space, it just plain ol' looked way better that way. Because this custom header also includes some Toolset blocks and elements pertinent to the archive page, such as filters and archive titles. Those are not present the normal header.
However, inserting the header using an element would not actually fix the issue: Sure, I could just have a standard header as with my footer. But before I incorporated my header, I already did that and it too gave me the same sort of styling problems that I'm currently experiencing. For some time I had a Kadence Accordion in there to hide most of the filters, and that would stop working as admin-ajax loaded. And I would experience some other styling issues; in fact I would argue that a lot of CSS or Gutenberg blocks not pertinent to Toolset itself would stop working.
Secondly, not all the icons in the header are just there for general site functionality. I added one mroe icon to the custom header just for the archive, a funnel. I was planning to use that icon as a trigger to reveal the more advanced product filters for the archive page (currently hidden from view). Let's say, I add another blcok with an icon inside it there. It too would then disappear and I would be without a toggle for the advanced product filters.
So, to me personally, whether or not I add the header to the page itself, it doesn't really change the actual problem that I'm experiencing. I added some of the CSS and JS to the archive itself to see if it would remidy the issue, and it wouldn't. So, fundamentally, it looks like a bug inherent to Toolset
There was no doubt in my mind that my problem was likekly somewhat complex and that you were doing what you could! But thank you for keeping me posted either way!
