Показать сообщение отдельно
  #1 (permalink)  
Старый 28.08.2019, 17:48
Аспирант
Отправить личное сообщение для nathan111777 Посмотреть профиль Найти все сообщения от nathan111777
 
Регистрация: 12.05.2019
Сообщений: 44

Как добавить второй код к первому, чтобы объекты хранились в 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 файле. Помогите пожалуйста объединить эти два кода.
Ответить с цитированием