<br />
<div align="center">
  <a href="https://a-x.ai/" style="text-decoration: none; color: white !important; padding-top: 20px; font-size: 88px !important;">
    <img src="https://a-x.ai/wp-content/uploads/2024/04/athena-xai-ico.svg" alt="Logo" width="145" style="padding-right: 15px;">
    <h1>ATHENA XAI</h1>
  </a>

<h1 align="center" style="color: white;">Headless</h1>
</div>

<br />
<details>
  <summary>Table of Contents</summary>
  <ol>
    <li>
      <a href="#about-the-project">About The Project</a>
      <ul>
        <li><a href="#built-with">Built With</a></li>
      </ul>
    </li>
    <li>
      <a href="#getting-started">Getting Started</a>
      <ul>
        <li><a href="#prerequisites">Prerequisites</a></li>
        <li><a href="#installation">Installation</a></li>
      </ul>
    </li>
    <li><a href="#usage">Usage</a></li>
    <li><a href="#contributing">Contributing</a></li>
    <li><a href="#documentation">Documentation</a></li>
  </ol>
</details>

## About The Project

The general idea is to build a custom script to implement Athena Search without too much issues on all possible platforms and frameworks.

Main features:
* Autocomplete and First Click
* Search,Category and Visual Similarity Search Page
* Infinite Scroll and Pagination
* Filters , Sorters and Number of shown results on search page, and on Autocomplete
* Configuration for all built in functionalities

For more information about the project requirements check the original documentation.

> The script is not entirely independent and in order to use it, websites will need some slight changes.

### Built With

* Programing language: [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
* Package Manager: [npm](https://www.npmjs.com/)
* Proxy Language: [Node.js](https://nodejs.org/en)
* [Docker](https://www.docker.com/)

Third-party libraries:
***
>*We are trying not to use a lot of third-party libraries, but there are some libraries installed in order to get a cleaner smaller, and well-organized code.
However, we should keep this list short.*

* [Cropper.js](https://fengyuanchen.github.io/cropperjs/) - Used for cropping images for visual similarity search
* [OMRangeSlider.js](https://github.com/Objement/om-javascript-range-slider) - Used for price range slider
* [heicToAny.js](https://github.com/Objement/om-javascript-range-slider) - Used to change image format from heic and heif to jpeg

## Getting Started

Follow the next sections to learn how to install and use the script.

## Requirements

1. Node.js version 20.10.0
2. Docker - Not required if using auth version 1
3. Docker Compose - Not required if using auth version 1

### Installation

1. Download the package from our npm repository
2. Copy the project from node_modules to your project
3. Set API url apiUrl, that url represents Athena Dashboard url.
4. Set websiteToken, token that represents your website id.
5. set originUrl, your website url.
6. Enjoy Searching with us.

## Usage/Examples

    All available configurations for AthenaXAi are:  

    //Placement of the price range
    priceRangePlacement: 'before',

    //Price Range Unit of Price
    priceRangeUnit: '$',

    //On how many decimals we want to round
    decimals: '',

    //What we want decimal point to be
    decimalPoint: '',

    //What we want separator to be
    separator: '',

    //Voice Search Language
    voiceSearchLang: 'en-US',

    //Voice Search Status
    voiceSearchStatus: true,

    //Visual Similarity Search Status
    visualSimilaritySearchStatus: true,

    // Pager status
    pagerStatus: false,

    //Check if Infinite Scroll is Activated on Dashboard
    InfiniteScrollStatus: true,

    //Camera Capture Status
    cameraCaptureStatus: false,

    //Layout Type
    layoutType: 'athena-l3', //You can change between 'athena-l3', 'athena-list', 'athena-grid'

    //Bottom Observed Element
    bottomObservedElement: null,

    //Check on how many elements search on filters appear
    filterSearchAppearOnElements: 10,

    //Filter Search Enable
    filterSearchEnable: true,

    //Form URL
    formUrl: '/athena.html'

## Contributing

1. Always create a feature branch from the master
2. We should always wait for a review before merging into the master
3. Keep the PR clean without `console.log`

## Documentation

- Main folder that holds all the javascript code is src/
- Subdirectories include:

A) autocomplete
B) category
C) global
D) search

__________________________________________________________________________________

A) Autocomplete folder contains all the logic that is needed to instantiate our
autocomplete section. It also includes number of subfolders that are:

1. ajax - Where all ajax request are made.
2. features - Where we build our new features in separate files.
3. helper - Where all helper global autocomplete functions are placed.
4. renderer - Where all elements are rendered.

__________________________________________________________________________________

B) Category folder contains all the logic that is needed to instantiate our
category section. It also includes number of subfolders that are.

__________________________________________________________________________________

C) Global folder contains all the logic that is needed to instantiate our
global functions. It also includes number of subfolders that are:

1. analytics - Where all analytics functions are stored.
2. cropper - Where cropper logic is stored.
3. heic-converter - Where converter logic is stored.
4. helpers - Where all global helpers are stored.
5. indexed-db - Where indexed-db logic is stored.
6. om-range-slider - Where slider logic is stored.
7. packages - Where all packages are stored.

__________________________________________________________________________________

D) Search folder contains all the logic that is needed to instantiate our
Search functions. It also includes number of subfolders that are:

1. ajax - Where all ajax request are made.
2. helper - Where all helper global search functions are placed.
3. infinite-scroll - Where infinite-scroll logic is placed.
4. renderer - Where all elements are rendered.

__________________________________________________________________________________


<p align="right">(<a href="#about-the-project">back to top</a>)</p>

