snippet/ye-snippet.js

const Render=()=>
{
    if(new Date() < 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");

        if(insert) // 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>
  .cards.cards-default .row
  {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .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
    {
      min-height: 250px !important;
      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>`)
                }

                if(!location.pathname.startsWith("/store/checkout/")) // if not on the checkout, show CHECKOUT BANNER and *quit*
                {
                    insert(
                        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;
                // }

                insert(
                    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
            {
                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`)))
                }
            }
        }
    }

    
}

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