本文へスキップ
ドキュメント

公式資料

Jamgyeol テーマ(宿泊予約プラットフォーム)

宿泊予約プラットフォームのための Zittme 公式テーマ Jamgyeol(jamgyeol)の詳細マニュアルです。宿泊(lodging)モジュールと組み合わせて使うよう設計されており、地域・日付・人数で宿を探す検索がトップページの中心です。料金・空室カレンダー、宿泊・デイユースの切り替え、クーポン、レビュー、非会員の予約照会まで、予約の流れ全体をアプリのようにまとめました。コマースモジュールを一緒に使うと、宿泊券・グッズを販売するショップも同じデザインで開けます。ダークモードとレスポンシブに標準対応し、標準フォントは Pretendard です。

この文書の画面は実際のデモサイトをそのままキャプチャしたものです。デモは jamgyeol-demo.zitt.me で直接ご覧いただけます。

Jamgyeol テーマのトップページ

構成

構成要素場所役割
レイアウトthemes/jamgyeol/layouts/jamgyeolサイトの骨格・ヘッダー検索・下部タブバー・フッター
宿泊スキンthemes/jamgyeol/modules/lodgingトップページ・宿一覧・宿詳細・予約・結果・マイ予約・クーポン・ポイント
コマーススキンthemes/jamgyeol/modules/commerceショップホーム・一覧・詳細・カート・注文・マイショッピング
掲示板スキンthemes/jamgyeol/modules/boardリスト型・カード型・ウェブマガジン型・FAQ型・イベント型
会員スキンthemes/jamgyeol/modules/memberログイン・会員登録・マイページ(今後の予約・クーポン・ポイント)
メッセージ・通知センター・システムメッセージスキンthemes/jamgyeol/modules/{communication, ncenterlite, message}メッセージボックス・通知一覧・システム案内画面
予約・zittme Pay・お問い合わせ・知識Q&Aスキンthemes/jamgyeol/modules/{reservation, zittme_pay, contact, kin}該当モジュールがインストールされたサイトでのみ適用

すべての構成要素が同じデザイントークン(紫のポイントカラー・フォント・角丸・余白)を共有します。ポイントカラーはレイアウト設定の一か所で変更すれば全画面に一緒に反映され、ダークモードでは文字のコントラストが保たれるよう専用トークンが自動で計算されます。

