SearchBox Component

Bài viết này chia sẻ về cách làm khung search danh sách sản phẩm.

Khi hiển thị search box ở màn hình category list, bọn mình sử dụng component SearchBar có sẵn trong ZMA để hiển thị :v, tuy nhiên bọn minh sẽ tự cài đặt phần xử lý event khi click vào thanh search này. Bạn cũng có thể sự dụng luôn phần handle event mà ZMA support cho component này. Chi tiết tham khảo ở link này:

Về phần bọn mình, khi click vào thanh search, app sẽ mở một sheet modal dưới dạng 1 trang để người dùng có thể thay đổi search filter. Sheet Modal cũng là 1 component được ZMA support mà bạn có thể tham khảo chi tiết những properties của nó ở đây

Đối với component search-box, sẽ được cài đặt ở dạng form, và sử dụng react-hook-form để bắt những dữ liệu ở các ô filter. Bạn có thể tham khảo đoạn mã sau:

<form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="keyword"
        control={control}
        render={({ field }) => (
          <Searchbar
            {...field}
            disableButtonText="Cancel"
            placeholder="Từ khóa"
            clearButton={true}
          />
        )}
      />
      <Select
        {...register("subCategory")}
        label="Danh mục sản phẩm"
        option={subCategoriesList}
      />
      <Title>Khoảng Giá</Title>
      <Select
        {...register("condition")}
        label="Tình trạng sản phẩm"
        option={["Đã qua sử dụng", "Còn mới", "Còn bảo hành"]}
      />
      <Select
        {...register("city")}
        label="Tỉnh/Thành phố"
        onChange={handleChangeDistrictList}
        option={getCities()}
      />
      <Select
        {...register("district")}
        label="Quận/Huyện"
        option={districtOptions}
      />
      <Button type="submit" typeName="primary" large responsive>
        Tìm kiếm
      </Button>
    </form>

Sau khi người dùng thay đổi những filter để tìm kiêm bài đăng theo mong muốn và nhân vào nút tìm kiếm, sheet modal sẽ được đóng và trở lại trang category list với danh sách các bài đăng được thay đổi tương ứng vói danh sách mà api search trả về.

Phần cài đặt đầy đủ của component search-box có thể xem tại đây.

Tham khảo