feat(carousel): shuffle products in ProductCarousel for enhanced display

- Update ProductCarousel to filter and shuffle a random selection of 15 products with images for display.
- Implement a shuffleArray method using the Fisher-Yates algorithm to ensure a varied product presentation.
- Maintain seamless looping of products in the carousel for improved user experience.

src/components/ProductCarousel.js

@@ -67,15 +67,19 @@ class ProductCarousel extends React.Component {
         console.log("ProductCarousel getCategoryProducts response:", response);
         if (this._isMounted && response && response.products && response.products.length > 0) {
           // Filter products to only show those with pictures
-          const productsWithPictures = response.products.filter(product => 
+          const productsWithPictures = response.products.filter(product =>
             product.pictureList && product.pictureList.length > 0
           );
           console.log("ProductCarousel: Filtered", productsWithPictures.length, "products with pictures from", response.products.length, "total");
-          
+
           if (productsWithPictures.length > 0) {
-            this.originalProducts = productsWithPictures;
+            // Take random 15 products and shuffle them
+            const shuffledProducts = this.shuffleArray(productsWithPictures.slice(0, 15));
+            console.log("ProductCarousel: Selected and shuffled", shuffledProducts.length, "products");
+
+            this.originalProducts = shuffledProducts;
             // Duplicate for seamless looping
-            this.products = [...productsWithPictures, ...productsWithPictures];
+            this.products = [...shuffledProducts, ...shuffledProducts];
             this.setState({ products: this.products });
             this.startAutoScroll();
           }
@@ -423,6 +427,16 @@ class ProductCarousel extends React.Component {
       </Box>
     );
   }
+
+  // Shuffle array using Fisher-Yates algorithm
+  shuffleArray(array) {
+    const shuffled = [...array];
+    for (let i = shuffled.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+    }
+    return shuffled;
+  }
 }
 
 export default withTranslation()(withLanguage(ProductCarousel));