From cf12323dfa93b31d2222a46b7c6a3d55592ee71a Mon Sep 17 00:00:00 2001 From: sebseb7 Date: Tue, 11 Nov 2025 14:57:30 +0100 Subject: [PATCH] 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 | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/src/components/ProductCarousel.js b/src/components/ProductCarousel.js index edd8745..cd1a1b8 100644 --- a/src/components/ProductCarousel.js +++ b/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 { ); } + + // 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));