Code inserted for hours of business, but twice

Design help Custom code
1

https://preview.webflow.com/preview/siouxnami-2?utm_medium=preview_link&utm_source=dashboard&utm_content=siouxnami-2&preview=e826b84c1dc7ff70cd481dc6479e8df8&workflow=preview

I’ve implemented this code (How to automate open/closing hours in Webflow | by Kaatje | Medium) to allow me to display if my place is currently open or closed. I can get this to work fine once, but he problem is I want to use it twice because there are two different places with two different sets of hours. I know nothing about code, so trying to get this to work has been a task. Any help would be appreciated.

Here is my site Read-Only: [LINK][1]
([how to share your site Read-Only link][2])

[1]: How to automate open/closing hours in Webflow | by Kaatje | Medium)
[2]: Share a read-only link | Webflow University

2

Hi @Jamin_Ver_Velde,

Here’s your code refactored - you only need one HTML embed with this in it but you can still adjust the indoor/outdoor schedules separately:

<script>
function displayOpeningHours(indoorElementId, outdoorElementId) {
  var indoorSchedule = [
{
    open: 13,
    close: 17,  
    openDisplay: '1:00',
    closeDisplay: '5:00'
  },
  {
    open: 12,
    close: 20,  
    openDisplay: '12:00',
    closeDisplay: '8:00'
  },
  {
    open: 12,
    close: 20,  
    openDisplay: '12:00',
    closeDisplay: '8:00'
  },
  {
    open: 12,
    close: 18,  
    openDisplay: '12:00',
    closeDisplay: '6:00'
  },
  {
    open: 12,
    close: 20,  
    openDisplay: '12:00',
    closeDisplay: '8:00'
  },
  {
    open: 12,
    close: 20,  
    openDisplay: '12:00',
    closeDisplay: '8:00'
  },
  {
    open: 12,
    close: 18,  
    openDisplay: '12:00',
    closeDisplay: '6:00'
  }
  ];

  var outdoorSchedule = [
{
    open: 13,
    close: 17,  
    openDisplay: '1:00',
    closeDisplay: '5:00'
  },
  {
    open: 12,
    close: 20,  
    openDisplay: '12:00',
    closeDisplay: '8:00'
  },
  {
    open: 12,
    close: 20,  
    openDisplay: '12:00',
    closeDisplay: '8:00'
  },
  {
    open: 12,
    close: 18,  
    openDisplay: '12:00',
    closeDisplay: '6:00'
  },
  {
    open: 12,
    close: 20,  
    openDisplay: '12:00',
    closeDisplay: '8:00'
  },
  {
    open: 12,
    close: 20,  
    openDisplay: '12:00',
    closeDisplay: '8:00'
  },
  {
    open: 12,
    close: 18,  
    openDisplay: '12:00',
    closeDisplay: '6:00'
  }
  ];

  var momentInMonterrey = moment.utc().subtract(6, 'hours');
  var todayIndoorSchedule = indoorSchedule[momentInMonterrey.day()];
  var todayOutdoorSchedule = outdoorSchedule[momentInMonterrey.day()];

  var displayOpeningHoursElement = function(elementId, schedule) {
    var htmlElementHours = document.getElementById(elementId);

    if (schedule.close === 0 && schedule.open === 0) {
      htmlElementHours.innerHTML = '';
    } else {
      htmlElementHours.innerHTML =
        schedule.openDisplay + ' - ' + schedule.closeDisplay + ' pm';
    }
  };

  displayOpeningHoursElement(indoorElementId, todayIndoorSchedule);
  displayOpeningHoursElement(outdoorElementId, todayOutdoorSchedule);

  var displayStatusElement = function(elementId, schedule) {
    var htmlElementStatus = document.getElementById(elementId);
    var colorOpen = '#00911c';
    var isOpen =
      momentInMonterrey.hour() < schedule.close &&
      momentInMonterrey.hour() >= schedule.open;

    if (isOpen) {
      htmlElementStatus.innerHTML = 'Open Now';
      htmlElementStatus.style.color = colorOpen;
    } else {
      var colorClose = '#e03a01';
      htmlElementStatus.innerHTML = 'Closed';
      htmlElementStatus.style.color = colorClose;
    }
  };

  displayStatusElement(
    indoorElementId.replace('opening-hours', 'open-status'),
    todayIndoorSchedule
  );
  displayStatusElement(
    outdoorElementId.replace('opening-hours', 'open-status'),
    todayOutdoorSchedule
  );
}

window.onload = function() {
  displayOpeningHours('opening-hours-indoor', 'opening-hours-outdoor');
};
</script>

Hope this helps! Let me know how you go!

3

Thanks. The hours work well now, but the display of the Open/Closed function is still tied together and not functioning separately. Do we need to make separate ID elements for indoor and outdoor for that?

4

