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
• Package Manager: npm
• Proxy Language: Node.js
• Docker

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 - Used for cropping images for visual similarity search
• OMRangeSlider.js - Used for price range slider
• heicToAny.js - 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. Rename .env.example to .env
4. Populate all .env variables with your from Athena Dashboard
5. Run docker compose up -d --build
6. Remove existing files inside example folder *.athena-x-ai.js files
7. Run npm install && npm run build
8. Place newly generated *.athena-x-ai.js files inside example directory
9. Extract files inside example folder to desired place inside your project
10. 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.