インストールと適用

  1. テーマファイルを themes/jamgyeol に置きます。(ストアからのインストールまたは圧縮ファイルの展開)
  2. 管理者 > デザイン設定で Jamgyeol テーマを選んで適用します。レイアウトとモジュールスキンが一度に適用されます。
  3. 宿泊モジュールで宿泊用の mid(例:stay)を作成し、サイトのトップページ に指定すると、トップページに検索・人気の宿・地域・最安値・デイユース・イベント・お知らせが 1 画面に表示されます。
  4. イベント掲示板(event)とお知らせ(notice)を作成すると、トップページの下部に自動でつながります。
  5. コマースモジュールがインストールされていれば、ショップメニューとカートボタンがヘッダーに一緒に表示されます。
  6. 推奨環境:Zittme 1.0.2 以上、宿泊 1.0.0 以上、コマース 1.1.1 以上。事前決済を使うには zittme Pay が必要で、zittme Pay がない場合は現地決済のみ表示されます。

    あわせて推奨するサイト設定

    • レスポンシブへの切り替え:このテーマはレスポンシブなので、モバイル専用ビューをオフにすることをおすすめします。オンのままだと、モバイルでは別のモバイルレイアウトが代わりに表示されます。
    • XE 互換ボタンスタイルをオフにする:コア共通 CSS にある XE 時代の .btn スタイルがスキンのボタンを上書きすることがあります。config/config.user.inc.php に次の 1 行を入れ、files/cache/assets 内のファイルを空にすると取り除けます。
    define('DISABLE_XE_BTN_STYLES', true);

    ヘッダー

    ヘッダーは上から ユーティリティバー(ログイン・会員登録・言語・ダークモード)→ ロゴ・統合検索・非会員の予約照会・お気に入り・最近見た宿 → メニューバー の 3 段です。

    • 統合検索:地域や宿の名前で、すぐに宿一覧を開きます。
    • お気に入り・最近見た宿:訪問者のブラウザに保存されるため、ログインしなくても動作し、数字のバッジで件数を表示します。
    • メニューバー:サイトマップの上部メニューが表示され、右側にはイベント・お知らせのような補助メニューが付きます。

    宿を探す

    検索結果

    • 検索ボックスで 宿泊 / デイユース を切り替え、地域・チェックイン・チェックアウト・人数を選びます。デイユースは利用日 1 日だけを選びます。
    • タイプのチップ(ホテル・モーテル・ペンション・ゲストハウス・リゾート)と人気地域のチップで絞り込み、おすすめ順・価格の安い順・価格の高い順・評価順・レビューの多い順で並べ替えます。
    • 日付を選ぶと、その日付に空室がある宿だけを、1 泊の最安値を基準に表示します。

    宿の詳細

    宿の詳細

    • 写真は枚数に合わせて配置が変わります(1 枚・2〜3 枚・4 枚以上)。押すと大きく表示してめくって見られます。
    • 客室ごとに基準・最大人数、残りの客室数、1 泊の料金が表示され、予約する からそのまま予約に進めます。
    • 右側のカレンダーで客室を選ぶと、日付ごとの料金と空室・満室が表示されます。1 回押すとチェックイン、もう一度押すとチェックアウトが決まります。カレンダーの月の表記と曜日はサイトの言語に従います。
    • この宿で使えるクーポンコード、キャンセル規定、レビューと施設からの返信、所在地が続きます。

    ダークモード

    予約と結果

    予約画面

    予約画面は、予約者情報 → クーポン・ポイント → 決済方法 → キャンセル規定への同意の順で、右側の概要で決済金額がすぐに再計算されます。非会員は 照会用パスワード を決めておくと、非会員の予約照会 で予約番号と一緒に再度確認できます。

    予約結果

    結果画面は、予約の状態によって表示が変わります。

    状態表示
    予約確定チェックマーク、フロントで見せる予約番号、キャンセルボタンと今キャンセルした場合の返金額
    決済待ち時計マーク、決済期限の案内、zittme Pay の注文が有効なら決済を続けるボタン
    決済期限切れ・キャンセル・ノーショーX マークと案内文
    利用完了レビュー投稿フォーム

    クーポン・ポイント・マイ予約

    • クーポン・特典:開催中のクーポンをチケットの形で表示し、会員は受け取ってマイクーポンに入れられます。
    • マイ予約:会員は今後の予約と過去の予約を分けて確認し、非会員は予約番号 + 照会用パスワードで照会します。
    • マイページ:会員スキンのマイページに、今後の予約 3 件とクーポン・ポイントの概要が一緒に表示されます。

    掲示板スキン

    掲示板スキン設定の 一覧の形式 で、掲示板ごとに見た目を選びます。

    形式用途
    リスト型お知らせなどの一般的な掲示板
    ウェブマガジン型サムネイル + 要約のあるコミュニティ
    カード型サムネイル中心のギャラリー
    FAQ型質問を押すと回答が展開されるアコーディオン
    イベント型期間・開催中・予定・終了のバッジと D-day が付くイベントカード

    イベント掲示板

    イベント型は、掲示板の拡張変数のうち入力名が event_start・event_end の日付欄(開始日・終了日)で状態を計算します。ウェブマガジン型・カード型・FAQ型は、掲示板の一覧設定に 要約 カラムがあると要約と回答が表示されます。

    モバイル

    モバイルのトップページ

    • 下部に ホーム・検索・マイ予約・マイページ のタブバーが固定されます。
    • ヘッダーは、ロゴ・非会員の予約照会・お気に入り・最近見た宿・メニューボタンの 1 行と検索ボックスに縮まります。
    • メニューのドロワーには、アカウントボタン・メニュー一覧・ダークモード・言語ツールが入ります。

    多言語

    • テーマの文言は、韓国語・英語・日本語を含む 12 言語の言語ファイルを備えています。
    • 宿の名前・客室の名前・メニューの名前・レイアウト設定のロゴテキスト・フッターの文言には、管理者 > 多言語で作成した $user_lang->code を入れることができ、訪問者の言語に合わせて切り替わって表示されます。
    • 日付・金額の表記は、宿泊モジュールの言語ファイル(lodging_date_fmt、lodging_money)に従います。

    フッター

    レイアウト設定 > フッター タブで構成します。項目を空欄にすると、そのブロックは表示されません。

    項目説明
    サイト紹介文ロゴの下の短い紹介
    カスタマーセンターの電話番号 / 営業時間カスタマーセンターブロック。営業時間は 1 行ずつ表示
    お問い合わせメールメールでのお問い合わせリンク
    事業者・連絡先情報改行した各行が 1 項目として表示
    Instagram・Facebook・YouTube・ブログのアドレス入力したものだけアイコンで表示
    下部の案内文通信販売仲介者の告知のような免責・案内文
    著作権表記最下部の表記

    レイアウト設定の全項目

    基本

    項目標準値説明
    ロゴ画像 / ダークモード用ロゴなし空欄ならロゴテキストを使用
    ロゴテキストなし空欄ならサイトタイトル
    ポイントカラー紫ボタン・リンク・アクティブ表示・スキンの強調色をまとめて決定
    本文の最大幅1180px1060 / 1180 / 1320
    メニューバーの幅・色本文幅・ダーク全幅、ポイントカラー・ライトも選択可能
    モバイルのダークモード・言語ボタンの位置メニューのドロワー内ヘッダー・フッターに移動可能
    カラーモードデバイスの設定に合わせる自動 / 常にライト / 常にダーク

    ファーストビュー

    ビジュアルスライダーの表示条件・自動切り替えの間隔・スライド一覧(繰り返しフィールド)。宿泊モジュールがトップページのときは、宿泊スキンが宿の写真でファーストビューを直接描画します。

    メイン構成

    ショップモジュールのアドレス(mid)・カテゴリアイコン・メインページセクション(繰り返しフィールド)。トップページを宿泊ではなくショップとして使うときに使用します。

    本文・サイド

    統合検索の使用有無・(旧互換)サイドのログインボックス。

    フッター

    上の「フッター」の表を参照してください。