ブックマークレット配布

[スマホ向けサイト] レストラン予約変更 再検索(一般および宿泊特典両対応)

スマホ向けサイト専用
All-in-One対応

機能概要

スマホ向けサイトでの予約済みレストランの予約変更(人数および時間)時に、空き表示画面上で再検索を行うことができるようになります
※一般枠の予約および宿泊予約特典(ホテル枠)での予約のどちらでも利用可能です

動作イメージ


※ブックマークレットの登録・利用方法が分からない場合は、基本的な使い方のページを参考にしてください

ブックマークレット文字列

以下の文字列でブックマークレットを登録し、後述の「使い方」に従い、宿泊予約特典でのレストラン空き検索ページで使用してください。

ダミー登録用の空ページのリンク
スマホの場合
iPhone Safari / Chrome および Android Chrome など
ブックマークレット文字列
PCブラウザの場合
以下のリンクボタンを、ブラウザのブックマークバーへドラッグ＆ドロップして登録してください

使い方

注意 (30分制限あり)

予約変更ページでの再検索は、変更手続きページに入ってから30分間の時間制限があり、30分を超えていると空席があっても変更手続きを進めることができず、エラーとなります(下記画像)。
30分を超える場合は、一度変更せずに予約詳細まで戻り、再度「予約内容を変更する」からやりなおしてください。
この時、待合室の待ち時間がある場合は待合室に戻されますのでご注意ください。

エラーメッセージ
  1. スマホ向けサイトのレストラン予約の変更ページを表示します

    2. スマホ向けサイトのメニューから「予約・購入履歴」を開き、「予約・購入履歴一覧」ページで目的の予約の「詳細 / 変更・キャンセル」をタップ→「予約内容を変更する」ボタンをタップします


  2. レストラン予約の変更ページ(変更情報入力ページ)が表示されたらこのブックマークレットを呼び出します
    (特にメッセージは表示されません)

  3. 必要に応じて人数などを変更した後、「ご利用時間帯」をタップし、時間帯別の空き検索結果ページ（「時間の選択」ページ）を表示します

    4. このページで、各時間帯（朝食・昼食・夕食）のタイトルをタップすると、その時間帯を再検索し結果を表示します

ソースコード

ブックマークレット化前のソースコードです
ご自身で表示等カスタマイズされたい方はご自由にご利用ください
※ブックマークレット化の方法については記載していません

JavaScriptコード
コピー
(function () {
  const markingElemId = '__sp_restaurant_update_reload';
  if (document.getElementById(markingElemId)) {
    alert('すでに実行されています');
    return;
  }

  // timeTypeは新規予約ページのため存在していたら対象外
  if (!document.getElementById('timeContent') || !document.getElementById('mealDivName') || document.getElementById('timeType')) {
    // 対象外ページ
    alert('このページでは実行できません');
    return;
  }

  const markingElem = document.createElement('div');
  markingElem.id = markingElemId;
  markingElem.style.display = 'none';
  document.body.appendChild(markingElem);

  const getTextNode = ($target) => {
    let result = '';
    $($target)
      .contents()
      .each(function () {
        if (this.nodeType === 3 && /\S/.test(this.data)) {
          result += this.nodeValue;
        }
      });
    return result;
  };

  let opened_headers = [];
  const save_accordion_status = () => {
    opened_headers = [];
    $('#timeContent section.js-accordion header.open h1').each((i, el) => {
      const headerText = getTextNode(el);
      opened_headers.push(headerText);
    });
  };

  // 時間帯別ヘッダをタップしたときに対象時間帯のみをリロード
  const timeRanges = document.querySelectorAll('#timeContent section h1#mealDivName');
  timeRanges.forEach((el_timeRange) => {
    el_timeRange.addEventListener('click', () => {
      save_accordion_status();

      // 変更ページの場合は時間帯1つのため
      timeGet.refresh();
    });
    el_timeRange.style.cursor = 'pointer';
  });

  // アコーディオンの状態を復元
  const orig_setupAccordion = setupAccordion;
  setupAccordion = function () {
    //
    $('#timeContent section.js-accordion header').each((idx, el) => {
      const headerCaption = $(el).find('h1');
      if (opened_headers.includes(getTextNode(headerCaption))) {
        $(el).addClass('open');
      }
    });
    orig_setupAccordion.apply(this, arguments);
  };

  // 「時間の選択」から戻るを押したときに、検索済みフラグをリセット
  // すでに時間を選択している場合を除く
  document.querySelectorAll('#timeContent > header a.cancel, #timeContentMain > ul.listBtn01 a.back').forEach((el) => {
    el.addEventListener('click', () => {
      // 戻るときはアコーディオン状態をリセットする
      opened_headers = [];
      if (!document.querySelector('#timeContent table tr.selected')) {
        timeGet.isSearch = false;
      }
    });
  });
})();