[Resolved] Problem displaying blocks in the product archive search

[Author]

Posts

[kostaB]

I'm trying to build a product archive in Toolset using Gutenberg blocks. It's going well, except I want most custom searches within an accordion block, the one by Kadence Blocks (that is frequently suggested by support here). As shown below:

hidden link

However, when I do that, the actual archive grid itself does not load. Only the search portion does. I have to click to open the accordion for the archive to appear, but then it immediately collapses again. Where I was simply hoping to just see the custom searches within a closed pane, with the full archive below.

I've tried several different things. This is just the latest permutation of this setup. Previously, the accordion block would auto expand upon load, then collapse again and as it collapsed, it would remove a lot of the styling (such as the searches I stacked vertically within the accordion pane. And it would suddenly stack the looking glass icon below the search bar.

That said, I have one custom search, in the form of a stylized radio filter, where every selection is horizontally laid out, that is outside of the accordion block. When the archive is visible and I click on one of the options, for example 'mini' in the link above, it puts the looking glass icon stacked vertically below the search bar as well.

Similarly, way before I tried to even do that, I had initially planned to include a shortcode for Kadence Theme's breadcrumbs as a block within the search section, and while it initially loaded the breadcrumbs just fine, after a short while they disappeared and just displayed the raw shortcode. I've tried doing this using the native shortcode block, the native HTML block and the Fields & Text block; all had the same effect. Where it would load fine and then suddenly revert to showing the code. I have since removed this shortcode.

The point of this last paragraph is not to say that I definitely want to use the shortcode in there or that I need to have that fixed. Just to say that there is something weird happening when it comes to putting Gutenberg blocks in the search portion of a Toolset archive.

A potential solution I saw elsewhere in the Toolset support forum, was when someone put the ENTIRE search portion within the accordion. I don't recall why, but that did not work for me.

[Luo Yang]

Hello,

I have tried the website credentials you provided above, the "Server protection details" isn't valid, the htaccess login window keeps on popup, please check it, make sure all credentials are valid. thanks

[kostaB]

Hi, thank you for your response. Sorry yes, I figured afterwards. But I don't know how I can now provide hidden information to get passed the password wall.

[Luo Yang]

I have enabled the private message box, please provide your website credentials in it.

[Luo Yang]

It should be a CSS conflict, your website is using some other custom JS codes to hide the Toolset WordPress Archive layout HTML div, see my screenshot: hidden-div.jpg

I have done below modifications in your website:
Edit your theme file "style.css", add below codes:

#wpv-view-layout-8173{
visibility: visible !important;
}

Please test again, check if it is fixed, thanks

[kostaB]

Hi thank you for your help! But it does not resolve the issue of, after a while, the accordion auto-expanding and the custom search having its styling messed up by putting the looking glass under the search bar:

Similar to the other strange behavior I described earlier where, initially breadcrumbs that were displayed via shortcodes would show up in the archive, but after a few seconds revert to showing the raw code. As I said earlier, I've since removed this shortcode. But it does seem to be related to the same problem as what I'm experiencing now with the according opening after a few seconds and then the search bar to the right looking differently.

[Luo Yang]

Where should the "Looking Glass" be put?
I have checked it in the admin side:
hidden link
The "Looking Glass" is under the search box too.

Please elaborate the question with more details:

its styling messed up by putting the looking glass under the search bar

Can you take a screenshot for what you are going to achieve?

[kostaB]

It's not underneath for me! I think that's more to do with the width of the page editor screen. Not how it's displayed on the front-end. When I view it on my 1440 screen, in the editor the looking glass is next to the search bar. When I view it on my 1080, it's underneath.

In before.png, this is what it looks like immediately. With the accordion (still collapsed), and the looking glass next to the search bar. This is correct.

However, after a couple of seconds waiting, the accordion automatically opens, and messes up the appearance of the search bar, as seen in after.png

When I reclose the accordion it reopens again after a few seconds automatically.

What I want to do, is just for the accordion to work as intended; To remain closed until opened. To remain open until manually closed. Not to automatically go back and forth on its own whims. And NOT to change the appearance of the looking glass in relation to the search bar.

[Luo Yang]

For the "Looking Glass" issue, please open the WordPress Archive page in admin site:
hidden link
View it with 1080 screen, you should be able to see the same issue: the looking glass is underneath.

See my screenshot looking-glass.jpg

Since you are using the "Icon" block from other plugin, you need to check it with that plugin author.

Can you confirm it? then we can proceed to the other issues.

[kostaB]

Hi.

To be completely clear;

This isn't a support ticket for the behavior of the looking glass. This is a support ticket for the way that the Toolset archive doesn't allow me to display non Toolset blocks in the search section of the archive properly. Including, and most importantly, the Kadence Accordion. The looking glass icon is a _symptom_ of the problem I am seeking support for. It's not the subject of this support ticket.

This is fundamentally a support ticket about how non-Toolset blocks in the search section of the archive are NOT behaving properly. Including the Kadence Accordion block that multiple Toolset support staff are recommending to be used with Toolset:

https://toolset.com/forums/topic/accordion-template/#post-1527533
https://toolset.com/forums/topic/accordion-as-master-detail-for-archive/#post-1574681
https://toolset.com/forums/topic/collapsible-tabs/#post-1716397

The jist of my problem, and what I am seeking support for, is summed up by this little paragraph of my previous comment:

"What I want to do, is just for the accordion to work as intended; To remain closed until opened. To remain open until manually closed. Not to automatically go back and forth on its own whims. And NOT to change the appearance of the looking glass in relation to the search bar."

To prove that this is an issue with how Toolset handles these blocks, and to reiterate, Toolset support themselves suggest using the Kadence Accordion Block, I've placed them in a CPT (hooked element), that display the title on archive pages here:

hidden link

I know that the search bar doesn't _work_ in there. But see here how it and the accordion (here titled 'test accordion') display properly. And how the accordion doesn't open and close on a whim. I've retitled the accordion in the search 'search accordion'. Can you see how despite the fact I'm using the exact same blocks, it behaves strangely, on the same page, in the Toolset search section of the archive, but not in the hooked element?

hidden link

[Luo Yang]

Since it is a compatibility issue with other plugins, please provide a copy of your website in below private message box, you can put the package files in your own google drive disk, share the link only, I need to test and debug it in my localhost, thanks
https://toolset.com/faq/provide-supporters-copy-site/

[kostaB]

Thank you for your response, and apologies for the late reply.

I very much would like to add the Duplicator package. I tried several times. Unfortunately, it did not seem to work. I think my staging server does not have the storage for the whole package on top of my site. Is there another way for you to test the compatibility?

[Luo Yang]

You can duplicate the same problem in below fresh test site:
hidden link

Then I can export the duplicator files from above test site.

[kostaB]

Thank you, that's a great alternative that fortunately, did not require much work for me to replicate the issue with:

hidden link

As you can see here, when clicking on the accordion, it immediately closes again upon opening.