# Event Filter Ajax

## 1: Display at frontend

You can use Elementor or Shortcode to display template like here:

![Layout 1](https://546673363-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MW3F_nSo5166LWY6zN0%2F-MW3hcNTpMFU1lX7C7yx%2F-MW3iaetwcXgS7xaMYUe%2FScreen%20Shot%202021-03-18%20at%204.45.50%20PM.jpg?alt=media\&token=8c1de492-e055-4bc1-b6b6-847dcf86f173)

![Layout 2](https://546673363-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MW3F_nSo5166LWY6zN0%2F-MW3hcNTpMFU1lX7C7yx%2F-MW3ifYd6Ot_qcCuqZyz%2FScreen%20Shot%202021-03-18%20at%204.45.58%20PM.jpg?alt=media\&token=a2e12fa1-0663-4804-9aec-2ce0cbd60636)

## 2: Config in Element

### 2.1 Config Elementor

* **Layout**: Layout 1, Layout 2
* **Alignment**: The Filter dipslay Left, Center, Right
* **Number Post**: Total Items in All or per category
* **Choose Time:** All, Current, Upcoming, Past Event
* **Order By Post**: Date, ID, Title
* **Order Post**: Ascending, Descending
* **Excluded Categories**: Insert Category ID if you don't want to display in results and the fitler bar.
* **Show filter:** show the filter bar.
* **Show All in filter**
* **Show only Featured**: you can define feature(special event) when create an event.
* **Show "View All Events" Button**
* **Additional Settings**: Config of slider.

<div><img src="https://546673363-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MW3F_nSo5166LWY6zN0%2Fuploads%2FVxxn23Eqv4BgCcbljWfS%2FScreen%20Shot%202024-07-26%20at%2015.53.34.png?alt=media&#x26;token=2a58f191-e4a9-4ceb-8be2-c21137a08b29" alt=""> <figure><img src="https://546673363-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MW3F_nSo5166LWY6zN0%2Fuploads%2FbxmNIE9yRIJd6c51s4o9%2FScreen%20Shot%202024-07-26%20at%2015.53.48.png?alt=media&#x26;token=8fd83740-095b-47b4-8e2c-43d36a7f01b4" alt=""><figcaption></figcaption></figure> <figure><img src="https://546673363-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MW3F_nSo5166LWY6zN0%2Fuploads%2FmOdptn771UPcI8lHCMTA%2FScreen%20Shot%202024-07-26%20at%2015.54.13.png?alt=media&#x26;token=31af4b8a-3f07-4a4c-9a21-d687f46353cf" alt=""><figcaption></figcaption></figure> <figure><img src="https://546673363-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MW3F_nSo5166LWY6zN0%2Fuploads%2FNq3U7jNOoEYZ26wlrdRm%2FScreen%20Shot%202024-07-26%20at%2015.54.25.png?alt=media&#x26;token=f55f5c7c-385c-4fa3-808b-ea65f381d583" alt=""><figcaption></figcaption></figure></div>

### 2.2: Config Shortcode

```
[ovaev_slide_ajax number_post="8" time_event="all" order_post="ASC" orderby_post="ovaev_start_date_time" show_all="yes" show_featured="no" show_filter="yes" exclude_cat="" text_read_more="See All Events" show_read_more="yes" layout="1" items="3"  slide_by="1" margin="30" pause_on_hover="yes" loop="no" autoplay="no" lazyload="yes" nav="yes" dots="no"  owl_nav_prev="" owl_nav_next="" category="all" ]


<!-- 
number_post: Number items in a page.
time_event: current or upcoming or past or empty (Display events with these filters.)
order_post: ASC or DESC
orderby_post: ovaev_start_date_time or ovaev_end_date_time or event_custom_sort or title or date
show_all: yes or no (Show All in navigation filter)
show_featured: yes or no (Show Featured Event)
show_filter: yes or no (Show navigation filter)
exclude_cat: Search without some categories. Example: slug4, slug5, slug6.”
text_read_more: Text read more button
how_read_more: yes or no (Show read more button)
layout: 1 or 2 (columns of items)
items: total items of slider.
slide_by: number item per slide.
margin: margin between items.
pause_on_hover: yes or no (Pause when the mouse hovers over the item in the slide.)
loop: yes or no (Loop for the slider.)
autoplay: yes or no
lazyload: yes or no
nav: yes or no (navigation of slider)
dots: yes or no (Dots are small indicators that show which slide is active and let users click to switch slides.)
owl_nav_prev: empty or insert class icon
owl_nav_next: empty or insert class icon
category: Choose All or Get even by slug category. Example : slug1, slug2, slug3
-->
```

## 3: Customize Template

Copy file\
Plugins/ova-events/templates/elements/ovaev\_events\_ajax\_content.php\
to\
Your-theme/ovaev-templates/elements/ folder. Note you have to create these folder.