|
|
|
@ -260,6 +260,92 @@ btnOpenSearchPhone.onclick = function () { |
|
|
|
|
searchPhone.classList.toggle('active'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// pc
|
|
|
|
|
let inputSearchPc = document.querySelector('.header-menu-search__input'), |
|
|
|
|
btnSearchPc = document.querySelector('.header-menu-search__btn'); |
|
|
|
|
|
|
|
|
|
btnSearchPc.onclick = function () { |
|
|
|
|
let value = inputSearchPc.value, |
|
|
|
|
newPost = { |
|
|
|
|
value: value, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
postSearch(newPost, 'pc'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// phone
|
|
|
|
|
let inputSearchPhone = document.querySelector('.phone-search__input'); |
|
|
|
|
|
|
|
|
|
inputSearchPhone.addEventListener('input', function(event) { |
|
|
|
|
let value = event.target.value, |
|
|
|
|
newPost = { |
|
|
|
|
value: value, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
postSearch(newPost, 'phone'); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
function postSearch(newPost, device) { |
|
|
|
|
let contentPc = document.querySelector('.header-menu-search__found'), |
|
|
|
|
contentPhone = document.querySelector('.phone-search__found'); |
|
|
|
|
|
|
|
|
|
fetch('http://jsonplaceholder.typicode.com/posts', { |
|
|
|
|
method: 'POST', |
|
|
|
|
// body: JSON.stringify(newPost),
|
|
|
|
|
headers: { |
|
|
|
|
'Content-type': 'application/json; charset=UTF-8', |
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
.then((data) => { |
|
|
|
|
if (device == 'pc') { |
|
|
|
|
contentPc.innerHTML = ''; |
|
|
|
|
|
|
|
|
|
contentPc.innerHTML = `<div class="header-menu-search__item">
|
|
|
|
|
<img src="assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img"> |
|
|
|
|
|
|
|
|
|
<div class="header-menu-search-item__content"> |
|
|
|
|
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p> |
|
|
|
|
<p class="header-menu-search-item__art text-2">Артикул: STP1000C</p> |
|
|
|
|
</div> |
|
|
|
|
</div>`; |
|
|
|
|
|
|
|
|
|
contentPc.classList.add('active'); |
|
|
|
|
}else{ |
|
|
|
|
contentPhone.innerHTML = ''; |
|
|
|
|
|
|
|
|
|
contentPhone.innerHTML = `<div class="phone-search__item">
|
|
|
|
|
<img src="assets/img/photo/header-menu-search.png" alt="" class="phone-search-item__img"> |
|
|
|
|
|
|
|
|
|
<div class="phone-search-item__content"> |
|
|
|
|
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p> |
|
|
|
|
<p class="phone-search-item__art text-2">Артикул: STP1000C</p> |
|
|
|
|
</div> |
|
|
|
|
</div>`; |
|
|
|
|
|
|
|
|
|
contentPhone.classList.add('active'); |
|
|
|
|
} |
|
|
|
|
}).catch( |
|
|
|
|
() => { |
|
|
|
|
if (device == 'pc') { |
|
|
|
|
postError(contentPc); |
|
|
|
|
}else{ |
|
|
|
|
postError(contentPhone); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function postError(divContent) { |
|
|
|
|
divContent.innerHTML = '' |
|
|
|
|
|
|
|
|
|
let p = document.createElement("p"); |
|
|
|
|
p.textContent = "Произошла ошибка" |
|
|
|
|
p.className = "header-menu-search__error text-2"; |
|
|
|
|
|
|
|
|
|
divContent.appendChild(p); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// search end
|
|
|
|
|
|
|
|
|
|
// open-modal
|
|
|
|
|