[Resolved] Views plugin custom search with ajax stopped working

[Author]

Posts

[Nicholas]

Hello.

So parts of my custom search which I created with the toolset view plugin suddenly stopped working after I updated it.
When I select "AJAX results update when visitors change any filter values" the search results won't update. Only when I select " Full page refresh when visitors click on the search button", then it works.

You can see it for yourself. Go to hidden link and view the Search Page.

Please help. I don't know what the problem is. I have only toolset plugins and themes activated.

Regards,
Nick

[Nigel]

Hi Nicholas

I took a look at your site and see that there is quite a lot of custom JavaScript on the page in question.

So I reproduced your View without any customisations—Nigel Product Search—and added that to a page of the same name and tested it. If you do so yourself you will see that it works as expected.

I think you need to go through your View and revise the code you have added to see what is breaking the ajax updates. Try removing all of your customisations and then add them back in steps to help isolate the problem.

[Nicholas]

Helllo. I think it's the content template or the layout because when I add just the view with all of it's custom javascript inside the post body of a page it works just fine.
I tested it right here: hidden link

I don't use any custom js inside the the content template.

[Nicholas]

The view alone doesn't cause any issues at all.

[Nicholas]

So I tested this further and added your view to the content template (Campaign Search).

Your view stopped working as well.

[Nicholas]

It's so weird. I wrapped the view search form into 3 divs like so:

<div class="sfc-campaign-archive">
    <div class="sfc-campaign-archive-container">
        <div class="sfc-campaign-archive-search">
              [wpv-form-view name="campaign-search" target_id="self"]  
        </div>
    </div>
</div>

When I remove the divs everything works just as expected. I don't know why that is.

Then I created a new content template and added the exact code in there.
No issues at all.

What's wrong with this content template?

[Nigel]

Hi Nick

I think this is because your Search page is your WooCommerce shop page.

I went into the WC settings and unassigned the page as the shop page, and then re-visiting it the filters now seem to work okay.

Can you verify that?

If that's the case I can try and replicate it, using the same kind of setup you have, on a plain vanilla site.

[Nicholas]

Hey Nigel.

Yes that's it. I can verify that.

I just set the wc shop page to be blank and saved the permalink settings and voila it's working again.

[Nigel]

And you need this to work on the WooCommerce shop page specifically?

Those DIVs with the sfc-campaign classes, is there anything significant about those classnames (i.e. relate to functionality of another plugin or the theme) or they are classnames you made up?

[Nicholas]

Yes for SEO purposes.

No if I remove these classes the view won't work either. These are just classnames I made up.

[Nicholas]

Any updates on this?
I haven't heard back from you in a while.

[Nigel]

Hi Nick

I was just looking at this again, trying to recreate the issue on a local test site to abstract from any other issues on your own site.

I can reproduce the problem (although whether the views shortcodes are wrapped in DIVs seems to be a red herring), nor does it matter that you design the page with Layouts.

The problem can be reproduced adding the custom search View to a static page and then assigning that page to the WooCommerce shop page.

It is expected to find products on that page, but you are adding the View for another post type.

I'm not even sure this is expected to work, and I'm waiting for feedback from colleagues for their opinion.

I'll post an update here when I hear back from them.

[Nicholas]

Hey thanks for your reply.

You said ".. but you are adding the View for another post type".

The post type is actually the products post type.
I'd like to design the woocommerce shop page and add a custom view to it. I thought toolset layouts and content templates will do the job.

How would I design the woocommerce shop page apart from that?

I mean it works very well for now except for this little bug.

[Nigel]

Sorry Nick, I must have overlooked that when I checked your site.

Well, the shop page is for the product archive. So the correct way to customise it is to created a custom archive at Toolset > WordPress Archives for products, which can include ajax filters.

The templates and WC compatibility functionality are made in the expectation that the product archive will be on the shop page. You are adding a View to display products, which is similar but not the same.

Is there some reason you can't create a custom WordPress archive?

[Nicholas]

Thanks for the hint.
So I just assigned the layout to the the archive for the shop page as you suggested.
The AJAX filter is still not working.
hidden link

The reasons why I don't want to use a custom archive is because of SEO purposes.
Products are related to the shop page and tools like Yoast SEO make use of that principle.

Their breadcrumbs will never link back to the custom archive you suggest creating, but to the shop page.