checkout

neuland · Feb 22, 2024 · 9c00445 · 9c00445
1 parent 05a87eb
commit 9c00445
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 51 deletions.
diff --git a/cdn/js/helper.js b/cdn/js/helper.js
@@ -18,7 +18,6 @@ const config = {
     hachureAngle: 90 + Math.random() * 10, // angle of hachure,
   },
 };
-
 const style = document.createElement("style");
 style.innerHTML = `
 @import url('https://fonts.googleapis.com/css2?family=Pangolin&display=swap');
@@ -139,6 +138,7 @@ function toggleBoundaries(active) {
 
 // call generateRoughBoundaries() when viewports are resized
 window.addEventListener("resize", generateRoughBoundaries);
+window.addEventListener("click", generateRoughBoundaries);
 
 function writeBoundaryToCache(svgNode, boundary, width, height) {
   const serializer = new XMLSerializer();
@@ -229,28 +229,9 @@ function generateRoughBoundaries() {
           bowing: 0.5,
           ...config[team],
         });
-        console.log(node);
         writeBoundaryToCache(node, boundary, width, height);
       }
-
-      // add gausien blur filter to node
-      //const filter = document.createElementNS(
-      //  "http://www.w3.org/2000/svg",
-      //  "filter",
-      //);
-      //filter.setAttribute("id", "blur");
-      //const feGaussianBlur = document.createElementNS(
-      //  "http://www.w3.org/2000/svg",
-      //  "feGaussianBlur",
-      //);
-      //feGaussianBlur.setAttribute("in", "SourceGraphic");
-      //feGaussianBlur.setAttribute("stdDeviation", "1");
-      //filter.appendChild(feGaussianBlur);
-      //svg.appendChild(filter);
-      //node.setAttribute("filter", "url(#blur)");
-
       svg.appendChild(node);
-
       setBackgroundImage(boundary, svg);
     });
   });

diff --git a/src/checkout/components/MiniCart.js b/src/checkout/components/MiniCart.js
@@ -23,7 +23,7 @@ export default ({ req }) => {
             <clipPath id="a"><path fill="#fff" d="M0 0h33v33H0z" /></clipPath>
           </defs>
         </svg>
-        <div class="c_MiniCart__quantity">${quantity}</div>
+        <div class="c_MiniCart__quantity">${quantity || ""}</div>
       </div>
     </a>
   </div>`;

