Laravel 9 и Vue 3 SPA интернет магазин 21. Пагинация vue на странице с продуктами
HTML-код
- Опубликовано: 10 сен 2024
- Стань спонсором(бусти аккаунт), доступ к собеседованиям:
boosty.to/lara...
Мои платные курсы:
laravelcreativ...
План развития с нуля до middle+:
laravelcreativ...
Группа вк:
laravel...
- Урок по фильтру:
• Laravel курс с нуля, б...
Делаем бек для пагинации(реквест и добавляем метод пагинации)
Добавляем пагинацию во vue
Отображаем все страницы
Прописываем условия для стрелочек
Добавляем метод выбора страниц
Прописываем условия, чтобы прятать страницы
Добавляем троеточие
Смотрю в три часа ночи. Спасибо за уроки. Очень заходит манера подачи материала.
Пишу диплом. Спасибо за уроки!
Уроки прохожу и спасибо огромное за то что делаешь. Обязательно продолжай!!!
смотрим смотрим! Просто от увлеченности забываешь и лайкнуть и комментнуть
Смотрю в 2023, пока еще актуально
Услышал в видео и пишу) делаю уроки, весьма геморно было задание из прошлого урока на сортировку, которая сбоку, ибо из-за плагинов на джиквери почему-то в дату не заполнялось то что нужно и соответственно не мог отправить на бек, а догнал я не сразу в чем дело, сносил найс-селекты и все заработало, на беке добавил несколько ветвлений по типу:
if($value == 'big') {
$value = 'price';
$builder->orderBy($value, 'desc');
}
Привет) у тебя получилось сделать сортировку? Если да то можешь показать код, я вообще чёт не могу понять как ее сделать.
А зачем делать сортировку на бэке?
@@BookwormYevgen потому что на странице товаров не одна страница товаров, а может быть и 10 и 50 (страниц с товарами, не товаров) и если делать сортировку на фронтенде то вы сортируете только по сути товары из этой одной конкретной страницы, что не правильно. Если это делать на сервере то вы сортируете все товары.
@@antohagobet4451
Вот, не весь код, но много :
/* /app/Http/Requests/API/Product/IndexRequest.php */
public function rules() {
return [
//...
'order' => ['nullable', 'string'],
];
}
/* /app/Http/Filters/ProductFilter.php */
const ORDER = 'order';
protected function getCallbacks() {
$callbacks = [
//...
self::ORDER => [$this, 'order'],
];
return $callbacks;
}
protected function order(Builder $builder, $value) {
$acceptedFields = ['title', 'price'];
$acceptedSorts = ['asc', 'desc'];
[$fieldName, $sortOrder] = explode('|', $value, 2);
if (in_array($fieldName, $acceptedFields) && in_array(strToLower($sortOrder), $acceptedSorts)) {
$builder->orderBy($fieldName, $sortOrder);
}
}
/* /src/views/product/Index.vue */
Alphabetically, A-Z
Alphabetically, Z-A
Price, low to high
Price, high to low
Отличные уроки. Проходим.
Мужик, отличные видео! Сегодня тебя нашел, ты красавчик
Очень хорошо что с нуля все показываете. Новичку очень полезно понимать как все работает. Ps. Я для пагинации во vue сторонний плагин использую для сокращения времени разработки.
Понял! Комментирую...
Благодарю за урок!
Благодарю!)
ждем интересного. заказ, баланс, остатки, оплата, статусы, оповещения, личный кабинет, роли юзеров и доступ, редактирование/отмена заказа. +мб. очереди, транзакции
двойная стрелка > на самую последнюю. Удобно если пагинации без отображения первой и последней >
FIRST < 2 3 [4] 5 6 > LAST
First
{{ link.label }}
Last
Класс, спасибо нашел ответ на свой вопрос.
Оч крутая подача материала
Подскажите, как добавить параметра по типу ?page=1 в строку браузера?
Вы делаете сайты на заказ? И куда можно написать?
Насчёт домашнего задания, затык на извлечении value из select/option через vue..
там нужно jquery плагин отключить $("select").niceSelect(); в main.js, которые делает красивый селект и все будет работать, я так делал
Alphabetically, A-Z
Alphabetically, Z-A
Price, low to high
Price, high to low
Date, old to new
А можешь полностью скинуть как ты делал, потому что я вообще не могу включиться никак@@sv2109
Троеточие пренесёт вас в бездну 🤣🤣🤣
Что-то оч. много условий внутри пагинации получилось, можно сделать проще, у меня так
{{ link.label }}
...
Можно реализовать кнопку показать ещё, передавая в paginate(): + meta.per_page