Two delivery date required fields, make one OR other required (Java if, else if, else statement help)

Highlighted
Shopify Partner
20 0 0
<script>
$(function() {
  $('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
    if ($('.collectionDate').val() == '') 
  
    {
      alert("You must choose a delivery/collection option and date");   
      return false; 
    }
    
     else if ($('#iDate').val() == '') 
       
    {
      alert("You must choose a delivery/collection option and date");   
      return false; 
    }
       
       
    else {
      $(this).submit();
    }
  });
});
</script>

Hello

So I have two delivery date calendars on my site, depending on which delivery service the customer requires (IDs for fields are collectionDate and iDate).

So far I can only make one OR the other a required field. 

I am using if, else if, and else statements in my code, have tried an array of different options now and can't seem to get this to work.

I know there isn't a problem with calling my defined input field names from the datepickers, as I have tried the required field code for each field individually (collectionDate and iDate), and the code works fine, in that it makes each field required and the error message displays. 

Here is my current code which I have played around with for some time now. 

Someone please help?! 

Thanks 

 

0 Likes
Highlighted
Shopify Expert
195 0 25

Hi Katie,

Just to be clear you want the customer to select one of the deliver dates, the local or national, correct?

Currently your code is make sure both dates are selected. If you want only one of the dates to be required try this javascript out. 

$(function() {
  $('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
    if ($('.collectionDate').val() == '' && $('#iDate').val() == '') {
      alert("You must choose a delivery/collection option and date");   
      return false; 
    } else {
      $(this).submit();
    }
  });
});

-Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted
Shopify Partner
20 0 0

Thank you Ryan I will try this now!!

Thank you again 

0 Likes
Highlighted
Shopify Partner
20 0 0

Thank you so much Ryan it worked perfectly. 

I would like each calendar to show depending on the selection in the first drop down.

SO if the user selects National delivery - for the national delivery calendar to show

And if they select local delivery or any of the collect from shop options, the local delivery calendar to show.

I realise this is slightly more complicated and so I am not asking for a solution, but wondering if you can offer any tips in terms of the direction I need to take? 

