[ВАЖНО - Читай описание] Vue.js. Фильтрация товаров по цене через ползунки (range slider)
ฝัง
- เผยแพร่เมื่อ 26 ก.ย. 2024
- --------------------------------------------------------------------------------------------------------------------------------------------------------
ВАЖНО - Видео на этом канале 3х летней давности и большинство уже НЕАКТУАЛЬНЫЕ в силу изменения синтаксиса, методов и подходов во Vue.js версии 3. Все видео были записаны на Vue.js версии 2. Много чего уже просто НЕ БУДЕТ РАБОТАТЬ или выдаст ошибки.
Новый канал на актуальном стеке Vue.js v3, Pinia, Vue router@next, Ionic (мобильные приложения), FireBase (база данных, аутентификация и тд) - / @intothecoding
НО! Новый канал ведется на АНГЛИЙСКОМ ЯЗЫКЕ - так что у вас есть уникальная возможность научиться кодить и подтянуть язык - так как Английский нужен всегда!
Жду вас на новом канале!
--------------------------------------------------------------------------------------------------------------------------------------------------------
В этом видео создадим фильтрацию товаров в каталоге, используя input type="range" или "ползунки"
Урок по select'у: • [ВАЖНО - Читай описани...
Создание интернет-магазина на Vue: • [ВАЖНО - Читай описани...
Приятного просмотра! Не забудьте подписаться :)
![[ВАЖНО - Читай описание] Vue.js компонент всплывающее модальное окно используя SLOT и $REFS](http://i.ytimg.com/vi/QWovG8nVbnA/mqdefault.jpg)
![[ВАЖНО - Читай описание] Vue.js компонент всплывающее модальное окно используя SLOT и $REFS](/img/tr.png)
![[ВАЖНО - Читай описание] Почему вы просто обязаны использовать VUEX в своем приложении!](/img/n.gif)
Пару моментов использовал в ангуляре.Большое спс!!!
Спасибо за урок, в конце маленькая опечатка по сортировке выбранной категории, фильтрация происходит а текст в поле не меняется, this.selected = category.name;
Спасибо за отличные видео!
Т.к. это формат видеоуроков, то советую сразу приучать народ к использованию prettier, и он сам будет подсказывать как красиво оформлять код при разработке.
Victor Cozhuhari спасибо:) у меня просто в ide по умолчанию комбинация ctrl+alt+L форматирует код по красоте. Но вы правы. Я пожалуй сделаю урок по настройке рабочего окружения.
@@gofrontend2220 Я просто помню, какой говнокод я писал без prettier, и потом даже самому было тяжело в этом разбираться. И помню, как меня prettier раздражал первое время. Хотелось снести его и забыть как страшный сон. Но потом начинаешь понимать, что это очень полезный инструмент, когда код разрастается. Это как гигиена - кажется ребенку ненужной, излишней и раздражающей до первого пищевого отравления )))
Victor Cozhuhari учту спасибо за совет:) главное потом без всех этих плагинов тоже не начать говнокодить:) ведь уже никто не поправит)
@@gofrontend2220 Согласен, но привыкнув к тому виду кода, который генерируют эти плагины, потом сам автоматом будешь придерживаться этого стиля. А вот в самом начале пути программиста даже и не подозреваешь о существовании этих стандартов, пишешь как придётся, а тут тебе сразу показывают, как лучше, и ты такой: "О! Точно! А я не догадался!"
Victor Cozhuhari согласен:)
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
в общем понятно, спасибо!
хотелось бы сделать не пересекающиеся ползунки, получилось так _@mousemove="doNotCrosRange"_
_doNotCrosRange() {
if(this.minPrice + this.step >= this.maxPrice) {
//шаг вынесен в data()
let tmpMin = this.minPrice;
let tmpMax = this.maxPrice;
this.maxPrice = tmpMin + this.step
//в атрибутах уже учтён этот шаг, чтобы не уйти за границу max и не спуститься в минус
this.minPrice = tmpMax - this.step
}
}_ но они толкают друг друга, а если передавать им max и min то сам range начинает гулять. Как блокировать движение ползунка, если другим уже определена граница?
Здравствуйте. А есть ли информация,как сделать фильтр по checkbox?
Спасибо большое за урок. Почти все работает. Только еще нашел в конце урока, что в select так и остается он на 'Все' и не меняется при выборе на 'мужские ' или 'женские' (то есть фильтрация на мужские и женские работает, товары фильтруются, но сам select остается в положении 'Все'). Казалось бы это должна была решить строка vm.selected === category.name , которая добавлялась после 11:30 на временной шкале, но нет, все равно не работало. Перелопатил весь код в этом файле, все запятые скобки и т.д, - ничего. Потом когда вернулся к тому моменту, когда мы удаляли все данные из функции sortByCategories() заметил, что мы в той предыдущей версии функции писали this.selected = category.name (c обычным присваиванием ''=' а не через строгое равенство '==='). И таким образом заменив на 12й минуте строку vm.selected === category.name на строку vm.selected = category.name у меня select начал переключать на "мужские" и "женские " значения. @UC-NllVkhmcweguxSKzb7Y3g тоже об этом написал в коментах, но он не уточнил, что нужно написать именно vm.selected = category.name. И того вся рабочая функция выглядит вот так:
sortByCategories(category){
let vm = this;
this.sortedProducts = [...this.PRODUCTS]
this.sortedProducts = this.sortedProducts.filter(function(item){
return item.price >= vm.minPrice && item.price
ALEXANDERXP спасибо за комментарий:) все верно, упустил этот момент
Господи, чел, какой же ты зануда, прости)
Чел сверху написал достаточно, чтобы понимающий чел в полвзгляда понял, о чём речь.
А ты написал для людей копирайтеров, которые вообще не в курсе, что происходит)
Конечно, лучше твой комментарий, чем без него, тк, наверное есть люди, кто без понятия смысла это смотрят, но всё же...)
получается, что мы сначала должны отфильтровать по цене, а потом по категории и если снова двинем ползунок он нам отфильтрует опять по всем категориям, а не по той которую уже выбрали. Хотелось бы с фильтрами разобраться подробнее, чтобы можно было добавлять их разное количество и они на ходу работали учитывая выбор в других инпутах. Можно видео или ссылку или что искать?
Garik Gelios да возможно какие-то моменты я не учел. Категории видимо меняют исходные данные. Надо из тоже подвязать на отфильтрованные
Да, тоже заметил. Сначала фильтрует по цене, потом по категории. Если фильтровать по категории а потом по цене - все сбивается
@@gofrontend2220 а вы не могли бы записать дополнительное видео и прояснить этот момент?
Может кому поможет. Кажется рабочий вариант. Все изменения нужно сделать в v-catalog.vue.
Меняем соответствующий код из урока на:
1) filteredProducts() {
if (this.sortedProducts.length) {
return this.sortedProducts
}
else {
return []
}
}
2) sortByCategories(category) {
this.sortedProducts = [...this.PRODUCTS];
if(category) {
this.selected = category.name;
}
this.sortedProducts = this.sortedProducts.filter(item => {
return item.price >= this.minPrice && item.price {
return product.category === this.selected;
})
}
}
Если код всё-таки не рабочий, скажите об этом пожалуйста!
(на 3й минуте 48 секунд) На Windows данные стили так не работают, ползунки налазят прямо на select (на выпадающий список выбора мужских и женских товаров.) И добавление стилей для фильтров .filters {display: flex; justify-content: space-between; align-items: center; } вообще никак не помогают и абсолютно ничего не меняют. Пробовал в разных браузерах: Opera, Chromium и даже IE11 - никакой разницы. Копировал стили напрямую с вашего github с файла v-catalog.vue - тоже без результатов.
То есть при добавлении этих стилей вообще ползунки остаются квадратными (а не круглыми как в видео), не добавляются тени. А единственное, что меняется, это что ползунки перемещаются один под другим и начинают налазить прямо на выпадающее меню select. ( это происходит только при добавлении стилей, если их не добавлять, то не налазит ). Проблему решил использованием других стилей. Подробно описал их в ответах ниже
1. (читать по пунктам 1.2.3.)Как мне удалось узнать, данная стилизация ползунка из видео присуща именно в Mac Chrome 38 (и думаю более поздних версиях). Чтобы нормально работали стили в Windows достаточно написать следующие (но ползунок и полоска будет стилизована по стандартам Windows) :
.range-slider input[type=range] {
position: absolute;
left: 65%;
top: 180px;
}
::-webkit-slider-thumb {
z-index: 2;
position: relative;
top: 2px;
margin-top: -7px;
}
2. (читать по пунктам 1.2.3.) Если вам нужна стилизация ползунков и полоски как в видео (Mac Chrome 38) то дописываете еще и такие стили:
input[type=range]{
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1.5px solid #C1C1C1;
height: 16px;
width: 16px;
border-radius: 50%;
background: #EDEDED;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
box-shadow: 1px 1px 1px #C6C6C6, 0px 0px 1px #787878;
border-radius: 2px;
border: 0.2px solid #787878;
}
3. (читать по пунктам 1.2.3.) И того. Чтобы вы не запутались (чтоб в Windows было как в этом видео) , то полностью в файле v-catalog.vue все стили выглядят вот так:
.v-catalog {
&__list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
&__link_to_cart {
position: fixed;
top: 10px;
right: 10px;
padding: $padding*2;
border: solid 1px #aeaeae ;
background: #ffffff;
}
}
.range-slider input[type=range] {
position: absolute;
left: 65%;
top: 180px;
}
::-webkit-slider-thumb {
z-index: 2;
position: relative;
top: 2px;
margin-top: -7px;
}
input[type=range]{
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1.5px solid #C1C1C1;
height: 16px;
width: 16px;
border-radius: 50%;
background: #EDEDED;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
box-shadow: 1px 1px 1px #C6C6C6, 0px 0px 1px #787878;
border-radius: 2px;
border: 0.2px solid #787878;
}
@@АлександрБорюшин Красава, то что нужно!
@@АлександрБорюшин Спасиб бро!
Залейте исходники в git пожалуйста
Отличный урок, все работает, только у меня список в селекте почему-то все время открыт, нашел причину:
Это последствия предыдущего урока, где про бургер-меню было (как оно может быть устроено). Чтобы работал селект как и раньше, до того урока, нужно перелопатить файл v-catalog.vue . 1. Удалить из тега :isExpended="IS_DESKTOP" 2. из computed: {} удалить 'IS_MOBILE' , 'IS_DESKTOP' (все остальное в остальных файлах можно и оставить пока, оно не особо мешает работе приложения)
@@АлександрБорюшин Достаточно :isExpended="IS_DESKTOP" удалить. КОмпьютед пусть висит. Учебное же приложение
@@fessan8918 как вам угодно)