Trying to figure out custom-coded store hours

LoganMHawkins · July 8, 2021, 3:54am

Hey All!

I’ve been working on a project for a pharmacy, and we are looking to code in the store hours so that a customer viewing the site can see if the store is open at the time they are viewing it. This would be based on the device time and also have a couple coloured indicators that represent open or closed.

The website in question is here: https://northville.webflow.io/

Read-only link: Webflow - Northville Pharmacy

The site and all related elements are all already laid out per design, and the store hours are on the navbar at the top right as well as in the dropdown.

The elements we’re looking to change are:

The Green Dot that would symbolize open/closed on the navbar, as well as the Green Background in the dropdown where the open/closed text lies.
The open/closed text on the navbar and in the dropdown.
The text that shows the current date.
The text that shows when the store is open on the navbar and in the dropdown.

In total, 7 elements should be changing through each day. I have code implemented, however it works for a few elements until I add them all and then it doesn’t change any text period. I had contacted Webflow Support for a similar issue a bit back, and I can’t seem to find a way to get the related code changed to code that works as I need it to. If at all. I’m not the greatest with HTML and JavaScript, but I tried with what I do know and with the limited documentation on this site that explains how to just assign text to a text block in Webflow.

If anyone can find the issues with this code, as well as give me pointers to improve the code that would be amazing! If you need anything more, just reply and I can get more information as needed.

Thanks!

Code:

<script> 
        window.days = [0, 1, 2, 3, 4, 5, 6];
        window.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        function nthFormatter(d) {
            if (d > 3 && d < 21) return 'th';
            switch (d % 10) {
                case 1: return "st";
                case 2: return "nd";
                case 3: return "rd";
                default: return "th";
            }
        }
        function currentTime() {
            var date = new Date();
            var hour = date.getHours();
            var min = date.getMinutes();
            if (min < 10)
                min = "0" + min;
            var sec = date.getSeconds();
            if (sec < 10)
                sec = "0" + sec;
            var ampm = hour >= 12 ? 'pm' : 'am';
            var dayOfWeek = window.days[date.getDay()];
            var month = window.months[date.getMonth()];
            var day = date.getDate();
            day += nthFormatter(day);
            
            //IfOpen Function
            function ifOpen(x, min, max) {
    						return ((x - min) * (x - max) <= 0);
						}
            var openTrue = ifOpen(hour, 9, 18);
            
            
            
            //Test for Date + Time & then Output
						if(dayOfWeek === 0){
                //Dropdown
                document.getElementById("openClosed").innerText = "CLOSED";
                document.getElementById("statusDate").innerText = "Sunday, " + month + " " + day;
                document.getElementById("currentStatus").innerText = "Open Monday";
                
                //Navbar
                document.getElementById("openClosedStatus").innerText = "CLOSED";
                document.getElementById("activeNavStatus").innerText = "Open Monday At 9AM";
            } else if(dayOfWeek === 1){
            		if(openTrue){
            				document.getElementById("openClosed").innerText = "OPEN";
                    document.getElementById("statusDate").innerText = "Monday, " + month + " " + day;
                    document.getElementById("currentStatus").innerText = "9:00AM-6:00PM";
                } else{
                		document.getElementById("openClosed").innerText = "CLOSED";
                    document.getElementById("statusDate").innerText = "Monday, " + month + " " + day;
                    document.getElementById("currentStatus").innerText = "9:00AM-6:00PM";
                }
            }else if(dayOfWeek === 2){
            		if(openTrue){
            				document.getElementById("openClosed").innerText = "OPEN";
                    document.getElementById("statusDate").innerText = "Tuesday, " + month + " " + day;
                    document.getElementById("currentStatus").innerText = "9:00AM-6:00PM";
                } else{
                		document.getElementById("openClosed").innerText = "CLOSED";
                    document.getElementById("statusDate").innerText = "Tuesday, " + month + " " + day;
                    document.getElementById("currentStatus").innerText = "9:00AM-6:00PM";
                }
            }else if(dayOfWeek === 3){
            		if(openTrue){
                		document.getElementById("openClosed").innerText = "OPEN";
                    document.getElementById("statusDate").innerText = "Wednesday, " + month + " " + day;
                    document.getElementById("currentStatus").innerText = "9:00AM-6:00PM";
                } else{
                		document.getElementById("openClosed").innerText = "CLOSED";
                    document.getElementById("statusDate").innerText = "Wednesday, " + month + " " + day;
                    document.getElementById("currentStatus").innerText = "9:00AM-6:00PM";
                }
            }else if(dayOfWeek === 4){
            		if(openTrue){
                		document.getElementById("openClosed").innerText = "OPEN";
                    document.getElementById("statusDate").innerText = "Thursday, " + month + " " + day;
                    document.getElementById("currentStatus").innerText = "9:00AM-6:00PM";
                } else{
                		document.getElementById("openClosed").innerText = "CLOSED";
                    document.getElementById("statusDate").innerText = "Thursday, " + month + " " + day;
                    document.getElementById("currentStatus").innerText = "9:00AM-6:00PM";
                }
            }else if(dayOfWeek === 5){
            		if(openTrue){
                		document.getElementById("openClosed").innerText = "OPEN";
                    document.getElementById("statusDate").innerText = "Friday, " + month + " " + day;
                    document.getElementById("currentStatus").innerText = "9:00AM-6:00PM";
                } else{
                		document.getElementById("openClosed").innerText = "CLOSED";
                		document.getElementById("currentStatus").innerText = "9:00AM-6:00PM";
                    document.getElementById("statusDate").innerText = "Friday, " + month + " " + day;
                }
            }else if(dayOfWeek === 6){
                if(openTrue){
                		document.getElementById("openClosed").innerText = "OPEN";
                    document.getElementById("statusDate").innerText = "Saturday, " + month + " " + day;
                    document.getElementById("currentStatus").innerText = "10:00AM-4:00PM";
                } else{
                		document.getElementById("openClosed").innerText = "CLOSED";
                		document.getElementById("currentStatus").innerText = "10:00AM-4:00PM";
                    document.getElementById("statusDate").innerText = "Saturday, " + month + " " + day;
            }
            var t = setTimeout(function () { currentTime() }, 1000); 
        }
        currentTime();
</script>

Stan · July 8, 2021, 1:31pm

Replay deleted by me. Sorry my bad, not to pay attention to tag webflow support. Again. I need to figure out how to filter requests with this tag.
EDIT: Found it in account. yay

LoganMHawkins · July 8, 2021, 5:59pm

It’s all good man! I saw your first reply and will have a look and see if that is all that it was… Any recommendations for improving the code to become more simplified for use?

Edit: I had a look at the code and the curly brackets were actually in the code on the site… Not sure if I was messing with the code on the side or had already fixed that before or after posting the thread, but the code is still not working as of yet.

Stan · July 10, 2021, 10:34am

Hi @LoganMHawkins here is a bit improved code.

EDIT: I have updated code to match you site so now it checking days and also opening hours. You can take it from there and improve it the way you need.

HTML (for this example)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
  </head>
  <body>
    <div id="cardWrapper">
      <div id="statusDate">Date Info</div>
      <div id="currentTime">Time</div>
      <div id="currentStatus">Opening Status</div>
    </div>
    <script src="test.js"></script>
  </body>
</html>

JS

const dayNames = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];

