JS Question Type Object
Important Note: Be sure to use CB 3.3.3 (Joomla/Wordpress) or CB 3.3.21 (Magento 2) to make use of this article. It uses the latest recommended functions (deprecated functions are upwards compatible).
The question type object provides callback functions for the various events that happen while a user configures a product.
...
A JS Question Type Object (a plain JavaScript object) with a set of functions. and pass it as a parameter the function registerQuestionregisterQuestionType() of the ConfigBox AMD module configbox/configurator.
...
| Code Block | ||
|---|---|---|
| ||
define(['cbj', 'configbox/configurator'], function(cbj, configurator) {
// Custom question type object
var customType = {
// .. set of methods to implement (see below on this page)
}
// Replace Name_of_your_type with your type name
configurator.registerQuestionregisterQuestionType('Name_of_your_type', customType);
}); |
...
| Code Block | ||
|---|---|---|
| ||
define(['configbox/configurator'], function(configurator) {
var customQuestionType = {
/**
* Will run on page load and the function needs to initialise any JS-powered content in the question
*/
init: function() {
},
/**
* Will run on page load AND each time the configurator view gets refreshed via AJAX calls
*/
initEach: function() {
},
/**
* Runs when the system changes a selection (auto-selects, selection removals from rule engine, etc)
* @param {Event} event
* @param {Number} questionId
* @param {String|NULL} selection - NULL on deselect, the internal selection value for the answer instead
*/
onSystemSelectionChange: function(event, questionId, selection) {
},
/**
* Runs when the rule engine activates the question
* @param {Event} event
* @param {Number} questionId
*/
onQuestionActivation: function(event, questionId) {
},
/**
* Runs when the rule engine deactivates the question
* @param {Event} event
* @param {Number} questionId
*/
onQuestionDeactivation: function(event, questionId) {
},
/**
* Runs when the rule engine activates an answer
* @param {Event} event
* @param {Number} questionId
* @param {Number} answerId
*/
onAnswerActivation: function(event, questionId, answerId) {
},
/**
* Runs when the rule engine deactivates an answer
* @param {Event} event
* @param {Number} questionId
* @param {Number} answerId
*/
onAnswerDeactivation: function(event, questionId, answerId) {
},
/**
* Runs when the validation engine changes validation for a question
* @param {Event} event
* @param {Number} questionId
* @param {Object} validation - plain object with vars minval and maxval
* values of each are either NULL for no validation or a number
*/
onValidationChange: function(event, questionId, validation) {
},
/**
* Runs when the engine instructs to show a validation message
* @param {Event} event
* @param {Number} questionId
* @param {String} message - Plain text message to display
*/
onValidationMessageShown: function(event, questionId, message) {
},
/**
* Runs when the engine instructs to remove a validation message
* @param {Event} event
* @param {Number} questionId
*/
onValidationMessageCleared: function(event, questionId) {
}
}
// Now we register the custom question type to the configurator engine
configurator.registerQuestionregisterQuestionType('customtype', customQuestionType);
}); |
Mind
that your callback functions are called even if the event is about another question type. Check the question type like this in the beginning of each functionImportant note: Upgrade to CB 3.3.3 (or CB 3.3.12 for Magento 2). In prior versions you needed to check if the event actually concerns the given question type:
| Code Block |
|---|
var customQuestionType = { onValidationMessageShown: function(event, questionId, message) { // Checks if the validation message is for 'customtype' questions and ignores // the event if not if (cbj('#question-' + questionId).is('.type-customtype') === false) { return; } } //.. other methods configurator. |
...
registerQuestionType('customtype', customQuestionType); } |
Compare with built-in question type JS Objects which are located in [applicaton assets folder]/javascript/questions.js.
AMD modules for development
There is a number of JS framework functions to support coding question types. See this article for the most useful methods.
...