To show different pricing model structure
npm install vj-pricing-container -S
To use as a selector in the view,
<vj-pricing-container></vj-pricing-container>
To assign config attribute value with different pricing plans as an array,
<script>
const data = [{
"package_name": "silver",
"price" : {
"symbol" : "$",
"value" : 19
},
"features" : ["unlimited sites", "Upto 125 Devices", "FREE SSL" , "VPS Hosting"],
"call_to_action" : {
"text" : "go silver",
"color" : "#FFF",
"bgColor": "#1ab394"
}
}];
const element = document.getElementsByTagName('vj-pricing-container');
if (element && element.length > 0) {
const ele = element[0];
const config = JSON.stringify(data);
ele.setAttribute('config', config);
}
</script>
To get the selected pricing plan name
const element = document.getElementsByTagName('vj-pricing-container');
if (element && element.length > 0) {
const ele = element[0];
ele.addEventListener('selected', (e) => {
console.log(e.detail);
});
}
Type: Custom Event
To get the selected pricing plan name.
MIT © Srinivasan K K