# 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" order_post="desc" orderby_post="date" 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="20" pause_on_hover="yes" loop="no" autoplay="no" speed="3000" smart_speed="500" nav="yes" mouseDrag="yes" owl_nav_prev="arrow_carrot-left" owl_nav_next="arrow_carrot-right" category="all"]

<!--
category: get event by slug category.
number_post: get total event.
show_read_more: show/hide button See All Even.
-->
```

## 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.
