Knowledge Base

Merchandising Cloud

Update Page Title To Include Search Query

Integration Steps

📘
Components:
components/search/Query/index.ts

In the following example, you can see how you can interact with page elements outside of Findify's components and modify your search results page title to include a search query.

You should add updateQuery function to components/search/Query.

JavaScript

const defaultTitle = document.title;const updateQuery = (query) => {  // display either the default title including queries on your search page or the default title only    const titleText = query && query.length > 0    ? `${defaultTitle} | ${query}`        : defaultTitle;  document.title = titleText;}

This function should be called after every query update. Therefore we have to put it inside useEffect.

JavaScript

/** * @module components /search/Query */ //default codeexport default memo(  ({ theme = styles }: { theme?: Record<string, string> }) => {    const { meta } = useQuery();    const translate = useTranslations();    const query = escape(meta.get('q') as string);        useEffect(() => updateQuery(query), [query])        return (      <Text        primary        uppercase        className={theme.root}        html={getContent(meta, translate, query)}      />    );  });

Finally, components/search/Query will look like.

JavaScript

/** * @module components /search/Query */import { useEffect } from "react";import { useQuery } from '@findify /react-connect';import styles from 'components/search/Query/styles.css';import escape from 'lodash/escape';import Text from 'components/Text';import useTranslations from 'helpers/useTranslations';import { memo } from 'react';const getContent = (meta, translate, query) => {  const hasFilters = !!meta.get('filters');  const total = meta.get('total');  if (!query && !hasFilters) {    return translate('search.noQuery');  }  if (hasFilters && !query) {    return translate('search.showingEmpty', total);  }  if (meta.get('corrected_q')) {    const text = translate('search.showing', total);    return `${text} "${escape(meta.get('corrected_q') as string)}". ${translate(      'search.zeroResultsFor'    )} "${query}".`;  }  if (meta.get('query_type') === 'or') {    const text = translate('search.showing', '0');    return `${text} "${query}". ${translate('search.partialMatch')}`;  }  const text = translate('search.showing', total);  return `${text} <b> "${query}"</b>.`;};const defaultTitle = document.title;const updateQuery = (query) => {  // display either the default title including queries on your search page or the default title only    const titleText = query && query.length > 0    ? `${defaultTitle} | ${query}`        : defaultTitle;  document.title = titleText;}export default memo(  ({ theme = styles }: { theme?: Record<string, string> }) => {    const { meta } = useQuery();    const translate = useTranslations();    const query = escape(meta.get('q') as string);        useEffect(() => {      updateQuery(query)    }, [query])        return (      <Text        primary        uppercase        className={theme.root}        html={getContent(meta, translate, query)}      />    );  });

MJS Version

This module has been optimized for MJS version 7.1.25