diff --git a/src/checkout/pages/Checkout.css b/src/checkout/pages/Checkout.css
@@ -0,0 +1,3 @@
+.c_Checkout_store {
+  padding: 1rem;
+}
diff --git a/src/checkout/pages/Checkout.js b/src/checkout/pages/Checkout.js
@@ -16,15 +16,14 @@ export default () => {
         <label for="email">E-Mail</label>
         <input type="email" id="email" name="email" required />
       </fieldset>
-      <h3>Shipping Address</h3>
+
+      <h3>Store Pickup</h3>
       <fieldset>
         <div class="c_Checkout_store">${StorePicker()}</div>
-        <input type="hidden" id="storeId" name="storeId" />
-        <label for="street">Street</label>
-        <input type="text" id="street" name="street" required /><br />
-        <label for="city">City</label>
-        <input type="text" id="city" name="city" required />
+        <label for="street">Store ID</label>
+        <input type="text" id="storeId" name="storeId" readonly /><br />
       </fieldset>
+
       <button>place order</button>
     </form>
     <a href="/checkout/cart">back to cart</a>

diff --git a/src/checkout/scripts.js b/src/checkout/scripts.js
@@ -2,17 +2,30 @@
 
 /* client side javascript */
 
-/* checkout page */
+/* checkout page store select */
 const $storePicker = document.querySelector(".c_Checkout_store");
 if ($storePicker) {
   $storePicker.addEventListener("explore:store-selected", function (e) {
     console.log("checkout: store-selected", e.detail);
-    document.getElementById("storeId").value = e.detail.storeId;
-    document.getElementById("street").value = e.detail.street;
-    document.getElementById("city").value = e.detail.city;
+    document.getElementById("storeId").value = e.detail;
   });
 }
 
+/* checkout page address */
+const $tabs = document.querySelectorAll(".c_Checkout_delivery details");
+$tabs.forEach((detail) => {
+  detail.querySelector("summary").addEventListener("click", (e) => {
+    e.preventDefault();
+    const wasOpen = detail.hasAttribute("open");
+    $tabs.forEach((d) => {
+      d.removeAttribute("open");
+    });
+    if (!wasOpen) {
+      detail.setAttribute("open", true);
+    }
+  });
+});
+
 /* mini cart */
 document.addEventListener("checkout:cart-updated", async function () {
   const $miniCart = document.querySelector(".c_MiniCart");

diff --git a/src/explore/components/StorePicker.css b/src/explore/components/StorePicker.css
@@ -1,3 +1,15 @@
 .e_StorePicker dialog::backdrop {
   backdrop-filter: blur(1px);
 }
+
+.e_StorePicker:not(.e_StorePicker--selected) .e_StorePicker_unselect {
+  display: none;
+}
+
+.e_StorePicker_dialog {
+  overflow: visible;
+}
+
+.e_StorePicker {
+  padding: 1rem;
+}
diff --git a/src/explore/components/StorePicker.js b/src/explore/components/StorePicker.js
@@ -3,33 +3,36 @@ import { html } from "../utils.js";
 
 export default () => {
   return html`<div class="e_StorePicker" data-boundary="explore-storepicker">
-    <dialog>
+    <div class="e_StorePicker_selected"></div>
+    <button class="e_StorePicker_choose" type="button">choose a store</button>
+    <button class="e_StorePicker_unselect" type="button">remove</button>
+    <dialog
+      class="e_StorePicker_dialog"
+      data-boundary="explore-storepicker-dialog"
+    >
       <h2>Stores</h2>
       <ul>
         ${data.stores
           .map(
             (s) =>
               html`<li>
-                <img src="${s.image}" width="200" /><br />
-                ${s.name}<br />
-                ${s.street}<br />
-                ${s.city}<br />
+                <div class="e_StorePicker_entry">
+                  <img src="${s.image}" width="200" /><br />
+                  ${s.name}<br />
+                  ${s.street}<br />
+                  ${s.city}
+                </div>
                 <button
+                  class="e_StorePicker_select"
                   type="button"
                   data-id="${s.id}"
-                  data-street="${s.street}"
-                  data-city="${s.city}"
                 >
                   select
                 </button>
               </li>`,
           )
           .join("")}
       </ul>
-      <button type="button" data-id="" data-street="" data-city="">
-        no store
-      </button>
     </dialog>
-    <button type="button">Ship to a neaby store</button>
   </div>`;
 };
diff --git a/src/explore/scripts.js b/src/explore/scripts.js
@@ -6,22 +6,33 @@
 
 const $picker = document.querySelector(".e_StorePicker");
 if ($picker) {
-  const dialog = $picker.querySelector("dialog");
-  const showButton = $picker.querySelector("dialog + button");
-  const selectButtons = $picker.querySelectorAll("dialog button[data-id]");
+  const dialog = $picker.querySelector(".e_StorePicker dialog");
+  const chooseButton = $picker.querySelector(".e_StorePicker_choose");
+  const selectButtons = $picker.querySelectorAll(".e_StorePicker_select");
+  const unselectButton = $picker.querySelector(".e_StorePicker_unselect");
+  const selected = $picker.querySelector(".e_StorePicker_selected");
 
-  showButton.addEventListener("click", () => dialog.showModal());
+  chooseButton.addEventListener("click", () => dialog.showModal());
   [...selectButtons].forEach((button) => {
     button.addEventListener("click", (e) => {
-      const detail = {
-        storeId: e.currentTarget.getAttribute("data-id"),
-        street: e.currentTarget.getAttribute("data-street"),
-        city: e.currentTarget.getAttribute("data-city"),
-      };
+      const detail = e.currentTarget.getAttribute("data-id");
       $picker.dispatchEvent(
         new CustomEvent("explore:store-selected", { bubbles: true, detail }),
       );
+      $picker.classList.add("e_StorePicker--selected");
       dialog.close();
+      selected.innerHTML = e.currentTarget.previousElementSibling.innerHTML;
     });
   });
+  unselectButton.addEventListener("click", () => {
+    $picker.dispatchEvent(
+      new CustomEvent("explore:store-selected", {
+        bubbles: true,
+        detail: null,
+      }),
+    );
+    selected.innerHTML = "";
+    $picker.classList.remove("e_StorePicker--selected");
+    dialog.close();
+  });
 }