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

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.

Installation

1. Set version of API you want to use ( Available versions are 1 or 2) , version 1 is set by default
2. If you are using version two of our API, get the Access Token from dashboard and set it inside your main js file where you initialized Athena, it should look something like this accessToken: 'AsCAvFaNgXpKjz4NaANO...etc'
3. Get the Website Token from dashboard and set it inside your main js, it should look something like this websiteToken: 'AsCAvFaNgXpKjz4NaANO'
4. Get the Url of your dashboard and set it inside Proxy/config.php and make sure to add /api/ at the end, it should look something like this apiUrl: https://athena-example.syncit.test/api/
5. Copy the contents of the body of the html document inside index.html witch is located inside example folder and include it inside your project
6. Copy the contents of the body of the html document inside athena.html witch is located inside example folder and include it inside your project
7. Make sure that script tags are in the end of the body section or in header section with defer tag on them, also scripts should have type=module inside them
8. Change contents of athenaConfig object with the configurations that match your preferences.

Usage/Examples

All available configurations for AthenaXAi

//Price Range Unit Placement
priceRangePlacement: 'before', //before or after available

//Price Range Unit of Price
priceRangeUnit: '$', //can set anything type string

//Voice Search Language
voiceSearchLang: 'en-US', //should be language supported by google in this format

//Voice Search Status
voiceSearchStatus: true, // true or false

//Visual Similarity Search Status
visualSimilaritySearchStatus: true, // true or false

// Pager status
pagerStatus: false, //true or false - infiniteScrollStatus should be false in order for paginator to work

//Check if Infinite Scroll is Activated on Dashboard
InfiniteScrollStatus: true, //true or false pagerStatus should be false in order for infinite scroll to work

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

//Bottom Observed Element
bottomObservedElement: document.querySelector('#athena-search-footer'), //bottom observed element for infinite scroll

//Check on how many elements search on filters appear
filterSearchAppearOnElements: 10, // integer value for search inside filters to apear  

//Filter Search Enable
filterSearchEnable: true, //true or false 

//Api Url
apiUrl: '', //Api url from athena dashboard

//Website Token for Analytics
websiteToken: '', //Website Token from athena dashboard

//Access Token
accessToken: '', //Access Token from athena dashboard

//Api Version
apiVersion: 1 //Api version, available integer 1 or 2

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

• Three main files exist in the project and they are:

A) CSS B) JS

A) CSS pretty straight forward , it contains CSS files that are required for the project to run correctly and provides us with the starting base css files

B) JS folder is our main folder where all the logic is contained and it`s consisted of 3 folders:

• Autocomplete - Inside autocomplete folder there is our main js file that handles all autocomplete logic and two folders called features and renderer.

  1. Features folder contains all Athena Search custom features like Search Suggestions and others...
  2. Renderer folder contains all js files that handle element conditional rendering to autocomplete.
  3. Ajax folder that contains all files that make requests to the back-end services.
  4. autocomplete.js main js file that is responsible for initiating script

• Global - Global folder is where all the global functions are placed and used through application , it also contains three more folders and two files

  1. Analytics folder where all the analytics js files are placed,
  2. Helpers where all helper functions are placed,
  3. OMRange Slider where price range filter logic is placed,
  4. Athena Config file is our main global object where all configuration is placed,
  5. Athena Fetch API file is our main fetch handle file
  6. Cropper folder that is hosting cropper.js application code that we are using

• Search - Inside search folder there is our main js file that handles all search, category and visual similarity search logic.

  1. Ajax folder is responsible for handling API requests to the back-end.
  2. Helper folder houses all additional logic that is used thue rest of the files.
  3. Infinite Scroll houses infinite scroll logic
  4. Renderer folder houses all code responsible for rendering the html thue js.
  5. search.js main js file that is responsible for initiating script