WavyKits Component - Wishlist Component

Wishlist Component Component

An interactive wishlist component that displays a list of saved products. Users can view items with their image, name, and price, and have options to move an item to the cart or remove it from the wishlist.

LTR

RTL

<div class="max-w-4xl mx-auto mb-16">        
        <div x-data="{
            items: [
                { id: 1, name: 'Classic White Sneakers', price: 89.99, image: 'https://images.unsplash.com/photo-1549298916-b41d501d3772?w=300&h=300&fit=crop' },
                { id: 2, name: 'Leather Backpack', price: 129.99, image: 'https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=300&h=300&fit=crop' },
                { id: 3, name: 'Wireless Headphones', price: 199.99, image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300&h=300&fit=crop' }
            ],
            removeItem(id) {
                this.items = this.items.filter(item => item.id !== id);
            }
        }" class="bg-white rounded-lg shadow-sm p-6">
            
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-semibold">My Wishlist</h3>
                <span class="text-sm text-gray-500" x-text="items.length + ' items'"></span>
            </div>

            <div class="space-y-4">
                <template x-for="item in items" :key="item.id">
                    <div class="flex gap-4 p-4 border border-gray-200 rounded-lg">
                        <img :src="item.image" :alt="item.name" class="w-20 h-20 object-cover rounded">
                        <div class="flex-1">
                            <h4 class="font-medium" x-text="item.name"></h4>
                            <p class="text-lg font-semibold text-gray-900 mt-1">$<span x-text="item.price.toFixed(2)"></span></p>
                        </div>
                        <div class="flex flex-col gap-2">
                            <button class="px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700">
                                Add to Cart
                            </button>
                            <button @click="removeItem(item.id)" class="px-4 py-2 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50">
                                Remove
                            </button>
                        </div>
                    </div>
                </template>
            </div>

            <div x-show="items.length === 0" class="text-center py-12">
                <p class="text-gray-500">Your wishlist is empty</p>
            </div>

        </div>
    </div>

Wishlist - Saved Items Component

Organize your favorite products in your personal wishlist, switch between grid and table views, and add items to your cart with this interactive component.

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

Product Listing with Quick View Component

Explore our curated collection of premium products, featuring filtering, sorting, and an interactive quick view for detailed item selection and adding to cart.

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

Wishlist Component Component

Wishlist - Saved Items Component

Premium Code Access

Product Listing with Quick View Component

Premium Code Access

Build Your Way with WavyKits Components

Wishlist Component Component

Wishlist - Saved Items Component

Premium Code Access

Product Listing with Quick View Component

Premium Code Access

Build Your Way with WavyKits
Components