# Ajax Filter Main Query

**The foundation element that displays your filtered content.**

This element is required - it's where your posts/products will appear.

**Content Settings**

| Setting            | Description                                                 |
| ------------------ | ----------------------------------------------------------- |
| **Query Name**     | Unique identifier to connect with other filter elements     |
| **Post Type**      | Select which post type to query (post, page, product, etc.) |
| **Posts Per Page** | Number of items to display per page                         |
| **Posts Limit**    | Maximum total posts to query (0 = unlimited)                |
| **Offset**         | Skip first N posts                                          |
| **Order By**       | Sort by Title or Date                                       |
| **Order**          | ASC (ascending) or DESC (descending)                        |

**Advanced Settings**

| Setting                      | Description                                                                                                                           |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| **Show Loading Overlay**     | Display opacity overlay during AJAX filtering                                                                                         |
| **Loader Type**              | Choose from: Default, Ellipsis, Dual Ring, Roller, Ripple, Gradient Spinner, Bouncing Bars, Clock, Pulse                              |
| **Loader Color**             | Customize loader color                                                                                                                |
| **Result Appearance Effect** | Animation when results appear: None, Fade Scale, Slide Up, Zoom In, Bounce, Slide Rotate, Blur to Focus, Fade Only, Alternating Slide |
| **Infinite Scroll**          | Auto-load more posts when scrolling                                                                                                   |
| **Scroll Offset (px)**       | Distance from bottom to trigger infinite scroll (default: 200px)                                                                      |
| **Scroll Delay (ms)**        | Wait time before loading (default: 300ms)                                                                                             |
| **Use Query Parameters**     | Sync filter values to URL for shareable/bookmarkable states                                                                           |

**Design Settings**

* Width
* Layout (List or Grid or Masonry)
* Items per row (for grid layout)
* Spacing between items
* Margin/Padding

**Usage Example**

```
1. Add Ajax Filter Main Query
2. Set Query Name: "blog-posts"
3. Post Type: "post"
4. Posts Per Page: 9
5. Layout: Grid, 3 columns
6. Add child elements for your post card design

```

**URL Query Parameters**

| Setting                  | Description                                                 | Default |
| ------------------------ | ----------------------------------------------------------- | ------- |
| **Use Query Parameters** | Sync filter values to URL for shareable/bookmarkable states | false   |

When enabled:

* Filter selections appear in URL (e.g., `?category=tech&price=100-200`)
* URLs are shareable and bookmarkable
* Browser back/forward navigation works with filters
* Page refresh maintains filter state

**Custom No Results Text**

| Setting             | Description                                                                       |
| ------------------- | --------------------------------------------------------------------------------- |
| **No Results Text** | Custom message when no posts match filters. Leave empty for translatable default. |

**Static Container Element**

A new **Static Container** Breakdance element that inserts non-repeating content (banners, CTAs, promotional blocks) into the Main Query grid.

**Settings:**

* **Position**: Render after this item number (0 = before all items)
* **Grid column span**: How many grid columns the container spans (1–12)

Place any Breakdance elements inside the Static Container — they persist through filtering and pagination. Useful for injecting a promotional banner after the 3rd product card, for example.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.woohoo.dance/ajax-filters/elements/ajax-filter-main-query.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.