Make related products random

rayc2045 · May 14, 2024 · 7cb929c · 7cb929c
1 parent a3fad61
commit 7cb929c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/src/app.js b/src/app.js
@@ -225,6 +225,16 @@ const utils = {
   getUniques(arr) {
     return arr.filter((item, idx) => arr.indexOf(item) === idx);
   },
+  getShuffles(arr) {
+    const array = arr.slice();
+    let currentIdx = array.length;
+    while (currentIdx !== 0) {
+      let randomIdx = Math.floor(Math.random() * currentIdx);
+      currentIdx--;
+      [array[currentIdx], array[randomIdx]] = [array[randomIdx], array[currentIdx]];
+    }
+    return array;
+  },
   copyText(text) {
     navigator.clipboard.writeText(text.trim());
   },
@@ -426,9 +436,13 @@ const cart = {
   async addItem(item) {
     let isInCart = false;
     for (const cartItem of this.items)
-      if (cartItem.name === item.name && cartItem.color === item.color) {
+      if (
+        cartItem.name === item.name &&
+        cartItem.category === item.category &&
+        cartItem.color === item.color
+      ) {
         isInCart = true;
-        cartItem.num++;
+        cartItem.num += item.num || 1;
         break;
       }
     if (!isInCart) this.items.push({ ...item, num: 1 });

diff --git a/src/pages/home.html b/src/pages/home.html
@@ -13,11 +13,11 @@ <h1 class="text-5xl md:text-6xl">
   </a>
 </section>
 
-<section>
-  <h3 class="mb-12 text-xl text-center">New & Noteworthy</h3>
-  <ul class="grid place-content-center grid-cols-2 md:grid-cols-4 gap-8">
+<section class="space-y-12">
+  <h3 class="text-xl text-center">New & Noteworthy</h3>
+  <ul class="grid place-content-center grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
     <template
-      x-for="product in shop.products.filter(p => p.label === 'new').slice(0, 4)"
+      x-for="product in getShuffles(shop.products.filter(p => p.label === 'new')).slice(0, 4)"
       :key="product.name"
     >
       <li x-html="component('product-card')"></li>
@@ -88,11 +88,11 @@ <h3 class="mb-12 text-xl text-center">New & Noteworthy</h3>
   </div>
 </section>
 
-<section>
-  <h3 class="mb-12 text-xl text-center">Handpicked this Week</h3>
-  <ul class="grid place-content-center grid-cols-2 md:grid-cols-4 gap-8">
+<section class="space-y-12">
+  <h3 class="text-xl text-center">Handpicked this Week</h3>
+  <ul class="grid place-content-center grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
     <template
-      x-for="product in shop.products.filter(p => p.discount.length).slice(0, 4)"
+      x-for="product in getShuffles(shop.products.filter(p => p.discount.length)).slice(0, 4)"
       :key="product.name"
     >
       <li x-html="component('product-card')"></li>