23.06.2019, 14:18
|
|
Аспирант
|
|
Регистрация: 12.05.2019
Сообщений: 44
|
|
|
Как изменить фильтрацию товара по названию класса в html на свойства асоц. массива?
У меня есть фильтр товаров который, фильтрует страну по названию класса в HTML (placeholder turkey) или (placeholder china) ,благодаря JS коду:
JS:
var allProducts = document.getElementsByClassName('placeholder');
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var selected_countries = [];
// отобразить все товары
document.getElementsByClassName('btn-filter')[0].addEventListener('click', function(){
for(var i = 0; i < allProducts.length; i++) {
allProducts[i].style.display = 'block';
}
});
// ловим клики по чекбоксам
for(var k = 0; k < checkboxes.length; k++) {
checkboxes[k].addEventListener('click', function(){
showHideProducts(this);
});
}
// и скрываем или отображаем соответственные ячейки товаров
function showHideProducts(thisInput) {
if(thisInput.checked == true) { // при проставлении галки
// добавляем страну в массив выбранных стран
selected_countries.push(thisInput.value);
} else { // а при снятии галки
var index = selected_countries.indexOf(thisInput.value);
if(index > -1) {
// удаляем страну с массива
selected_countries.splice(index, 1);
}
}
for(var i = 0; i < allProducts.length; i++) {
// берем второй класс ячейки товара т.е. его страну
var secondClass = allProducts[i].className.split(' ')[1];
// если второй класс ячейки товара (страна) НЕ содержится в массиве выбранных стран
if(!~selected_countries.indexOf(secondClass)) {
allProducts[i].style.display = 'none'; // тогда скрываем ячейку
} else { // а если содержится
allProducts[i].style.display = 'block'; // тогда отображаем
}
}
}
и HTML:
<div class="filter">
<div class="filter-inner">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Страна</button>
<div id="myDropdown" class="dropdown-content">
<button class="btn-filter">Все</button>
<input type="checkbox" class="btn" value="turkey"> Турция<br>
<input type="checkbox" class="btn" value="china"> Китай<br>
<input type="checkbox" class="btn" value="france"> Франция<br>
<input type="checkbox" class="btn" value="italy"> Италия<br>
</div>
</div>
</div>
</div>
<div class="placeholder turkey">
<div class="placeholder-image">
<img src="https://cdn.shopify.com/s/files/1/2671/4680/products/pol_dress_sage_240x.jpg?v=1553634712">
</div>
<button type="submit" class="btn-buy">Turkey</button>
<div class="price">Цена: 0,00 </div>
</div>
<div class="placeholder china">
<div class="placeholder-image">
<img src="https://cdn.shopify.com/s/files/1/0519/8561/products/IMG_5881_76665333-5efd-46da-b57e-2472ddb55697_240x.jpg?v=1548397696">
</div>
<button type="submit" class="btn-buy">Chine</button>
<div class="price">Цена: 0,00 </div>
</div>
<div class="placeholder france">
<div class="placeholder-image ">
<img src="https://cdn.shopify.com/s/files/1/0073/5671/1030/products/websizedphotos_1_copy_6_522fb324-3529-4e22-989e-0924860cb34d_240x.png?v=1553665976">
</div>
<button type="submit" class="btn-buy">France</button>
<div class="price">Цена: 0,00 </div>
</div>
<div class="placeholder italy">
<div class="placeholder-image">
<img src="https://cdn.shoptiques.com/shoptiques-shop/products/mock-neck-dress-14-blue-9f38a7d3_pl.jpg">
</div>
<button type="submit" class="btn-buy">Italy</button>
<div class="price">Цена: 0,00 </div>
</div>
Но со временем благодаря советам более опытных программистов, я решил товары выводить на страницу с помощью JSON, так как товаров может быть несколько тысяч на одном сайте. Вот так:
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="goods">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/eshop.js"></script>
</body>
</html>
JSON (он же асоциативний массив):
{
"11292" : {
"name" : "Платье1",
"cost" : 50,
"country" : "turkey",
"image" : "https://cdn.shopify.com/s/files/1/2671/4680/products/pol_dress_sage_240x.jpg?v=1553634712"
},
"11294" : {
"name" : "Платье2",
"cost" : 150,
"country" : "china",
"image" : "https://cdn.shopify.com/s/files/1/0519/8561/products/IMG_5881_76665333-5efd-46da-b57e-2472ddb55697_240x.jpg?v=1548397696"
},
"11295" : {
"name" : "Платье3",
"cost" : 200,
"country" : "france",
"image" : "https://cdn.shopify.com/s/files/1/0073/5671/1030/products/websizedphotos_1_copy_6_522fb324-3529-4e22-989e-0924860cb34d_240x.png?v=1553665976"
},
"11296" : {
"name" : "Платье4",
"cost" : 300,
"country" : "italy",
"image" : "https://cdn.shoptiques.com/shoptiques-shop/products/mock-neck-dress-14-blue-9f38a7d3_pl.jpg"
}
}
JS который просто выводит JSON на страницу:
$('document').ready(function(){
loadGoods();
});
function loadGoods() {
//загружаю товары на страницу
$.getJSON('goods.json', function (data) {
//console.log(data);
var out = '';
for (var key in data){
out+='<div class="single-goods">';
out+='<h3>'+data[key]['name']+'</h3>';
out+='<p>Цена: '+data[key]['cost']+'</p>';
out+='<img src="'+data[key].image+'">';
out+='<button class="add-to-cart" data-art="'+key+'">Купить</button>';
out+='</div>';
}
$('#goods').html(out);
$('button.add-to-cart').on('click', addToCart);
});
}
CSS:
.single-goods {
width: 300px;
height: 500px;
border: 1px solid black;
margin: 10px;
float: left;
text-align: center;
}
.single-goods button {
display: block;
margin: 20px auto;
}
Как написать JS код чтобы сделать фильтрацию товаров по свойствам объектов ассоциативного массива? Например по стране производителю или по цене, также как я реализовал по первому примеру код фильтруя по названию класса.
Последний раз редактировалось nathan111777, 23.06.2019 в 14:23.
|
|
23.06.2019, 15:08
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
|
|
|
23.06.2019, 16:19
|
|
Аспирант
|
|
Регистрация: 12.05.2019
Сообщений: 44
|
|
Вообще не то, во-первых у меня отдельный JSON файл, а в этом примере массив в файле JS, вторых в примере вашем индексный масив а у меня асоциативний, и самое главное такому новичку как я такой сложный код как вы сбросили адаптировать под свой код это что-то из области фантастики. Надеюсь на то, что кто-то редактирует мой код и соединит этот JS:
$('document').ready(function(){
loadGoods();
});
function loadGoods() {
//загружаю товары на страницу
$.getJSON('goods.json', function (data) {
//console.log(data);
var out = '';
for (var key in data){
out+='<div class="single-goods">';
out+='<h3>'+data[key]['name']+'</h3>';
out+='<p>Цена: '+data[key]['cost']+'</p>';
out+='<img src="'+data[key].image+'">';
out+='<button class="add-to-cart" data-art="'+key+'">Купить</button>';
out+='</div>';
}
$('#goods').html(out);
$('button.add-to-cart').on('click', addToCart);
});
}
+с этим js кодом(редактировав его что б он фильтровал не в html по класу а в json по свойству
var allProducts = document.getElementsByClassName('placeholder');
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var selected_countries = [];
// отобразить все товары
document.getElementsByClassName('btn-filter')[0].addEventListener('click', function(){
for(var i = 0; i < allProducts.length; i++) {
allProducts[i].style.display = 'block';
}
});
// ловим клики по чекбоксам
for(var k = 0; k < checkboxes.length; k++) {
checkboxes[k].addEventListener('click', function(){
showHideProducts(this);
});
}
// и скрываем или отображаем соответственные ячейки товаров
function showHideProducts(thisInput) {
if(thisInput.checked == true) { // при проставлении галки
// добавляем страну в массив выбранных стран
selected_countries.push(thisInput.value);
} else { // а при снятии галки
var index = selected_countries.indexOf(thisInput.value);
if(index > -1) {
// удаляем страну с массива
selected_countries.splice(index, 1);
}
}
for(var i = 0; i < allProducts.length; i++) {
// берем второй класс ячейки товара т.е. его страну
var secondClass = allProducts[i].className.split(' ')[1];
// если второй класс ячейки товара (страна) НЕ содержится в массиве выбранных стран
if(!~selected_countries.indexOf(secondClass)) {
allProducts[i].style.display = 'none'; // тогда скрываем ячейку
} else { // а если содержится
allProducts[i].style.display = 'block'; // тогда отображаем
}
}
}
Последний раз редактировалось nathan111777, 23.06.2019 в 16:23.
|
|
23.06.2019, 19:55
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
nathan111777,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.single-goods {
width: 300px;
height: 500px;
border: 1px solid black;
margin: 10px;
float: left;
text-align: center;
}
.single-goods button {
display: block;
margin: 20px auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var data = {
"11292": {
"name": "Платье1",
"cost": 50,
"country": "turkey",
"image": "https://cdn.shopify.com/s/files/1/2671/4680/products/pol_dress_sage_240x.jpg?v=1553634712"
},
"11294": {
"name": "Платье2",
"cost": 150,
"country": "china",
"image": "https://cdn.shopify.com/s/files/1/0519/8561/products/IMG_5881_76665333-5efd-46da-b57e-2472ddb55697_240x.jpg?v=1548397696"
},
"11295": {
"name": "Платье3",
"cost": 200,
"country": "france",
"image": "https://cdn.shopify.com/s/files/1/0073/5671/1030/products/websizedphotos_1_copy_6_522fb324-3529-4e22-989e-0924860cb34d_240x.png?v=1553665976"
},
"11296": {
"name": "Платье4",
"cost": 300,
"country": "italy",
"image": "https://cdn.shoptiques.com/shoptiques-shop/products/mock-neck-dress-14-blue-9f38a7d3_pl.jpg"
}
}; //убрать данные
function filterShow() {
var arr = [...document.querySelectorAll(".btn:checked")].map(({
value
}) => value);
var out = '';
for (var key in data) {
if (arr.length) {
var country = data[key].country;
if (!arr.includes(country)) continue;
}
out += '<div class="single-goods">';
out += '<h3>' + data[key]['name'] + '</h3>';
out += '<p>Цена: ' + data[key]['cost'] + '</p>';
out += '<img src="' + data[key].image + '">';
out += '<button class="add-to-cart" data-art="' + key + '">Купить</button>';
out += '</div>';
}
$('#goods').html(out);
// $('button.add-to-cart').on('click', addToCart);
}
function init() {
filterShow();
$(".btn").on("click", filterShow);
$(".btn-filter").on("click", function() {
$(".btn").prop("checked", false);
filterShow()
})
}
$(function() {
$.getJSON('goods.json', function(json) {
//data = json;//убрать комментарий
// init() //убрать комментарий
})
init()//закомментировать
});
</script>
</head>
<body>
<div class="filter">
<div class="filter-inner">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Страна</button>
<div id="myDropdown" class="dropdown-content">
<button class="btn-filter">Все</button>
<input type="checkbox" class="btn" value="turkey"> Турция<br>
<input type="checkbox" class="btn" value="china"> Китай<br>
<input type="checkbox" class="btn" value="france"> Франция<br>
<input type="checkbox" class="btn" value="italy"> Италия<br>
</div>
</div>
</div>
</div>
<div id="goods"></div>
</body>
</html>
|
|
23.06.2019, 21:32
|
|
Аспирант
|
|
Регистрация: 12.05.2019
Сообщений: 44
|
|
спасибо большое, работает если ваш код написать в одном файле index.html , но когда пробую поместить мой ассоциативный масив :
var data = {
"11292": {
"name": "Платье1",
"cost": 50,
"country": "turkey",
"image": "https://cdn.shopify.com/s/files/1/2671/4680/products/pol_dress_sage_240x.jpg?v=1553634712"
},
"11294": {
"name": "Платье2",
"cost": 150,
"country": "china",
"image": "https://cdn.shopify.com/s/files/1/0519/8561/products/IMG_5881_76665333-5efd-46da-b57e-2472ddb55697_240x.jpg?v=1548397696"
},
"11295": {
"name": "Платье3",
"cost": 200,
"country": "france",
"image": "https://cdn.shopify.com/s/files/1/0073/5671/1030/products/websizedphotos_1_copy_6_522fb324-3529-4e22-989e-0924860cb34d_240x.png?v=1553665976"
},
"11296": {
"name": "Платье4",
"cost": 300,
"country": "italy",
"image": "https://cdn.shoptiques.com/shoptiques-shop/products/mock-neck-dress-14-blue-9f38a7d3_pl.jpg"
}
}; //убрать данные
в файл goods.json товары вообще не отображаются на странице...
Я что-то еще должен прописать что б подключилось к файлу goods.json? Или в чем проблема? Запускал проект через локальный сервер Openserver.
пробавал убрать то что закоментировано как вы написали:
$(function() {
$.getJSON('goods.json', function(json) {
//data = json;//убрать комментарий
// init() //убрать комментарий
})
init()//закомментировать
});
все равно не отображаются товары...
Последний раз редактировалось nathan111777, 23.06.2019 в 21:39.
|
|
23.06.2019, 21:42
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
nathan111777,
$(function() {
var data;
function filterShow() {
var arr = [...document.querySelectorAll(".btn:checked")].map(({
value
}) => value);
var out = '';
for (var key in data) {
if (arr.length) {
var country = data[key].country;
if (!arr.includes(country)) continue;
}
out += '<div class="single-goods">';
out += '<h3>' + data[key]['name'] + '</h3>';
out += '<p>Цена: ' + data[key]['cost'] + '</p>';
out += '<img src="' + data[key].image + '">';
out += '<button class="add-to-cart" data-art="' + key + '">Купить</button>';
out += '</div>';
}
$('#goods').html(out);
// $('button.add-to-cart').on('click', addToCart);
}
function init() {
filterShow();
$(".btn").on("click", filterShow);
$(".btn-filter").on("click", function() {
$(".btn").prop("checked", false);
filterShow()
})
}
$.getJSON('goods.json', function(json) {
data = json;
init()
})
});
|
|
23.06.2019, 22:10
|
|
Аспирант
|
|
Регистрация: 12.05.2019
Сообщений: 44
|
|
|
Последний раз редактировалось nathan111777, 23.06.2019 в 22:32.
|
|
23.06.2019, 22:40
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
|
nathan111777,
консоль что пишет?
|
|
23.06.2019, 22:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
nathan111777,
зачем вы изменили свой
|
Цитата:
|
|
JSON (он же асоциативний массив):
|
менять нужно было только js/eshop.js
|
|
23.06.2019, 22:50
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
nathan111777,
содержимое 'goods.json'
{ "11292": { "name": "Платье1", "cost": 50, "country": "turkey", "image": "https://cdn.shopify.com/s/files/1/2671/4680/products/pol_dress_sage_240x.jpg?v=1553634712" }, "11294": { "name": "Платье2", "cost": 150, "country": "china", "image": "https://cdn.shopify.com/s/files/1/0519/8561/products/IMG_5881_76665333-5efd-46da-b57e-2472ddb55697_240x.jpg?v=1548397696" }, "11295": { "name": "Платье3", "cost": 200, "country": "france", "image": "https://cdn.shopify.com/s/files/1/0073/5671/1030/products/websizedphotos_1_copy_6_522fb324-3529-4e22-989e-0924860cb34d_240x.png?v=1553665976" }, "11296": { "name": "Платье4", "cost": 300, "country": "italy", "image": "https://cdn.shoptiques.com/shoptiques-shop/products/mock-neck-dress-14-blue-9f38a7d3_pl.jpg" } }
|
|
|
|
