Как добавить второй код к первому, чтобы объекты хранились в json файле а не массиве?
У меня есть первый код сохраняющий товары (объекты) в файле 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 файле. Помогите пожалуйста объединить эти два кода. |
"Рубашка №1" : {
"sex" : "male", "name" : "Рубашка №1" Либо ключом доложен быть уникальный идентификатор товара, либо вообще удалить их и использовать массив объектов. Цитата:
|
массив в котором товары в втором коде ссылку я написал на песочницу.
В том и проблема что в первом коде обьекты хранятся в json файле а в втором коде обьекты хранятся в массиве. А нужно чтобы хранились обьекты в JSON |
А что тут первое, а что второе? У вас товары хранятся в json, здесь получают их $.getJSON('goods.json', ... О каком массиве речь?
|
Под вторым имеется ввиду код корзины?
|
Я вам же предлагал как хранить товары, не плоско, а деревом. То есть должно быть типа:
var gods = {
"man" : {
"1" : {
"name" : "Рубашка №1",
"price" : 1000,
"country" : "argentina",
"image" : "images/1.jpg",
"brand": "M"
},
"2" : {
"name" : "Рубашка №2",
"price" : 1000,
"country" : "argentina",
"image" : "images/2.jpg",
"size": "M"
},
"3" : {
"name" : "Рубашка №3",
"price" : 1000,
"country" : "argentina",
"image" : "images/3.jpg",
"brand": "M"
},
"4" : {
"name" : "Рубашка №4",
"price" : 1000,
"country" : "argentina",
"image" : "images/4.jpg",
"brand": "M"
}
},
"woman" : {
"1" : {
"name" : "Платье №1",
"price" : 1000,
"country" : "brazil",
"image" : "images/a.jpg",
"brand": "L"
},
"2" : {
"name" : "Платье №2",
"price" : 1000,
"country" : "brazil",
"image" : "images/b.jpg",
"brand": "L"
},
"3" : {
"name" : "Платье №3",
"price" : 1000,
"country" : "brazil",
"image" : "images/e.jpg",
"brand": "L"
}
}
};
Соответственно страницы имеют ключ либо man, либо woman (var sex). Это позволяет не перебирать весь объект при выводе, а получать из объекта только нужное для страницы. Это заменить, так как ничего проверять не надо: for (var key in data) заменить на for (var key in data[sex]), а for if (data[key]['sex'] != sex) { continue; } удалить из кода. Первичными ключами товаров служат идентификаторы. Они должны быть уникальны либо у всех товаров, если предполагается вывод всех товаров на одну страницу, либо в пределах каждого из ключей страниц (man и woman) если нет. Уникальность означает, что если к примеру удален товар с идентификатором 3, то этот идентификатор нельзя уже использовать для другого товара. В корзину же нужно писать ключ страницы и идентификаторы выбранных товаров, то есть что-то: {"man" : [2,4], "woman": [1,2]}. Каждая из страниц всегда загружает объект товаров, следовательно всю другую информацию о товарах для корзины можно получить из объекта по ключам страниц и идентификаторам, которые записаны в корзине. Если есть отдельная страница для корзины, то в ней нужно также получать с сервера json с товарами. У вас неудобная организация объекта (json), и как следствие есть лишнее и ненужное в коде. |
Под вторым имеется код где товары фильтруется фильтрами:
https://jsfiddle.net/h129478t/ перейдите по ссылке и поймете о чем вообще речь |
Цитата:
Можно сделать так (я пишу тезисы, если поймете, то напишите так, если нет, тогда конкретно код): 1) Функция loadGoods не нужна, и лучше ее заменить на вывод html кода товаров, для примера назовем ее showGoods. Она содержит только вывод товаров из определенного ранее объекта, назовем его goods. var out = ''; for (var key in goods[sex]) { .... 2) Объект с товарами получается один раз при загрузке страницы (ocument.addEventListener('DOMContentLoaded' .....), для этого проверяется: если переменная goods не определена (можно проверять и определенную на пустоту), то делается запрос на сервер $.getJSON('goods.json' .... результат которого (объект) присваивается переменной goods, а далее управление передается функции showGoods и далее у вас по списку. Это позволит работать с объектом товаров любому сценарию на странице. PS. Не известно какие сценарии и как будут исполняться, но если все просто, то можно всего лишь изменить это: var cart = {};
document.addEventListener('DOMContentLoaded', function (e) {
loadGoods();
checkCart();
showMiniCart();
});
на var cart = {}, goods;
document.addEventListener('DOMContentLoaded', function () {
$.getJSON('goods.json', function (data) {
goods = data;
showGoods(); //читайте выше
checkCart();
showMiniCart();
});
});
и далее везде работать с объектом goods. |
дубликат товаров не нужен мне вообще не нужен массив, нужно просто код который фильтрует товары (по ссылке) поместить в eshop.js но я не знаю как это сделать, потому что в этих двух кодах разный подход к хранению объектов(в одном обьекти сохранятся в отдельном файле а в другом коде в том же js файле) вы хоть и пытаетесь мне помочь но совсем не поняли сути вопроса и задачи
Другими словами я когда-то сделал корзину товаров, а сейчас нашел код фильтров и хочу к своему сайту добавить фильтры чтоб фильтровать товары, но не могу потому что не знаю как. |
var cart = {}, DATA;
document.addEventListener('DOMContentLoaded', function () {
$.getJSON('goods.json', function (data) {
DATA = data;
.....
Структуру своих данных приведите к тому что в том коде, то есть это массив объектов (выкинуть ключи "Рубашка №1" : и т.п.). Забирайте от туда код без массива. |
| Часовой пояс GMT +3, время: 14:00. |