Conditionally display maps and app store tiles

assets/js/main.js

@@ -7,9 +7,9 @@ MicroModal.init({
 });
 
 // Slick Slider [https://kenwheeler.github.io/slick/]
-$(document).ready(function(){
+$(document).ready(function () {
   let prevButton = '<span class="slick-prev icon-chevron-thin-left"><i class="icono-arrow-right"></i></span>';
-	let nextButton = '<span class="slick-next icon-chevron-thin-right"><i class="icono-arrow-left"></i></span>';
+  let nextButton = '<span class="slick-next icon-chevron-thin-right"><i class="icono-arrow-left"></i></span>';
   $('.screens-slider').slick({
     prevArrow: prevButton,
     nextArrow: nextButton,
@@ -35,18 +35,27 @@ if (btnModal) {
   });
 }
 
-// If #usb-butter exists and a request to thishost.tld/usb-butter returns status 200
-// change display of #usb-butter to inherit
-const usbButter = document.querySelector('#usb-butter');
-const usbButterPlaceholder = document.querySelector('#usb-butter-placeholder');
-if (usbButter && usbButterPlaceholder) {
-  fetch(usbButter.dataset.url)
-    .then(response => {
-      console.log(response);
-      if (response.status === 200) {
-        usbButter.style.display = 'flex';
-        usbButterPlaceholder.style.display = 'none';
+function renderPlaceholders() {
+  const usbButter = document.querySelector('#usb-butter');
+  const appstoreCard = document.querySelector('#appstore-card');
+  const mapsCard = document.querySelector('#maps-card');
+  const conditionalCards = [appstoreCard, usbButter, mapsCard];
+  for (let card of conditionalCards) {
+    fetch(card.dataset.url)
+      .then(response => {
+        if (response.status === 200) {
+          card.classList.remove("hidden-card");
+          if (card.dataset.placeholderId) {
+            const placeholder = document.querySelector(`#${card.dataset.placeholderId}`);
+            if (placeholder) {
+              placeholder.classList.add("hidden-card");
+            }
+          }
+        }
       }
-    }
-  );
-}
+      );
+  }
+}
+
+
+renderPlaceholders();