Passer au contenu principal Passer à la navigation Aller à la recherche Passer au pied de page

🎯 Product Recommendations

Showcase of product recommendation components including carousels, grids, quick view, wishlists, and various recommendation types

Classes used: sparkles-product-carousel, sparkles-recommendation-grid, sparkles-quick-view, and more from the recommendations.css file.

Customers Also Bought - Carousel

Customers Also Bought

Based on customer purchase patterns

-25% New
Premium Crystal Set

Premium Crystal Set

(124)
$199.99 $149.99
Limited
Gold Rhinestone Collection

Gold Rhinestone Collection

(89)
$299.99 
<div x-data="sparklesCarousel({ autoplay: false, slidesPerView: 4 })" class="sparkles-product-carousel">
    <div class="sparkles-product-carousel-header">
        <h3 class="sparkles-product-carousel-title">Customers Also Bought</h3>
        <!-- Navigation buttons -->
    </div>
    <div class="sparkles-carousel">
        <div class="sparkles-carousel-container">
            <div class="sparkles-carousel-track">
                <!-- Product cards with quick view and wishlist -->
            </div>
        </div>
    </div>
</div>

Recently Viewed - Grid Layout

Recently Viewed

Continue where you left off

Viewed Recently Viewed 1

Crystal Embellishments

$89.99
Viewed Recently Viewed 2

Ruby Red Collection

$129.99 
<div class="sparkles-recommendations sparkles-recommendations-viewed-together">
    <div class="sparkles-grid-carousel sparkles-grid-carousel-4">
        <!-- Product cards in grid layout -->
    </div>
</div>

Complete the Look - Bundle Recommendations

Complete the Look

Bundle Items:

Individual prices:
Discount (%):
Bundle price:

You save !

Bundle added to cart!

<div x-data="sparklesProductRecommendations()" x-init="init(bundleData)" class="sparkles-recommendations">
    <!-- Complete bundle recommendation component with pricing -->
</div>

Trending Now - Horizontal Scroll

Trending Now

Most popular items this week

Hot
Trending Product 1

Rose Gold Set

1.2k views today
$249.99 
<div class="sparkles-scroll-carousel">
    <div class="flex gap-4">
        <!-- Horizontally scrolling product cards -->
    </div>
</div>

Sale Items You'll Love - List View

Sale Items You'll Love

-40% Sale Item 1

Limited Edition Crystal Set

Premium quality crystals with lifetime warranty

$299.99 $179.99
(78) 
<div class="sparkles-product-list-item">
    <div class="flex gap-4 p-4 bg-white rounded-lg shadow-sm">
        <!-- List view product layout -->
    </div>
</div>

Back in Stock Notifications

Back in Stock!

The "Diamond Collection" you were interested in is now available.

Diamond Collection

Diamond Collection

$599.99

<div class="sparkles-notification sparkles-notification-success sparkles-notification-with-action">
    <!-- Back in stock notification with product info -->
</div>

You May Also Like - Compact Cards

You May Also Like

Compact Product 1
Mini Crystal

$49.99

<div class="sparkles-product-card-compact">
    <div class="sparkles-image-container sparkles-image-square">
        <!-- Compact product card layout -->
    </div>
</div>

Usage Examples

// Product Carousel
<div x-data="sparklesCarousel({ 
    autoplay: false, 
    slidesPerView: 4 
})" class="sparkles-product-carousel">
    <div class="sparkles-carousel-container">
        <div class="sparkles-carousel-track">
            <div class="sparkles-carousel-item">
                <div class="sparkles-product-card-advanced">
                    <!-- Product card content -->
                </div>
            </div>
        </div>
    </div>
</div>
// Bundle Recommendations
<div x-data="sparklesProductRecommendations()" 
     x-init="init(bundleData)" 
     class="sparkles-recommendations">
    <div class="sparkles-recommendations__products-grid">
        <div class="sparkles-recommendations__product">
            <img :src="product.image" :alt="product.name">
            <h5 x-text="product.name"></h5>
            <p x-text="formatPrice(product.price)"></p>
        </div>
    </div>
</div>
// Compact Product Cards
<div class="grid grid-cols-2 md:grid-cols-6 gap-3">
    <div class="sparkles-product-card-compact">
        <div class="sparkles-image-container sparkles-image-square">
            <img src="product.jpg" alt="Product">
            <button class="sparkles-quick-add-btn">+</button>
        </div>
        <div class="p-3">
            <h5>Product Name</h5>
            <p>$49.99</p>
        </div>
    </div>
</div>

Performance & Accessibility

Performance Features

  • • Lazy loading for product images using intersection observer API
  • • Carousel navigation optimized with requestAnimationFrame for smooth transitions
  • • Product recommendation API calls use debouncing to prevent excessive requests
  • • Virtual scrolling for large product lists maintains consistent performance

Accessibility Support

  • • All product cards include proper ARIA labels and keyboard navigation
  • • Carousel controls support arrow keys and provide clear focus indicators
  • • Product images include descriptive alt text and loading state announcements
  • • Quick view modals trap focus and provide escape key functionality

Quick View

Product Quick View

Premium Crystal Set

(124 reviews)

Premium quality crystal set perfect for any collection. Each piece is hand-selected for quality and brilliance.

$199.99 $149.99