-
-
Save carolineschnapp/1961333 to your computer and use it in GitHub Desktop.
{{ '//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:300px; clear:both;"> | |
<p> | |
<label for="date">Pick a delivery date:</label> | |
<input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" /> | |
<span style="display:block" class="instructions"> We do not deliver during the week-end.</span> | |
</p> | |
</div> | |
<script> | |
jQuery(function() { | |
jQuery("#date").datepicker( { | |
minDate: +1, | |
maxDate: '+2M', | |
beforeShowDay: jQuery.datepicker.noWeekends | |
} ); | |
}); | |
</script> | |
{% comment %} | |
To remove days of the week that aren't Saturday and Sunday, use this: | |
http://stackoverflow.com/questions/2968414/disable-specific-days-of-the-week-on-jquery-ui-datepicker | |
{% endcomment %} |
A rather long-winded way of doing it might to:
-
Insert an add to cart code (e.g. Shopify.addItem) of 2 different products (Expedited Shipping & Regular Shipping) whenever the date gets selected (via the onSelect() function)
-
Depending on the date selected (refer to this thread to get the date selected), a different shipping surcharge product would be added to cart
-
Right at the start of (1), you might have to add a bit of code to remove any existing Expedited/Regular Shipping products that exist in the cart (might want to use a for loop e.g.
{% for item in cart.items %}
for this purpose), just in case your customer decides to switch dates leading to multiple shipping fees being stacked on without the original being removed first
Hope this helps
Hi I need help in changing the date format to Day-Month-year please!
Hi NatDT, see below for alternative date format:
<script>
jQuery(function() {
jQuery("#pdate").datepicker( {
minDate: +1,
maxDate: '+2M',
dateFormat: 'dd-mm-yy',
beforeShowDay: jQuery.datepicker.noWeekends
} );
});
</script>
Note that even though it only stated yy, it actually produces a 4 digit year eg: 2016
In regards to your comment on Oct 7 about the requirement pop up, where do we put the code? I tried including it in the original snippet for the calendar, then i tried placing it in the cart.liquid. Either place it didnt create the requirement to fill in the information. Can you help me figure this out?
I have the same questions as @BackdropCity. Where did you put the code to make it work?
Also, I would like to implement some sort of data validation to ensure that the delivery date entered will be valid. I know it could be an issue because I tried it by entering 1/09/1906 manually and nothing stopped me. I would like to make sure that noone enters a date less than today+1.
This is the full code that worked for me at the very bottom/end of the theme.js of Debut, to limit delivery options to Mondays and Fridays. Hope this helps. The days of the week being 0 = Sun, 1 = Mon, 2 = Tues, 3 = Wed, 4 = Thurs, 5 = Fri and 6 = Saturdays
$(document).ready( function() { $(function() { $("#date").datepicker({ minDate: +1, maxDate: '+2M', beforeShowDay: function(day){ var day = day.getDay(); return [(day != 0 && day != 2 && day != 3 && day != 4 && day != 6)]; } } ); }); });
The is actually working but if i have to add the date field in the forloop with already existing Fields it getting difficult.
The fields are used in product-form in shopify in dynamic.
Please if anybody have an idea about how to implement this in forloop or any reference , reply
Hi there, super useful info above. I see there is a way of adding certain products to the delivery date picker parameters. Is there a way of making certain products or collections have their own delivery date?
For example, I have a flower shop and deliver same day with a certain cut off time. All of this is now set up and the de;livery selector snippet is working correctly. However I will be adding products that will be pre-order only, and will only be available for delivery on specific dates, say Easter and Mother's Day. Would this be possible to do by adding some code?
Thanks in advance
@Melissaowlston
Caroline actually mentioned how to make this required (via a pop-up) in another thread on the Shopify forums. The code is as such:
<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>