detect donation product on gifts page

ye-snippet.js

@@ -1,30 +1,25 @@
 const Render=()=>
 {
-    if(new Date() < new Date(`Jan 1 2026`))
+    const NOW = new Date();
+    if(NOW < new Date(`Jan 1 2026`))
     {
         const layoutBase =(hexColor, ...messages)=>`<div style="padding: 1rem; text-align: center; background:${hexColor}; color:white;">${messages.join("")}</div>`;
         const messageSmall = `<p style="margin:0;">The Bible teaching from Truth For Life is funded by your donations!</p>`;
         const messageLarge =(message)=> `<p style="margin:0; font-size:2rem; font-family: Sanchez;">${message}</p>`;
 
-        /** @type {(selector:string)=>false|(markup:string)=>void} */
-        const BuildInserter =(selector)=>{
-            const element = document.querySelector(selector);
-            return element ? (markup)=>element.insertAdjacentHTML("afterend", markup) : false;
-        }
-        const insert = BuildInserter(".nav-outer-wrapper");
+        const mainNav = document.querySelector(".nav-outer-wrapper");
 
-        if(insert) // if the main nav exists
+        if(mainNav) // if the main nav exists
         {
             if(location.pathname.startsWith("/store/")) // if we are on a store page
             {
                 if(location.pathname === `/store/category/gifts/`) // if we are on the store category for the gifts page, add this tweak css and *keep going*
                 {
-                    insert(`<style>
+                    mainNav.insertAdjacentHTML("afterend", `<style>
   .cards.cards-default .row
   {
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
 
     .default-product
     {
@@ -52,7 +47,6 @@ const Render=()=>
   {
     .card-inner
     {
-      min-height: 250px !important;
       padding: 0;
 
       .store-photo-wrapper
@@ -82,11 +76,61 @@ const Render=()=>
     }
   }
 </style>`)
+                    
+
+const mentionDonation =(imageURL)=>
+{
+    const selector = `.card-inner img[alt="${imageURL}"]`;
+    const matchingProduct = document.querySelector(selector);
+    if(matchingProduct)
+    {
+        matchingProduct.parentElement.insertAdjacentHTML("afterend", `<div style="background:#945c57; color:white; padding:5px; margin-bottom:1em; line-height:1em;">
+            Also available when you donate at checkout.
+        </div>`);
+    }
+};
+
+const cacheName =()=>
+{
+    return fetch("/donate/").then(r=>r.text()).then(t=>{
+        partStart = `<h3 class=look-inside-description_title>`;
+        partStop = `</h3>`;
+        posStart = t.indexOf(partStart)+partStart.length;
+        posStop = t.indexOf(partStop, posStart);
+        const imageURL = t.substring(posStart, posStop);
+        localStorage.setItem("ye-2025-product", JSON.stringify({name:imageURL, date:NOW.getTime()}))
+        return imageURL;
+    });
+}
+
+let lookup = localStorage.getItem("ye-2025-product");
+if(!lookup)
+{
+    //console.log("fresh cache of name")
+    cacheName().then(mentionDonation);
+}
+else
+{
+    const {name, date} = JSON.parse(lookup);
+    const THEN = new Date(parseInt(date));
+    const elapsed = Math.abs(THEN - NOW);
+    if( elapsed > 2 * 60 * 60 * 1000)
+    {
+        //console.log("cache stale, re-fetching name")
+        cacheName().then(mentionDonation);
+    }
+    else
+    {
+        //console.log("using cached name")
+        mentionDonation(name);
+    }
+}
+
                 }
 
                 if(!location.pathname.startsWith("/store/checkout/")) // if not on the checkout, show CHECKOUT BANNER and *quit*
                 {
-                    insert(
+                    mainNav.insertAdjacentHTML("afterend", 
                         layoutBase(
                             "#945c57",
                             messageSmall,
@@ -113,7 +157,7 @@ const Render=()=>
                 //     return;
                 // }
 
-                insert(
+                mainNav.insertAdjacentHTML("afterend", 
                     layoutBase(
                         "#bb8618",
                         messageSmall,
@@ -133,11 +177,16 @@ const Render=()=>
         {
             if(location.pathname == "/donate/") // if we are on the donate page, insert a THIN DONATION BANNER
             {
-                const insert = BuildInserter(".donation-header");
-                if(insert)
-                {
-                    insert(layoutBase("#bb8618", messageLarge(`Your year-end donation will help sustain the global Gospel outreach of Truth For Life. <em>Thank you.</em`)))
-                }
+                document.querySelector(".donation-header").insertAdjacentHTML
+                (
+                    "afterend", 
+                    layoutBase(
+                        "#bb8618",
+                        messageLarge(
+                            `Your year-end donation will help sustain the global Gospel outreach of Truth For Life. <em>Thank you.</em>`
+                        )
+                    )
+                )
             }
         }
     }