vj-pricing-model
Version:
Pricing model Vanilla JavaScript Web Component
47 lines (42 loc) • 1.49 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pricing Model Web Component</title>
<link rel="stylesheet" href="styles.css" />
<!-- Loding Google Font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet" />
<!-- Loading Web component loader -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<!-- vj-pricing-model web component -->
<script type="module" src="./index.js"></script>
</head>
<body>
<vj-pricing-container></vj-pricing-container>
<!-- To set vj-pricing-container config attribute -->
<script>
const fetchData = () => {
try {
return fetch(`data.json`).then(res => res.json());
} catch (error) {
throw error;
}
};
const element = document.getElementsByTagName('vj-pricing-container');
if (element && element.length > 0) {
const ele = element[0];
fetchData().then(data => {
if (!data) {
throw `Data is not available`;
}
const config = JSON.stringify(data);
ele.setAttribute('config', config);
});
ele.addEventListener('selected', (e) => {
console.log(e.detail);
});
}
</script>
</body>
</html>