NO BUG: Filtering in ajax destroys quickview

Bugs
1

I found an interesting bug which concerns the quickview popup technique

to reproduce it it’s very simple

  • create your loop post with a quickview button
  • install any filter plugin like (facetwp, jetsmartfilters or wpgrid )
  • create a quick filter to isolate 1 or a few results
  • click on your quickview button

you will notice strange behavior every time :face_with_monocle:

I don’t understand how ajax or popups work under bricks but there is clearly a problem between these two, they don’t like each other at all

we need an explanation of what is happening and why it does this

and especially the good techniques that other sites do to keep their quickview results functional even with ajax filtering

Video

2

kLOji6rqeUcntDWPg9Jj-mZqSq4

I know it’s a terrible bug that I’m telling you here

which involves completely rethinking the way QuickView should work there is probably a lot of code to add to catch this bug

it may not be a bug for some and a real bug for others .

but in both cases it prevents us from doing quickview/carousel/lightbox/other in a filterable loop.
the fact of filtering breaks something

Can we expect an intervention from someone who explains what is happening with loop filtering?
video 1
video 2

3

Hi @neosan,

  1. The first video https://streamable.com/uzoktz is not viewable.

  2. For this video 1 seems like multiple popup opened at the same time. May I know it happens after filter action or without? If the issue occurs without any filter action, please can you provide a link for me to check? You could send it to help@bricksbuilder.io and include this thread link as a reference as well.

  3. For this video 2 , it is because the plugin didn’t fetch the latest dynamic CSS from their AJAX call. Or maybe the required JS never reinit after the DOM newly added.

As the issues you mentioned here only happen when using the filter plugin (except issue 2), I would not mark this as a BUG in Bricks. Instead, suggest you to check with the plugin support.

To explain it in more detail, this is what happening on your site. The filter Ajax calls were made by the filter plugin, they got their code logic to retrieve the latest HTML and replace your existing loop so you can see the results in your loop perfectly. However, in Bricks, this is not sufficient.

In native Bricks AJAX calls ( Ajax pagination, Infinite Scrolls ), these are the things we do.

First, Bricks will make AJAX call to retrieve:

  • Latest Loop HTML
  • Latest Popups HTML
  • Dynamic CSS generated by the HTML
    (will be more in future versions)

Then, Bricks will replace your old loop HTML with the latest one, and add latest popups HTML in the document as well. Same to the dynamic CSS, it will be inserted in the document.

Lastly, Bricks will init all necessary JavaScript for those newly added DOMs and everything will work as expected.

You can test AJAX pagination or Infinite Scrolls in Bricks without any filter plugin and your popups and sliders should work as expected.

Hope this explains it.

Regards,
Jenn

4

thanks for the detailed response @itchycode

yes indeed everything works with the native Bricks AJAX calls (Ajax pagination, Infinite Scrolls)
the problem arises as soon as filtering occurs on the loop with any plugin filter.

so the solution if I understand correctly,
simply reproduce the behavior (Ajax pagination, Infinite Scrolls) with the availability of native filtering under bricks ?

what I tried to do before discovering this limitation was to place a carousel in my loop card as we see very clearly here
airbnb
and
remax
this does not work in ajax,
so I thought about quickview, same problem.

it is possible that in the very near future (with the availability of native filtering under bricks) this problem will be taken into account.

allow me to summarize this discussion and get everyone to agree on what we’re talking about with a single image quickly made in figma :smile:
and which sums up the whole problem,
sometimes a picture is worth a thousand words

Frame 1
Frame 11920×1515 215 KB

At the moment when I have finished writing these words, it is not possible to reproduce what is illustrated in this image, you will come up against all the problems that this topic exposes

let’s hope that the brick devs take this scenario into account :pray:

5

it is possible that in the very near future (with the availability of native filtering under bricks) this problem will be taken into account.

Sure, when we are working on the filtering and sorting feature, the required JS, CSS, and HTML will be properly reinit + display in the document. That’s how our AJAX pagination and Infinite scroll work currently :slight_smile: