From 7cb929c44059529e9fcbee70ff10ef9e6806705a Mon Sep 17 00:00:00 2001
From: Ray C <rayc2045@gmail.com>
Date: Tue, 14 May 2024 23:23:59 +0800
Subject: [PATCH] Make related products random

---
 src/app.js          | 18 ++++++++++++++++--
 src/pages/home.html | 16 ++++++++--------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/app.js b/src/app.js
index c76c242..6b0706b 100644
--- 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
index df7f586..f651a11 100644
--- 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>