|
|
| 1行目: |
1行目: |
| if (document.querySelector('#searchForm')) {
| |
| 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属性を削除
| |
| }
| |
| });
| |
|
| |
| 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 count = document.getElementById("count");
| |
|
| |
| // タイトル生成
| |
| let title = "川西市でおすすめのグルメ情報をご紹介！ | 川西図鑑";
| |
|
| |
| if (area) {
| |
| if (category) {
| |
| title = `${area}でおすすめのおいしい${category}をご紹介！ | 川西図鑑`;
| |
| } else {
| |
| title = `${area}でおすすめのおいしいグルメをご紹介！ | 川西図鑑`;
| |
| }
| |
| } else if (category) {
| |
| title = `川西市でおすすめのおいしい${category}をご紹介！ | 川西図鑑`;
| |
| }
| |
|
| |
| // タイトル更新
| |
| document.title = title;
| |
|
| |
| if (area) {
| |
| area = "の" + area;
| |
| } else {
| |
| area = "";
| |
| }
| |
|
| |
| if (category) {
| |
| category = "の" + category;
| |
| } else {
| |
| category = "";
| |
| }
| |
|
| |
| if (count) {
| |
| count = count.textContent;
| |
| } else {
| |
| count = "";
| |
| }
| |
|
| |
| // description生成
| |
| let desc = `「川西図鑑」では、兵庫県川西市${area}で人気${category}のお店を ${count}掲載中。営業時間、アクセス、写真、地図などの詳細情報をまとめています。ランチやディナー、テイクアウトなど条件で絞り込みができ、地元でおすすめのお店が見つかります。`;
| |
|
| |
| let meta = document.querySelector("meta[name='description']");
| |
| if (!meta) {
| |
| meta = document.createElement("meta");
| |
| meta.name = "description";
| |
| document.head.appendChild(meta);
| |
| }
| |
|
| |
| meta.content = desc;
| |
|
| |
| // 既存の canonical があれば削除
| |
| $('link[rel="canonical"]').remove();
| |
|
| |
| // 現在のURL取得
| |
| let url = window.location.href;
| |
|
| |
| // 余計なパラメータ（例：&limit=50 とか）を除外したい場合
| |
| const removeParams = ['limit', 'offset'];
| |
| let cleanUrl = new URL(url);
| |
|
| |
| removeParams.forEach(param => cleanUrl.searchParams.delete(param));
| |
|
| |
| // canonical タグ作成
| |
| let canonical = document.createElement('link');
| |
| canonical.setAttribute("rel", "canonical");
| |
| canonical.setAttribute("href", cleanUrl.toString());
| |
|
| |
| // head に追加
| |
| document.head.appendChild(canonical);
| |
| }
| |
