Table of Contents
-
About The Project
-
Getting Started
- Usage
- Contributing
- Documentation
## 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.
__________________________________________________________________________________
(back to top)
