| @@ -35,6 +35,10 @@ $(document).ready(function() { | |||||
| $("[name='shippingMethodId']").on('change', () => { | $("[name='shippingMethodId']").on('change', () => { | ||||
| changeDelivery(fp); | changeDelivery(fp); | ||||
| }); | }); | ||||
| /* Set first selectable day selected */ | |||||
| setDateSelected(); | |||||
| changeDelivery(fp); | changeDelivery(fp); | ||||
| } | } | ||||
| @@ -63,7 +67,7 @@ $(document).ready(function() { | |||||
| var hash = this.hash; | var hash = this.hash; | ||||
| var sTop = parseInt($(hash).offset().top - $(".header-inner").outerHeight() - 12); | var sTop = parseInt($(hash).offset().top - $(".header-inner").outerHeight() - 12); | ||||
| scrollTo(sTop, 800); | |||||
| scrollToPos(sTop, 800); | |||||
| window.location.hash = hash; | window.location.hash = hash; | ||||
| } // End if | } // End if | ||||
| }); | }); | ||||
| @@ -72,7 +76,7 @@ $(document).ready(function() { | |||||
| // c = element or pixel position | // c = element or pixel position | ||||
| // e = duration | // e = duration | ||||
| // d = (optative) ease function. Default easeOutCuaic | // d = (optative) ease function. Default easeOutCuaic | ||||
| function scrollTo(c,e,d){d||(d=easeOutCuaic);var a=document.documentElement;if(0===a.scrollTop){var b=a.scrollTop;++a.scrollTop;a=b+1===a.scrollTop--?a:document.body}b=a.scrollTop;0>=e||("object"===typeof b&&(b=b.offsetTop),"object"===typeof c&&(c=c.offsetTop),function(a,b,c,f,d,e,h){function g(){0>f||1<f||0>=d?a.scrollTop=c:(a.scrollTop=b-(b-c)*h(f),f+=d*e,setTimeout(g,e))}g()}(a,b,c,0,1/e,20,d))}; | |||||
| function scrollToPos(c,e,d){d||(d=easeOutCuaic);var a=document.documentElement;if(0===a.scrollTop){var b=a.scrollTop;++a.scrollTop;a=b+1===a.scrollTop--?a:document.body}b=a.scrollTop;0>=e||("object"===typeof b&&(b=b.offsetTop),"object"===typeof c&&(c=c.offsetTop),function(a,b,c,f,d,e,h){function g(){0>f||1<f||0>=d?a.scrollTop=c:(a.scrollTop=b-(b-c)*h(f),f+=d*e,setTimeout(g,e))}g()}(a,b,c,0,1/e,20,d))}; | |||||
| function easeOutCuaic(t){ | function easeOutCuaic(t){ | ||||
| t--; | t--; | ||||
| return t*t*t+1; | return t*t*t+1; | ||||
| @@ -86,7 +90,32 @@ function manipulateDateInputValue() { | |||||
| } | } | ||||
| } | } | ||||
| function setDateSelected() { | |||||
| let spwnFirstSelectableDay = $(".flatpickr-day:not(.flatpickr-disabled)").first().text(); | |||||
| let spwnFPdate = new Date(); | |||||
| let spwnDay = spwnFPdate.getDate(); | |||||
| let spwnMonth = spwnFPdate.getMonth(); | |||||
| let spwnMonthTemp = 0; | |||||
| spwnMonth = spwnMonth + 1; | |||||
| if((String(spwnMonth)).length === 1) { | |||||
| spwnMonthTemp = spwnMonth; | |||||
| spwnMonth = '0' + spwnMonth; | |||||
| } | |||||
| if (spwnFirstSelectableDay < spwnDay) { | |||||
| spwnMonth = spwnMonthTemp + 1; | |||||
| if((String(spwnMonth)).length === 1) { | |||||
| spwnMonth = '0' + spwnMonth; | |||||
| } | |||||
| } | |||||
| let spwnFrmattedDate = spwnFPdate.getFullYear() + '/' + spwnMonth + '/' + spwnFirstSelectableDay; | |||||
| fp.setDate(new Date(spwnFrmattedDate)); | |||||
| spawnDateInputValue = spwnFirstSelectableDay + '.' + spwnMonth + '.' + spwnFPdate.getFullYear(); | |||||
| } | |||||
| function changeDelivery(fp) { | function changeDelivery(fp) { | ||||
| $("body").on("click", "#spwn-delivery .spwn-delivery--time span", function() { | $("body").on("click", "#spwn-delivery .spwn-delivery--time span", function() { | ||||
| $("#spwn-delivery .spwn-delivery--time span").removeClass("active"); | $("#spwn-delivery .spwn-delivery--time span").removeClass("active"); | ||||
| $(this).addClass("active"); | $(this).addClass("active"); | ||||
| @@ -115,16 +144,18 @@ function changeDelivery(fp) { | |||||
| } | } | ||||
| setIncludedDays("evening", fp, daysToAdd); | setIncludedDays("evening", fp, daysToAdd); | ||||
| $("#spwn-delivery p").text("Abendzustellung gewählt. Bitte wählen Sie nun eine Wunsch-Zeit:"); | $("#spwn-delivery p").text("Abendzustellung gewählt. Bitte wählen Sie nun eine Wunsch-Zeit:"); | ||||
| $("#spwn-delivery .spwn-delivery--time").append("<span class='active'>18 - 21 Uhr</span><span>20 - 23 Uhr</span>"); | |||||
| $("#spwn-delivery .spwn-delivery--time").append("<span class='active'>18 - 20 Uhr</span><span>19 - 21 Uhr</span><span>20 - 22 Uhr</span>"); | |||||
| // If not date from DPD days | // If not date from DPD days | ||||
| if (!$(".flatpickr-day").hasClass("selected")) { | |||||
| setDateSelected(); | |||||
| } | |||||
| if ($(".flatpickr-day").hasClass("selected")) { | if ($(".flatpickr-day").hasClass("selected")) { | ||||
| if (spawnDateInputValue === "" || spawnDateInputValue.indexOf("Uhr") === -1) { | if (spawnDateInputValue === "" || spawnDateInputValue.indexOf("Uhr") === -1) { | ||||
| manipulateDateInputValue(); | manipulateDateInputValue(); | ||||
| } | } | ||||
| // If DPD date is not in Abendzustellung range | // If DPD date is not in Abendzustellung range | ||||
| } else { | } else { | ||||
| $(".confirm-delivery-date #dtgs-datepicker-inputfield").val(""); | |||||
| spawnDateInputValue = ""; | |||||
| setDateSelected(); | |||||
| } | } | ||||
| } else { | } else { | ||||
| // DPD | // DPD | ||||
| @@ -142,8 +173,7 @@ function changeDelivery(fp) { | |||||
| $("#spwn-delivery p").text("DPD gewählt. Die Zustellung erfolgt zwischen 7 und 13 Uhr."); | $("#spwn-delivery p").text("DPD gewählt. Die Zustellung erfolgt zwischen 7 und 13 Uhr."); | ||||
| if (!$(".flatpickr-day").hasClass("selected")) { | if (!$(".flatpickr-day").hasClass("selected")) { | ||||
| // If Abendzustellung date is not in DPD range | // If Abendzustellung date is not in DPD range | ||||
| $(".confirm-delivery-date #dtgs-datepicker-inputfield").val(""); | |||||
| spawnDateInputValue = ""; | |||||
| setDateSelected(); | |||||
| } | } | ||||
| } | } | ||||
| } else { | } else { | ||||
| @@ -157,8 +187,7 @@ function changeDelivery(fp) { | |||||
| $("#spwn-delivery p").text("DPD gewählt. Die Zustellung erfolgt zwischen 7 und 18 Uhr."); | $("#spwn-delivery p").text("DPD gewählt. Die Zustellung erfolgt zwischen 7 und 18 Uhr."); | ||||
| if (!$(".flatpickr-day").hasClass("selected")) { | if (!$(".flatpickr-day").hasClass("selected")) { | ||||
| // If Abendzustellung or DPD DE date is not in DPD AT range | // If Abendzustellung or DPD DE date is not in DPD AT range | ||||
| $(".confirm-delivery-date #dtgs-datepicker-inputfield").val(""); | |||||
| spawnDateInputValue = ""; | |||||
| setDateSelected(); | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| @@ -177,3 +177,8 @@ input.custom-number[type=number] { | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| .confirm-delivery-date.do-not-show, | |||||
| #spwn-delivery { | |||||
| display: none !important; | |||||
| } | |||||
| @@ -0,0 +1,33 @@ | |||||
| {% set totalWeight = 0 %} | |||||
| {% for lineItem in page.cart.lineItems %} | |||||
| {% if lineItem.deliveryInformation.weight != null %} | |||||
| {% set totalWeight = totalWeight + (lineItem.quantity * lineItem.deliveryInformation.weight) %} | |||||
| {% endif %} | |||||
| {% endfor %} | |||||
| {% block page_checkout_confirm_delivery_date %} | |||||
| {% if page.extensions.DeliveryDateConfig.data.deliveryDateActive %} | |||||
| <div class="confirm-delivery-date{% if totalWeight < 0.5 %} do-not-show{% endif %}"> | |||||
| <div class="row"> | |||||
| <div class="col-sm-12"> | |||||
| <div class="card checkout-card"> | |||||
| <div class="card-body"> | |||||
| <div class="card-title"> | |||||
| {{ "dtgs-delivery-date.confirmDatePanelHeader"|trans }} | |||||
| </div> | |||||
| <p> | |||||
| {{ "dtgs-delivery-date.confirmDatePanelText"|trans }} | |||||
| </p> | |||||
| <input | |||||
| type="text" | |||||
| id="dtgs-datepicker-inputfield" | |||||
| class="form-control dtgs-datepicker-input{% if formViolations.getViolations('deliverydate') is not empty %} is-invalid{% endif %}" | |||||
| form="confirmOrderForm" | |||||
| {% if page.extensions.DeliveryDateConfig.data.deliveryDateRequired %}required="required"{% endif %} | |||||
| {% if page.extensions.DeliveryDateConfig.data.deliveryDateInSession is not empty %}value="{{ page.extensions.DeliveryDateConfig.data.deliveryDateInSession }}"{% endif %} /> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| {% endif %} | |||||
| {% endblock %} | |||||
| @@ -35,6 +35,10 @@ $(document).ready(function() { | |||||
| $("[name='shippingMethodId']").on('change', () => { | $("[name='shippingMethodId']").on('change', () => { | ||||
| changeDelivery(fp); | changeDelivery(fp); | ||||
| }); | }); | ||||
| /* Set first selectable day selected */ | |||||
| setDateSelected(); | |||||
| changeDelivery(fp); | changeDelivery(fp); | ||||
| } | } | ||||
| @@ -63,7 +67,7 @@ $(document).ready(function() { | |||||
| var hash = this.hash; | var hash = this.hash; | ||||
| var sTop = parseInt($(hash).offset().top - $(".header-inner").outerHeight() - 12); | var sTop = parseInt($(hash).offset().top - $(".header-inner").outerHeight() - 12); | ||||
| scrollTo(sTop, 800); | |||||
| scrollToPos(sTop, 800); | |||||
| window.location.hash = hash; | window.location.hash = hash; | ||||
| } // End if | } // End if | ||||
| }); | }); | ||||
| @@ -72,7 +76,7 @@ $(document).ready(function() { | |||||
| // c = element or pixel position | // c = element or pixel position | ||||
| // e = duration | // e = duration | ||||
| // d = (optative) ease function. Default easeOutCuaic | // d = (optative) ease function. Default easeOutCuaic | ||||
| function scrollTo(c,e,d){d||(d=easeOutCuaic);var a=document.documentElement;if(0===a.scrollTop){var b=a.scrollTop;++a.scrollTop;a=b+1===a.scrollTop--?a:document.body}b=a.scrollTop;0>=e||("object"===typeof b&&(b=b.offsetTop),"object"===typeof c&&(c=c.offsetTop),function(a,b,c,f,d,e,h){function g(){0>f||1<f||0>=d?a.scrollTop=c:(a.scrollTop=b-(b-c)*h(f),f+=d*e,setTimeout(g,e))}g()}(a,b,c,0,1/e,20,d))}; | |||||
| function scrollToPos(c,e,d){d||(d=easeOutCuaic);var a=document.documentElement;if(0===a.scrollTop){var b=a.scrollTop;++a.scrollTop;a=b+1===a.scrollTop--?a:document.body}b=a.scrollTop;0>=e||("object"===typeof b&&(b=b.offsetTop),"object"===typeof c&&(c=c.offsetTop),function(a,b,c,f,d,e,h){function g(){0>f||1<f||0>=d?a.scrollTop=c:(a.scrollTop=b-(b-c)*h(f),f+=d*e,setTimeout(g,e))}g()}(a,b,c,0,1/e,20,d))}; | |||||
| function easeOutCuaic(t){ | function easeOutCuaic(t){ | ||||
| t--; | t--; | ||||
| return t*t*t+1; | return t*t*t+1; | ||||
| @@ -86,7 +90,32 @@ function manipulateDateInputValue() { | |||||
| } | } | ||||
| } | } | ||||
| function setDateSelected() { | |||||
| let spwnFirstSelectableDay = $(".flatpickr-day:not(.flatpickr-disabled)").first().text(); | |||||
| let spwnFPdate = new Date(); | |||||
| let spwnDay = spwnFPdate.getDate(); | |||||
| let spwnMonth = spwnFPdate.getMonth(); | |||||
| let spwnMonthTemp = 0; | |||||
| spwnMonth = spwnMonth + 1; | |||||
| if((String(spwnMonth)).length === 1) { | |||||
| spwnMonthTemp = spwnMonth; | |||||
| spwnMonth = '0' + spwnMonth; | |||||
| } | |||||
| if (spwnFirstSelectableDay < spwnDay) { | |||||
| spwnMonth = spwnMonthTemp + 1; | |||||
| if((String(spwnMonth)).length === 1) { | |||||
| spwnMonth = '0' + spwnMonth; | |||||
| } | |||||
| } | |||||
| let spwnFrmattedDate = spwnFPdate.getFullYear() + '/' + spwnMonth + '/' + spwnFirstSelectableDay; | |||||
| fp.setDate(new Date(spwnFrmattedDate)); | |||||
| spawnDateInputValue = spwnFirstSelectableDay + '.' + spwnMonth + '.' + spwnFPdate.getFullYear(); | |||||
| } | |||||
| function changeDelivery(fp) { | function changeDelivery(fp) { | ||||
| $("body").on("click", "#spwn-delivery .spwn-delivery--time span", function() { | $("body").on("click", "#spwn-delivery .spwn-delivery--time span", function() { | ||||
| $("#spwn-delivery .spwn-delivery--time span").removeClass("active"); | $("#spwn-delivery .spwn-delivery--time span").removeClass("active"); | ||||
| $(this).addClass("active"); | $(this).addClass("active"); | ||||
| @@ -115,16 +144,18 @@ function changeDelivery(fp) { | |||||
| } | } | ||||
| setIncludedDays("evening", fp, daysToAdd); | setIncludedDays("evening", fp, daysToAdd); | ||||
| $("#spwn-delivery p").text("Abendzustellung gewählt. Bitte wählen Sie nun eine Wunsch-Zeit:"); | $("#spwn-delivery p").text("Abendzustellung gewählt. Bitte wählen Sie nun eine Wunsch-Zeit:"); | ||||
| $("#spwn-delivery .spwn-delivery--time").append("<span class='active'>18 - 21 Uhr</span><span>20 - 23 Uhr</span>"); | |||||
| $("#spwn-delivery .spwn-delivery--time").append("<span class='active'>18 - 20 Uhr</span><span>19 - 21 Uhr</span><span>20 - 22 Uhr</span>"); | |||||
| // If not date from DPD days | // If not date from DPD days | ||||
| if (!$(".flatpickr-day").hasClass("selected")) { | |||||
| setDateSelected(); | |||||
| } | |||||
| if ($(".flatpickr-day").hasClass("selected")) { | if ($(".flatpickr-day").hasClass("selected")) { | ||||
| if (spawnDateInputValue === "" || spawnDateInputValue.indexOf("Uhr") === -1) { | if (spawnDateInputValue === "" || spawnDateInputValue.indexOf("Uhr") === -1) { | ||||
| manipulateDateInputValue(); | manipulateDateInputValue(); | ||||
| } | } | ||||
| // If DPD date is not in Abendzustellung range | // If DPD date is not in Abendzustellung range | ||||
| } else { | } else { | ||||
| $(".confirm-delivery-date #dtgs-datepicker-inputfield").val(""); | |||||
| spawnDateInputValue = ""; | |||||
| setDateSelected(); | |||||
| } | } | ||||
| } else { | } else { | ||||
| // DPD | // DPD | ||||
| @@ -142,8 +173,7 @@ function changeDelivery(fp) { | |||||
| $("#spwn-delivery p").text("DPD gewählt. Die Zustellung erfolgt zwischen 7 und 13 Uhr."); | $("#spwn-delivery p").text("DPD gewählt. Die Zustellung erfolgt zwischen 7 und 13 Uhr."); | ||||
| if (!$(".flatpickr-day").hasClass("selected")) { | if (!$(".flatpickr-day").hasClass("selected")) { | ||||
| // If Abendzustellung date is not in DPD range | // If Abendzustellung date is not in DPD range | ||||
| $(".confirm-delivery-date #dtgs-datepicker-inputfield").val(""); | |||||
| spawnDateInputValue = ""; | |||||
| setDateSelected(); | |||||
| } | } | ||||
| } | } | ||||
| } else { | } else { | ||||
| @@ -157,8 +187,7 @@ function changeDelivery(fp) { | |||||
| $("#spwn-delivery p").text("DPD gewählt. Die Zustellung erfolgt zwischen 7 und 18 Uhr."); | $("#spwn-delivery p").text("DPD gewählt. Die Zustellung erfolgt zwischen 7 und 18 Uhr."); | ||||
| if (!$(".flatpickr-day").hasClass("selected")) { | if (!$(".flatpickr-day").hasClass("selected")) { | ||||
| // If Abendzustellung or DPD DE date is not in DPD AT range | // If Abendzustellung or DPD DE date is not in DPD AT range | ||||
| $(".confirm-delivery-date #dtgs-datepicker-inputfield").val(""); | |||||
| spawnDateInputValue = ""; | |||||
| setDateSelected(); | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| @@ -165,3 +165,8 @@ input.custom-number[type=number] { | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| .confirm-delivery-date.do-not-show, | |||||
| #spwn-delivery { | |||||
| display: none !important; | |||||
| } | |||||
| @@ -79,6 +79,7 @@ | |||||
| border-bottom: 1px solid #86b04b; | border-bottom: 1px solid #86b04b; | ||||
| } | } | ||||
| .product-detail-name { | .product-detail-name { | ||||
| font-weight: bold; | |||||
| color: $sw-color-brand-secondary; | color: $sw-color-brand-secondary; | ||||
| line-height: 40px !important; | line-height: 40px !important; | ||||
| } | } | ||||
| @@ -0,0 +1,33 @@ | |||||
| {% set totalWeight = 0 %} | |||||
| {% for lineItem in page.cart.lineItems %} | |||||
| {% if lineItem.deliveryInformation.weight != null %} | |||||
| {% set totalWeight = totalWeight + (lineItem.quantity * lineItem.deliveryInformation.weight) %} | |||||
| {% endif %} | |||||
| {% endfor %} | |||||
| {% block page_checkout_confirm_delivery_date %} | |||||
| {% if page.extensions.DeliveryDateConfig.data.deliveryDateActive %} | |||||
| <div class="confirm-delivery-date{% if totalWeight < 0.5 %} do-not-show{% endif %}"> | |||||
| <div class="row"> | |||||
| <div class="col-sm-12"> | |||||
| <div class="card checkout-card"> | |||||
| <div class="card-body"> | |||||
| <div class="card-title"> | |||||
| {{ "dtgs-delivery-date.confirmDatePanelHeader"|trans }} | |||||
| </div> | |||||
| <p> | |||||
| {{ "dtgs-delivery-date.confirmDatePanelText"|trans }} | |||||
| </p> | |||||
| <input | |||||
| type="text" | |||||
| id="dtgs-datepicker-inputfield" | |||||
| class="form-control dtgs-datepicker-input{% if formViolations.getViolations('deliverydate') is not empty %} is-invalid{% endif %}" | |||||
| form="confirmOrderForm" | |||||
| {% if page.extensions.DeliveryDateConfig.data.deliveryDateRequired %}required="required"{% endif %} | |||||
| {% if page.extensions.DeliveryDateConfig.data.deliveryDateInSession is not empty %}value="{{ page.extensions.DeliveryDateConfig.data.deliveryDateInSession }}"{% endif %} /> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| {% endif %} | |||||
| {% endblock %} | |||||