snippet/ye-snippet.js

const Render=()=>
{
    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>`;

        const mainNav = document.querySelector(".nav-outer-wrapper");

        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*
                {
                    mainNav.insertAdjacentHTML("afterend", `<style>
  .cards.cards-default .row
  {
    display: flex;
    flex-wrap: wrap;

    .default-product
    {
      float: none;
      width: 33%;

      width:80%;
      @media(min-width:625px)
      {
        width:50%;
      }
      @media(min-width:1200px)
      {
        width:33%;
      }

      box-sizing: border-box;
      padding:0 1% 0 0;
    }

  }


  .card
  {
    .card-inner
    {
      padding: 0;

      .store-photo-wrapper
      {
        margin: 0;
      }

      .store-description-wrapper
      {
        padding: 1rem;
      }

      & img
      {
        position: relative;
        border-radius: 0;
        width: 100%;
        height: auto;
        max-height: unset;
        margin: 0;

        @media(min-width:768px)
        {
          object-fit: cover;
        }
      }
    }
  }
</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*
                {
                    mainNav.insertAdjacentHTML("afterend", 
                        layoutBase(
                            "#945c57",
                            messageSmall,
                            messageLarge(`Will you kindly add a year-end gift of any amount at checkout? <em>Thank you.</em>`)
                        )
                    );
                    return;
                }

                if(location.pathname == "/store/checkout/donate/") // if we are on the donation part of the checkout process, replace the messaging "header" over the form and *quit*
                {
                    document.querySelector(".checkout-donate-header__wrapper").innerHTML = `<img src="https://info.truthforlife.org/hubfs/__Misc/year-end/donation-messge.jpg" style="
                        width: 100%;
                        margin-bottom: 2rem;
                    "><p class="padded_text checkout-donate-header">Your year-end donation will help sustain the global Gospel outreach of Truth&nbsp;For&nbsp;Life. <em>Thank&nbsp;you</em>.</p>`
                    return;
                }
            }

            if(!location.pathname.startsWith("/donate/")) // if we are not on any donate process page, show the DONATION BANNER and *quit*
            {
                // if(localStorage.getItem("ye-2025-donation")) // TODO: don't show donatio messaing if a donation has been madee
                // {
                //     return;
                // }

                mainNav.insertAdjacentHTML("afterend", 
                    layoutBase(
                        "#bb8618",
                        messageSmall,
                        messageLarge(`Will you kindly <a style="color:white; text-decoration:underline;" href="/donate">give a year-end gift</a> of any amount? <em>Thank you.</em>`)
                    )
                );
                return;
            }

            if(location.pathname.startsWith("/donate/thank-you/")) // if we are on the donation thank you page, take note
            {
                localStorage.setItem("ye-2025-donation", "true");
            }

        }
        else // we are on a non-standard header page
        {
            if(location.pathname == "/donate/") // if we are on the donate page, insert a THIN DONATION BANNER
            {
                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>`
                        )
                    )
                )
            }
        }
    }

    
}

// render and setup subsequent pjax renders
Render();
const observer = new MutationObserver(Render);
observer.observe(document.querySelector("#site-wrapper"), {subtree: false, childList: true});