1

Тема: Фільтр товарів інтернет-магазину

Підкажіть будь-ласка, як можна написати фільтр для інтернет-магазину,  щоб був схожий на фільтр розетки, тобто при ввімкненні checkbox одразу поновлювались товари згідно вибраного фільтру.

2 Востаннє редагувалося FakiNyan (30.07.2018 11:46:02)

Re: Фільтр товарів інтернет-магазину

це вам треба single page application framework, або просто юзати ajax. Коли чекається якийсь чекбокс, треба відправляти запит на сервер, при цьому треба передати параметр - список обраних чекбоксів. На сервері ви отримуєте цей запит, витягуєте з нього параметри, і на основі цих параметрів робите запит до бази даних, котра повертає вам відфільтровані дані, після цього відправляєте ці дані назад, клієнту.
А клієнт вже бере та й перемальовує сторінку, показуючи на ній відфільтровані дані

Подякували: leofun01, ostap34PHP2

3

Re: Фільтр товарів інтернет-магазину

single page application framework,

що мається на увазі під цим поясніть будь-ласка.

4 Востаннє редагувалося FakiNyan (30.07.2018 12:28:31)

Re: Фільтр товарів інтернет-магазину

це такі спеціальні штуки для розробників, котрі дозволяють створювати веб-додатки, в котрих ви лише 1 раз завантажуєте сторінку, а коли треба показати іншу сторінку, то воно завантажує лише дані (а не html) з серверу, і змінює структуру сторінки, аби вона виглядала так, ніби вона вже інша
https://uk.wikipedia.org/wiki/%D0%9E%D0 … 0%BE%D0%BA

Подякували: ostap34PHP1

5

Re: Фільтр товарів інтернет-магазину

Я так розумію такі штуки уже десь створенні їх не потрібно самому писати.

6

Re: Фільтр товарів інтернет-магазину

Простий варіант без будь яких попередніх перевірок.

<!DOCTYPE html>
<html>

<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script>
      $(document).ready(function() {
         $("#send").change(function() { //подія зміни у формі
            $.ajax({
               type: 'POST', //AJAX POST запит на сервер
               url: '/handlerURL', //URL серверного обробника запиту
               data: $('#send').serialize(), //серіалізуємо дані з форми в один рядок
               success: function(data) {
                  alert(data); //отримуємо оброблену відповідь від сервера
               }
            })
         });
      });
   </script>
</head>

<body>
   <form id="send"> <input type="checkbox" name="filter1" value="Bike"> I have a bike<br>
      <input type="checkbox" name="filter2" value="Car"> I have a car<br>
      <input type="checkbox" name="filter3" value="Boat" checked> I have a boat<br>
   </form>
</body>

</html>
Подякували: leofun011

7

Re: Фільтр товарів інтернет-магазину

alex-kugay написав:

Я так розумію такі штуки уже десь створенні їх не потрібно самому писати.

фреймворки створені, їх тільки вчити треба. Але якщо вам така фіча потрібна лише в одному місці, то тягти якийсь фреймворк може бути накладно, але я знаюсь лише на Angular. Так що це таке собі.

8

Re: Фільтр товарів інтернет-магазину

alex-kugay написав:

Підкажіть будь-ласка, як можна написати фільтр для інтернет-магазину,  щоб був схожий на фільтр розетки, тобто при ввімкненні checkbox одразу поновлювались товари згідно вибраного фільтру.

користуйтися вже написаним. Наприклад opencart
Пан трусіки мабудь перегрівся на сонці )) тож й верзе дурниці.

9

Re: Фільтр товарів інтернет-магазину

І як мені в opencart фільтри зробити для написаного з нуля сайту?

10

Re: Фільтр товарів інтернет-магазину

alex-kugay написав:

І як мені в opencart фільтри зробити для написаного з нуля сайту?

