Untitled

// Single Product ID:



xcAPI.products.get('20984')

    .then((result) => console.debug('OK', result));

 

// Multiple Products IDs:



xcAPI.products.get(

    ['20984', '7435065', '9632051']

).then((result) => console.debug('OK', result));

 

// Multiple Product SKUs:



xcAPI.products.get(

    { sku: ['2350772', '2252341', '2805026'] }

).then((result) => console.debug('OK', result));

 

// Add to cart items by SKUs:



xcAPI.cart.add([

    { sku: '2350772', qty: 1 },

    { sku: '2252341', qty: 2 },

    { sku: '2805026', qty: 3 },

]).then((result) => console.debug('OK', result));

 

// This JS can be run on any store page.

 

// Here is some sample code that can be run in the browser console to sample functionality,



    function generateItems(products) {

        const items = [];

        items.push('<div class="featured-products" id="generated-list">');

        items.push('<ul class="products-list">');

        Array.from(products).forEach(function (product) {

            items.push(`

<li class="item">

<div class="image">

<div class="image-wrapper">

<a href="${product.url}">

<img src="${product.images.T.url}" alt="${product.title}">

</a>

</div>

</div>

<div class="info">

<a href="${product.url}">${product.title}</a>

<p>

<span class="sku">#${product.sku}</span>

</p>

<p>

<span class="price">AUD$${product.price.sale}</span>

</p>

<div class="buttons">

<button class="button add2cart" data-pid="${product.pid}">

<span>Add to cart</span>

</button>

</div>

</div>

</li>

`);

        });

        items.push('</ul>');

        items.push('</div>');

        onClickHandler = function () {

            const pid = this.getAttribute('data-pid');

            xcAPI.cart.add({ pid: pid, qty: 1 })

                .then(() => {

                    this.removeAttribute('disabled')

                    $('.minicart-button').click();

                });

            this.setAttribute('disabled', true);

        }

        const itemsHtml = $(items.join(''));

        itemsHtml.find('button.add2cart')

            .on('click', onClickHandler);

        itemsHtml.appendTo('#center-main');

    }



function addItemsStyle() {

    const cssText = `

#generated-list {

padding: 30px 0;

}

 

#generated-list .products-list {

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: space-between;

}

 

#generated-list .item {

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-between;

}

 

#generated-list .item .image-wrapper {

display: flex;

justify-content: center;

}

 

#generated-list .item .info {

font-family: Arial, sans-serif;

font-size: 16px;

line-height: 32px;

font-weight: 400;

}

 

#generated-list button.add2cart {

height: 40px;

width: 100%;

color: #fff;

background: #000;

border-radius: 0;

}

 

#generated-list button.add2cart:hover {

background: #4b4b4b;

}

 

#generated-list button[disabled].add2cart {

opacity: 0.5;

}

`;

    $(`<style id="generated-list-css">${cssText}</style>`).appendTo('head');

}



xcAPI.products

    .get({ sku: ['2266171', '2252341', '2805026'] })

    .then((result) => {

        console.debug('OK');

        addItemsStyle();

        generateItems(result.products);

    });

 

// Here is a way to get multiple products per request,



    xcAPI.products.get({

        sku: ['2350772', '2252341', '2805026']

    }).then((result) => console.debug('OK', result));

 

// Or add multiple products to the cart at once,



    xcAPI.cart.add([

        { sku: '2350772', qty: 1 },

        { sku: '2252341', qty: 2 },

        { sku: '2805026', qty: 3 },

    ]).then((result) => console.debug('OK', result));