Make Local Delivery date required - nothing I try is working!

Highlighted
New Member
3 0 0

Hello Shopify world,

I need to make a my delivery date mandatory, since I deliver furniture and need to know when the customers will be home.

I recently installed the Local Delivery App, and followed their instructions on how to make the delivery date mandatory. However, it didn't worked. They looked at my code and couldn't figure it out, so they told me to contact my Theme developer. I am using the Debut theme, so that means you, Shopify!

I've read a number of articles in the forum and tried all the solutions I could find, but nothing works.

Here is the instructions from the Local Delivery App folks, which I have implemented but nothing happens:

1. Added this above the closing </body> tag in theme.liquid:

{% if template == 'cart' %}

<script>

jQuery(function() {  jQuery('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"], button[name="checkout"]').click(function() {var formIsValid = true;  var message = "Please select a delivery date and time.";

    jQuery('[name^="attributes"]').filter('.required, [required ="required"]').each(function() { jQuery(this).removeClass('error');

      if (formIsValid && (jQuery(this).val() == "" || jQuery(this).val() == null)) {

        formIsValid = false;

        message = jQuery(this).attr('data-error') || message;

        jQuery(this).addClass('error');

      }

    });

    if (formIsValid){

      jQuery(this).submit();

    }

    else {

      alert(message);

      return false;

    }

  });

});

</script>

{% endif %}

2. In the local delivery snippet change this:

<p>Time:<select name="attributes[local_delivery_request]" id="local_delivery" style="width: 200px"></select></p> 

to this:

<p>Time:<select name="attributes[local_delivery_request]" id="local_delivery" style="width: 200px" class="required" data-error="Please select a delivery date and time."></select></p> 

When this didn't work, I also tried this (now deleted, since it didn't work)

<script>
$(function() {
  $('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
    if ($('#date').val() == '') {
      alert("You must pick a delivery date");   
      return false; 
    }
    else {
      $(this).submit();
    }
  });
});
</script>

I also tried this, which didn't work (deleted):

Replacing the text in the local delivery snippet with this:

<p>Date: <input type="text" id="datepicker"  class="required"  name="attributes[delivery-date]" data-error="Please tell us your info." value="{{ cart.attributes.delivery-date }}" /> <p>

Add to theme.liquid

{% if template == 'cart' %} <script> jQuery(function() { jQuery('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() { var formIsValid = true; var message = "Please fill this out and you will be able to check out."; jQuery('[name^="attributes"]').filter('.required, [required="required"]').each(function() { jQuery(this).removeClass('error'); if (formIsValid && jQuery(this).val() == '') { formIsValid = false; message = jQuery(this).attr('data-error') || message; jQuery(this).addClass('error'); } }); if (formIsValid){ jQuery(this).submit(); } else { alert(message); return false; } }); }); </script> {% endif %}

If anyone out there can help, (or if someone from Shopify who knows the Debut theme well), it would be very much appreciated, since as it currently stands I will have to do the logistics manually by email until this gets sorted out.

Thanks

 

0 Likes
Highlighted
Shopify Expert
2684 67 775

Hi, kate,

any chance to have the link to your shop?

One possible cause can be that in Debut theme the jQuery is loaded pretty late and your code may be failing because jQuery is not defined at the time it's invoked. This can be seen in the developer console of your browser.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
3 0 0

Hi Tim, thanks for responding

Here is the link to my shop https://ecochair.ch/

Is this what you mean?

0 Likes
Highlighted
Shopify Expert
2684 67 775

Yes, and my guess was right -- see attached image.

You should remove the code you've added from the cart.liquid and theme.liquid (all three of them -- it's still there :).

Try adding this code to the very bottom of the theme.js Asset

$(function() {
  $('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
    if ($('#datepicker').val() == '') {
      alert("You must pick a delivery date");   
      return false; 
    }
    else {
      $(this).submit();
    }
  });
});

This is basically your own code, I just changed the selector . Or, you may try the code which the app developers gave you (I wonder why they couldn't help you -- didn't realy want to?).

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Shopify Expert
2684 67 775

Sorry, the image is here:

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
3 0 0

With many, many thanks Tim. I now get a little pop up box which says 'you must pick a delivery date', which is perfect.

Thanks again!!

 

0 Likes
Highlighted
Shopify Expert
2684 67 775

Congrats!
However, you still have one piece of non-working javascript left -- it shows right above </main>. Does not really hurt, but I'd remove it for the sake of perfectionism :)

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
2 0 0

Hi Tim!

Am having the same problems. Have added your code to the bottom of theme.js Asset but it isn't working for me still. What is it I'm doing wrong? My site is www.bucketfullofroses.com

0 Likes
Highlighted
Shopify Expert
2684 67 775

You need to change the second line of the code to include button[name="checkout"] 

Also, in your case, the date picker id is "date", not "datepicker". Extended version is here:

$(function() {
  $(' button[name="checkout"], input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
    if ($('#datepicker, #date').val() == '') {
      alert("You must pick a delivery date");   
      return false; 
    }
    else {
      $(this).submit();
    }
  });
});

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
2 0 0

oh my it works now! Thank you so much for helping out :)

0 Likes