Dear Shopify Community,
How can I display the desired delivery date, which is displayed in the shopping cart for an order in. my order overview? Currently, the delivery date is only displayed when I go into an order at "more details". Unfortunately, this does nothing for me, because I want to filter directly in the best list.
Does anyone have a solution for this?
Attached is the jQuery code and where I implemented it:
1. (Layout) theme.liquid:
{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
{{ 'js/datepicker-de.js' | asset_url | script_tag }}
2. (Abschnitte) main-cart-items.liquid:
<!-- delivery date code snippet -->
{% render 'delivery-date' %}
3. (Snippets) delivery-date.liquid:
{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>
<script src="{{ 'datepicker-de.js' | asset_url }}" defer="defer"></script>
<div style="width:300px; clear:both;">
<p>
<label for="date">Wähle das Lieferdatum:</label>
<div id="date"></div>
<input id="date-input" type="hidden" name="attributes[date]" value="{{ cart.attributes.date }}" />
<span style="display:block" class="instructions"> We do not deliver on Sundays and Mondays.</span>
</p>
</div>
<script>
window.onload = function() {
if (window.jQuery) {
let $ = window.jQuery;
$(function() {
$.datepicker.setDefaults($.datepicker.regional["de"]);
$("#date").datepicker({
minDate: +1,
maxDate: '+2M',
beforeShowDay: function(date) {
var day = date.getDay();
return [(day !== 0 && day !== 1)]; // blockiert nur Sonntag und Montag
},
onSelect: function(dateText) {
$("#date-input").val(dateText);
}
});
});
}
}
</script>
4. (Assets) datepicker-de.js:
/* German initialisation for the jQuery UI date picker plugin. */
/* Written by Milian Wolff (mail@milianw.de). */
( function( factory ) {
"use strict";
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define( [ "../widgets/datepicker" ], factory );
} else {
// Browser globals
factory( jQuery.datepicker );
}
} )( function( datepicker ) {
"use strict";
datepicker.regional.de = {
closeText: "Schließen",
prevText: "Zurück",
nextText: "Vor",
currentText: "Heute",
monthNames: [ "Januar", "Februar", "März", "April", "Mai", "Juni",
"Juli", "August", "September", "Oktober", "November", "Dezember" ],
monthNamesShort: [ "Jan", "Feb", "Mär", "Apr", "Mai", "Jun",
"Jul", "Aug", "Sep", "Okt", "Nov", "Dez" ],
dayNames: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ],
dayNamesShort: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
weekHeader: "KW",
dateFormat: "dd.mm.yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: "" };
datepicker.setDefaults( datepicker.regional.de );
return datepicker.regional.de;
} );
