お知らせ詳細画面
お知らせ(ニュース)の詳細情報を表示する画面です。
お知らせ(ニュース)情報はショップ管理 > ニュース管理 (opens in a new tab)で登録・編集します。
ニュース内容にHTMLタグやCSSや画像を設定できるため、自由度が高いページを作成できます。
ショップのパス
ドメイン/shop/information/スラッグ
テーマ管理のファイルパス
ec_force/shop/informations/show.html.liquid
ec_force/shop/informations/show.html+smartphone.liquid
JS タグ
{{ 'shop/info' | javascript_include_tag }}
必要なコンポーネント
※任意とあるもの以外はシステム上必要なコンポーネントとなりますので、必ず使用するようにしてください。
{{ 'shop/info' | javascript_include_tag }}
<!-- タイトル -->
{{ information.title }}
<!-- 公開日 -->
{{ information.published_at | date: '%Y.%m.%d' }}
<!-- サムネイル -->
{% if information.thumbnail.url %}
<img src="{{ information.thumbnail.url }}" alt="">
{% endif %}
<!-- 内容 (PC, show.html.liqudの場合) -->
{{ information.parsed_content }}
<!-- 内容 (SP, show.html+smartphone.liqudの場合) -->
{{ information.parsed_content_mobile }}
<!-- カテゴリー画面へのリンク -->
<a href="/shop/information_categories/{{ information.information_category.slug }}"></a>
<!-- お知らせ一覧画面へのリンク -->
<a href="/shop/information"></a>
<!-- 前のお知らせへのリンク -->
{% if last_information %}
<a href="/shop/information/{{ last_information.slug }}">{{ last_information.title }}</a>
{% endif %}
<!-- 次のお知らせへのリンク -->
{% if next_information %}
<a href="/shop/information/{{ next_information.slug }}">{{ next_information.title }}</a>
{% endif %}
画面イメージ
※こちらは、上記で紹介しているコンポーネントのコードにデフォルトデザインをCSSであてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。