WavyKits Component - Product Card

E-commerce Product Card Component

A modern product card for e-commerce sites, featuring a prominent product image with a "like" button, product title, description, price, and customer ratings. The card is designed to be visually appealing and includes a clear "Add to Cart" call-to-action button.

LTR

RTL

        <div class="space-y-4">            
            <div class="max-w-sm mx-auto">
                <div x-data="{ liked: false }" class="bg-white rounded-lg shadow-md overflow-hidden">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop" 
                             alt="Product" 
                             class="w-full h-64 object-cover">
                        <button @click="liked = !liked" 
                                class="absolute top-4 right-4 p-2 bg-white rounded-full shadow">
                            <svg class="w-5 h-5" :class="liked ? 'fill-red-500' : 'fill-gray-300'" 
                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                            </svg>
                        </button>
                    </div>
                    
                    <div class="p-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-1">Wireless Headphones</h3>
                        <p class="text-sm text-gray-600 mb-3">Premium sound quality</p>
                        
                        <div class="flex items-center justify-between mb-4">
                            <span class="text-2xl font-bold text-gray-900">$99.99</span>
                            <div class="flex items-center">
                                <span class="text-yellow-400 text-sm">★★★★★</span>
                                <span class="text-gray-600 text-sm ml-1">(128)</span>
                            </div>
                        </div>
                        
                        <button class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">
                            Add to Cart
                        </button>
                    </div>
                </div>
            </div>
        </div>

Advanced E-commerce Product Card Component

An advanced, interactive e-commerce product card featuring hover animations, a quick view modal, and color variant selection. It's designed to provide a rich user experience with detailed product information accessible directly from the card.

LTR

RTL

function calculateAdvancedMetrics(data) {
                          const metrics = {
                              performance: [],
                              efficiency: {},
                              trends: new Map()
                          };
                          
                          data.forEach((item, index) => {
                              const weightedScore = item.value * Math.pow(0.95, index);
                              metrics.performance.push({
                                  score: weightedScore,
                                  timestamp: item.timestamp,
                                  confidence: calculateConfidence(item)
                              });
                          });
                          
                          const model = await loadPreTrainedModel();
                          const predictions = model.predict(metrics.performance);
                          
                          return {
                              ...metrics,
                              predictions,
                              accuracy: calculateAccuracy(predictions),
                              recommendations: generateRecommendations(metrics)
                          };
                      }

                      class DataAnalyzer {
                          constructor(config) {
                              this.config = config;
                              this.cache = new LRUCache(1000);
                              this.workers = new WorkerPool(4);
                          }
                          
                          async analyze(dataset) {
                              const chunks = this.chunkData(dataset);
                              const results = await Promise.all(
                                  chunks.map(chunk => this.workers.process(chunk))
                              );
                              
                              return this.aggregateResults(results);
                          }
                      }

Premium Code Access

Unlock advanced code snippets, frameworks, and exclusive developer resources with our premium membership.

Full source code access

Advanced frameworks & libraries

Priority support & updates

Upgrade to Premium

Advanced E-commerce Product Card with Carousel and Quick View Modal Component

A feature-rich e-commerce product card designed for a premium user experience. It includes an image carousel with arrows and dot indicators, a wishlist button, sale and status badges, and interactive color and size selectors with stock availability. A "Quick View" button launches a detailed modal with an expanded image gallery and comprehensive product information.

LTR

RTL

function calculateAdvancedMetrics(data) {
                          const metrics = {
                              performance: [],
                              efficiency: {},
                              trends: new Map()
                          };
                          
                          data.forEach((item, index) => {
                              const weightedScore = item.value * Math.pow(0.95, index);
                              metrics.performance.push({
                                  score: weightedScore,
                                  timestamp: item.timestamp,
                                  confidence: calculateConfidence(item)
                              });
                          });
                          
                          const model = await loadPreTrainedModel();
                          const predictions = model.predict(metrics.performance);
                          
                          return {
                              ...metrics,
                              predictions,
                              accuracy: calculateAccuracy(predictions),
                              recommendations: generateRecommendations(metrics)
                          };
                      }

                      class DataAnalyzer {
                          constructor(config) {
                              this.config = config;
                              this.cache = new LRUCache(1000);
                              this.workers = new WorkerPool(4);
                          }
                          
                          async analyze(dataset) {
                              const chunks = this.chunkData(dataset);
                              const results = await Promise.all(
                                  chunks.map(chunk => this.workers.process(chunk))
                              );
                              
                              return this.aggregateResults(results);
                          }
                      }

Premium Code Access

Unlock advanced code snippets, frameworks, and exclusive developer resources with our premium membership.

Full source code access

Advanced frameworks & libraries

Priority support & updates

Upgrade to Premium

Stay Updated

Build Your Way with WavyKits
Components

E-commerce Product Card Component

Advanced E-commerce Product Card Component

Premium Code Access

Advanced E-commerce Product Card with Carousel and Quick View Modal Component

Premium Code Access

Build Your Way with WavyKits Components

E-commerce Product Card Component

Advanced E-commerce Product Card Component

Premium Code Access

Advanced E-commerce Product Card with Carousel and Quick View Modal Component

Premium Code Access

Build Your Way with WavyKits
Components