function nthFormatter(d) {
  if (d > 3 && d < 21) return "th";
  switch (d % 10) {
    case 1:
      return "st";
    case 2:
      return "nd";
    case 3:
      return "rd";
    default:
      return "th";
  }
}

const currentStatus = document.querySelector("#currentStatus");
const currentDate = document.querySelector("#statusDate");
const currentTme = document.querySelector("#currentTime");

const date = new Date();
const dayNum = date.getDay();
let dateNum = date.getDate();
const currentHour = date.getHours(); 
const currentMonth = date.toLocaleString("default", { month: "long" }); 
const currentDay = dayNames[dayNum]; //?
const time = date.toLocaleTimeString("en-US", {
  hour: "2-digit",
  minute: "2-digit",
}); //?
const dayFormatted = (dateNum += nthFormatter()); 

function openingInfo() {
  currentDate.innerText = `${currentDay}, ${currentMonth} ${dayFormatted}`;
  currentTme.innerHTML = time;
  // 1-st condition check if is Sunday
  if (dayNum === 0){
    return (currentStatus.innerText = `We are closed`);
  }
  // 2nd - condition to check if is a Saturday and also check hours
  if ((dayNum === 6 && currentHour < 10) || currentHour >= 16) {
    //Saturday
    return (currentStatus.innerText = `We are closed`);
  }
  // if 2-nd condition is false...
  // start 2-nd condition to check only hours
  if (currentHour < 9 || currentHour > 18) {
    // Monday -Friday
    return (currentStatus.innerText = `We are closed`);
  }
  // if NO condition match show tis msg
  currentStatus.innerText = `We are open`;
}

openingInfo();

Result

CleanShot 2021-07-10 at 12.57.31

Stan · August 3, 2021, 12:04pm

hi @LoganMHawkins if you don’t have further questions feel free to close your request as solved