Afosto Instant Search를 통한 번개처럼 빠른 검색 위젯

웹사이트에서 빠른 검색 기능을 갖추는 것이 중요합니다. 검색 속도가 느리면 UX에 부정적인 영향을 주지만 Google은 이러한 성능 저하에 대해 웹 사이트에 불이익을 줍니다. 그러나 대부분의 솔루션은 가격이 비싸거나 구현하기 어렵습니다. 직접 빌드하기로 선택할 수도 있지만 제대로 만드는 데 시간이 오래 걸리고 여전히 좋은 UI가 필요합니다. 이것이 우리가 Afosto Instant Search Widget을 만든 이유입니다. 그럴 필요가 없습니다.

어떻게 작동하나요?

위젯은 사용할 인덱스 및 필터에 대한 설정이 포함된 Afosto Instant Search 검색 엔진에 연결할 수 있습니다. 모든 것은 Afosto 플랫폼에서 구성할 수 있습니다. 그런 식으로 개발자는 코드를 구현하기만 하면 되고 표시 방법을 변경할 수 있습니다.

'입력할 때 검색' 구성을 사용하거나 'ENTER'를 눌러 검색하도록 선택할 수 있습니다. '입력과 동시에 검색'을 사용하면 입력한 검색어에 대한 결과에 대한 거의 즉각적인 피드백을 받을 수 있습니다. 다음 섹션의 CodePen 또는 당사의 website 에서 사용해 보십시오.

내 사이트에서 어떻게 구현하나요?

먼저 하나 이상의 인덱스가 있는 검색 엔진을 만들어야 합니다. afosto.com의 플랫폼에 가입하고 documentation의 가이드를 따르면 됩니다.

구성된 검색 엔진이 있으면 사이트에서 코드 구현을 시작할 수 있습니다. 프로젝트에 따라 코드에 스크립트를 포함하는 방법에 대한 몇 가지 옵션이 있습니다. Yarn 또는 NPM을 통해 또는 CDN의 스크립트 태그를 통해 설치할 수 있습니다. 이 기사에서는 간단하게 유지하고 CDN 설정을 사용합니다. 사이트 코드에 아래 스크립트를 포함합니다.

<!-- Styles -->
<link href="https://cdn.jsdelivr.net/npm/@afosto/instant-search-widget@latest/dist/afosto-instant-search-widget.min.css" />

<!-- Scripts -->
<script defer src="https://cdn.jsdelivr.net/npm/@afosto/instant-search-widget@latest/dist/afosto-instant-search-widget.min.js"></script>

여기에는 위젯을 초기화하고 렌더링하는 데 필요한 스타일과 스크립트가 포함됩니다. 실제로 초기화하기 위해 초기화 방법으로 스크립트 태그를 추가할 수 있습니다AfostoInstantSearchWidget.init(). 이 방법은 검색 엔진 키를 사용하여 검색 엔진 인덱스에 대한 설정을 가져옵니다.

<script>
  document.addEventListener('DOMContentLoaded', function() {
   AfostoInstantSearchWidget.init('movies-demo');
  });
</script>

이제 위젯을 사용할 준비가 되었으며 사용자가 열기를 기다립니다. 남은 작업은 데이터 속성data-af-instant-search을 버튼, 입력 또는 트리거로 사용하기로 선택한 항목에 추가하는 것입니다.

<button data-af-instant-search>Search</button>

그게 전부입니다! 아래의 CodePen을 예로 사용하여 빠른 검색 속도를 확인할 수 있습니다.

멋지네요. 하지만 디자인을 맞춤설정하고 싶습니다.

CSS를 사용하여 위젯의 스타일과 레이아웃을 자유롭게 사용자 정의할 수 있습니다. 색상의 경우 CSS 사용자 지정 속성을 사용합니다. 예를 들어 기본적으로 파란색인 기본 색상을 변경하려면 --af-is-primary-500를 원하는 색상으로 설정하면 됩니다. 아래 예에서는 회색 값을 뒤집어 어두운 모드처럼 보이게 하고 기본 색상 스케일을 빨간색으로 만들었습니다. 레이아웃도 약간 변경했습니다. 레이아웃에 CSS 그리드를 사용했기 때문에 구성 요소를 재정렬할 수 있습니다. 아래 예에는 전체 높이 필터 사이드바가 있으며 페이지 구성 요소당 페이지 매김 및 항목이 이제 결과 위에 있습니다.



이는 사용자 정의할 수 있는 항목의 예일 뿐입니다. 클래스 또는 기타 선택기를 사용하여 원하는 모든 것을 사용자 지정하고 고유한 테마를 만들 수 있습니다.

빠른 검색을 원하지만 나만의 UI

검색 속도가 마음에 들지만 자체 구현을 원하십니까? 우리는 당신을 덮었습니다! 내부적으로 위젯은 Instant Search Client을 사용하여 모든 요청과 기능을 처리합니다. 이 클라이언트를 사용하여 자체 솔루션을 구축하거나 예를 들어 instantsearch.js 또는 react-instantsearch-dom에 연결할 수 있습니다. 이 패키지를 사용하면 Afosto Instant Search에 연결된 고유한 UI를 만들 수 있습니다. 웹사이트에서 demo을 살펴보거나 아래의 CodePen을 예로 사용하십시오.

의견을 알려주세요.

검색 위젯에 대해 어떻게 생각하시는지 궁금합니다. 의견을 남기거나 GitHub 자세한 내용을 확인하거나 문제를 보고하십시오.

website ~ register your Afosto account을 확인하고 다른 앱도 살펴보세요. 실시간 이미지 최적화 플랫폼인 Quicq이 마음에 드실 수 있습니다.