qon-connect

Before instaling qon-connection be sure, that You are registered in Quarticon system.

Installation

npm i qon-connection

Loading QuarticOn resources

import { Config, Track, Recommendation } from 'qon-connection'

Configure Package

To start configure, You need customerSymbol and hostUrl. If You don't have it, please contact to [email protected]

const CUSTOMER_SYMBOL = 'YOUR_CUSTOMER_SYMBOL'
const HOST_URL = 'YOUR_HOST_URL'

const CUSTOMER_CONFIGURATION = new Config.Config({ customerSymbol: CUSTOMER_SYMBOL, host: HOST_URl})

Sending Tracking Information

We need tracking information about viewed product. When user is on product page, You need send us information about product views:

Remember that the id of the product sent to us must match the one you give us in the feed

const tracker = new Track.Tracker(CUSTOMER_CONFIGURATION)
tracker.sendProductView({ id:'PRODUCT_ID' })

Sending transaction to QuarticOn

After each transaction, our system should receive information about this transaction.

// prepare transaction
const transaction = {
    transactionId: 'YOUR_TRANSACTION_IDENTIFIER',
    basket: [{
        productId: 'PRODUCT_ID',
        price: 'PRICE_WITHOUT_CURRENCY_CODE',
        quantity: 'QUANTITY'
    }, {
        productId: 'PRODUCT_ID',
        price: 'PRICE_WITHOUT_CURRENCY_CODE',
        quantity: 'QUANTITY'
    },
        ...[{}]
    ]
}
// configure tracker
const tracker2 = new Tracker(CUSTOMER_CONFIGURATION)
// send transaction
tracker2.sendTransaction(transaction)

Our system will bind the trades purchased from our recommendations by itself

Get recommendations from Quarticon System

Create an instance of Recommendation Engine

 const recommendationEngine = new Recommendation.Recommendation(customerConfig)

Prepare widget configuration: You can pass the following parameters to the recommendation engine:

• placementId - widget id, taken from the quarticon panel [https://cp.quarticon.com/upseller/myPlacements]
• filters - filters used to control the widget

const categoryWidget = {
    placementId: '_qS_2vu7j',
    filters: []
}

Filters available: Recommendation.FilterApi.category('CATEGORY_ID') - use when you want products from the selected category Recommendation.FilterApi.product('PRODUCT_ID') - use when you want product recommendations related to this product Recommendation.FilterApi.minPrice('MIN_PRICE') - use to set the minimum price of products Recommendation.FilterApi.maxPrice('MAX_PRICE') - use to set the maximum price of products

Example Configuration

const categoryWidget = {
    placementId: 'PLACEMENT_ID',
    filters: [
        Recommendation.FilterApi.category('CATEGORY_ID'),
        Recommendation.FilterApi.product('PRODUCT_ID'),
        Recommendation.FilterApi.minPrice('MIN_PRICE'),
        Recommendation.FilterApi.maxPrice('MAX_PRICE')
    ]
}

Get Recommendations

const categoryRecommendations =  await recommendationEngine.getRecommendation(categoryWidget)
        console.log(categoryRecommendations)

Returns array of products:

{
    id: string;
    pageUrl: string;
    imageUrl: string;
    price: string;
    priceOld: string;
    title: string;
    custom: [];
}