Фильтр продукции на Javascript

S4
На сайте с 13.10.2008
Offline
72
3158

Задачка такая стоит.

На сайте есть прайс с продукцией. Нужно отфильтровать ее при нажатии на кнопочку. Скажем, в прайсе смартфоны: нажимаешь "самсунг" и остаются только самсунги, нажимаешь "все" - и все возвращаются в отображение.

Если кто решал подобные задачи, можете мне абстрактно объяснить суть скрипта?

Что сейчас в моей голове.

Пропишу в атрибут каждого div'а (скажем name), который буду скрывать при нажатии кнопки, двоичное число, где каждый знак означает какую-либо категорию. При нажатии кнопки запускаю функцию сравнивающую соответствующие циферки и оставляющие/делающие видимыми те продукты, которые подходят по категории. А еще мне надо, чтобы можно пройти было по ссылке и сразу увидеть результат работы фильтра. Это я хочу сделать через якори (site.ru/smartfon#samsung).

Может быть все можно проще сделать?

D
На сайте с 14.01.2007
Offline
153
#1
Svetle4ok:
Может быть все можно проще сделать?

не думаю. вы описали нормальный вариант

IL
На сайте с 20.04.2007
Offline
435
#2

А как быть в ситуации с постраничной разбивкой? Ну т.е. всего в категории 23 элемента, на странице выводится 10, отфильтровали всех самсунгов - осталось 3 самсунга с этой страницы.. а оставшиеся 7 со 2 и 3 й страницы не подгрузились.

Или предполагается все 100500 смартфонов вываливать на 1 страницу?

Svetle4ok:
Может быть все можно проще сделать?

Привязка URL к набору параметров (samsung/android => manufacturer=samsung&os=android)

Обновление "по ходу" как вариант - Ajax + куча параметров (см Я.маркет, например)

Ну и ссылки вида #samsung (а также #!samsung и т.д.) имхо, хуже с точки зрения ПС (дискутировать на тему индексации этого добра не призываю)

... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
C
На сайте с 04.02.2005
Offline
291
#3

Правильно мыслишь, неправильно реализуешь

1. Можно, конечно фильтровать на странице, но тогда нужно получать весь список

Можно отправлять аякс запрос сформированный фильтр

Ссылку на фильтр

вот пример

http://balupton.github.io/jquery-history/demo/

дани мапов
На сайте с 06.09.2012
Offline
204
#4

Фильтрацию на js можно делать, если товаров и параметров фильтрации мало. Обычно же на ajax такое делают.

Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)
S4
На сайте с 13.10.2008
Offline
72
#5
ivan-lev:
Или предполагается все 100500 смартфонов вываливать на 1 страницу?

Об этом не подумал, но наверно да, так как портянка уже соткана, а фильтр как бы будет бороться с чрезмерной длиной страницы.

ivan-lev:

Привязка URL к набору параметров (samsung/android => manufacturer=samsung&os=android)
Обновление "по ходу" как вариант - Ajax + куча параметров (см Я.маркет, например)

Вот не силен в php, а вообще идея с якорями самому не нравится. Ссылки потом на них будут идти какие-то... не фэн-шуйные...

А что если сделать что-то типа такого site.ru/samsung.php, а с него редирект на site.ru/smartfon#samsung ? Или это вообще поворот не туда. Сам не пойму, зачем мне это :) Параметры, кстати, не нужны. Только категории товаров. Потому как я борюсь лишь с длиной портянки и скоростью загрузки. Один раз загрузил и уже работает мгновенно. И еще один нюанс: некоторые позиции должны появляться во всех категориях. Поэтому смартфоны немного путающий пример.

---------- Добавлено 10.12.2013 в 14:15 ----------

Chukcha:
Правильно мыслишь, неправильно реализуешь

1. Можно, конечно фильтровать на странице, но тогда нужно получать весь список

Можно отправлять аякс запрос сформированный фильтр

Ссылку на фильтр

вот пример
http://balupton.github.io/jquery-history/demo/

