js

zenitPlatformAtmosSet1/src/Resources/app/storefront/dist/storefront/js/zenit-platform-atmos-set1.js

@@ -14,6 +14,8 @@ $(document).ready(function() {
     if (dpInput.length) {
         fp = document.querySelector("#dtgs-datepicker-inputfield")._flatpickr;
         dpInput.prop('disabled', true);
+        dpInput.wrap('<div class="spwn-date-wrapper"></div>');
+        $("<span id='spwn-remove-date' title='Zurücksetzen'></span>").insertAfter(dpInput);
         $("<div id='spwn-delivery'><p></p><div class='spwn-delivery--time'></div></div>").insertAfter(".confirm-delivery-date");
         fp.config.onChange.push(function() {
             manipulateDateInputValue();
@@ -44,6 +46,11 @@ $(document).ready(function() {
             tagBar(sticky, parentContainer, stickyTop);
         });
     }
+    
+    $("body").on("click", "#spwn-remove-date", function() {
+        $(".confirm-delivery-date #dtgs-datepicker-inputfield").val("");
+        spawnDateInputValue = "";
+    });
 });
 
 function manipulateDateInputValue() {
@@ -76,9 +83,15 @@ function changeDelivery(fp) {
             setIncludedDays("evening", fp, 0);
             $("#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>");
-            if (spawnDateInputValue === "" || spawnDateInputValue.indexOf("Uhr") === -1) {
-                manipulateDateInputValue();
-            }
+            // If not date from DPD days
+            if ($(".flatpickr-day").hasClass("selected")) {
+                if (spawnDateInputValue === "" || spawnDateInputValue.indexOf("Uhr") === -1) {
+                    manipulateDateInputValue();
+                }
+            // If DPD date is not in Abendzustellung range
+            } else {
+                $("#spwn-remove-date").trigger("click");
+            }            
         } else {
             // DPD
             console.log("DPD");
@@ -95,12 +108,15 @@ function changeDelivery(fp) {
 }
 
 function setIncludedDays(delivery, fp, addDays) {
+    // today
     let spwnDateTemp = new Date();
     spwnDateTemp.setDate(spwnDateTemp.getDate() + addDays);
     
     let spwnTime = parseInt(spwnDateTemp.getHours() + "" + spwnDateTemp.getMinutes());
+    // If after 1pm add one extra day
     if (delivery === "evening" && spwnTime > 1300) {
         spwnDateTemp.setDate(spwnDateTemp.getDate() + 1);
+    // If after 2pm add one extra day
     } else if (delivery === "dpd" && spwnTime > 1400) {
         spwnDateTemp.setDate(spwnDateTemp.getDate() + 1);      
     }
@@ -127,6 +143,7 @@ function setIncludedDays(delivery, fp, addDays) {
     ]);
 }
 
+// For sticky bar in 6-Tage products
 $.fn.isInViewport = function() {
     if ($(this).length) {
         var elementTop = $(this).offset().top + 50;
@@ -139,6 +156,7 @@ $.fn.isInViewport = function() {
     }
 };
 
+// 6-Tage products
 function tagBar(sticky, parentContainer, stickyTop) {
     var headerHeight = $(".header-inner").outerHeight() + 13,
         windowTop = $(window).scrollTop() + headerHeight;
@@ -173,4 +191,4 @@ function tagBar(sticky, parentContainer, stickyTop) {
     if ($("#day6").isInViewport()) {
         sticky.find(".day6Image").addClass("active");
     }
-}
+}

zenitPlatformAtmosSet1/src/Resources/app/storefront/src/scss/overrides.scss

@@ -104,4 +104,76 @@ input.custom-number[type=number] {
     .modal-dialog {
         max-width: 800px !important;
     }
-}
+}
+
+/* Wunschliefertermin Datepicker */
+.confirm-delivery-date {
+  .spwn-date-wrapper {
+    display: flex;
+    justify-content: flex-start;
+    margin-bottom: 20px;
+    align-items: center;
+  }
+  #dtgs-datepicker-inputfield {
+    width: 308px;
+    padding-left: 10px;
+  }
+  #spwn-remove-date {
+    margin-left: 10px;
+    cursor: pointer;
+    position: relative;
+    width: 16px;
+    height: 16px;
+    display: block;
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 8px;
+      width: 16px;
+      height: 2px;
+      background: #33548c;
+    }
+    &:before {
+      transform: rotate(-45deg);
+    }
+    &:after {
+      transform: rotate(45deg);
+    }
+  }  
+  .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
+    border-color: #33548c;
+    background: #33548c;
+  }
+}
+#spwn-delivery {
+  padding: 0 0 40px 0;
+  .spwn-delivery--time {
+    display: flex;
+    justify-content: flex-start;
+    span {
+      cursor: pointer;
+      display: inline-block;
+      margin: 0 20px 0 0;
+      color: #33548c;
+      font-size: 16px;
+      line-height: 18px;
+      border: 2px solid #33548c;
+      text-align: center;
+      vertical-align: middle;
+      border-radius: 3px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      padding: 14px 30px;
+      font-weight: 600;
+      white-space: nowrap;
+      transition: all .15s ease-in-out;
+      &:hover,
+      &.active {
+        background: #33548c;
+        color: #fff;
+      }
+    }
+  }
+}

zenitPlatformAtmosSet2/src/Resources/app/storefront/dist/storefront/js/zenit-platform-atmos-set2.js

