[Liquid + Javascript] How to display custom HTML based on cart date selection without page refresh

Store Design
1

Hi guys!

I am very new to liquid and javascript and am muddling my way through setting up a date picker on the cart page for the customer to choose a delivery date. When the customer selects a date I would like to immediately display a html block to show the timings for delivery. I have done all this, however there are a couple issues I still need to work through:

  1. a page refresh is required to display the timeslot info, which is not going to work for customers, i need it work as soon as the selection is made

  2. if I select a date and refresh the page, the date is lost

If anyone could help steer me in the right direction I would be so grateful. Thanks in advance, Ella :slightly_smiling_face:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
  

  
  
    ### Choose your delivery
        
  
    

      
      
       
    

  

    
  

      

 
     ### Time slots
   
   
   {% assign delivery_day = cart.attributes['Delivery Date'] | date: "%a" %}
   {% capture now_time_Year %} {{'now' | date: "%Y"  | times: 10000 }}{% endcapture %}
   {% capture now_time_Mon %} {{'now' | date: "%m" | times: 100 }}{% endcapture %}
   {% capture now_time_Day %} {{'now' | date: "%d" }}{% endcapture %}  
   {% capture now_time_H %} {{'now' | date: "%H" }}{% endcapture %}
   {% capture now_time_M %} {{'now' | date: "%M" }}{% endcapture %}
   
   {% assign now_time = now_time_H | times: 100 | plus: now_time_M %}
   {% assign now_date = now_time_Day | plus: now_time_Mon | plus: now_time_Year %}
   
   {% assign delivery_date = cart.attributes['Delivery Date'] | date: "%Y-%m-%d" %}
   {% capture delivery_time_Year %} {{ cart.attributes['Delivery Date'] | date: "%Y"  | times: 10000 }}{% endcapture %}
   {% capture delivery_time_Mon %} {{ cart.attributes['Delivery Date'] | date: "%m" | times: 100 }}{% endcapture %}
   {% capture delivery_time_Day %} {{ cart.attributes['Delivery Date'] | date: "%d" }}{% endcapture %}
  	 {% assign delivery_date = delivery_time_Day | plus: delivery_time_Mon | plus: delivery_time_Year %}
   
   
   
    {% liquid
   
   if delivery_day == 'Sat'
   	assign instore-pickup = '12pm - 5pm'
   else
   	assign instore-pickup = '10am - 7pm'
   endif
   if delivery_date == now_date
   assign sameday = 'true'
   endif
   
   if delivery_day == 'Sat' and delivery_date == now_date
   	assign std-delivery-slot = 'Unavailable'
   elsif delivery_day == 'Sat' and delivery_date > now_date
   	assign std-delivery-slot = '10am - 1pm'
   elsif delivery_day != 'Sat' and now_time > 1200 and delivery_date == now_date
   	assign std-delivery-slot = 'Unavailable'
   elsif delivery_day != 'Sat' and now_time > 1200 
   	assign std-delivery-slot = '4pm - 9pm'
   endif
   
   %}
   

     
   {%- if cart.attributes["Delivery Date"] -%}
      
   	

| <br>        icon<br>       | <br>        Free in-store pick-up<br>       | <br>        {{instore-pickup}}<br>       |
| - | - | - |
| <br>        icon<br>       | <br>        Standard delivery $10<br>       | <br>        {{std-delivery-slot}}<br>       |
| <br>        icon<br>       | <br>        Special delivery $20<br>       | <br>        1 hour slot<br>       |

   
   {% if std-delivery-slot == "Unavailable" %}
   

You have missed the cut-off for standard delivery on your selected delivery date.

 	{% endif %}

    

  		
  		

   

   
   {% else %}
   

Select your preferred delivery date to see the delivery options available. 

   {% endif %}
2

Hi Ella,

your liquid code looks good, but what you’re missing is that all Liquid code is processed on Shopify servers before the page is sent to visitor. Liquid code will never know if visitor has changed any inputs or made any selections unless you submit this information to server.

So if you want your page to interact with a visitor, this must be done in Javascript.