Show/Hide cart attribute based on time of day

Store Design
1

Hi

I just added a Time picker to my Shopify website by following the steps on Shopify UI element generator. I just now to add a simple condition to not show the 11AM to 3PM option between 11AM and 3PM ( that is if current time is between 11 AM and 3 PM customers should see only one option the 3PM to 8PM slot) - to avoid getting orders that have delivery time in the next 3-4 hours as it takes us that much time to deliver.

If current time is >= 11 AM and <= 3 PM show

<p class="cart-attribute__field">
  <label>Delivery Time Picker</label><br>
  <input type="radio" name="attributes[Delivery Time Picker]" value="3PM-8PM"{% if cart.attributes["Delivery Time Picker"] == "3PM-8PM" %} checked{% endif %}> <span>3PM-8PM</span><br>
</p>

else

<p class="cart-attribute__field">
  <label>Delivery Time Picker</label><br>
  <input type="radio" name="attributes[Delivery Time Picker]" value="11AM-3PM"{% if cart.attributes["Delivery Time Picker"] == "11AM-3PM" %} checked{% endif %}> <span>11AM-3PM</span><br>
  <input type="radio" name="attributes[Delivery Time Picker]" value="3PM-8PM"{% if cart.attributes["Delivery Time Picker"] == "3PM-8PM" %} checked{% endif %}> <span>3PM-8PM</span><br>
</p>
2

Hello @mayankkachhwaha ,

Get current time with the help of JavaScript and then apply the further logic in it to show/hide the element.

var d = new Date(); // for now
var current_hour = d.getHours(); // => 3
if(current_hour >=11 and <== 15 ){
do this
}else{
do this
}

Thanks

3

Did you mean this - paste this code directly into cart_template.liquid at the appropriate location

I’m new at this, and really appreciate your help. I’m pretty much looking for code i can directly paste into liquid - like i did with the Shopify UI generator.

4

I meant follow the logic and apply it a/to your needs.
And first check how to use Javascript to show/hide elements.

And I understand you are new here but it’s not possible to write solution for specefic request.

Thanks

5

Two catches to be aware of

Liquid pages are cached so it’s possible for the time of day to be completely wrong when someone loads the page.

Javascript time is based on the visitors browser time which can also be incorrect.

For any sensitive UI based on time you need to ping an actual time service, or automate the background to turn off themes features based on the real time of day.

6

@PaulNewton Maybe I’m wrong but want to know how this one is incorrect “Javascript time is based on the visitors browser time which can also be incorrect.” ?