Сортировка товаров магазина на JavaScript
Вставка
- Опубліковано 22 бер 2019
- Помоги каналу! donatepay.ru/don/webdev
Курс JS: js.itgid.info
Сайт с примером: sort.itgid.info
Плейлист: goo.gl/63osiv
Мои курсы: itgid.info
Телеграм: t.me/jsrules
Сортировка товара в интернет магазине!
Спасибо за уроки.Вы нам очень помогаете 👍👍👍
Они очень полезные для нас👏👏👏
Спасибо!!!
Доступно и интересно ) спасибо 🙏 твои уроки очень сильно помогают )
Пожалуйста! Рад!
Алекс, приветствую! Спасибо огромное за такой урок... Очень хорошая подача, доступно и понятно. Я прям прыгаю от радости =) Лайк, подписка и Ваши курсы тоже заинтересовали... надо будет ознакомиться детально по-свободе. С уважением, Валерия.
Очень круто, работа проделана великолепно, успехов и спасибо)
Спасибо за Ваш труд! Мирного неба!
просто волшебно!больше видео по JS!!
Лайк однозначно :)
Спасибо!
Спасибо за уроки!!Очень познавательно!!!
Отличнейший урок. Спасибо!
Бля чувак ты просто лучший, живи вечно ))) Я прост очень долго думал над тем как это реализовать, и тут натыкаюсь на твой видос ❤❤❤
Ты написал это 3 года назад, ты сейчас уже хакер должно быть???
Спасибо большое! Перерыла интернет, но именно здесь нашла наконец адекватное решение с объяснением, все получилось
Спасибо за урок, очень познавательно и понятно)
Господи, спасибо тебе большое!
Очень информативно, спасибо.
Есть вопрос, можно ли добавить плавности сортировке, возможно анимации, или что-то подобие transition?
Спасибо! Отличный урок
Спасибо огромное, вы очень помогли
Отличное видео ! Спасибо ! Все четко и доступно !
Рад
Спасибо!! Отличный видосик!
Хорошая задача.
Можно поместить кнопки в контейнер, повесить обработчик на него. Каждой кнопке задать data с нужным типом сортировки (или вытаскивать подстроку из id), затем вытаскивать значение data конкретно той кнопки по которой кликнули. и сортировать массив с помощью функции сортировки , в которую передано значение data.
Чтобы менять элементы местами, можно обойтись без функции(хотя она наверное 100% везде работает) и использовать метод arr[j].after(replaceNode));
кроме того, если в первом цикле можно указать i < arr.length - 1;чтобы цикл не проходился по последнему элементу(его собственно и сравнивать то не с чем) + если предпоследний больше, он станет последним и его не нужно проверять.
во втором цикле j = i + 1; таким образом обходов будет на 1 меньше, так как первый раз мы сравниваем arr[0] > arr[0], второй уже arr[0] > arr[1].
Спасибо! Очень доходчиво)
Оговорись в начале) при const содержимое массива или обьекта можно менять) но именно то что внутри него. А вообще ваши видео это в первую очередь обучающие так что как по мне это не важно используете вы let или const
Спасибо!!! МО-ЛО-ДЕЦ!!!
Спасибо, все понравилось.
Большое спасибо!
Хотелось бы увидеть видео где сортировщик и живой поиск вместе.
Оооочень крутой урок!!!!
Отличное видео
Спасибо!
Спасибо большое
Спасибо большое .
Супер! поиск будет с сортировкой? можно еще ссылку на исходники на гитхабе?
Это чистый JS. Скопировать код можно по ссылке sort.itgid.info
Сильная штука.
здорово,просто и доступно, давайте попишем ботов
Добрый день, Андрей. Спасибо за ваш труд!!! Больщая Просьба объяснить вот след кусочек кода.. if(a[ i ] > a[j ] { let temp = a[ i]; a [] =a[j ]; a[ j ] = temp;}
у вас версия gulp наверное обновилась до последней, там нужно код немного переписать в gulpfule
Доброго дня!
Раніше у своїх відеоуроках Ви показували як створити корзину з використанням goods.json та скрипта eshop.js.
Фактично в .html лише голий блок, в який скрипт завантажує дані. Чи можливо їх після завершення завантаження відсортувати, при цьому не змінюючи структури html, eshop.js та goods.json, але підключивши Ваш приклад з цього відео як окремий скрипт? Якщо ні, тоді що саме треба змінити? Адже, по-факту, у самому блоці штмл немає даних. Дякую.
Спасибо !
Алекс, ваши видео про JS лучшие на ютуб. Вместе с чтением документации, они производят для меня паразительный эффект. Спасибо Вам большое.
В интернете нет информации как сделать нормальный свайп слайда на мобильном устройстве. Очень прошу сделать на эту тему видео.
Заранее спасибо.
swiper.js
Я хочу получить его детей, звучит как-то жестоко очень... ахаха на этом моменте выпал 😅😂
Иногда ляпнешь, и думаешь, а поскольку я не монтирую видео, получается прикольно!
Хочу унать, как в es6 можно поменять значение элементов в массиве без промежуточной переменной!
И еще...если в первом цикле i = 0, а во втором цикле j = i, то мы начинаем сравнивать не первый элемент в массиве со вторым, а первый с первым, потому что на первой итерации i-цикла i = 0, и на первой же итерации j-цикла j = i = 0. Чтобы было так, как озвучено в видео нужно во втором цикле написать j = i+1.
es6 деструктуризация, вроде бы так [ a[i], a[j] ] = [ a[j], a[i] ]; , думаю меня поправят если, что не так
@@dukalis55, спасибо, почитаю про деструктуризацию
@@dukalis55 ты прав
Супер! Спасибо за видео!) 👍👍👍
Минус только разрешение 360.
Можно обновить страницу и уже fullHd
@@itgid Это другое дело. Топ 👍👍👍🔥.
Полезно. Сортировка - не самая очевидная вещь
как это сделать через select таким образом, что бы оно и в chrome работало?
Спасибо, очень интересно. Подскажите, а как можно грамотно реализовать сортировку по рейтингу, но при каждом клике на кнопку id="sort-rating" она менялась бы, то от большего к меньшему, то от меньшего к большему.
Я бы кнопке присвоил атрибут, в каком направлении сортировать. При нажатии на кнопку проверял бы атрибут на true или false. А от значения атрибута вызывал бы либо одну функцию, либо другую и переключал атрибут. Там же можно и текст на кнопке менять, либо стрелочку вверх-вниз.
Так какой способ сортировки методом пузырька без промежуточной переменной в ES 6 ?
Дата атрибут можно же получить с помощью dataset например в данном случае получаем dataset.sort
Bravo!!
Как вы указали что именно мониторы с картинкой должны быть первыми в рейтинге?
23:28 когда код заработал без ошибок, телефон на заднем плане пикнул
Спасибо Вам, очень познавательное видео, а как сделать сортировку по бренду , по диагонали монитора?
логика такая же. Т.е. вы должны присвоить определенный data по которому будете осуществлять сортировку. Но заметьте - делать это через базу данных в разы проще.
Скажите пожалуйста актуальна ли эта книга на сегодняшний день - Дэвид Флэнаган "JavaScript. Подробное руководство"?
Актуальна. Это самая информативная книга по теоретическим основам JS. Если совмещать её с learn.javascript.ru и прорешивать задачки в конце каждой главы, всё будет хорошо.
Но я бы не решился читать Подробное руководство. Возьмите "Карманный Справочник" Флэнагана и штудируйте его с learn js, если будет не хватать инфы всегда можно погуглить
a без нажатия кнопки просто по сортировке можно? как делать?
Повторил код полностью у себя на проекте, не работает. Выдает ошибку: 'Uncaught TypeError: Cannot read properties of undefined (reading 'parentNode')'
Дважды смотрел дважды спасибо.
а "J" в "j=i" равен одному с самого начала,тогда как i=0 ?
Ребят а где пример можно скачать?
это получается, что для каждого товара в HTML нужно добавлять атрибут, который равен цене. А если цена изменится? Ну например, если из 1С выгрузили товар с новой ценой, а в HTML атрибут записан со старой цифрой.
Это через php)) Все вопросы к нему !)
Такой вопрос, прошу помочь для знающего js думаю он очень прост. Если открыть сайт пример в IE11 всё хорошо работает, а версии IE10 и ниже, выдаёт такую ошибку. Предполагается наличие ';' sorted_menu.js (12,9)
UPD: поменял везде let на var и на IE10 всё работает =)
@@user-vn5bv1hw2t используйте babel, что бы переводить 6й стандарт в пятый. Тогда можно и стрелочные функции не бояться использовать, а так же let , const и т.д. )
Помогите пожалуйста! Всё работает и сортируется, на той странице где есть кнопки. А на других странциах, в консоли пишется (Uncaught TypeError: Cannot set property 'onclick' of null).
UPD: Проблему решил путем условия.
Захотелось немного повыпендриваться и сделать с помощью метода sort (), но не получается, подскажите как нибудь, пожалуйста, Алекс.
arr.sort((prev, next) => {
return prev - next;
});
Спасибо, все предельно понятно. жаль разрешение слабое - 360, посмотрю подробнее в примере, не проблема. а так - супер!
Обновите страниу. И вуаля fullHD!
Спасибо! сработало! . и еще - можете сотворить видео по квизу со сбором данных , еще там процент скидки как то встраивается. никак не пойму - это типа слайдера - без перезагрузки страницы,? как это вообще работает? пример: paradigma.website/quiz/kovrolin/
@@user-kh7fv5rn1g Посмотрим. Собрать данные не проблема, а что с ними делать дальше? Нужен бекенд.
Спасибо за уроки!У меня есть 2 вопроса:1.Чтобы сделать Магазин обязателен ли cms,php или можно просто всю логику прописывать на js?.2.Каждая страница сайта это новый html файл или нет?(Новичок в этом деле,не судите строго за глупые вопросы).
Нужен php и проще с cms. В принципе, В ТЕОРИИ, можно сделать магазин на фронтэнде (без php, хотя, так не корректно, т.к. на сервере может быть и не php). Но для этого ты должен пользователю отправлять сразу ВЕСЬ МАГАЗИН (все наименования товаров, описания, изображения, отзывы, страницы корзины, контактов и т.п.). А JS уже смотреть, что показывать, а что нет. Честно говоря, хотел бы я посмотреть на такого урода )). И, в принципе, невозможно (хотя, нет ничего невозможного) будет организовать личный кабинет, регистрацию пользователей и сохранение их истории.
Нормальный магазин работает так: все данные о товарах, о категориях, отзывы, контактные данные, данные о зарегистрированных пользователях и прочее хранятся в базе данных. Для этого на сервере работает СУБД. По запросу пользователя php обращается к СУБД, получает данные, с помощью них формирует HTML-страницу, которую в данный момент должен увидеть пользователь, указывает в HTML какие css и js она должна использовать, и отправляет HTML-страницу пользователю. Браузер разбирает HTML, подгружает нужные данные, и отображает страницу пользователю. Когда пользователь совершает действия, по которым нужны новые данные (перешел на страницу товара, нужно описание, отзывы, цена, данные о скидках, и большое фото и прочее) снова делается запрос на сервер, включается php, обращается к СУБД, формирует новую HTML-страницу и отправляет пользователю (может и не страницу, а просто данные, но это уже другая история). Таким же образом организуется доступ к аккаунтам (данные о логине и пароле хранятся в базе данных) и формируются страницы с учётом прав доступа, истории посещений и т.п. (всё хранится в базе данных).
Спасибо большое,глаза открыли)@@simplewebdev1098
@@simplewebdev1098 хороший ответ super
Bakuri Kokhodze я бы не согласился и поспорил с товарищем, который написал этот ответ. Дело в том, что за время, которое прошло с момента написания того комента, я узнал, что есть такая вещь, как React (Angular, Vue). Это, как-раз, билиотеки /фреймворки, которые позволяют сделать магазин (и не только) на фронтэнде на JavaScript-е. А необходимые данные подтягивать при помощи REST-запросов на сервер. И можно авторизацию сделать, разделение прав и всё такое. Конечно, на чистом JS, без использования подобных библиотек/фреймворков, провернуть такое довольно сложно.
Это не сортировка пузырьком, а selection sort. В пузырьковой сортировке сравниваются всё время соседние элементы и меняются местами если надо. В результате элементы как бы всплывают после каждого цикла. Потому и пузырёк называется.
Ты не прав автор видео прав.
Ёмас, анумн патс =)
у меня по убыванию только со второго клика работает, из-за чего это может быть?
Вы записали let j = 0 а надо j = i, а то что со второго клика это не понятно что.
Немного запутался..в "insertAfter(replacedNode, items.children[i]);" ..replacedNode и items.children[i] - это же одно и то же значение?)
Нет. Мы же в replacedNode получаем items.children[j]. Функция replaceChild убирает первый аргумент, ставит вместо него второй, и возвращает первый.
@@simplewebdev1098 Посмотрите здесь developer.mozilla.org/ru/docs/Web/API/Node.replaceChild Они пишут, что второй аргумент идет в replacedNode, т.е. в нашем случае nav.children[i] ("replacedNode замененный элемент. Тоже самое что и oldChild.")
@@firewatermoonsun так и есть. Я всегда думал, что первым аргументом передаётся старый элемент. Странно, нужно внимательно проанализировать код.
@@firewatermoonsun теперь понятно. У нас же nav.children[i] уже новый, после replaceChild.
@@simplewebdev1098 22:40 Значит вы имеете в виду что в [insertAfter(replacedNode, nav.children[i])], nav.children[i] уже новый, а в replacedNode записан старый nav.children[i]? Я просто не вижу, как он может взять новый nav.children[i]...программа же по порядку идет, и не понял на каком этапе сработал [i++] ?
И после появляются сайты, которые жрут ресурсы.
@World Peace Справедливо. Курсы яндекса ответят на ваши вопросы.
я хочу получить его детей))))
var arr = [2,5,6,9,1,3,4,8,7];
var str = arr.sort(sort);
var newArr = [];
function sort(a,b){
if (a > b) {
return 1;
}
if (a < b) {
return -1;
}
}
for (var i =0;i
А не проще использовать sort?
покажи код
Хммммм перешёл на твой сайт , скопировал твой код. Не работает(( Даже ошибок не пишет. Хм... что-то ты нам не договариваешь.
ибо надо немног с js дружить)
метод sort быстрее в десятки раз. проверил на сгенерированном массиве из 10тыс элементов. Ну ,просто поделился
По-моему, у вас не "чистый пузырек". Получается, что цикл проходится по уже отсортированным элементам массива.
Единственное там, похоже j = i + 1, но это просто опечатка. А так, вроде, всё норм.
@@simplewebdev1098 в первом цикле arr.length - 1 нужно
а зачем менять местами блоки если можно отсортировать и перерисовать все одним разом ?
function sort(){
let blocks = $('.item');
let sorted = false;
$('#sortButton').click(function () {
if(sorted) {
blocks.sort((a, b) => b.dataset.price - a.dataset.price);
sorted = false;
}else{
blocks.sort((a, b) => a.dataset.price - b.dataset.price);
sorted = true;
}
$('#items').html(blocks);
})
}
Спасибо большое
Вам отдельное спасибо!