Corvid by Wix: Product Configurators

product-configurators.js

// Step 1: Specify the IDs of the components on your dynamic product page

const _options = [
    // Three sets of options
    {
        overlay:       '#image2',
        title:         '#text14',
        repeater:      '#repeater1',
        button:         '#button1',
        buttonImage:    '#image5'
    },
    {
        overlay:       '#image3',
        title:         '#text15',
        repeater:      '#repeater2',
        button:         '#button2',
        buttonImage:    '#image6'
    },
    {
        overlay:       '#image4',
        title:         '#text16',
        repeater:      '#repeater3',
        button:         '#button3',
        buttonImage:    '#image7'
    }
];

const _databases = [
    '#dataset1', // options
    '#dataset2' // customizations
];

// Step 2: Add in ProductConfigurators class

class ProductConfigurators {
    constructor (options, databases) {
        this.options = options.map(v => {
            return {
                ...v,
                overlay: $w(v.overlay),
                title: $w(v.title),
                repeater: $w(v.repeater)
            }
        });
        this.databases = databases.map(v => {
            return $w(v);
        });
        this.init();
    }
    init () {
        // hide all
        this.hideAll();
        // load databases and create customization
        this.loadDatabases().then(values => {
            this.populateOptionsWithData(values[0], values[1]);
        }).catch(err => {
            console.error(err);
        });
    }
    hideAll () {
        this.options.forEach(o => {
            Object.keys(o).forEach((key, i) => {
                const f = o[key];
                if (f.hide) f.hide(); // only hide $w objects
                if (f.src) f.src = 'https://'; // clear img
            })
        });
    }
    loadDatabases () {
        const deferreds = this.databases.map(v => {
            return (function () {
                let res, rej;
                const promise = new Promise((resolve, reject) => {
                    res = resolve;
                    rej = reject;
                });
                promise.resolve = res;
                promise.reject = rej;
                return promise;
            })();
        });
        this.databases.forEach((v, i) => {
            v.onReady(() => {
                v.getItems(0, v.getTotalCount()).then(result => {
                    deferreds[i].resolve(result.items);
                }).catch(err => {
                    deferreds[i].reject('#dataset' + (i + 1) + ' not loaded!');
                })
            });
        });
        return Promise.all(deferreds);
    }
    populateOptionsWithData (dbOptions, dbCustomizations) {
        dbOptions.forEach((option, index) => {
            const $option = this.options[index];

            // set title
            $option.title.text = option.displayTitle;
            $option.title.show();

            // populate repeater
            const cs = dbCustomizations.filter(c => c.option === option._id);
            $option.repeater.data = cs;
            $option.repeater.onItemReady(($item, itemData, index) => {
                const $button = $item($option.button);
                const $buttonImage = $item($option.buttonImage);
                // set button image
                $buttonImage.src = itemData.choiceImage;
                $buttonImage.show();
                // set button on click to apply overlay
                $button.onClick(event => {
                    $option.overlay.src = itemData.displayImage;
                    $option.overlay.show();
                });
                $button.show();
                $option.repeater.show();
            });
        })
    }
}

// Step 3 (Final Step): Initialize configurators after $w is ready

$w.onReady(function () {
    // referencing the _options and _databases in Step 1
    new ProductConfigurators(_options, _databases);
});

// All set!