diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Filter.js | 31 | ||||
| -rw-r--r-- | src/pages/api/shop/search.js | 5 | ||||
| -rw-r--r-- | src/pages/shop/brands/[slug].js | 8 | ||||
| -rw-r--r-- | src/pages/shop/product/[slug].js | 2 | ||||
| -rw-r--r-- | src/pages/shop/search.js | 8 |
5 files changed, 29 insertions, 25 deletions
diff --git a/src/components/Filter.js b/src/components/Filter.js index d2a5bf1b..4727fb9d 100644 --- a/src/components/Filter.js +++ b/src/components/Filter.js @@ -29,8 +29,8 @@ const Filter = ({ let filterRoutePrefix = '?'; if (selectedBrand) filterRoute.push(`brand=${selectedBrand}`); if (selectedCategory) filterRoute.push(`category=${selectedCategory}`); - if (priceFrom > 0) filterRoute.push(`price_from=${priceFrom}`); - if (priceTo > 0) filterRoute.push(`price_to=${priceTo}`); + if (priceFrom) filterRoute.push(`price_from=${priceFrom}`); + if (priceTo) filterRoute.push(`price_to=${priceTo}`); if (orderBy) filterRoute.push(`order_by=${orderBy}`); if (defaultRoute.includes('?')) filterRoutePrefix = '&'; @@ -70,8 +70,8 @@ const Filter = ({ const reset = () => { setSelectedBrand(''); setSelectedCategory(''); - setPriceFrom(0); - setPriceTo(0); + setPriceFrom(''); + setPriceTo(''); setOrderBy(''); } @@ -92,13 +92,19 @@ const Filter = ({ </button> </div> <form className="flex flex-col gap-y-4" onSubmit={submit}> + {selectedBrand || selectedCategory || priceFrom || priceTo || orderBy ? ( + <button type="button" className="text-yellow-900 font-semibold ml-auto" onClick={reset}> + Reset Filter + </button> + ) : ''} {!disableFilter.includes('orderBy') ? ( <div> <label>Urutkan</label> - <div className="flex flex-wrap gap-2 mt-2"> - <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800" + (orderBy == 'price-asc' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('price-asc')}>Harga Terendah</button> - <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800" + (orderBy == 'price-desc' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('price-desc')}>Harga Tertinggi</button> - <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800" + (orderBy == 'popular' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('popular')}>Populer</button> + <div className="flex gap-2 mt-2 overflow-x-auto w-full"> + <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800 flex-shrink-0" + (orderBy == 'price-asc' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('price-asc')}>Harga Terendah</button> + <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800 flex-shrink-0" + (orderBy == 'price-desc' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('price-desc')}>Harga Tertinggi</button> + <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800 flex-shrink-0" + (orderBy == 'popular' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('popular')}>Populer</button> + <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800 flex-shrink-0" + (orderBy == 'stock' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('stock')}>Ready Stock</button> </div> </div> ) : ''} @@ -128,20 +134,15 @@ const Filter = ({ <div> <label>Harga</label> <div className="flex gap-x-4 mt-2 items-center"> - <input className="form-input" value={priceFrom} onChange={(e) => setPriceFrom(e.target.value)}/> + <input className="form-input" type="number" placeholder="Dari" value={priceFrom} onChange={(e) => setPriceFrom(e.target.value)}/> <span>—</span> - <input className="form-input" value={priceTo} onChange={(e) => setPriceTo(e.target.value)}/> + <input className="form-input" type="number" placeholder="Sampai" value={priceTo} onChange={(e) => setPriceTo(e.target.value)}/> </div> </div> ) : ''} <button type="submit" className="btn-yellow font-semibold mt-2 w-full"> Terapkan Filter </button> - {selectedBrand || selectedCategory || priceFrom > 0 || priceTo > 0 || orderBy ? ( - <button type="button" className="btn-light font-semibold w-full" onClick={reset}> - Reset Filter - </button> - ) : ''} </form> </div> ) diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js index 2d26205d..ad986c86 100644 --- a/src/pages/api/shop/search.js +++ b/src/pages/api/shop/search.js @@ -59,6 +59,9 @@ export default async function handler(req, res) { case 'popular': paramOrderBy = ', search_rank DESC'; break; + case 'stock': + paramOrderBy = ', stock_total DESC'; + break; } let limit = 30; @@ -74,7 +77,7 @@ export default async function handler(req, res) { `start=${offset}`, `rows=${limit}`, `sort=product_rating DESC ${paramOrderBy}`, - `fq=price_discount:[${price_from == 0 ? '*' : price_from} TO ${price_to == 0 ? '*' : price_to}]` + `fq=price_discount:[${price_from == '' ? '*' : price_from} TO ${price_to == '' ? '*' : price_to}]` ]; if (brand) parameter.push(`fq=brand:${brand}`); diff --git a/src/pages/shop/brands/[slug].js b/src/pages/shop/brands/[slug].js index b532e7a7..c0524207 100644 --- a/src/pages/shop/brands/[slug].js +++ b/src/pages/shop/brands/[slug].js @@ -13,8 +13,8 @@ export async function getServerSideProps(context) { slug, page = 1, category = '', - price_from = '0', - price_to = '0', + price_from = '', + price_to = '', order_by = '', } = context.query; @@ -62,8 +62,8 @@ export default function BrandDetail({ const route = () => { let route = `/shop/brands/${slug}`; if (category) route += `&category=${category}`; - if (price_from > 0) route += `&price_from=${price_from}`; - if (price_to > 0) route += `&price_to=${price_to}`; + if (price_from) route += `&price_from=${price_from}`; + if (price_to) route += `&price_to=${price_to}`; if (order_by) route += `&order_by=${order_by}`; return route; } diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js index dd554660..1ef693c0 100644 --- a/src/pages/shop/product/[slug].js +++ b/src/pages/shop/product/[slug].js @@ -165,7 +165,7 @@ export default function ProductDetail({ product }) { </div> <div className="mt-10"> - <h2 className="h1 mb-4">Produk Lainnya</h2> + <h2 className="font-bold mb-4">Produk Lainnya</h2> <ProductSlider products={similarProducts}/> </div> </div> diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js index 2ae3cca4..e365fcf5 100644 --- a/src/pages/shop/search.js +++ b/src/pages/shop/search.js @@ -13,8 +13,8 @@ export async function getServerSideProps(context) { page = 1, brand = '', category = '', - price_from = '0', - price_to = '0', + price_from = '', + price_to = '', order_by = '', } = context.query; @@ -53,8 +53,8 @@ export default function ShopSearch({ let route = `/shop/search?q=${q}`; if (brand) route += `&brand=${brand}`; if (category) route += `&category=${category}`; - if (price_from > 0) route += `&price_from=${price_from}`; - if (price_to > 0) route += `&price_to=${price_to}`; + if (price_from) route += `&price_from=${price_from}`; + if (price_to) route += `&price_to=${price_to}`; if (order_by) route += `&order_by=${order_by}`; return route; } |