|
|
| 5行目: |
5行目: |
| <!-- 検索ボックス --> | | <!-- 検索ボックス --> |
| {{検索UI/飲食店}} | | {{検索UI/飲食店}} |
| <html>
| | {{飲食店検索/script.js}} |
| <script>
| |
| document.getElementById('searchForm').addEventListener('submit', function (e) {
| |
| const searchText = document.getElementById('searchText');
| |
| const genre = document.getElementById('genre');
| |
| const station = document.getElementById('station');
| |
| const budget_min = document.getElementById('budget_min');
| |
| const budget_max = document.getElementById('budget_max');
| |
| | |
| if (searchText.value === '') {
| |
| searchText.removeAttribute('name'); // 空のとき name属性を削除
| |
| }
| |
| if (genre.value === '') {
| |
| genre.removeAttribute('name'); // 空のとき name属性を削除
| |
| }
| |
| if (station.value === '') {
| |
| station.removeAttribute('name'); // 空のとき name属性を削除
| |
| }
| |
| if (budget_min.value === '') {
| |
| budget_min.removeAttribute('name'); // 空のとき name属性を削除
| |
| }
| |
| if (budget_max.value === '') {
| |
| budget_max.removeAttribute('name'); // 空のとき name属性を削除
| |
| }
| |
| });
| |
| | |
| document.addEventListener('DOMContentLoaded', function () {
| |
| const params = new URLSearchParams(window.location.search);
| |
| | |
| params.forEach((value, key) => {
| |
| // input, select, checkbox, radio 全対応
| |
| const el = document.querySelector(`[name="${key}"]`);
| |
| if (!el) return;
| |
| | |
| // checkbox / radio (name[] の対応含む)
| |
| if (el.type === "checkbox" || el.type === "radio") {
| |
| document.querySelectorAll(`[name="${key}"]`).forEach(input => {
| |
| if (input.value === value) {
| |
| input.checked = true;
| |
| }
| |
| });
| |
| } else {
| |
| // text / select など
| |
| el.value = value;
| |
| }
| |
| });
| |
| | |
| const clearBtn = document.querySelector('.clear-btn');
| |
| const form = document.getElementById('searchForm');
| |
| | |
| clearBtn.addEventListener('click', function () {
| |
| | |
| form.reset();
| |
| });
| |
| | |
| // URLパラメータ取得
| |
| var area = params.get("station");
| |
| var category = params.get("genre");
| |
|
| |
| var reservable = params.get("reservable");
| |
| var smoking = params.get("smoking");
| |
| var tabehodai = params.get("tabehodai");
| |
| var nomihodai = params.get("nomihodai");
| |
| var takeout = params.get("takeout");
| |
| var parking = params.get("parking");
| |
| var kids = params.get("kids");
| |
| var reserve = params.get("reserve");
| |
| var count = document.getElementById("count");
| |
| count = count.dataset.total.toString();
| |
| | |
| // タイトル生成
| |
| let title = "川西市でおすすめのグルメ情報をご紹介！ | 川西図鑑";
| |
| // パンくず用テキスト生成
| |
| let nav = "";
| |
| | |
| if (area) {
| |
| if (category) {
| |
| title = `${area}でおすすめのおいしい${category}をご紹介！ | 川西図鑑`;
| |
| nav = ` › ${area} × ${category}`;
| |
| } else {
| |
| title = `${area}でおすすめのおいしいグルメをご紹介！ | 川西図鑑`;
| |
| nav = ` › ${area}`;
| |
| }
| |
| } else if (category) {
| |
| title = `川西市でおすすめのおいしい${category}をご紹介！ | 川西図鑑`;
| |
| nav = ` › ${category}`;
| |
| }
| |
| | |
| // タイトル更新
| |
| document.title = title;
| |
| // パンくず更新
| |
| document.getElementById('navText2').textContent = nav;
| |
| | |
| if (area) {
| |
| area = "の" + area;
| |
| } else {
| |
| area = "";
| |
| }
| |
| | |
| if (category) {
| |
| category = "の" + category;
| |
| } else {
| |
| category = "";
| |
| }
| |
| | |
| if (count) {
| |
| count = count + "件";
| |
| } else {
| |
| count = "";
| |
| }
| |
| | |
| if (reservable) {
| |
| reservable = "予約可能";
| |
| } else {
| |
| reservable = "";
| |
| }
| |
| if (smoking == "non" ) {
| |
| smoking = "禁煙";
| |
| } else {
| |
| smoking = "";
| |
| }
| |
| if (tabehodai) {
| |
| tabehodai = "食べ放題あり";
| |
| } else {
| |
| tabehodai = "";
| |
| }
| |
| if (nomihodai) {
| |
| nomihodai = "飲み放題あり";
| |
| } else {
| |
| nomihodai = "";
| |
| }
| |
| if (takeout) {
| |
| takeout = "テイクアウトあり";
| |
| } else {
| |
| takeout = "";
| |
| }
| |
| if (parking) {
| |
| parking = "駐車場あり";
| |
| } else {
| |
| parking = "";
| |
| }
| |
| if (kids) {
| |
| kids = "お子様連れOK";
| |
| } else {
| |
| kids = "";
| |
| }
| |
| if (reserve) {
| |
| reserve = "貸切可能";
| |
| } else {
| |
| reserve = "";
| |
| }
| |
| | |
| const keys = [
| |
| reservable,
| |
| smoking,
| |
| tabehodai,
| |
| nomihodai,
| |
| takeout,
| |
| parking,
| |
| kids,
| |
| reserve,
| |
| ];
| |
| | |
| const valid = keys.filter(v => {
| |
| if (!v) return false;
| |
| if (v.trim() === "") return false;
| |
| return true;
| |
| });
| |
| | |
| // 上から3つだけ取得
| |
| const top3 = valid.slice(0, 3);
| |
| | |
| // description に使う文字列を作成
| |
| let conditionText = "";
| |
| if (top3.length > 0) {
| |
| conditionText = top3.join("・");
| |
| }
| |
| | |
| if (conditionText) {
| |
| conditionText = `${conditionText}のお店を厳選して表示しています。`;
| |
| } else {
| |
| conditionText = ``;
| |
| }
| |
| | |
| // description生成
| |
| let desc = `「川西図鑑」では、兵庫県川西市${area}で人気${category}のお店を ${count}掲載中。${conditionText}営業時間、アクセス、写真、地図などの詳細情報をまとめています。ランチやディナー、テイクアウトなど条件で絞り込みができ、地元でおすすめのお店が見つかります。`;
| |
| | |
| let meta = document.querySelector("meta[name='description']");
| |
| if (!meta) {
| |
| meta = document.createElement("meta");
| |
| meta.name = "description";
| |
| document.head.appendChild(meta);
| |
| }
| |
| | |
| meta.content = desc;
| |
| // 現在のURL取得
| |
| let url = window.location.href;
| |
| // ページネーション
| |
| const fullurl = new URL(location.href);
| |
| const page = parseInt(fullurl.searchParams.get('page') || '1', 10);
| |
| | |
| // 最終ページ制御
| |
| const countMeta = document.getElementById('count');
| |
| if (!countMeta) return;
| |
| | |
| const total = parseInt(countMeta.dataset.total, 10);
| |
| const limit = parseInt(countMeta.dataset.limit, 10);
| |
| | |
| if (isNaN(total) || isNaN(limit) || limit <= 0) return;
| |
| | |
| const lastPage = Math.ceil(total / limit);
| |
| | |
| if (lastPage <= 1) {
| |
| const pagination = document.querySelector('.pagination');
| |
| if (pagination) pagination.style.display = 'none';
| |
| return;
| |
| }
| |
| | |
| if (page > lastPage) {
| |
| fullurl.searchParams.set('page', lastPage);
| |
| location.replace(fullurl.toString());
| |
| }
| |
| | |
| if (page < 1) {
| |
| fullurl.searchParams.set('page', 1);
| |
| location.replace(fullurl.toString());
| |
| }
| |
| | |
| function makeLink(targetPage) {
| |
| fullurl.searchParams.set('page', targetPage);
| |
| return fullurl.toString();
| |
| }
| |
| | |
| // 各ボタン
| |
| const first = document.querySelector('[data-role="first-page"]');
| |
| const prev = document.querySelector('[data-role="prev-page"]');
| |
| const next = document.querySelector('[data-role="next-page"]');
| |
| const last = document.querySelector('[data-role="last-page"]');
| |
| | |
| if (page <= 1) {
| |
| first.classList.add('disabled');
| |
| prev.classList.add('disabled');
| |
| } else {
| |
| first.href = makeLink(1);
| |
| prev.href = makeLink(page - 1);
| |
| }
| |
| | |
| if (page >= lastPage) {
| |
| next.classList.add('disabled');
| |
| last.classList.add('disabled');
| |
| } else {
| |
| next.href = makeLink(page + 1);
| |
| last.href = makeLink(lastPage);
| |
| }
| |
| | |
| // 数字ボタン
| |
| const pageNumbers = document.querySelector('[data-role="page-numbers"]');
| |
| if (!pageNumbers) return;
| |
| | |
| const start = Math.max(1, page - 2);
| |
| const end = Math.min(lastPage, page + 2);
| |
| | |
| for (let i = start; i <= end; i++) {
| |
| const link = document.createElement('a');
| |
| link.textContent = i;
| |
| | |
| const newUrl = new URL(url);
| |
| newUrl.searchParams.set('page', i);
| |
| link.href = newUrl.toString();
| |
| | |
| if (i === page) {
| |
| link.classList.add('current');
| |
| }
| |
| | |
| pageNumbers.appendChild(link);
| |
| }
| |
| });//# sourceURL=foobar.js
| |
| </script>
| |
| </html>
| |
| {{#vardefine:hitCount | | | {{#vardefine:hitCount | |
| {{#cargo_query: | | {{#cargo_query: |
ホーム › 飲食店検索
検索条件
川西市のグルメ
<strong style="float: right;" id="count" data-total="
エラー: テーブル飲食店情報が見つかりません。
" data-limit="30">
エラー: テーブル飲食店情報が見つかりません。
件の結果があります（1 件目～）
検索結果
エラー: テーブル飲食店情報が見つかりません。
