diff --git a/1-composition-client-only/team-red/page.js b/1-composition-client-only/team-red/page.js
index 2c82482..6cc7a3c 100644
--- a/1-composition-client-only/team-red/page.js
+++ b/1-composition-client-only/team-red/page.js
@@ -45,6 +45,23 @@ function renderOption(variant) {
`;
}
+function renderMfeFallback(id, teamName) {
+ const el = document.getElementById(id);
+ if (!el) return;
+
+ el.innerHTML = `
+
+
${teamName} service unavailable
+
This micro-frontend could not be loaded.
+
+ `;
+}
function renderPage() {
const variant = product.variants.find((v) => state.variant === v.sku);
@@ -59,13 +76,28 @@ function renderPage() {
`;
}
+function checkMicroFrontendAvailability() {
+ if (!customElements.get('blue-basket')) {
+ renderMfeFallback('basket', 'Team Blue (Basket)');
+ }
+
+ if (!customElements.get('blue-buy')) {
+ renderMfeFallback('buy', 'Team Blue (Buy)');
+ }
+
+ if (!customElements.get('green-recos')) {
+ renderMfeFallback('reco', 'Team Green (Recommendations)');
+ }
+}
function rerender() {
removeListeners();
renderPage();
+ checkMicroFrontendAvailability();
addListeners();
}
+
function handleClickOption(e) {
const sku = e.currentTarget.getAttribute('data-sku');
state.variant = sku;
@@ -87,4 +119,6 @@ function removeListeners() {
}
renderPage();
+checkMicroFrontendAvailability();
addListeners();
+