テーマ仕様書
shop
お知らせページ
詳細

お知らせ詳細画面

お知らせ(ニュース)の詳細情報を表示する画面です。
お知らせ(ニュース)情報はショップ管理 > ニュース管理 (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であてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。