検索フォームに検索履歴を実装するチュートリアル

はじめに 検索履歴を出力するにあたり、本来は「検索キーワード」一覧のみで充分ですが、せっかくなのでサムネイルのように「ヒット数」と「検索時間帯」も一緒に出力させたいと思います。 基本的な仕組みは、ストア内検索を実行すると「検索キーワード」と「ヒット数」「検索時間帯」をローカルストレージに保存し、HTMLに動的出力させるというものです。 ローカルストレージには以下のJSON構造で情報が保存されます。 [ { "word": "検索キーワード1", "date": "検索時間帯1", "count": "ヒット数1" }, { "word": "検索キーワード2", "date": "検索時間帯2", "count": "ヒット数2" } ] このカスタマイズは、サジェスト検索が機能しない日本国内向けのショップ用に開発したものですので、すでにアプリでサジェスト機能などを実装されているテーマへは推奨しておりません。 また、掲載コードはShopify無料テーマ「Rise」ベースでの実装例となりますので、他テーマの場合やバージョンによって指定クラスやCSSを編集する必要があります。 アセットファイルを作成 Javascript 「新しいアセットを追加する」より「search-history.js」を作成し、以下のコードを追加してください。 document.addEventListener("DOMContentLoaded", () => { const config = { localStorageKey: `${location.hostname}-search_history`, maxEntries: 12, selectors: { form: "form.search", input: ".search__input", button: ".history-search-button", results: "[data-search-results]", }, };

initializeSearchHistory(config);

function initializeSearchHistory({ localStorageKey, maxEntries, selectors }) { const searchForms = document.querySelectorAll(selectors.form);

searchForms.forEach((form) => { const input = form.querySelector(selectors.input);

const historyContainer = createHistoryContainer(); form.appendChild(historyContainer);

form.addEventListener("submit", (event) => handleFormSubmit(event, input, form, localStorageKey, maxEntries) ); input.addEventListener("focus", () => toggleHistoryContainer(historyContainer, true) ); input.addEventListener("blur", () => toggleHistoryContainer(historyContainer, false) ); historyContainer.addEventListener("click", (event) => { const button = event.target.closest(selectors.button); if (button) handleHistoryClick(button, input, form); }); });

renderSearchResults(selectors.results, localStorageKey, maxEntries); }

function handleFormSubmit(event, input, form, localStorageKey, maxEntries) { event.preventDefault(); const word = input.value.trim(); if (!word) return;

const date = new Date().toISOString(); const history = getSearchHistory(localStorageKey); const updatedHistory = [ ...history.filter((entry) => entry.word !== word), { word, date }, ].slice(-maxEntries);

saveSearchHistory(localStorageKey, updatedHistory); form.submit(); }

function createHistoryContainer() { const container = document.createElement("div"); container.className = "history-list-container"; return container; }

function toggleHistoryContainer(container, isOpen) { container.classList.toggle("is-open", isOpen); if (isOpen) renderSearchHistory(container); }

function renderSearchHistory(container) { const history = getSearchHistory(config.localStorageKey).reverse(); container.innerHTML = history.length ? ` ${history .map( ({ word, date, count }) => ` ${word} (${count || 0}) ${formatElapsedTime(date)} ` ) .join("")} ` : ' 履歴はありません

'; }

function handleHistoryClick(button, input, form) { const word = button.dataset.word; if (word) { input.value = word; form.submit(); } }

function renderSearchResults(resultsSelector, localStorageKey, maxEntries) { const results = document.querySelector(resultsSelector); if (!results) return;

const count = parseInt(results.dataset.searchResultsCount, 10); const word = results.dataset.searchResultsWord; if (!word || isNaN(count)) return;

const date = new Date().toISOString(); const history = getSearchHistory(localStorageKey); const updatedHistory = [ ...history.filter((entry) => entry.word !== word), { word, date, count }, ].slice(-maxEntries);

saveSearchHistory(localStorageKey, updatedHistory); }

function getSearchHistory(localStorageKey) { try { return JSON.parse(localStorage.getItem(localStorageKey)) || []; } catch { return []; } }

function saveSearchHistory(localStorageKey, history) { localStorage.setItem(localStorageKey, JSON.stringify(history)); }

function formatElapsedTime(dateString) { const now = new Date(); const saved = new Date(dateString); const diff = Math.floor((now - saved) / 1000);

if (diff < 60) return "たった今"; const minutes = Math.floor(diff / 60); if (minutes < 60) return `${minutes}分前`; const hours = Math.floor(minutes / 60); if (hours < 24) return `${hours}時間前`; const days = Math.floor(hours / 24); if (days < 30) return `${days}日前`; const months = Math.floor(days / 30); if (months < 12) return `${months}ヶ月前`; const years = Math.floor(months / 12); return `${years}年前`; } }); 基本的な構造や仕組みはこちらで考えて書いていますが、最終的にChatGPTで整理したものを掲載しています。 長いので、編集の必要がある箇所だけご説明します。 2-11行目の「config」変数は、JS内で操作するHTMLクラスなどを定義しています。「localStorageKey」は、ローカルストレージに保存する際のローカルストレージキーです。「ドメイン-search_history」という構造なので、希望に合わせて編集して構いません。「maxEntries」は、ローカルストレージに保存する最大エントリー数です。最大値を設定しておかないと無限に保存されてブラウザに負荷がかかったり、出力に影響が出たりするので、設定しております。エントリー数に合わせて出力されますので、ご希望に合わせて数値を編集してください。また、ご利用テーマに合わせて「form」と「input」の値を編集してください。 69-84行目の「renderSearchHistory()」関数は、検索結果一覧の出力するを制御しています。 タグはなるべくそのままで、中身の構造は必要に応じて編集してください。 124-139行目の「formatElapsedTime()」関数は、検索実行時間帯のフォーマットをしています。 タグのdatetime属性には検索実行日時が保管されますが、出力テキストは「たった今」や「◯分前」などに変換されて出力されるようになっております。こちらも必要に応じて、テキスト部分を編集してください。 CSS 「新しいアセットを追加する」より「search-history.css」を作成し、以下のコードを追加してください。 form.search { position: relative; } .history-list-container { display: none; width: calc(100% + 0.2rem); position: absolute; top: calc(100% + 0.1rem); left: -0.1rem; border-width: var(--popup-border-width); border-style: solid; border-color: rgba(var(--color-foreground), var(--popup-border-opacity)); background-color: rgb(var(--color-background)); z-index: 3; border-bottom-right-radius: var(--popup-corner-radius); border-bottom-left-radius: var(--popup-corner-radius); box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity)); overflow-y: auto; -webkit-overflow-scrolling: touch; } .history-list-container:hover, .history-list-container.is-open { display: block; } .history-list { list-style: none; padding: 0; margin: 0; } .history-list li:not(:last-child) { border-bottom: 1px solid rgba(var(--color-foreground), 0.04); } .history-search-button { display: flex; justify-content: space-between; align-items: center; gap: 1em; width: 100%; background: none; color: rgb(var(--color-foreground)); text-align: left; appearance: none; padding: 1.3rem 2rem; border: none; border-radius: 0; cursor: pointer; transition: 0.2s linear; } .history-search-button:hover { background: rgba(var(--color-foreground), 0.04); } .history-search-button span { flex: 1; } .history-search-button time { font-size: 0.8em; opacity: 0.5; } .no-history { padding: 1.3rem 2rem; margin: 0; } [data-search-results] { display: none; } 検索履歴をスタイリングするスタイルシートです。お好みで編集してください。 また、RiseやDawn用のクラス及びvar()関数が記述されていますので、他テーマの場合はテーマ構造やデザインに合わせて編集してください。 セクションファイルを編集 検索結果ページを出力するファイルを探し、以下のHTMLコードを追記してください。 DawnやRiseの場合は「sections/main-search.liquid」が該当します。 検索結果のヒット数を取得する為だけの空タグで、CSSにて「display: none;」と非表示指定しています。基本的にどこへ配置してもかまいませんが、一番上か一番下などわかりやすい位置が良いでしょう。 テーマファイルを編集 「layout/theme.liquid」を開き、以下のコードを タグ内に追加してください。 {{ 'search-history.css' | asset_url | stylesheet_tag }} 設置場所は閉じタグの直前くらいを推奨します。 以上でテーマカスタマイズは完了です。 動作チェックを忘れずに行ってください。検証ポイントは以下の5項目になります。

検索結果がローカルストレージに保存されているか 検索フォームに正しく出力されているか 検索履歴から検索結果へ遷移するか モバイル環境でも正しく動作するか 検索フォームが2つ以上あるページでも正しく動作するか

他テーマの場合は構造が根本的に異なってるケースが多々ありますので、本カスタマイズに限らず必ず実装できるとは限りません。 もしもエラーが生じた場合は、上記タグをコメントアウトするか削除してください。

カートにアイテムが追加されました

検索フォームに検索履歴を実装するチュートリアル

検索フォームのフォーカス時に「検索履歴」を動的に出力させる。

2025年1月

2025年2月