Shopify - Deactivate checkout between certain times

Shopify - Deactivate checkout between certain times modal

<!-- Set variables -->
{% assign current_time = 'now' | date: "%H%M" | times: 1 %}
{% assign current_day = 'now' | date: "%a" %}
{% assign operation_days = "Mon:1700-2100,Tue:1700-2100,Wed:1700-2200,Thu:1700-2200,Fri:1700-2300,Sat:1200-2300,Sun:1200-2100" | split: ',' %}

<!-- Check if the store is 'open' -->
{% assign checkout_active = false %}
{% for d in operation_days %}
      {% if d contains current_day %}
      	{% assign open_hours = d | split: ':' | last %}
      	{% assign open_time = open_hours | split: '-' | first | times: 1 %}
      	{% assign close_time = open_hours | split: '-' | last | times: 1 %}
	{% if current_time >= open_time and current_time <= close_time %}
	    {% assign checkout_active = true %}
	{% endif %}
      {% endif %}
{% endfor %}

<!-- Serve up the correct button -->
{% if checkout_active == false %}
  <a class="button-show button" href="#" style="display:inline-block">Check out</a> 
{% else %}
  <input class="button" type="submit" name="checkout" value="Check out" />
{% endif %}

<!-- Modal - Kudos to carolineschnapp for most of this modal -->
<div id="outside-hours-background" class="prompt-background" style="display: none;">
  <div id="outside-hours-prompt" class="modal-prompt">
    <h1>
      The time is {{ 'now' | date: "%H:%M, %a" }}
    </h1>
    <p>Sorry but you are trying to purchase outside our hours of operation.</p>
    <p>Please come back again between Mon-Fri: 5pm-11pm and Sat-Sun: 12pm-11pm</p>
    <a class="button-hide button" href="#" style="display:inline-block">Okay, I'll try again later</a> 
  </div>
</div>

<!-- Styles - To be put in your style sheet -->
.modal-prompt {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  max-width: 50em;
  height: auto;
  margin: 0 auto;
  padding: 20px 35px 30px 35px;
  position: relative;
  top: 25%;
  z-index: 1000000;
  text-align: center;
}

.modal-prompt p, .modal-prompt h1 {
  color: #555555;
}

.prompt-background {
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999999;
}
  
.modal-prompt select { 
  float: left; 
  margin: 0 5px;
  width: 29%;
}

<!-- Script - To be included on the cart page -->
<script>
  $(document).ready(function() {
    $('.button-show').click(function(){
      $("#outside-hours-background").show(); 
    });
    $('.button-hide').click(function(){
      $("#outside-hours-background").hide(); 
    });
  });
</script>