Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Component Based Micro-Frontend
class Product extends MicroFrontend {
static get productDetails() {
return {
'1': {
name: 'Cat Table',
img: 'img/product/cat-table.jpg'
},
'2': {
name: 'Dog House Sofa',
img: 'img/product/doghousesofa.jpg'
},
}
}
getProductDetails() {
var urlParams = new URLSearchParams(window.location.search);
const productId = urlParams.get('productId');
return this.constructor.productDetails[productId];
}
render() {
const product = this.getProductDetails();
return ` <!-- Page -->
<div class="page-area product-page spad">
<div class="container">
<div class="row">
<div class="col-lg-6">
<figure>
<img class="product-big-img" src="${product.img}" alt="">`
}
selectProductColor(color) {}
selectProductSize(size) {}
addToCart() {
// delegate call to MicroFrontend Cart.addToCart function
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment