Hugging Face's logo

Spaces:
dmease
/
handcraft-haven
Running

App Files Community
handcraft-haven
File size: 4,001 Bytes
171e483
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
// Sample product data - in a real app this would come from an API
const products = [
    {
        id: 1,
        title: "Handmade Ceramic Mug",
        price: 24.99,
        image: "http://static.photos/craft/640x360/1",
        category: "Home & Living",
        rating: 4.8,
        reviews: 142,
        favorite: true
    },
    {
        id: 2,
        title: "Personalized Leather Journal",
        price: 32.50,
        image: "http://static.photos/vintage/640x360/2",
        category: "Stationery",
        rating: 4.9,
        reviews: 87,
        favorite: false
    },
    {
        id: 3,
        title: "Hand-knitted Wool Scarf",
        price: 45.00,
        image: "http://static.photos/textures/640x360/3",
        category: "Accessories",
        rating: 4.7,
        reviews: 203,
        favorite: true
    },
    {
        id: 4,
        title: "Wooden Cutting Board",
        price: 38.00,
        image: "http://static.photos/wood/640x360/4",
        category: "Kitchen",
        rating: 4.9,
        reviews: 56,
        favorite: false
    },
    {
        id: 5,
        title: "Hand-painted Wall Art",
        price: 85.00,
        image: "http://static.photos/abstract/640x360/5",
        category: "Art",
        rating: 5.0,
        reviews: 34,
        favorite: true
    },
    {
        id: 6,
        title: "Crochet Baby Blanket",
        price: 42.99,
        image: "http://static.photos/textures/640x360/6",
        category: "Baby",
        rating: 4.8,
        reviews: 78,
        favorite: false
    },
    {
        id: 7,
        title: "Handmade Soap Set",
        price: 18.50,
        image: "http://static.photos/wellness/640x360/7",
        category: "Bath & Beauty",
        rating: 4.6,
        reviews: 112,
        favorite: false
    },
    {
        id: 8,
        title: "Macrame Plant Hanger",
        price: 28.00,
        image: "http://static.photos/nature/640x360/8",
        category: "Home & Living",
        rating: 4.7,
        reviews: 64,
        favorite: true
    }
];

// Initialize the storefront
document.addEventListener('DOMContentLoaded', () => {
    const productsGrid = document.getElementById('products-grid');
    
    // Render products
    products.forEach(product => {
        const productCard = document.createElement('product-card');
        productCard.setAttribute('title', product.title);
        productCard.setAttribute('price', product.price);
        productCard.setAttribute('image', product.image);
        productCard.setAttribute('category', product.category);
        productCard.setAttribute('rating', product.rating);
        productCard.setAttribute('reviews', product.reviews);
        productCard.setAttribute('favorite', product.favorite);
        productCard.setAttribute('id', product.id);
        productsGrid.appendChild(productCard);
    });
    
    // Handle search functionality
    const searchBar = document.querySelector('custom-search-bar');
    searchBar.addEventListener('search', (e) => {
        const searchTerm = e.detail.toLowerCase();
        document.querySelectorAll('product-card').forEach(card => {
            const title = card.getAttribute('title').toLowerCase();
            const category = card.getAttribute('category').toLowerCase();
            if (title.includes(searchTerm) || category.includes(searchTerm)) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    });
    
    // Handle category filtering
    const categoryFilter = document.querySelector('custom-category-filter');
    categoryFilter.addEventListener('filter', (e) => {
        const category = e.detail;
        document.querySelectorAll('product-card').forEach(card => {
            if (category === 'all' || card.getAttribute('category') === category) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    });
});