Pro 6 - Issues with Facets

Beta
#1

Bit of a strange one that I’ve noticed on a few sites when using Facet WP.

Using the filtering seems to cause the styles in the loopers content to be lost.

As an example I have a archive page with a looper the consumer is an “a” tag.

The tag contains the below classes.

<a class="x-col e271-e25 m7j-1i m7j-1j m7j-1k m7j-1q"

There is a class created as below.

.m7j-1q.x-col {
    align-items: stretch;
    align-content: stretch;
    background-color: #DEDDDD;
    box-shadow: none;
}

Before filtering this works as expected. If I use the facet filter sometimes just the first filter does it, other time when I click back to the top level or change the filter, when the columns return the columns loose all the styles assigned by “.m7j-1q.x-col” above.

The same goes for text inside the column. (the styles assigned to the text are lost)

If I inspect the element all the classes still exist on the element but the class “.m7j-1q.x-col” no longer exists in the list of styles that are applied to the element.

I’ve tested in both Firefox and Chrome.

Busy adding custom classes to see if that will resolve it but it isn’t ideal. (I can give you links to two sites where this is happening if it is helpful.

#2

Just a quick update. I’ve added a custom style to the col / “a tag” but once I start filtering this custom class gets removed.

#3

Yeah it is probably giving it another class name, after being dynamically built. It creates different IDs for the same elements depending on the preview, frontend, and depending on what elements are being rendered. It’s an annoyance with more advanced integrations, as you can’t actually reference elements from another element.

I have a feeling with our current system you would need to have the page reload or have each filter load a new page. I’ll try to actually checkout the plugin in the coming weeks.

2 Likes
#4

Would also be interested to know of FacetWp is a good option to filter native themco loopers !

#5

@jackc I agree, “Dynamic Loopers” is an item on the next poll which would entail getting plugins like this to work, or get them easier to integrate with.

@urchindesign How are you actually loading results? Are you using the component shortcode or from post content?

#6

Sorry I’ve been away.

I’m filtering an archive page that has two columns. The left column contains the facet shortcodes, the right column contains the loop and has the facet template class on it. i.e. the container of the right hand column has the class .facetwp-template applied to it.

As per the docs the facets are outside the container element that has the facetwp-template class

#7

I somehow got the facetwp-template to work. It didn’t at first though, I would play around with what CS element actually has the class, trying to get as close to the consumer as you can, but not the actual consumer. I can take a look at a site as well.

At first I thought you were doing something similar to the below with shortcodes. I’ll have to play around with it more, but I think we can get something working here as well.

image
image1202×606 30.7 KB