У меня есть
первый код сохраняющий товары (объекты) в файле JSON а с помощью JS вывожу их на страницу, также эти товары можно добавить в мини-корзину (на текущей странице) и в корзину на отдельной странице (но скрипт который выполняет добавление товара в корзину на другой странице не пишу - потому что не касается темы), а еще в зависимости от того какая открыта страница man.html (мужские товары) или woman.html (женские товары) выводятся на экран товары только мужские или только женские.
man.html:
<div id="mini-cart"></div>
<div id="goods"></div>
<script>var sex = 'male'</script>
woman.html:
<div id="mini-cart"></div>
<div id="goods"></div>
<script>var sex = 'male'</script>
eshop.js:
var cart = {};
document.addEventListener('DOMContentLoaded', function (e) {
loadGoods();
checkCart();
showMiniCart();
});
function loadGoods() {
$.getJSON('goods.json', function (data) {
var out = '';
for (var key in data){
if (data[key]['sex'] != sex) { continue; } //проверяет какая страница открыта
out+='<div class="single-goods">';
out+='<h3>'+data[key]['name']+'</h3>';
out+='<img src="'+data[key].image+'">';
out+='<p>Цена: '+data[key]['cost']+'</p>';
out+='<button class="add-to-cart" data-art="'+key+'">Купить</button>';
out+='</div>';
}
document.getElementById('goods').innerHTML = out;
document.querySelectorAll('button.add-to-cart').forEach(function(but) {
but.addEventListener("click",addToCart);
})
});
}
function addToCart() {
var articul = this.getAttribute('data-art');
if (cart[articul]!=undefined) {
cart[articul]++;
}
else {
cart[articul] = 1;
}
localStorage.setItem('cart', JSON.stringify(cart) );
showMiniCart();
}
function checkCart(){
if ( localStorage.getItem('cart') != null) {
cart = JSON.parse (localStorage.getItem('cart'));
}
}
function showMiniCart(){
var out ='';
for (var w in cart){
out += w + ' --- '+cart[w]+'<br>';
}
out+='<br><a href="cart.html">Корзина</a>';
document.getElementById('mini-cart').innerHTML = out;
}
goods.json:
{
"Рубашка №1" : {
"sex" : "male",
"name" : "Рубашка №1",
"cost" : 1000,
"country" : "argentina",
"image" : "images/1.jpg",
"brand": "M"
},
"Рубашка №2" : {
"sex" : "male",
"name" : "Рубашка №2",
"cost" : 1000,
"country" : "argentina",
"image" : "images/2.jpg",
"size": "M"
},
"Рубашка №3" : {
"sex" : "male",
"name" : "Рубашка №3",
"cost" : 1000,
"country" : "argentina",
"image" : "images/3.jpg",
"brand": "M"
},
"Рубашка №4" : {
"sex" : "male",
"name" : "Рубашка №4",
"cost" : 1000,
"country" : "argentina",
"image" : "images/4.jpg",
"brand": "M"
},
"Платье №1" : {
"sex" : "female",
"name" : "Платье №1",
"cost" : 1000,
"country" : "brazil",
"image" : "images/a.jpg",
"brand": "L"
},
"Платье №2" : {
"sex" : "female",
"name" : "Платье №2",
"cost" : 1000,
"country" : "brazil",
"image" : "images/b.jpg",
"brand": "L"
},
"Платье №3" : {
"sex" : "female",
"name" : "Платье №3",
"cost" : 1000,
"country" : "brazil",
"image" : "images/e.jpg",
"brand": "L"
}
}
index.css:
.single-goods {
width: 280px;
height: 530px;
border: 1px solid black;
margin: 10px;
float: left;
text-align: center;
}
.single-goods button {
display: block;
margin: 20px auto;
}
.add-to-cart{
background-color: red;
border: none;
color: white;
padding: 10px 32px;
text-align: center;
font-size: 20px;
margin: 4px 2px;
opacity: 1;
transition: 0.3s;
}
.add-to-cart:hover{
opacity: 0.6
}
#mini-cart{
padding: 20px;
}
.shoping-cart-minicart{
background-color: red;
border: none;
color: white;
padding: 10px 15px;
text-align: center;
font-size: 20px;
margin: 4px 2px;
opacity: 1;
transition: 0.3s;
}
----------------------------------------------------------------------------------------------------------------
Второй код выполняет фильтрацию по трем фильтрам, товары там аналогичные (цена, название, картинка), но они хранятся в массиве.
Cсылка на код:
https://jsfiddle.net/h129478t/
Мне нужно объединить эти два кода, добавив такую фильтрацию к первому кода (так он больше), но чтобы товары хранились в отдельном JSON файле. Помогите пожалуйста объединить эти два кода.