qon-connect v0.1.1

qon-connect

Before instaling qon-connect be sure to register to QuarticOn panel to aquire your unique customer symbol.

Installation

npm i qon-connect

Loading QuarticOn resources

import {
    Core,
    Product,
    Transaction,
    Widget
} from 'qon-connect';
Core.init('unique customer symbol here', () => {
    //do stuff
});

Sending product data to QuarticOn

new Product({
    'product': '123',
    'hash': null,
    'title': 'Product name',
    'price': '12.59',
    'page': 'https://example.com/prod-123.html',
    'image': 'https://example.com/prod-123.jpg',
    'price_old': '13.99',
    'status': 1,
    'categories': [
        {
            id: '2asa',
            name: 'Food'
        },
        {
            id: '232',
            name: 'Fruits'
        },
        {
            id: '3saf3',
            name: 'Bananas'
        }
    ],
    'custom_1': '{"labels":[{"txt":"promotion","classString":"label-promotion"}]}',
    'custom_2': 'Promotion: -35%',
    'custom_3': '',
    'custom_4': '',
    'catalog_symbol': ''
})
.send();

Sending transaction to QuarticOn

new Transaction('12345',
    [{
        id: '1',
        quantity: '2',
        price: '12.99',
        currency: ''
    },
    {
        id: '2',
        quantity: '2',
        price: '15.29',
        currency: 'PLN'
    }]
).send();

Generating widgets

new Widget('_qS_XXXXX')
    .setAttribute('filter', 'some product category') //optional
    .setPlace('beforeend', 'body') //required
    .show();

Then create and link function in js callback form in widget settings: window.myCreation('%%PLACEMENT_ID%%)

Example creation:

window.myCreation = (recomendations, widgetId) => {
    if (recomendations.length === 0) {
        return;
    }
    let applyStyles = widgetId => {
        let styles = `
            #${widgetId} img{
                width:100px;
                height:auto;
            }
        `;

        return `<style type="text/css">${styles}</style>`;
    };
    let productHTML = recomendations.map( (product) => {
        return `
            <li qon-id="${product.id}">
                <a href="${product.link}">Link</a>
                <div>${product.title}</div>
                <div>${product.price}</div>
                <div>${product.old_price !== null ? product.old_price : ''}</div>
                <div>${product.custom_1}</div>
                <div>${product.custom_2}</div>
                <div>${product.custom_3}</div>
                <div>${product.custom_4}</div>
                <img src="${window._QONizer.Display.generateStaticImageUrl(product.image, 300, 300)}"/>
            </li>
            <hr/>
        `;
    }).join('');

    let wrapperHTML = `
        <div>
            ${applyStyles(widgetId)}
            <h1>
                ${title}
            </h1>
            <ul class="products">
                ${productHTML}
            </ul>
        </div>
    `;
    let widget = document.getElementById(widgetId);
    widget.innerHTML = wrapperHTML;
    window._QONizer.Callback.generateCleanLinks(widget);
}