飲食店検索のソースを表示

__NOINDEX__
<templatestyles src="検索結果カード/styles.css" />
{{パンくずリスト
 | 1=飲食店検索}}
== 検索条件 ==
<!-- 検索ボックス -->
{{検索UI/飲食店}}
<html>
<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('navText').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 |
  {{#cargo_query:
      tables=飲食店情報
      |fields=COUNT(*)
      |where=(
          (飲食店情報.店名 LIKE CONCAT('%','{{#urlget:searchText}}','%') 
          OR 飲食店情報.住所 LIKE CONCAT('%','{{#urlget:searchText}}','%') 
          OR 飲食店情報.ジャンル LIKE CONCAT('%','{{#urlget:searchText}}','%'))
          {{#if: {{#urlget:genre}} | AND 飲食店情報.ジャンル LIKE CONCAT ('%','{{#urlget:genre}}','%') }}
          {{#if: {{#urlget:station}} | AND 飲食店情報.最寄り = '{{#urlget:station}}' }}
          {{#if: {{#urlget:lanch-dinner}} |
                    {{#ifeq: {{#urlget:lanch-dinner}} | lanch | {{#if: {{#urlget:budget_min}} | AND 飲食店情報.予算昼上限 >= {{#urlget:budget_min}} }} {{#if: {{#urlget:budget_max}} | AND 飲食店情報.予算昼下限 < {{#urlget:budget_max}} }}}}
                    {{#ifeq: {{#urlget:lanch-dinner}} | dinner | {{#if: {{#urlget:budget_min}} | AND 飲食店情報.予算夜上限 >= {{#urlget:budget_min}} }} {{#if: {{#urlget:budget_max}} | AND 飲食店情報.予算夜下限 < {{#urlget:budget_max}} }} }} }}
          {{#ifeq: {{#urlget:smoking}} | non | AND 飲食店情報.禁煙喫煙 LIKE CONCAT('%禁煙%') }}
          {{#ifeq: {{#urlget:smoking}} | allow | AND 飲食店情報.禁煙喫煙 LIKE CONCAT('%喫煙%') AND 飲食店情報.禁煙喫煙 LIKE CONCAT('%分煙%') }}
          {{#if: {{#urlget:tabehodai}} | AND 飲食店情報.食べ放題 = 1 }}
          {{#if: {{#urlget:nomihodai}} | AND 飲食店情報.飲み放題 = 1 }}
          {{#if: {{#urlget:takeout}} | AND 飲食店情報.テイクアウト = 1 }}
          {{#if: {{#urlget:parking}} | AND 飲食店情報.駐車場 = 1 }}
          {{#if: {{#urlget:privateroom}} | AND 飲食店情報.個室 = 1 }}
          {{#if: {{#urlget:wifi}} | AND 飲食店情報.WiFi = 'あり' }}
          {{#if: {{#urlget:barrierfree}} | AND 飲食店情報.バリアフリー = 1 }}
          {{#if: {{#urlget:kids}} | AND 飲食店情報.お子様連れ = 1 }}
          {{#if: {{#urlget:reserve}} | AND 飲食店情報.貸切 = 1 }}
          {{#if: {{#urlget:reservable}} | AND 飲食店情報.予約 = 1 }}
      )
    }}
}}
{{#vardefine:page|{{#urlget:page|1}}}}
{{#vardefine:limit|30}}
{{#vardefine:offset|
 {{#expr: ({{#var:page}} - 1) * {{#var:limit}} }}
}}
{{#vardefine:from|
  {{#expr:
    ({{#var:page}} - 1) * {{#var:limit}} + 1
  }}
}}
<h1 style="font-size: 1.2em;">
<strong>{{#if: {{#urlget:station}} | {{#urlget:station}} |川西市}}</strong>の<strong>{{#if: {{#urlget:genre}} | {{#urlget:genre}} |グルメ}}</strong></h1><strong style="float: right;" id="count" data-total="{{#var:hitCount}}" data-limit="{{#var:limit}}">{{#var:hitCount}} 件の結果があります（{{#var:from}} 件目～）
</strong>
== 検索結果 ==
<!-- 検索実行 -->
  {{#cargo_query:
      tables=飲食店情報
      |fields=飲食店情報._pageName,飲食店情報.店名,飲食店情報.画像,飲食店情報.ジャンル,飲食店情報.郵便番号,飲食店情報.住所,飲食店情報.最寄り,飲食店情報.営業時間月,飲食店情報.定休日,飲食店情報.電話番号,飲食店情報.予算昼下限,飲食店情報.予算昼上限,飲食店情報.予算夜下限,飲食店情報.予算夜上限,飲食店情報.ストリートビューURL,飲食店情報.座標
      |where=(
          (飲食店情報.店名 LIKE CONCAT('%','{{#urlget:searchText}}','%') 
          OR 飲食店情報.住所 LIKE CONCAT('%','{{#urlget:searchText}}','%') 
          OR 飲食店情報.ジャンル LIKE CONCAT('%','{{#urlget:searchText}}','%'))
          {{#if: {{#urlget:genre}} | AND 飲食店情報.ジャンル LIKE CONCAT ('%','{{#urlget:genre}}','%') }}
          {{#if: {{#urlget:station}} | AND 飲食店情報.最寄り = '{{#urlget:station}}' }}
          {{#if: {{#urlget:lanch-dinner}} |
                    {{#ifeq: {{#urlget:lanch-dinner}} | lanch | {{#if: {{#urlget:budget_min}} | AND 飲食店情報.予算昼上限 >= {{#urlget:budget_min}} }} {{#if: {{#urlget:budget_max}} | AND 飲食店情報.予算昼下限 < {{#urlget:budget_max}} }}}}
                    {{#ifeq: {{#urlget:lanch-dinner}} | dinner | {{#if: {{#urlget:budget_min}} | AND 飲食店情報.予算夜上限 >= {{#urlget:budget_min}} }} {{#if: {{#urlget:budget_max}} | AND 飲食店情報.予算夜下限 < {{#urlget:budget_max}} }} }} }}
          {{#ifeq: {{#urlget:smoking}} | non | AND 飲食店情報.禁煙喫煙 LIKE CONCAT('%禁煙%') }}
          {{#ifeq: {{#urlget:smoking}} | allow | AND 飲食店情報.禁煙喫煙 LIKE CONCAT('%喫煙%') AND 飲食店情報.禁煙喫煙 LIKE CONCAT('%分煙%') }}
          {{#if: {{#urlget:tabehodai}} | AND 飲食店情報.食べ放題 = 1 }}
          {{#if: {{#urlget:nomihodai}} | AND 飲食店情報.飲み放題 = 1 }}
          {{#if: {{#urlget:takeout}} | AND 飲食店情報.テイクアウト = 1 }}
          {{#if: {{#urlget:parking}} | AND 飲食店情報.駐車場 = 1 }}
          {{#if: {{#urlget:privateroom}} | AND 飲食店情報.個室 = 1 }}
          {{#if: {{#urlget:wifi}} | AND 飲食店情報.WiFi = 'あり' }}
          {{#if: {{#urlget:barrierfree}} | AND 飲食店情報.バリアフリー = 1 }}
          {{#if: {{#urlget:kids}} | AND 飲食店情報.お子様連れ = 1 }}
          {{#if: {{#urlget:reserve}} | AND 飲食店情報.貸切 = 1 }}
          {{#if: {{#urlget:reservable}} | AND 飲食店情報.予約 = 1 }}
      )
      |format=template
      |template=検索結果カード
      |named args=yes
      |default=該当する店舗はありません。
      |limit={{#var:limit}}
      |offset={{#var:offset}}
      |order by=score DESC
      |more results text=
    }}
<html>
<div class="pagination">
<a data-role="first-page" href="#">＜＜</a>
<a data-role="prev-page" href="#">＜</a>
<div class="page-numbers" data-role="page-numbers"></div>
<a data-role="next-page" href="#">＞</a>
<a data-role="last-page"  href="#">＞＞</a>
</div>

<style>
.pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 24px 0;
  font-size: 14px;
}

.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  min-width: 40px;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid;
  transition: background-color 0.15s ease,
              color 0.15s ease,
              box-shadow 0.15s ease;
}

.page-numbers {
  display: flex;
  gap: 6px;
}

.page-numbers a {
  min-width: 36px;
  padding: 8px 0;
}

/* ライト・通常 */
.pagination a {
  background: #f9fafb;
  color: #1f2937;
  border-color: #d1d5db;
}

.pagination a:hover {
  background: #eef2f7;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* 非活性 */
.pagination a.disabled {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
  pointer-events: none;
  box-shadow: none;
}

/* 現在ページ（数字） */
.pagination .page-numbers a.current {
  background: #1f2937;
  color: #fff;
  border-color: #1f2937;
  font-weight: 600;
  pointer-events: none;
}

/* ダーク・通常 */
.skin-theme-clientpref-night .pagination a {
  background: #374151;
  color: #f9fafb;
  border-color: #4b5563;
}

.skin-theme-clientpref-night .pagination a:hover {
  background: #4b5563;
}

/* ダーク・非活性 */
.skin-theme-clientpref-night .pagination a.disabled {
  background: #1f2937;
  color: #6b7280;
  border-color: #374151;
}

/* ダーク・現在ページ */
.skin-theme-clientpref-night .pagination .page-numbers a.current {
  background: #f9fafb;
  color: #1f2937;
  border-color: #f9fafb;
}

</style>
</html>

__目次非表示__