5.5. 商品筛选、排序

商品筛选、排序

电商网站必不可缺的功能就是商品的筛选和排序,接下来我们就要实现这个功能。

首先我们在前端页面加上筛选和排序的组件:

1. 前端组件

resources/views/products/index.blade.php

.
.
.
<div class="card">
  <div class="card-body">
    <!-- 筛选组件开始 -->
    <form action="{{ route('products.index') }}" class="search-form">
      <div class="form-row">
        <div class="col-md-9">
          <div class="form-row">
            <div class="col-auto"><input type="text" class="form-control form-control-sm" name="search" placeholder="搜索"></div>
            <div class="col-auto"><button class="btn btn-primary btn-sm">搜索</button></div>
          </div>
        </div>
        <div class="col-md-3">
          <select name="order" class="form-control form-control-sm float-right">
            <option...

本文章首发在 LearnKu.com 网站上。

为了保证课程的高品质,我们需要对课程进行收费。付费后 才能观看剩余内容。 购买

上一篇 下一篇
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
贡献者:1
讨论数量: 23

Pepsi丶
可以解释一下这里 orWhereHas () 每个参数的意思吗?
1 个点赞 | 7 个回复 | 问答 | 课程版本 5.5
finley
Laravel 中 vue 模板语法的使用问题,求解
1 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
野外的咸章鱼
前端页面突然混乱?
1 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
Neymar
不太理解模糊查询里的闭包,麻烦讲解一下!
0 个点赞 | 5 个回复 | 问答 | 课程版本 5.7
FreeMason
优化判断代码 ?
0 个点赞 | 5 个回复 | 分享 | 课程版本 5.5
bing_
为什么搜出来的结果不是排第一位?
0 个点赞 | 3 个回复 | 分享 | 课程版本 5.8
shenghuo1991
排序中 $m 哪里来的
0 个点赞 | 2 个回复 | 分享 | 课程版本 5.8
wwwj
var filters = {!! JSON_encode ($filters) !!};出现报错的问题?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.8
_杭城浪子
$products = $builder->paginate ();
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
HadesTso
order 排序的时候 选择价格会影响到界面
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
akon
控制器中的商品搜索逻辑是否可以封装到 service 层?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
CodeFarmer
无法保留用户搜索内容
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.7
夏天
use ($like) 大佬可以解释一下这个吗
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.7
战狼1991
搜索产品
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.7
iVerywang
search 模糊查询出错?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
jingzhongwa
模糊查找的索引优化
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
jingzhongwa
代码细节问题 if ($search = $request->input ('search', ''))
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
BV
很遗憾地发现移动端没有调整好?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
有关 order 代码的理解?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5