Ah yes. There’s an issue with the ID - you’ll need to have a separate ID for each status like ‘open-status-indoor’ and ‘open-status-outdoor’.

Then you can replace this:

displayStatusElement(
    indoorElementId.replace('opening-hours', 'open-status'),
    todayIndoorSchedule
  );
  displayStatusElement(
    outdoorElementId.replace('opening-hours', 'open-status'),
    todayOutdoorSchedule
  );

With this:

 displayStatusElement(
    "open-status-indoor",
    todayIndoorSchedule
  );
  displayStatusElement(
   "open-status-outdoor",
    todayOutdoorSchedule
  );
5

Thanks. Almost there. It works now on both if I am returning an empty state on the collection list. (I am using the collection list to post closings due to maintenance, weather, or being out of season.) However, if there is a collection item on one of them, the “Open/Closed” function isn’t working on the other one. But the hours function still works.

6

Gotcha!

Could you try this code?

<script>
function displayOpeningHours(indoorElementId, outdoorElementId) {
  var indoorSchedule = [
{
    open: 13,
    close: 17,  
    openDisplay: '1:00',
    closeDisplay: '5:00'
  },
  {
    open: 13,
    close: 20,  
    openDisplay: '1:00',
    closeDisplay: '8:00'
  },
  {
    open: 13,
    close: 20,  
    openDisplay: '1:00',
    closeDisplay: '8:00'
  },
  {
    open: 13,
    close: 18,  
    openDisplay: '1:00',
    closeDisplay: '6:00'
  },
  {
    open: 13,
    close: 20,  
    openDisplay: '1:00',
    closeDisplay: '8:00'
  },
  {
    open: 13,
    close: 20,  
    openDisplay: '1:00',
    closeDisplay: '8:00'
  },
  {
    open: 13,
    close: 18,  
    openDisplay: '1:00',
    closeDisplay: '6:00'
  }
  ];

  var outdoorSchedule = [
{
    open: 13,
    close: 17,  
    openDisplay: '1:00',
    closeDisplay: '5:00'
  },
  {
    open: 12,
    close: 20,  
    openDisplay: '12:00',
    closeDisplay: '8:00'
  },
  {
    open: 12,
    close: 20,  
    openDisplay: '12:00',
    closeDisplay: '8:00'
  },
  {
    open: 12,
    close: 18,  
    openDisplay: '12:00',
    closeDisplay: '6:00'
  },
  {
    open: 12,
    close: 20,  
    openDisplay: '12:00',
    closeDisplay: '8:00'
  },
  {
    open: 12,
    close: 20,  
    openDisplay: '12:00',
    closeDisplay: '8:00'
  },
  {
    open: 12,
    close: 18,  
    openDisplay: '12:00',
    closeDisplay: '6:00'
  }
  ];

  var momentInMonterrey = moment.utc().subtract(6, 'hours');
  var todayIndoorSchedule = indoorSchedule[momentInMonterrey.day()];
  var todayOutdoorSchedule = outdoorSchedule[momentInMonterrey.day()];

  var displayOpeningHoursElement = function(elementId, schedule) {
    var htmlElementHours = document.getElementById(elementId);
	if(htmlElementHours){
  if (schedule.close === 0 && schedule.open === 0) {
      htmlElementHours.innerHTML = '';
    } else {
      htmlElementHours.innerHTML =
        schedule.openDisplay + ' - ' + schedule.closeDisplay + ' pm';
    }
  }
    
  };

  displayOpeningHoursElement(indoorElementId, todayIndoorSchedule);
  displayOpeningHoursElement(outdoorElementId, todayOutdoorSchedule);

  var displayStatusElement = function(elementId, schedule) {
    var htmlElementStatus = document.getElementById(elementId);
    var colorOpen = '#00911c';
    var isOpen =
      momentInMonterrey.hour() < schedule.close &&
      momentInMonterrey.hour() >= schedule.open;
	if(htmlElementStatus){
    if (isOpen) {
      htmlElementStatus.innerHTML = 'Open now.';
      htmlElementStatus.style.color = colorOpen;
    } else {
      var colorClose = '#e03a01';
      htmlElementStatus.innerHTML = 'Currently closed.';
      htmlElementStatus.style.color = colorClose;
    }
    }
  };

 displayStatusElement(
    "open-status-indoor",
    todayIndoorSchedule
  );
  displayStatusElement(
   "open-status-outdoor",
    todayOutdoorSchedule
  );
}

displayOpeningHours('opening-hours-indoor', 'opening-hours-outdoor');
</script>

I’ve added some conditional if statements to make sure that the element exists - also removed the window.onload which should speed up the rendering of the hours/status.

Let me know if you have any issues.

7

Thanks again. I tried it. It worked when the collection list had an empty state for the indoor park with a collection item on the outdoor park. However, when those were reversed, the outdoor park hours did not show. I injected the code a second time in the outdoor park, and it appears to work. Probably not the best solution, but it seems to work now.