Searching Products in the admin Route
Let's add the product search functionality in the admin route.
We'll cover the following...
We can insert the search product functionality in the admin route. We need to add a search bar in the template, and then we can search our products based on the searched filter.
Adding a search bar
To search the product in the admin route, we need to add a search bar to the admin route and set up the admin controller. In the code below, let’s add the search bar in app/templates/admin.hbs:
Press + to interact
{{!-- app/templates/admin.hbs --}}{{!-- app/templates/admin.hbs --}}{{page-title "Admin"}}<br>{{!-- Create product div--}}<div class="row"><div class="col-4 add_edit"><LinkTo class='btn btn-success' @route="admin.add" >Add Product</LinkTo>{{!-- <LinkTo class='btn btn-success' @route="admin.edit" @model="123">Edit</LinkTo> --}}<hr>{{outlet}}</div><div class="col-8 products">{{!-- search div --}}<div class="row"><div class="col-md-8"><form class="form-inline"><div class="form-group" style="display: inline-block;">{{input type="text" class="form-control" value=filter id="search" placeholder="Search Products..."}}</div><div style="display: inline-block;"><button type="submit" {{action 'search'}} class="btn btn-primary">Search</button></div></form></div>{{!-- search div end --}}{{!-- product div --}}<div class="row">{{#each @model as |item|}}<div class="col-lg-4 col-md-6 col-sm-6 col-12"><br><AdminProduct @source={{item.imglink}} @title={{item.product_title}} @desc={{item.desc}} @price={{item.price}} @route="admin.edit" @model={{item.id}}></AdminProduct></div>{{/each}}</div>{{!-- product div end--}}</div></div>
- Lines 20–34: We create a
rowdivand add a search bar with a button.-
...
-