0

У меня есть первый код сохраняющий товары (объекты) в файле 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 ответ 1

0

Если правильно вас понял то изменить функцию loadGoods() проще всего:

function loadGoods() {
        //
    $.getJSON('goods.json', function (data) {

    const DATA = [];
    for (let key in data){
        DATA.push(data[key]);
    }

    const filters = document.querySelector('#filters');

        filters.addEventListener('input', filterGoods);

    function filterGoods() {
      const
        country = filters.querySelector('#country').value,
        sizes = [...filters.querySelectorAll('#size input:checked')].map(n => n.value),
        priceMin = document.querySelector('#price-min').value,
        priceMax = document.querySelector('#price-max').value;

      outputGoods(DATA.filter(n => (
        (!sex || n.sex === sex) &&
        (!country || n.country === country) &&
        (!sizes.length || sizes.includes(n.size)) &&
        (!priceMin || priceMin <= n.cost) &&
        (!priceMax || priceMax >= n.cost)
        )));
    }

    function outputGoods(goods) {
      document.getElementById('goods').innerHTML = goods.map(n => `
        <div class="single-goods">
          <h3>${n.name}</h3>
          <img src="${n.image}">
          <p>Цена: ${n.cost}</p>
          <button class="add-to-cart" data-art="${n.name}">Купить</button>
        </div>
      `).join('');
         }
    outputGoods(DATA.filter(n => (
        (!sex || n.sex === sex)
        )));

    document.querySelectorAll('button.add-to-cart').forEach(function(but) {
      but.addEventListener("click",addToCart);
        })

    });
}
5
  • а как должен выглядеть весь файл eshop,js? как man.html и goods.json? А то я попробовал заменить функцию loadGoods() и у меня вообще не отображаются товары. Можете сбросить как должны выглядеть эти 3 файла в какой-то песочнице(типа codesandbox.io)? Ну или здесь напишите если вам так удобнее. 29 авг 2019 в 8:46
  • попробуй вместо outputGoods(DATA.filter(n => ( (!sex || n.sex === sex) ))); написать просто outputGoods(): вобщем убери везде (!sex || n.sex === sex) && 29 авг 2019 в 8:53
  • сделал так как вы сказали...не работает... 29 авг 2019 в 12:05
  • codesandbox.io/s/relaxed-wright-8huhh настроил, работает как и показал выше. Конкретно по твоему вопросу "Как добавить второй код к первому" выполнено. 29 авг 2019 в 17:59
  • заработало? отметь как правильный ответ. 31 авг 2019 в 12:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.