お店の営業時間ぽい表示ができる Store Hours プラグイン #craftcms

たまたまプラグインストアをみてたらお店の営業時間っぽい表示ができる Store Hours というプラグインがあったので試してみた。

Store Hours
https://plugins.craftcms.com/s…

これを Craft CMS の開発元が作っているというのには何かしら理由があるんだろうな。

プラグインをインストール

まずプラグインのインストールをする。

composer require craftcms/store-hours

./craft plugin/install store-hours

これでプラグインの追加とインストールが完了する。

フィールドの確認

プラグインがインストールされたのでフィールドの確認をしてみる。

このような感じでフィールドの設定ができる。
テーブルフィールドの設定みたいな感じで、必要な時間帯とかを追加できる感じ。

時間帯にあわせてデータをいれてみる。

サンプル表示

サンプルテンプレートでいれたデータを表示する。

<dl>
    {% for day in testentry.testhours %}
        <dt>{{ day.name }}</dt>
        <dd>
            {% if day.isBlank %}
                Closed
            {% else %}
                {{ day.open|time('short') }} - {{ day.close|time('short') }}
            {% endif %}
        </dd>
    {% endfor %}
</dl>

時間の入力がないところは Closed になっている。

2つの時間帯がある場合の表示の調整して出してみる。

<dl>
    {% for day in testentry.testhours %}
        <dt>{{ day.name }}</dt>
        <dd>
            {% if day.isBlank %}
                Closed
            {% else %}
                {{ day.open|time('short') }} - {{ day.close|time('short') }}
                {% if day.open2 %}<br />
                {{ day.open2|time('short') }} - {{ day.close2|time('short') }}
                {% endif %}
            {% endif %}
        </dd>
    {% endfor %}
</dl>

24h 表示をしてみる。
取りあえず開始時間と終了時間が同じ場合を 24h 表示としてみる。

<dl>
    {% for day in testentry.testhours %}
        <dt>{{ day.name }}</dt>
        <dd>
            {% if day.isBlank %}
                Closed
            {% else %}
                {% if day.open == day.close %} 24hour {% else %}{{ day.open|time('short') }} - {{ day.close|time('short') }}{% endif %}
                {% if day.open2 %}<br />
                {{ day.open2|time('short') }} - {{ day.close2|time('short') }}
                {% endif %}
            {% endif %}
        </dd>
    {% endfor %}
</dl>

テーブルフィールドで近しいものは作れるけれども、あらかじめ固定行数として曜日ごとの行を決めておけるのは便利かもしれない。