Last active
May 19, 2020 17:23
-
-
Save dashengz/a6d2d824a4811156ecf595743aa2c630 to your computer and use it in GitHub Desktop.
Corvid by Wix: Product Configurators - ProductConfigurators class
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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(); | |
}); | |
}) | |
} | |
} | |
// Next step: Initialize configurators after $w is ready |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment