Вот 5 причин добавить поиск по сайту на ваш сайт

Динамические веб-страницы с большим количеством контента обычно сложны для навигации пользователей в поисках конкретных данных. На таких сайтах используется поиск на сайте (также называемый внутренним поиском), который использует строку поиска для возврата результатов поискового запроса, сделанного пользователем. Эта простая реализация обеспечивает релевантный контент, соответствующий потребностям пользователей, экономя время и усилия, затрачиваемые на поиск данных.

Цели

В этом руководстве читатели узнают, что такое поиск на сайте, когда его следует использовать, как создать веб-приложение, реализующее функцию поиска с помощью CMS, и каковы его преимущества.

Что такое поиск на сайте?

Как следует из названия, поиск на сайте — это функция поиска на сайте. Он использует строку поиска, в которую пользователь вводит поисковый запрос. На основе запроса в строке поиска данные сайта фильтруются, чтобы предоставить информацию, соответствующую запросу.

Почему и когда мы это используем?

Поисковые системы, такие как Google, располагают огромным количеством информации. Чтобы предоставить релевантные результаты для того, что нужно пользователю, они используют строки поиска для сбора поискового запроса и отображения популярных и связанных с ним результатов. Эту функцию также приятно иметь в качестве качества для веб-приложений, чтобы обеспечить простоту использования для посетителей сайта.

Вот 5 преимуществ добавления функции поиска на сайте

  1. Сайты, созданные с функцией поиска на сайте, имеют более высокий коэффициент конверсии. Коэффициент конверсии — это процент пользователей, получивших желаемый результат. Это отношение общего числа посетителей сайта к числу тех, кто смог достичь желаемого результата. С помощью функции поиска пользователи могут быстро получить релевантные результаты и удовлетворить себя, посетив веб-приложение.

  2. Сайты с функцией поиска на сайте имеют лучший пользовательский опыт. Пользователи могут легко ориентироваться, искать и извлекать нужную информацию. Независимо от того, насколько хороши функции и информация, предлагаемые сайтом, если пользователи не могут найти их на сайте, это будет пустой тратой времени. Для повышения удобства пользования сайтом необходима функция создания поисковых запросов и просмотра соответствующих результатов поиска.

  3. Поиск на сайте снижает количество неудовлетворенных посетителей. Когда посетители заходят на ваши веб-страницы, они в основном хотят быстро найти нужную информацию. Если на вашем сайте плохо работает функция поиска, вы рискуете потерять посетителей сайта и получить разочарованных пользователей, которые с меньшей вероятностью вернутся на ваш сайт.

  4. Сайты электронной коммерции, представляющие различные категории, могут использовать функцию поиска на сайте для предоставления информации о товарах и услугах, схожих с поисковым запросом пользователя. Эти рекомендации могут предложить пользователям похожие продукты, которые могут их заинтересовать.

  5. Поиск на сайте может улучшить SEO сайта. Хорошая функциональность поиска и отличный пользовательский опыт обеспечивают релевантные результаты поиска. Когда ваш сайт занимает хорошие позиции в поисковых запросах посетителей, это улучшает SEO вашего сайта и повышает его рейтинг в поисковых системах.

Что такое Meilisearch?

Meilisearch — это поисковая система с открытым исходным кодом, которая может быть легко интегрирована в веб-приложения для работы с функциями поиска. Meilisearch Strapi Plugin — это поисковый плагин, который может быть подключен к Strapi CMS для фильтрации информации о магазине и предоставления релевантных/связанных результатов по поисковому запросу, введенному в поле поиска.

Почему вы должны использовать Meilisearch?

  • Его легко настроить: Meilisearch легко вписывается в ваше приложение. С помощью нескольких шагов эта функция поиска может быть интегрирована в ваше приложение.

  • Гибкость: Meilisearch легко обновляется, отражая изменения в источнике данных, например, когда добавляются новые данные или изменяется уже существующая информация.

  • Он быстрый и устойчивый к опечаткам: Meilisearch предлагает быстрые результаты поиска и имеет функцию учета ошибок, допущенных пользователями. Даже если пользователь допустил ошибку в поисковом запросе, он все равно получит релевантные результаты.

  • Безопасность данных: Данные, связанные с Meilisearch, надежно защищены и могут быть доступны только при наличии правильных учетных данных API.

Что такое Strapi CMS?

Strapi — это безголовая система управления контентом с открытым исходным кодом, разработанная с использованием Javascript-фреймворка Node.js. Strapi предоставляет пользователям возможности для хранения, манипулирования и управления контентом в рабочих процессах приложений. Она проста и удобна в использовании. Strapi предоставляет пользователям административную панель, где они могут контролировать и управлять своим контентом.

Использование Meilisearch в веб-приложении Movies в качестве примера использования

Настройка фронтенда и Strapi

Чтобы быстро продолжить этот учебник, вам нужно получить начальный код веб-приложения для фильмов. Фронтенд можно найти в репозитории GitHub. Вы также можете получить стартовый шаблон Strapi с некоторыми коллекциями фильмов из следующего репозитория.

Если вы запустите стартовый код front-end в терминале с помощью команды npm run dev, вы получите результат, подобный изображению ниже:

Стартовый код состоит из четырех компонентов: Movies.js, Nav.js, List.js и Card.js. Компонент Movies.js рендерит компоненты Nav и List. Компоненты Nav содержат строку поиска, которую мы свяжем с плагином meilisearch позже в этом руководстве. Компонент List будет возвращать данные из коллекций Strapi в виде карточек. Эти карточки будут содержать изображение, название фильма и жанр.

Подключение коллекции Strapi

Чтобы подключить приложение к коллекции Strapi CMS, нам нужно будет получить данные из Strapi, просмотреть их и вернуть карточки с соответствующими деталями. Но перед этим обратите внимание, что мы должны будем возвращать только результаты, соответствующие запросу в строке поиска, и возвращать всю коллекцию только в том случае, если поисковый ввод пуст. Для этого нам потребуется установить meilisearch и интегрировать функциональность поиска.

Установка Meilisearch

Чтобы использовать Meilisearch локально, мы загрузим и запустим его экземпляр. Его можно загрузить с сайта Meilisearch. Затем мы установим плагин Strapi-meilisearch в клонированное стартовое репо Strapi с помощью следующей команды CLI:

    npm install strapi-plugin-meilisearch
Войти в полноэкранный режим Выйти из полноэкранного режима

После этого мы запускаем npm run develop, чтобы пересобрать наше приложение Strapi с новым плагином meilisearch. Откройте URL-адрес localhost в браузере и войдите в систему. Вы будете направлены на приборную панель Strapi:

Нажмите на опцию meilisearch в левой навигационной панели и на вкладке «Настройки» введите URL-адрес экземпляра meilisearch.

Наконец, добавьте коллекцию фильмов в meilisearch в окне «Коллекции»:

Таким образом, если мы запустим наш экземпляр meilisearch, мы получим коллекции Strapi.

Получение данных из Meilisearch

Чтобы вернуть коллекцию Strapi в наше приложение, нам нужно установить meilisearch js с помощью следующей команды в CLI:

    npm install meilisearch
Войти в полноэкранный режим Выйти из полноэкранного режима

Далее мы добавим импорт для этой зависимости в Movies.js:

    import { React, useEffect, useState } from "react";
    import MeiliSearch from "meilisearch";

    const Movies = () => {
      const [collection, setCollection] = useState([]);
      useEffect(() => {
        const fetchData = async () => {
          const client = new MeiliSearch({
            host: 'http://127.0.0.1:7700',
          })
          const index = await client.getIndex('moviesapp');
          const movies = await index.search('*');
          setCollection(movies.hits);
        };
        fetchData();
      }, []);
    //....
Войти в полноэкранный режим Выход из полноэкранного режима

Приведенный выше код возвращает все фильмы из нашей Strapi CMS, полученные через экземпляр meilisearch. Чтобы отобразить наши Cards, мы передаем collection в качестве prop компоненту List, отображаем его и возвращаем данные:

<List collection={collection}/> 
Вход в полноэкранный режим Выйти из полноэкранного режима

Затем в List.js:

    // we pass the collection prop to the Cards component to render it
    const List = ({collection}) => {
      return (
        <div className="w-full flex justify-center">
          <div className=" w-5/6 px-6 pt-24 grid grid-cols-3 gap-2">
            <Cards collection={collection} />
          </div>
        </div>
      );
    };
Войти в полноэкранный режим Выйти из полноэкранного режима

Наконец, мы можем просмотреть коллекцию collection в Cards.js:

    const Cards = ({collection}) => {
      return (
        <>
          {collection && collection.map((movie) => (
            console.log(movie.image.url),
          <div className=" text-white" key={movie.id}>
            <Image
              className=" rounded-md"
              src={`http://localhost:1337${movie.image.url}`}
              height="300px"
              width="200px"
              alt="image here"
            />
            <h2 className=" font-semibold">{movie.moviename}</h2>
            <h3 className=" opacity-50">{movie.genre}</h3>
          </div>
          ))}
        </>
      );
    };
Войти в полноэкранный режим Выйти из полноэкранного режима

После этого, когда мы запустим наш код, мы получим результат, подобный изображенному ниже:

Интеграция поисковой функциональности в наше приложение

Нам нужно будет возвращать только результаты, связанные с поисковым запросом в поле ввода для функции поиска. Мы просто передадим входные данные поиска из компонента Nav в компонент Movies и добавим их в функцию fetchData.

В Movies.js мы создадим функцию, которая будет возвращать значение поля поиска:

    const [input, setInput] = useState("");
    // use effect block
    const pull_data =(dat)=>{
      setInput(dat)
    }
Войти в полноэкранный режим Выйти из полноэкранного режима

Затем мы передадим функцию pull_data компоненту Nav:

<Nav func={pull_data}/>
Войти в полноэкранный режим Выход из полноэкранного режима

В Nav.js мы передадим значение из поля ввода в этот реквизит:

    const Nav = ({func}) => {
      const [input, setInput] = useState("");
      func(input)
        const handleInputChange = (e) => {
            setInput(e.target.value);
          };
    //....
Войти в полноэкранный режим Выйти из полноэкранного режима

После этого останется добавить input в функцию fetchData в Movies.js:

     const index = await client.getIndex('moviesapp');
          const movies = await index.search(input);
          setCollection(movies.hits);
        };
        fetchData();
      }, [input]);
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь мы можем ввести поисковый запрос и получить только результаты, связанные с ключевыми словами поиска.

Заключение

Мы подошли к концу этого урока. В этом уроке мы узнали о поиске на сайте и его преимуществах. Мы также интегрировали функцию поиска в приложение для просмотра фильмов с помощью Meilisearch. С помощью функции Meilisearch мы можем искать в коллекции фильмов как по названию фильма, так и по жанру. Она также легко отражает изменения в коллекции Strapi, например, удаление или добавление новой записи.

Оцените статью
Procodings.ru
Добавить комментарий