The delivery options in the drop down on cart page are programmed under the click & collect app (which has it's own liquid file)  from the app store. 

Here is the clickcollect.liquid file

{% comment %}
/* 
* Version: v2
* App: Click & Collect 
* Author: Andrew Cargill (andy@shopifyextras.com)
* Support: www.shopifyextras.com
*/
{% endcomment %}



<div id="clickAndCollect" style="display:none;">
<p>TEST.</p>
</div>



  <input type="hidden" class="selectedClickCollectLocation" value="{{ location_id }}">
  <input type="hidden" class="selectedDelivery" value="none">
  

  <select class="clickCollectLocation">
    
      <option value="none">DELIVERY OPTIONS - PLEASE SELECT</option>
         <option value="none">National Delivery</option>
       <option value="none">Local Delivery (FREE TO SK13, SK14, SK15 ONLY)</option>
    </select><br>
<br>
<br>
   <label> LOCAL DELIVERY/COLLECTION AVAILABLE DATES </label> 
    <input type="text" placeholder="Select Date" class="collectionDate" name="attributes[Delivery Date]" requiredplaceholder="Select Date" style="display:hidden;">

	
  
  <!-- Change the value below to specify the language you wish to display -->
	<input type="hidden" class="clickCollectLanguage" value="en-GB">
  
<script type="text/javascript">
  
  
  var today = new Date();
  var hours = today.getHours();
  var day = today.getDay();
  
  console.log(hours + "hours" + day + "day");
  if (hours > 14){
    var numberOfDaysToAdd = 2;
  }else {
  	numberOfDaysToAdd = 1;
  }
  if (day == 5 || day == 6 || day == 0){
    if (day ==5 && hours < 14){
    	var numberOfDaysToAdd = 1;
    }else {
    	var numberOfDaysToAdd = 4;
    }
    if (day == 6){
    	var numberOfDaysToAdd = 3;
    }
    if (day == 0){
    	var numberOfDaysToAdd = 2;
    }
  }
  
  today.setDate(today.getDate() + numberOfDaysToAdd); 
  
  $('.collectionDate').pickadate({
      min: today,
      disable: [
      1
    ]
    
  });

  // Your Click & Collect API key.
  var api_key = "64cb931c5450cbb04077";
</script>
 

So the local delivery and national delivery options are programmed as option values here and the click and collect locations defined within the app and called using the code above. 

All I would like is for the calendars to show depending on the options selected here...so for the national calendar to show for national delivery only and the other calendar for all of the other options. 

Is this possible and can you offer any hints?

Thanks again 

0 Likes
Highlighted
Shopify Expert
195 0 25

Hi Katie,

This is fairly easy to accomplish. We just have to place an event handler on the select element and then show/hide the other date input elements.

However, I don't see the html for those date inputs. (what is shown in the attached screenshot) Are they located in another part of your theme or is the Click & Collect app injecting them?

-Ryan

 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted
Shopify Partner
20 0 0

Hi Ryan

Click & Collect app so clickcollect.liquid injects the local delivery calendar. 

%%clickandcollect.liquid%%


<div id="clickAndCollect" style="display:none;">
<p>TEST.</p>
</div>



  <input type="hidden" class="selectedClickCollectLocation" value="{{ location_id }}">
  <input type="hidden" class="selectedDelivery" value="none">
  
  <label> Use this dropdown to select your preferred delivery/collection method. </label> 
  <select class="clickCollectLocation">
        <option value="none">DELIVERY OPTIONS - PLEASE SELECT</option>
         <option value="none">National Delivery</option>
       <option value="none">Local Delivery (FREE TO SK13, SK14, SK15 ONLY MIN £20 SPEND)</option>
    </select>
<a href="http://mettricksbutchers.com/pages/delivery-collection-information" target="_blank">Click here for more delivery/collection information.</a>
<br>
<hr>

   <label> Use this calendar if you require local delivery/collection.  </label> 
    <input type="text" placeholder="Select Date" class="collectionDate" name="attributes[Delivery Date]" requiredplaceholder="Select Date" style="display:hidden;">

	
  
  <!-- Change the value below to specify the language you wish to display -->
	<input type="hidden" class="clickCollectLanguage" value="en-GB">
 
<script type="text/javascript">
  
  
  var today = new Date();
  var hours = today.getHours();
  var day = today.getDay();
  
  console.log(hours + "hours" + day + "day");
  if (hours > 14){
    var numberOfDaysToAdd = 2;
  }else {
  	numberOfDaysToAdd = 1;
  }
  if (day == 5 || day == 6 || day == 0){
    if (day ==5 && hours < 14){
    	var numberOfDaysToAdd = 1;
    }else {
    	var numberOfDaysToAdd = 4;
    }
    if (day == 6){
    	var numberOfDaysToAdd = 3;
    }
    if (day == 0){
    	var numberOfDaysToAdd = 2;
    }
  }
  
  today.setDate(today.getDate() + numberOfDaysToAdd); 
  
  $('.collectionDate').pickadate({
      min: today,
      disable: [
      1
    ]
    
  });

  // Your Click & Collect API key.
  var api_key = "64cb931c5450cbb04077";
</script>
 

And national delivery calendar is injected from delivery-date.liquid file. 

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

{{ '//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' | script_tag }}

<div style="width:500px; clear:both;">
  <p>
    <label for="date">Use this calendar if you require national delivery. </label>
    <input id="iDate" placeholder="Select Date" type="text" name="attributes[Delivery Date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver nationally on Saturdays, Sundays or Mondays </span>
  </p>
%%delivery-date.liquid%%

</div>

<script>
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var unavailableDates = [""]; // dd/mm/yyyy
var unavailableDays = ["Saturday","Sunday","Monday" ];
var day = today.getDay();

function unavailable(date) {
    ymd = date.getFullYear() + "/" + ("0"+(date.getMonth()+1)).slice(-2) + "/" + ("0"+date.getDate()).slice(-2);
    day = new Date(ymd).getDay();
    if ($.inArray(ymd, unavailableDates) < 0 && $.inArray(days[day], unavailableDays) < 0) {
        return [true, "enabled", "Book Now"];
    } else {
        return [false,"disabled","Booked Out"];
    }
}


  
  $('#iDate').datepicker({ dateFormat: 'd MM, yy', beforeShowDay: unavailable,   minDate: +2, })
    

  </script>

Hence why I don't think this is so straightforward, I know I can place event handlers on elements however is this possible with the given setup?

It just seems too complex for me to change now, the main reason being the click and collect app alters the checkout pages (to just name and number when collect from shop selected) which I don't know how to do without the app, way over my head! 

Thank you again for any advice you can give on which direction I should take. 

 

0 Likes
Highlighted
Shopify Expert
195 0 25

Hi Katie,

Those are what I'm looking for. What I'd like you to do is warp both local and national delivery sections you posted with a div element. 

For the local delivery wrap it in a div like this

<div id="localDeliveryContainer">
   
  The rest of the local delivery file goes in here

</div>

and for the national delivery

<div id="nationalDeliveryContainer">

    The rest of the national delivery file goes in here
   
</div>

Once you do this I can provide you some javascript that will allow you to hide/show these sections based on what is selected in your dropdown. 

-Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted
Shopify Partner
20 0 0

Okay thanks Ryan, I have wrapped these as named divs now, will straightforward javascript work now they are within divs in terms of calling a form action based on the dropdown?

I will have a mess around with it however will also look forward to any Java tyou can provide 

Thank you again I really do appreciate all of your help! 

0 Likes
Highlighted
Shopify Expert
195 0 25

Katie,

I need to make a change.  Please reduce the localDeliveryContainer div to wrap just this:

<br>
<hr>

   <label> Use this calendar if you require local delivery/collection.  </label> 
    <input type="text" placeholder="Select Date" class="collectionDate" name="attributes[Delivery Date]" requiredplaceholder="Select Date" style="display:hidden;">

	
  

 Also, if you could place the <hr> element that is directly above the nationalDeliveryContainer inside the nationalDeliveryContainer that would be helpful.

Thanks,

Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted
Shopify Partner
20 0 0

Hi Ryan

Can you help with the javascript at all? i've tried to write the code but don't seem to be getting anywhere. 

I'll post what I have this afternoon, hopefulyl you can help. 

Thank you. 

0 Likes