@@ -18,7 +18,7 @@ $(document).ready(function() {
         fp.config.onChange.push(function() {
             manipulateDateInputValue();
         });
-        
+
         // If Austria and same day delivery is checked change to DPD
         if ($(".confirm-address-shipping").data("iso") === "AT") {
             inputDPD.attr('checked', true).trigger("click");
@@ -27,20 +27,20 @@ $(document).ready(function() {
             // No shop
             inputShopPickup.parents(".shipping-method").hide();
         }
-        
+
         // Call changeDelivery
         $("[name='shippingMethodId']").on('change', () => {
             changeDelivery(fp);
         });
         changeDelivery(fp);
     }
-    
+
     var sticky = $(".thumbnail-container");
     if (sticky.length) {
         var parentContainer = sticky.parents(".aku-cms-factory-element"),
             stickyTop = sticky.offset().top;
         tagBar(sticky, parentContainer, stickyTop);
-        $(window).on('resize scroll', function () {
+        $(window).on('resize scroll', function() {
             tagBar(sticky, parentContainer, stickyTop);
         });
     }
@@ -60,7 +60,7 @@ function changeDelivery(fp) {
         $(this).addClass("active");
         $(".confirm-delivery-date #dtgs-datepicker-inputfield").val(spawnDateInputValue + " " + $(this).text());
     });
-    
+
     if ($(".confirm-address-shipping").data("iso") !== "AT") {
         if (inputShopPickup.is(':checked')) {
             // Abholung im Ladengeschäft
@@ -76,8 +76,14 @@ function changeDelivery(fp) {
             setIncludedDays("evening", fp, 0);
             $("#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>");
-            if (spawnDateInputValue === "" || spawnDateInputValue.indexOf("Uhr") === -1) {
-                manipulateDateInputValue();
+            // If not date from DPD days
+            if ($(".flatpickr-day").hasClass("selected")) {
+                if (spawnDateInputValue === "" || spawnDateInputValue.indexOf("Uhr") === -1) {
+                    manipulateDateInputValue();
+                }
+                // If DPD date is not in Abendzustellung range
+            } else {
+                $(".confirm-delivery-date #dtgs-datepicker-inputfield").val("");
             }
         } else {
             // DPD
@@ -95,18 +101,21 @@ function changeDelivery(fp) {
 }
 
 function setIncludedDays(delivery, fp, addDays) {
+    // today
     let spwnDateTemp = new Date();
     spwnDateTemp.setDate(spwnDateTemp.getDate() + addDays);
-    
+
     let spwnTime = parseInt(spwnDateTemp.getHours() + "" + spwnDateTemp.getMinutes());
+    // If after 1pm add one extra day
     if (delivery === "evening" && spwnTime > 1300) {
         spwnDateTemp.setDate(spwnDateTemp.getDate() + 1);
+        // If after 2pm add one extra day
     } else if (delivery === "dpd" && spwnTime > 1400) {
-        spwnDateTemp.setDate(spwnDateTemp.getDate() + 1);      
+        spwnDateTemp.setDate(spwnDateTemp.getDate() + 1);
     }
     let spwnDate = fp.formatDate(spwnDateTemp, "d.m.Y");
     fp.set("minDate", spwnDate);
-    
+
     fp.set("enable", [
         function(date) {
             let day = date.getDate();
@@ -127,6 +136,7 @@ function setIncludedDays(delivery, fp, addDays) {
     ]);
 }
 
+// For sticky bar in 6-Tage products
 $.fn.isInViewport = function() {
     if ($(this).length) {
         var elementTop = $(this).offset().top + 50;
@@ -139,6 +149,7 @@ $.fn.isInViewport = function() {
     }
 };
 
+// 6-Tage products
 function tagBar(sticky, parentContainer, stickyTop) {
     var headerHeight = $(".header-inner").outerHeight() + 13,
         windowTop = $(window).scrollTop() + headerHeight;
@@ -173,4 +184,4 @@ function tagBar(sticky, parentContainer, stickyTop) {
     if ($("#day6").isInViewport()) {
         sticky.find(".day6Image").addClass("active");
     }
-}
+}

zenitPlatformAtmosSet2/src/Resources/app/storefront/src/scss/overrides.scss

@@ -114,4 +114,50 @@ input.custom-number[type=number] {
     .modal-dialog {
         max-width: 800px !important;
     }
-}
+}
+
+/* Wunschliefertermin Datepicker */
+.confirm-delivery-date {
+  #dtgs-datepicker-inputfield {
+    width: 308px;
+    margin-bottom: 20px;
+    padding-left: 10px;
+  }
+  #spwn-remove-date {
+
+  }
+  .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
+    border-color: #86b04b;
+    background: #86b04b;
+  }
+}
+#spwn-delivery {
+  padding: 0 0 40px 0;
+  .spwn-delivery--time {
+    display: flex;
+    justify-content: flex-start;
+    span {
+      cursor: pointer;
+      display: inline-block;
+      margin: 0 20px 0 0;
+      color: #86b04b;
+      font-size: 16px;
+      line-height: 18px;
+      border: 2px solid #86b04b;
+      text-align: center;
+      vertical-align: middle;
+      border-radius: 3px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      padding: 14px 30px;
+      font-weight: 600;
+      white-space: nowrap;
+      transition: all .15s ease-in-out;
+      &:hover,
+      &.active {
+        background: #86b04b;
+        color: #fff;
+      }
+    }
+  }
+}