カラーミーショップはHTMLとCSSの編集ができ、オリジナルデザインのショップを構築することができるECサービスです。TetraThemesではレスポンシブに対応したデザインテンプレートを販売中!
このページではショップの営業日を表示するのに役立つカレンダーの使い方を紹介します。
カラーミーショップでカレンダーを使う方法
カレンダーを使うにはカラーミーショップのテンプレートプラス(もしくはレギュラープラン以上)の契約が必要です。
契約後、管理画面でカレンダーの設定を行い、HTML編集エリアにテンプレートコードを追加することで使用可能になります。
カレンダーで使えるカラーミータグ
カレンダーで使える独自タグは以下の2つだけ。カレンダーのテーブル出力は<{$calendar}>
だけなので設置も簡単。
タグ名 | 機能 |
---|---|
calendar | カレンダーの表示 |
calendar_memo | 注意書きの表示 |
カレンダーの使い方
カラーミーショップでカレンダーを表示するには設置したい場所に以下のコードを追加するだけ。コードは管理画面の営業日設定ページから取得できます。CSSスタイルも用意されているので、必要ならCSS編集エリアに貼り付けておきます。
<{if $calendar != ""}>
<div class="side_section side_section_cal">
<div class="side_cal">
<{$calendar}>
</div>
<{if $calendar_memo != ""}>
<div class="side_cal_memo">
<{$calendar_memo}>
</div>
<{/if}>
</div>
<{/if}>
実際にはタイトルを入れたり、枠で囲ったりすると思うのでこのような構造にすると便利です。
<!-- カレンダーが設定されていれば表示 -->
<{if $calendar != ""}>
<div class="calendar">
<h4 class="calendar-title">カレンダー</h4>
<div class="calendar-body">
<!-- カレンダーの表示 -->
<{$calendar}>
<!-- 注意書きがあれば表示 -->
<{if $calendar_memo != ""}>
<p><{$calendar_memo}></p>
<{/if}>
</div>
</div>
<{/if}>