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));