-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpenelusuran.html
122 lines (109 loc) · 6.8 KB
/
penelusuran.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pencarian Produk - Toko Online</title>
<link rel="stylesheet" href="css/styleindex.css">
<link rel="icon" href="image/glamoras.jpg" type="image/jpeg"> <!-- Favicon -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="index.html">Glamora</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="baju.html">Baju</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tas.html">Tas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sepatu.html">Sepatu</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="text-center bg-primary text-white py-5">
<h1>Hasil Pencarian</h1>
</header>
<section class="container my-5">
<div class="row" id="searchResults">
<!-- Hasil pencarian akan ditampilkan di sini -->
</div>
</section>
<footer class="bg-dark text-white text-center py-3">
<p>© 2024 Glamora. All rights reserved.</p>
</footer>
<script>
// Ambil query pencarian dari URL
const urlParams = new URLSearchParams(window.location.search);
const searchQuery = urlParams.get('query') || '';
// Data produk dari baju.html, tas.html, dan sepatu.html
const products = [
// Data Baju Cowok
{ name: 'Kemeja Formal Cowok', price: 'Rp 250.000', image: 'baju-cowok1.jpg', link: 'detail-produk.html?produk=kemeja-formal-cowok' },
{ name: 'Kaos Santai Cowok', price: 'Rp 100.000', image: 'baju-cowok2.jpg', link: 'detail-produk.html?produk=kaos-santai-cowok' },
{ name: 'Jaket Kulit Cowok', price: 'Rp 400.000', image: 'baju-cowok3.jpg', link: 'detail-produk.html?produk=jaket-kulit-cowok' },
{ name: 'Dress Kasual Cewek', price: 'Rp 300.000', image: 'baju-cewek1.jpg', link: 'detail-produk.html?produk=dress-kasual-cewek' },
{ name: 'Blouse Cewek', price: 'Rp 200.000', image: 'baju-cewek2.jpg', link: 'detail-produk.html?produk=blouse-cewek' },
{ name: 'Cardigan Cewek', price: 'Rp 250.000', image: 'baju-cewek3.jpg', link: 'detail-produk.html?produk=cardigan-cewek' },
// Data Sepatu Cowok
{ name: 'Sepatu Sneakers Cowok', price: 'Rp 500.000', image: 'sepatu-cowok1.jpg', link: 'detail-produk.html?produk=sepatu-sneakers-cowok' },
{ name: 'Sepatu Formal Cowok', price: 'Rp 600.000', image: 'sepatu-cowok2.jpg', link: 'detail-produk.html?produk=sepatu-formal-cowok' },
{ name: 'Sepatu Olahraga Cowok', price: 'Rp 700.000', image: 'sepatu-cowok3.jpg', link: 'detail-produk.html?produk=sepatu-olahraga-cowok' },
// Data Sepatu Cewek
{ name: 'Sepatu Heels Cewek', price: 'Rp 450.000', image: 'sepatu-cewek1.jpg', link: 'detail-produk.html?produk=sepatu-heels-cewek' },
{ name: 'Sepatu Casual Cewek', price: 'Rp 350.000', image: 'sepatu-cewek2.jpg', link: 'detail-produk.html?produk=sepatu-casual-cewek' },
{ name: 'Sepatu Sneakers Cewek', price: 'Rp 550.000', image: 'sepatu-cewek3.jpg', link: 'detail-produk.html?produk=sepatu-sneakers-cewek' },
// Data Tas Cowok
{ name: 'Tas Ransel Cowok', price: 'Rp 350.000', image: 'tas-cowok1.jpg', link: 'detail-produk.html?produk=tas-ransel-cowok' },
{ name: 'Tas Selempang Cowok', price: 'Rp 250.000 <span class="badge badge-info">Diskon!</span>', image: 'tas-cowok2.jpg', link: 'detail-produk.html?produk=tas-selempang-cowok' },
{ name: 'Tas Gym Cowok', price: 'Rp 450.000', image: 'tas-cowok3.jpg', link: 'detail-produk.html?produk=tas-gym-cowok' },
// Data Tas Cewek
{ name: 'Tas Tote Cewek', price: 'Rp 300.000 <span class="badge badge-danger">Best Seller!</span>', image: 'tas-cewek1.jpg', link: 'detail-produk.html?produk=tas-tote-cewek' },
{ name: 'Tas Punggung Cewek', price: 'Rp 400.000', image: 'tas-cewek2.jpg', link: 'detail-produk.html?produk=tas-punggung-cewek' },
{ name: 'Tas Clutch Cewek', price: 'Rp 250.000', image: 'tas-cewek3.jpg', link: 'detail-produk.html?produk=tas-clutch-cewek' }
];
// Fungsi untuk menampilkan hasil pencarian
function displayResults() {
const resultsContainer = document.getElementById('searchResults');
resultsContainer.innerHTML = ''; // Kosongkan hasil sebelumnya
const filteredProducts = products.filter(product =>
product.name.toLowerCase().includes(searchQuery.toLowerCase())
);
if (filteredProducts.length === 0) {
resultsContainer.innerHTML = '<p class="text-center">Tidak ada hasil ditemukan.</p>';
} else {
filteredProducts.forEach(product => {
const productCard = `
<div class="col-md-4 mb-4">
<div class="card h-100 shadow-sm">
<img src="${product.image}" class="card-img-top" alt="${product.name}">
<div class="card-body text-center">
<h5 class="card-title">${product.name}</h5>
<p class="card-text">${product.price}</p>
<a href="${product.link}" class="btn btn-primary">Lihat Detail</a>
</div>
</div>
</div>
`;
resultsContainer.innerHTML += productCard;
});
}
}
// Jalankan fungsi displayResults saat halaman dimuat
displayResults();
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>