recos

cdn/js/helper.js

@@ -28,6 +28,7 @@ function setBasicStyles() {
 [data-boundary] {
   position: relative;
   background-size: 100% 100%;
+  background-repeat: no-repeat;
 }
 [data-boundary]::after {
   display: block;

src/checkout/pages/Checkout.css

@@ -1,3 +1,4 @@
-.c_Checkout_store {
-  padding: 1rem;
+.c_Checkout {
+  margin: 0 auto;
+  max-width: 1000px;
 }

src/checkout/pages/Checkout.js

@@ -8,26 +8,28 @@ import Footer from "../../explore/components/Footer.js";
 
 export default () => {
   const content = html`
-    ${CompactHeader()}
-    <h2>Checkout</h2>
-    <form action="/checkout/thanks" method="post">
-      <h3>Personal Data</h3>
-      <fieldset>
-        <label for="email">E-Mail</label>
-        <input type="email" id="email" name="email" required />
-      </fieldset>
+    <main class="c_Checkout">
+      ${CompactHeader()}
+      <h2>Checkout</h2>
+      <form action="/checkout/thanks" method="post">
+        <h3>Personal Data</h3>
+        <fieldset>
+          <label for="email">E-Mail</label>
+          <input type="email" id="email" name="email" required />
+        </fieldset>
 
-      <h3>Store Pickup</h3>
-      <fieldset>
-        <div class="c_Checkout_store">${StorePicker()}</div>
-        <label for="street">Store ID</label>
-        <input type="text" id="storeId" name="storeId" readonly /><br />
-      </fieldset>
+        <h3>Store Pickup</h3>
+        <fieldset>
+          <div class="c_Checkout_store">${StorePicker()}</div>
+          <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>
-    ${Footer()}
+        <button>place order</button>
+      </form>
+      <a href="/checkout/cart">back to cart</a>
+      ${Footer()}
+    </main>
   `;
   return Page({ content });
 };

src/checkout/styles.css

@@ -1,4 +1,5 @@
 @import url("./pages/CartPage.css");
+@import url("./pages/Checkout.css");
 @import url("./components/MiniCart.css");
 @import url("./components/AddToCart.css");
 @import url("./components/LineItem.css");

src/decide/pages/ProductPage.css

@@ -1,12 +1,14 @@
 .d_ProductPage {
   margin: 0 auto;
+  padding-bottom: 5rem;
   max-width: 1000px;
 }
 
 .d_ProductPage_details {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
+  margin-bottom: 1rem;
 }
 
 .d_ProductPage__title {

src/decide/pages/ProductPage.js

@@ -48,8 +48,9 @@ export default ({ id, sku, req }) => {
               ${AddToCart({ sku: variant.sku })}
             </div>
           </div>
+          ${Recommendations({ skus: [variant.sku] })}
         </main>
-        ${Recommendations({ skus: [variant.sku] })} ${Footer()}
+        ${Footer()}
         <script src="/explore/scripts.js" type="module"></script>
         <script src="/decide/scripts.js" type="module"></script>
         <script src="/checkout/scripts.js" type="module"></script>

src/explore/components/Footer.css

@@ -1,5 +1,5 @@
 .e_Footer {
   text-align: center;
   padding: 1rem;
-  margin-top: 2rem;
+  margin-top: 1rem;
 }

src/explore/components/Recommendation.css

@@ -0,0 +1,23 @@
+.e_Recommendation {
+  margin: 0;
+  max-width: 200px;
+}
+
+.e_Recommendation_link {
+  text-decoration: none;
+  color: black;
+}
+
+.e_Recommendation_image {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1 / 1;
+  display: block;
+}
+
+.e_Recommendation_name {
+  margin: 1rem 0;
+  color: black;
+  text-align: center;
+  display: block;
+}

src/explore/components/Recommendation.js

@@ -0,0 +1,10 @@
+import { html } from "../utils.js";
+
+export default ({ image, url, name }) => {
+  return html`<li class="e_Recommendation">
+    <a class="e_Recommendation_link" href="${url}">
+      <img class="e_Recommendation_image" src="${image}" width="200" />
+      <span class="e_Recommendation_name">${name}</span>
+    </a>
+  </li>`;
+};

src/explore/components/Recommendations.css

@@ -0,0 +1,10 @@
+.e_Recommendations {
+  padding: 2rem;
+}
+
+.e_Recommendations_list {
+  display: flex;
+  gap: 40px;
+  padding: 0;
+  list-style-type: none;
+}

src/explore/components/Recommendations.js

@@ -1,31 +1,41 @@
 import data from "../database/index.js";
 import { html } from "../utils.js";
+import Recommendation from "./Recommendation.js";
+
+const BESTSELLER = ["AU-04-RD", "AU-03-YE", "AU-05-ZH"];
 
 function recosForSku(sku) {
-  return data.recommendations[sku] || [];
+  const recoSkus = data.recommendations.relations[sku] || BESTSELLER;
+  return recoSkus.map((sku) => data.recommendations.variants[sku]);
 }
 
-function recosForSkus(skus) {
-  const result = skus.flatMap(recosForSku);
-  // Remove duplicates
-  return Array.from(new Set(result));
+function recosForSkus(skus, max = 4) {
+  const listOfRecos = skus.map(recosForSku);
+
+  // take first of each list until we have enough
+  const result = [];
+  let i = 0;
+  while (listOfRecos.some((recos) => recos[i])) {
+    listOfRecos.forEach((recos) => {
+      if (recos[i] && !result.includes(recos[i])) {
+        result.push(recos[i]);
+      }
+    });
+    i++;
+  }
+  return result.slice(0, max);
 }
 
 export default ({ skus }) => {
   const recos = recosForSkus(skus);
   return recos.length
-    ? html`<div data-boundary="explore-recommendations">
+    ? html`<div
+        class="e_Recommendations"
+        data-boundary="explore-recommendations"
+      >
         <h2>Recommendations</h2>
-        <ul>
-          ${recos
-            .map(
-              (p) =>
-                html`<li>
-                  <a href="${p.url}">${p.name}</a><br />
-                  <small>${p.sku} / ${p.price} Øcken</small>
-                </li>`,
-            )
-            .join("")}
+        <ul class="e_Recommendations_list">
+          ${recos.map(Recommendation).join("")}
         </ul>
       </div>`
     : "";