Я колись писав каталог товарів з 0 (взагалі ненавижу фреймворки і ООП), робив приблизно так. Кожній категорії і підкатегорії в базі відповідає якийсь ID. Далі, на сторінці виводим чекбокси з ID кожної категорії, при нажиманні на них йде ajax запит на сервер, там виконується запит до бази, і йде виборка вида SELECT * FROM .. WHERE ID IN/NOT IN (то, що прийшло в аякс).
Або загружати зразу все, і потім javascript'ом на сторінці ховати-показувати елементи (дурний варіант).

11

Re: Фільтр товарів інтернет-магазину

alex-kugay написав:

Я так розумію такі штуки уже десь створенні їх не потрібно самому писати.

alex-kugay написав:

І як мені в opencart фільтри зробити для написаного з нуля сайту?

Так, одне з двох: або ви використовуєте ті штуки, які уже десь створені, і їх не потрібно самому писати, наприклад OpenCart, або ви пишете сайт з нуля, в тому числі і такі штуки. Не одночасно. Якщо не розумієте, чому - перестворюйте сайт з нуля на OpenCart, зекономите і собі, і замовнику купу грошей і нервів.

Подякували: morgot, varkon, leofun013

12

Re: Фільтр товарів інтернет-магазину

Немає ніяких замовників а я це все роблю з метою навчання.

13

Re: Фільтр товарів інтернет-магазину

Послухавши всі ваші поради вирішив розбиратись в ajax дійшов до того, що при натисканні на checkbox завантажую всі дані з бд а не ті які пов'язані з даним checkbox. Прочитав, що через value а от як це написати в скрипті не розумію. Молживо хтось знайде час у себе і надасть мені допомогу у цьому питанні. Буду дуже вдячний!!! Напишу, що наприкладі хочу:

 <li><label><input type="checkbox" name="filter1" id="filter1" value="apple">apple</label></li>

щоб принатисканні брало з бази товари бренду apple.

14

Re: Фільтр товарів інтернет-магазину

Покажіть ваш серверний код (на PHP), цей html уривок нічого не говорить

15

Re: Фільтр товарів інтернет-магазину

млинець, оце завжди так буває. Сяду писати якийсь нубський шматок коду, аби показати новачку, а потім починається непотрібне гарцювання зі стилями... Що тут поробиш, все ж таки, я - творець.

html ваш
js

const checkbox = document.getElementById('filter1');

let elems = [];

checkbox.addEventListener('click', ({ target: { checked } }) => {
    if (checked) {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
    .then(json => displayInfo(json));
  } else {
      if (elems.length > 0) {
        for (const elem of elems)
          elem.remove();
    }
  }
  
}, false);

const displayInfo = info => {
    const elem = document.createElement('div');
  elem.classList.add('info');
  elem.innerText = info.title;
  document.body.append(elem);
  elems.push(elem);
}

непотрібний css

.info {
  width: 50%;
  padding: 7px 0;
  margin: 30px auto;
  border-radius: 10px;
  background: lightpink;
  font: bold 15px Helvetica, Verdana, sans-serif;
  text-align: center;
  text-transform: uppercase;
  color: blue;
  text-shadow: 0 0 10px rgba(255, 255, 255, 1);
  letter-spacing: 1px;
}

екзампля https://jsfiddle.net/jqvk4wgt/22/

але якщо це фільтр, то при чеканні якогось бокса я б додавав якесь значення в масив з фільтрами, наприклад. А потім вже робив би запит, будуючи посилання з усіх фільтрів, що в масиві.

Типу, ви накляцали - apple, samsung, lenovo, і у вас є відповідний масив

['apple', 'samsung', 'lenovo']

і будуєте з нього посилання

'vsepo20.com.ua/products?apple=true&samsung=true&lenovo=true'

ну а при анчеканні чекбоксів видаляєте фільтри з масиву і знову робите запит, наприклад.

Подякували: leofun011

16

Re: Фільтр товарів інтернет-магазину

Ось результати

пошуку на ютубі , думаю будуть корисні,бо там і js і php.