Из-за того, что у меня длинные пробелы в знаниях Ajax и PHP, то я задачи не так решаю. А вообще, учитывая, что моя страница изначально загружает весь прайс, то наверно лишний запрос к серверу в момент фильтрации только увеличит время ответа страницы.

Буду благодарен, если поделитесь мануалами или ресурсами, помогающими слабому специалисту перейти с JavaScript на Ajax.

C
На сайте с 04.02.2005
Offline
291
#6
помогающими слабому специалисту перейти с JavaScript на Ajax.

Усмехнулся

AJAX = асинхронный JavaScript и XML

Т.е. это всего лишь технология.

IL
На сайте с 20.04.2007
Offline
435
#7
Chukcha:
всего лишь технология.

Вообще, "всего лишь" и "технология" не совсем удачно сочетаются.

Но в любом случае, для AJAX-реализации ответ на стороне сервера должен формироваться, поэтому минимальные знания чего-нибудь серверного всё-таки потребуются.

Svetle4ok:
Вот не силен в php, а вообще идея с якорями самому не нравится. Ссылки потом на них будут идти какие-то... не фэн-шуйные...

Ну, я как бы сантехник, а не повар.. но счас попробую чего-нибудь испечь :D

Вообще, имеет смысл "плясать" от задачи - если "красивые" (SEO+ЧПУ.. в конце концов, просто "полноценные") УРЛ-ы не требуются - можно, конечно, обойтись якорями. Однако, если в перспективе возникнет желание "покрутить внутряки" - придётся перепиливать. Ну и собственно страниц при такой реализации мало будет (по сути одна каталожная, вместо полноценных категорий/подкатегорий/производителей и тд)

А уж решать задачу самому (с попутным освоением материала), или привлекать кого в помощь - решение стратегическое.

S4
На сайте с 13.10.2008
Offline
72
#8
ivan-lev:
Ну, я как бы сантехник, а не повар.. но счас попробую чего-нибудь испечь :D

Если б не этот принцип, то работа была бы ужас какой рутинной. Вообще у меня есть выполненные задачи подобного рода и брался я за них, не зная JavaScript.

Теперь, когда я знаю, что можно сделать лучше (SEO+ЧПУ), то не могу заниматься просто якорями.

Что в моей голове сейчас.

PHP с моей точки зрения моей задачи отождествить с Javascript (не будем спорить о возможности языков) - вся разница в процессорах, которые выполняют скрипт: у хостера или у клиента. Т.е. я осуществляю фильтрацию продукции средствами PHP. Я напишу скрипт фильтра на странице site.ru/smartfon.php

Но у меня вопрос, как запустить скрипт этой страницы, если будет введен адрес site.ru/samsung.php ?

Одна из идей (скорее всего дурацкая): я создаю для каждой категории страницу: samsung.php, htc.php, внутри них инклюдю smartfon.php и работаю с его DOM'ом.

У меня все на сайте самописное. Никаких движков, фреймворков не использовалось.

IL
На сайте с 20.04.2007
Offline
435
#9
Вообще у меня есть выполненные задачи подобного рода и брался я за них, не зная JavaScript.

эм, согласен.. Я не совсем это имел ввиду.. Выбирать инструмент имеет смысл исходя из задачи, а не пытаться "подрулить" задачу под имеющийся инструмент.

Svetle4ok:
Вообще у меня есть выполненные задачи подобного рода и брался я за них, не зная JavaScript.

А осваивать новые инструменты,технологии или нет - решать только Вам (ну т.е. заплатить xx$ за разовое решение задачи или освоить /сделать первые шаги в освоении/ язык,технологию, с возможностью дальнейшего применения...)

Svetle4ok:
Но у меня вопрос, как запустить скрипт этой страницы, если будет введен адрес site.ru/samsung.php ?

RewriteRule в помощь...

Вообще, статьи о простейшей организации ЧПУ укладываются в 2 строчки:

#.htaccess
RewriteEngine on
RewriteBase /
RewriteRule .* info.php[L]

<?php // info.php
echo $_SERVER['REQUEST_URI'];

p.s. Уверен, у Вас получится :)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий