Как отработать данную ссылку на клиенте?
Выводится только страница с json, например если я написал в поиск: "костюм", то выводится:
[{"img":["/big-size/IMG_2256.jpg","/big-size/IMG_2257.jpg","big-size/IMG_2264.jpg"],"sizes":["S"],"_id":"5f5cbd7b42616a8e9d4a4ce0","title":"Серый костюм","description":"text","nowPrice":6000,"oldPrice":0,"sale":0,"mainSize":"big"},{"img":["/big-size/IMG_2297.jpg","/big-size/IMG_2298.jpg","/big-size/IMG_2299.jpg"],"sizes":["S"],"_id":"5f5cbeac42616a8e9d4a4ce3","title":"Белый костюм","description":"text","nowPrice":10000,"oldPrice":0,"sale":0,"mainSize":"big"}]
а должна выводится страница shop с товарами, которые я передал на клиенте.
products.js (server):
router.get('/products', async(req, res) => {
const searchField = req.query.search;
Product.find({ title: { $regex: searchField.toString(), $options: '$i' } })
.then(data => {
res.status(200).json(data);
})
})
script.js (client):
const headerSearchTest = document.querySelector('.header-search-test');
headerSearchTest.addEventListener('keydown', event => {
const searchValue = event.target.dataset.search;
if (event.keyCode === 13) {
fetch(`/shop/products?search=${searchValue}`)
.then(res => res.json())
.then(searchProducts => {
if (searchProducts.products.length) {
const listCards = document.querySelector('.list-cards');
const html = searchProducts.products.map(product => {
return `
<li class="card" data-size="${product.mainSize}">
<a href="/shop/${product.id}" title="${product.title}">
<div class="card__block-img">
<figure>
<img src="${product.img[0]}" alt="${product.title}">
</figure>
</div>
<div class="card__description">
<span class="card- name">${product.title}</span>
<div class="card__block-price">
<span class="card-old-price">${product.oldPrice}</span>
<span class="card-now-price">${product.nowPrice}</span>
<span class="card-sale">${product.sale}%</span>
</div>
</div>
</a>
</li>
`
}).join('');
listCards.innerHTML += html;
} else {
listCards.innerHTML = `
<h1>Товаров не найдено</h1>
`;
}
})
.catch(err => alert(err))
}
})
Сам поиск в html (pug) выглядит так:
form(action="/shop/products" method="GET")
input(class="header-search-test" name="search" id="search" data-search="search" type="text")
span поиск